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

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

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

f:id:mbaasblog:20181105173409j:plain

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

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

はじめに

f:id:mbaasblog:20181107140500j:plain

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

今回は、「Monacaとニフクラ mobile backendで学ぶ はじめてのプログラミング~クラウド連携アプリ開発編~」を実践してみての感想や解説をさせて頂こうと思います。
大変申し訳ございませんが、この教本は今現在一般販売していないため、一部の教育機関で使用されている方しか詳細はわからないかもしれません;
(弊社で開催しているもくもく会に参加していただければ教本使い放題ですけどね♡) なるべくこのブログを読んだだけでわかるような表現にしますので、最後まで目を通していただければと思います。

「一般発売はまだなの?」というありがたい質問をいただくことが幾度となくございますが(本当にありがとうございます!) 現在一般公開日程の目処が立っておりません…(本当にごめんなさい><)目処が立ちましたらすぐにmBaaSのWebサイトで発表しますので随時チェックしてくださいね!

つまづきポイント

f:id:mbaasblog:20181018163713j:plain

データストアとファイルストアのちがい

mBaaSユーザーの方はご存知かと思いますが、一応簡単にご説明します。

ファイルストア:画像やテキスト音楽など様々な種類のファイルを保存することができます。
データストア:アプリで利用する各種データを保存することができます。

【3章】コーディングはあっているはずなのに反映されない場合

サンプルプログラムで、 「絶対に合っているのにデータが保存されていない!」という現象に陥ったら、 まずはプレビューを再読み込みしてみてください。

【プレビュー方法】
・開発環境下画面のプレビューを右クリック
・「再読み込み」をクリック

【デバッガー画面を開く方法】
・キーボードの「F12」を押す

【4章】まとめ

実習)numberが20以上で、colorがblackであるデータをcreateDateの昇順でソートしてすべて取得してみましょう
という問題です。
教本を使用していない方もどのようなコードになるか考えてみてください!

教本を使用している方はP47の実習解けましたか? この問題が4章のまとめになっているので解説を載せておきます!

図1: f:id:mbaasblog:20181029211839p:plain

※.then()が複数ある場合は、1つ目の.then()→2つ目の.then()→3つ目の.then()という風に進んでいきます。 もし.then()のどこかで処理がうまくできない場合は、.catch()に飛んで、エラーを出すという順番になっています。
例)1つ目の.then()でエラー→.catch()に飛ぶ(2つ目以降の.then()には飛ばない)

【5章】JSON.stringify()とは

JSON.stringify() メソッドはある JavaScript の値を JSON 文字列に変換します。 置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりすることができます。 (JSON.stringify() - JavaScript | MDN) 構文は以下の通りです。

JSON.stringify(value[])

第1引数(value)に文字列化するオブジェクトを指定します。Object型だけでなく、{{Boolean型}}、{{Number型}}、nullでも良いそうです。

この教本でよく

//保存成功時<br>
console.log("保存成功"+JSON.stringify(results)<br>
//保存失敗時<br>
console.log("保存失敗"+JSON.stringify(error)<br>

とコードを書きますが、これは、
保存成功時の原因を文字列に変換して表示/
失敗時の原因を文字列に変換して表示

という意味になります。

functionの省略

皆さん、5章のサンプルプログラムを実行して不明に思った点はないですか?

図2: f:id:mbaasblog:20181026175306p:plain

私は上記のように思いました。

同じように感じた方もいらっしゃるのではないでしょうか?
調べても良くわからない。 ということで今回もmBaaSチームの先輩方に教えていただきました★

図3: f:id:mbaasblog:20181026181002p:plain

さすが先輩!!わかりやすい!!(笑)
省略されちゃってたんですね!
functionを別で定義しなくても、今回しか使わないから一緒にしちゃおう★ということが可能だそうです。
今回は、3.thenの中で宣言した関数はthenの中でしか使わないので、名前を省略しちゃう バージョンでした。

【基礎編まとめ】教本で迷いやすいポイント

ここだけ教本を実践した方向けの記事になってしまいますが、 【虫食い:その1】でコーディングした方が間違いかな?と勘違いしてしまうかもしれないポイントが2つあるように思えたので 紹介させていただきます。

図4: f:id:mbaasblog:20181101165310p:plain

図4が模範回答です。

図5: f:id:mbaasblog:20181101180119p:plain

図5が私が考えたコードです。
保存成功と表示される処理の際に、 JSON.stringify(results)処理を模範解答は書いていませんよね。
「今までは JSON.stringify()あったのに・・・なぜなのだ・・・何が違うんだ・・・」と思い悩みましたが、
成功時の要因を表示しても表示しなくてもいいというだけなので書いても書かなくても大丈夫なんだそうです。

それともう一点、保存成功時のfunctionが

模範解答:function(object)
私の回答:function(results)

ですが、教本には取得成功時:resultsとなっているので、resultsでOKです!(もちろんobjectも予約語ではないのでOKです)

成長日記

f:id:mbaasblog:20181114174711j:plain

今回勉強を終えて感じたことは2点あります。

1点目は、気付いたら成長しているということです。
最初見たときは「無理、意味わかんない~」と思っていても、実際に手を動かしてみると没頭してしまいました。
没頭しなくても、手を動かして、 悩んで考えて、解決して練習して…を繰り返すことでいつの間にか自然とコーディングできている!ということが多々あります。
なので、悩む=伸びしろなんだと思いながら焦らずに沢山悩むことが良いのかな~と思いました。

2点目は、分からない箇所をそのままにすべきでないということです。
なんとなくで進めることはできますが、応用に生かせないだけでなく、なんとなくわかる箇所が増えていったときに 全てがいやになります。(笑)
解説を見てもわかるようなわからないような…でもできないままだ…もういやだ(ということが何回かあった)
と、ならないように分からない箇所はその場で調べて
余裕があれば参考書などに載っている例題を何個か解いてみるといいかもしれません。

今回は、わからない箇所を調べる為に、教本と一緒に使うと良いとおすすめいただいた本を2冊ご紹介させていただきます。

初めてのJavaScript
難しいかと思いきや、めちゃくちゃわかりやすい。
分からない箇所や、わかるけど中々定着しない箇所は、この本を読むと理解が深まります。 とてもおすすめ★ f:id:mbaasblog:20181108155805g:plain
よくわかるJavaScriptの教科書
おすすめのエディタソフトやwebブラウザなどを紹介してくれ、準備の段階から手順書(画像付き)として書かれているので最初の時点でくじけることはないです! JavaScriptとjQueryの他、Ajaxも取り上げています。 最初から最後まで画像を用いて解説が載っているのでわかりやすいと感じました。
ただ、いきなり簡略化されていたりもするので戸惑うこともあるかもしれないです; f:id:mbaasblog:20181108155817j:plain

先輩おすすめの本

上記の2冊も先輩がおすすめしてくれた技術書ですが 今回、アプリ開発をするにあたり会社の先輩方がおすすめの本を貸してくださいました。

SEの先輩や技術に詳しい先輩方からのおすすめなので是非とも参考にしてみてください!

リーダブルコード
きれいなコードを書くためのテクニックが沢山載っています。
この本を持って社内を歩いたら、SEの方が沢山話しかけてくださいました。(笑) そういうアイテムにも成り得ます。 f:id:mbaasblog:20181109185553g:plainTeam Geak
社内で今大注目されている本です!
Team Geakは技術書ではないので読みやすいと思います。 f:id:mbaasblog:20181109185305g:plain

以上4冊をご紹介させていただきましたが、どれも有名なのでご存知の方もいらっしゃったかもしれません。 ご存じない方は是非調べて読んでみていただきたいです。 これから勉強を進めていく中で、今回のように私のおすすめだけでなく、
社内の先輩方のおすすめも掲載させていただこうと思っていますので、楽しみにしていてくださいね!

一緒に勉強しませんか?

f:id:mbaasblog:20181101092037j:plain

毎月29日「もくもく会」を行っております!

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

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

ncmb.connpass.com

まとめ

f:id:mbaasblog:20181018170052j:plain

今回教本すべてについて書けなかったので次回も「Monacaとニフクラ mobile backendで学ぶ はじめてのプログラミング~クラウド連携アプリ開発編~」を実践してみての感想や解説をさせて頂こうと思います。
最後まで読んでいただきありがとうございます!

ではまた!

f:id:mbaasblog:20181005111552p:plain

伊藤みなみ

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