ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

第2回:プログラミング入門~初心者の私が始めるアプリ開発~

f:id:mbaasblog:20181017132830j:plain

プログラミングを始めようとしている方、教える立場の方、プログラミング大好きな方……皆様のお役に立つ情報をご紹介するとともに、プログラミング初心者の筆者が3か月でアプリ開発をマスターする過程を綴るブログです。(前回から3か月間随時更新予定!)

成長を見守ってください!そしてこのブログを見て「頑張ってみようかな」と思っていただければ幸いです。

はじめに

こんにちは。mobile backend企画担当の伊藤です。

前回、「プログラミングの勉強はじめます!」と宣言いたしましたが、実際に「Monacaで学ぶはじめてのプログラミング」の勉強が終了しましたので、2度目のブログを更新させていただきます!

今回の記事には、私がつまづいたポイントやレベル別に教本の使い方を提案させていただきましたので、Monacaで学ぶはじめてのプログラミング」をこれから勉強される方のお役に立てれば良いなぁと思っております。

f:id:mbaasblog:20181009141933p:plain

学習を進めるうえでのアドバイス

f:id:mbaasblog:20181017152630j:plain

自分が今何を指示しているのか理解する

実際に、学習を始めてみてわかったのは、この教本、とても分かりやすいです!
サンプルプログラムを見てそのまま書けばアプリが出来てしまいます。 だからこそ、自分が今何のコードを書いているのか理解すると同時に、身に着けながら進めていく必要があると感じました。

自分の理解度によって教本の使い方を変える

初めてプログラミングを始めるという方は、JavaScriptの参考書を別で買ってみてもいいかもしれません。
この教本では、使うプログラムのことがメインで書かれているので、関連したプログラムや知識などを勉強したい際はJavaScript専用の参考書などに目を通してから教本を用いて実際にアプリを作るという手順を試していただきたいです。
少しだけプログラミングをかじったことがあるという方は、サンプルコードを見ずにプログラムを作ってみていただきたいです。

つまづきポイント

f:id:mbaasblog:20181018163713j:plain

プロジェクトのインポート

これ正直分かるまでめちゃくちゃ時間かかりました(笑)
章の表紙に書いてあるプロジェクトのインポートという箇所をちゃんと見なきゃいけないんですよね。(当たり前)
プロジェクトが違うのでダッシュボードに戻らないといけないのですが私は同じプロジェクト内でインポートを探していました!
皆さん章の表紙ちゃんと見てください!(笑)

f:id:mbaasblog:20181017162615p:plain

インポート

インポート方法「ZIPファイル」を選択

入力したURLからダウンロードしたファイルを選択 これで完了です。

DOM (8章)

DOMの説明を見てもいまいちピンとこなかったので調べてみました

DOMとは「Document Object Model」の略だ。
直訳すると、「ドキュメントを物として扱うモデル」になる。HTMLやXMLを扱うための仕組みだ。 主に以下のような特徴をもっている。
・ツリー構造とも呼ばれる階層構造を取る
・それぞれノードという言葉で説明される
・WEBページとJavaScriptなどのプログラミング言語とを繋ぐ (JavaScript初心者でもすぐわかる!DOMとは何か?)。

わからない。私にはわからない。
そもそもsrcとhrefの違いって何?onloadもよくわからないしgetElementById?もう疑問が止まりませんでした。
もう自力で理解することに限界を感じたので、同じmBaaSチームの先輩方にお聞きしました。 (前回かっこつけて「プログラミングは孤独な戦いだ」とか言っていたのに情けない・・・笑)

①DOMを私にわかるように説明してください!

「ページを書き換えるときに用いるものだよ」

さすが先輩!シンプルでとてもわかりやすい!!つまりDOMとはページを書き換えるものだという認識で良いみたいです。

②srcとhrefの違いって何ですか?

「 src= ページに埋め込む情報の指定
 href= ページに関連する情報の指定   」

srcはページを構成する一部という認識で、hrefは関連する別のものという認識でよいのだと思います。

③onloadってどういう指示ですか?

ブラウザがページの読み込み完了時に何らかの処理を行いたい場合に用いられる指示だよ

f:id:mbaasblog:20181018134928p:plain 今回の場合は、読み込みが完了した際に f:id:mbaasblog:20181018134938p:plain functionを実行しますという意味です。

達成度や所感

f:id:mbaasblog:20181018163945j:plain

達成度は、と言いますと・・・100%です!

初心者の私でも今回教本に載っていたサンプルプログラムは全て実装することが出来ました。 1章からいきなりプログラムを書いて結果が見えるというスピーディーな成長を感じられました。
手を動かして、結果が目で見てわかるというのは嬉しいポイントですね。

コンマなのかスペースを空けるのか、慣れると自然と覚えるので何度も練習してみるのが良いと感じました。

一緒に勉強しませんか?

f:id:mbaasblog:20181018170018j:plain

毎月29日「もくもく会」を行うことが決定しました!

「もくもく会」とは名前の通り、みんなで集まってもくもくと作業をする会です!もちろん質問をしたり発表をしたり親睦を深めたりもします。
私や今回質問に答えてくださった先輩方もいます!

29日は「ニフクラ」の日と覚えてくださいね☆ ぜひ一緒に勉強しましょう~

ncmb.connpass.com

まとめ

f:id:mbaasblog:20181018170052j:plain

私は他の複数の参考書を用いて今回の教本を進めさせていただきましたが、知識だけではなく体験して覚えるというところでとても良い勉強になりました。
人によって「つまづきポイント」は違うと思いますが、今回私が挙げた「つまづきポイント」が誰かの役に立てば幸いです。

つまづいた箇所が伸びしろです!あきらめずに頑張りましょう! 周りに聞ける人がいなければもくもく会に参加すればよいのです!(笑)

次回は「Monacaとニフクラmobile backendで学ぶ はじめてのプログラミング~クラウド連携アプリ開発編~」を用いて、 Monacaとスマートフォンアプリ用のクラウドであるmBaaSとを組み合わせて開発する勉強をし、ブログを更新したいと思います!

ではまた!

f:id:mbaasblog:20181005111552p:plain

伊藤みなみ

mobile backend企画担当。2018年4月、富士通クラウドテクノロジーズに新卒で入社。大学は文系でプログラミングは全くの未経験ですが、日々勉強しております!