この記事の目的
スマホアプリ開発を学ぶためにudemyという学習動画サイト
「React Native で iOS / Android アプリ開発をゼロから始めよう！」を受講しました。
私は実際に、動画を見ながら一通りハンズオンでやってみました
そこで得たReact Native関連のノウハウや、今後の自分の課題をまとめていきます。
間違った認識や課題に対するアドバイスなどありましたら、
お気軽にコメントいただけると嬉しいです
（udemyサンプル画面）
まとめ
udemyの特徴
-
講師が間違いを犯しながらも解決方法を説明しながら進むのでOJT感覚で学べる（←凄いメリット）
- 業務で関わらない関連技術を体系的に学べる（メリット）
- 動画をダウンロードして通勤時間に気軽に見れる（メリット）
- ハンズオンでやると時間がかかる（デメリット）
- セールをよく開催している（メリット？）
React Nativeの特徴
- リロード、デバッグのサイクルが短い（早い）
- component/state/propsの概念をまず知ると理解が進む
- componentの初期開発は時間かかるけど再利用することで効率UPしていけそう（メリット）
- 基本的なコンポーネントは既に用意されていてドキュメントも充実している
- 機能制限ありだがexpoというフレームワークを使うと開発効率がよさそう
- エラーログを読んでも関係ない箇所が原因ということもある（タイポとか...）
使用した技術
設計フェーズ
- Sketch： デザイナーがよく使っているイメージ
モック作成フェーズ
- Html, CSS
実装フェーズ
- Git, Github
- ESLint （参考サイトESLint 最初の一歩 @mysticatea）
- React Native
- Expo
- firebase
- Auth
- Cloud Firestore
学習して気づいたこと
常に気づいたことを書き留めておけばよかった...
今、思い出しながらこの記事を書いていますが、
やりながらQiitaに気づきをメモしておけばよかったです。
自分の学びを記録として残すことで考えが整理されますし、
新鮮な気持ちで書いたほうが、他の方に教えることになった場合に、
ポイントをわかりやすくお伝えできるかなと思いました。
開発マシンはメモリ8GBでは足りません
家のmacはメモリ8GBでしたが、エミュレーターを起動するたけで15分以上待ちました。
その間に動画も見ようとするとPCがフリーズしたので、もう家ではハンズオンやめようと思いました。
また、実際に仕事でアプリ開発することになったら、開発マシンはケチりたくないなと思いました。
私の職場では開発者が所望したスペックのマシンを提供してくれるので、大変恵まれていると思います
まずは家でも職場でも学習できる環境を作る
つまり、ソースはgithubで管理するということですね。
（これはudemyの講座に沿ってやればやってくことになります。）
私は先程述べたマシンスペックの問題もあり、「家では動画見る」「職場では実装する」 としてたのですが、
結局、職場で実装するときにも再度同じ動画を見ることになり非効率でした。
なので、遅いながらも家でもハンズオンを続けました。
小まめにデバッグする
ESLintを入れてもエラーが発生しないということではありません。
私は動画を見ながら一気にコーディングし、まとめて動作確認しようとしましたが、
真っ赤なエラー画面が表示されてしまいました... 
私はエラーログを見てググりましたが、原因をすぐに特定できませんでした。
React Nativeのメリットの一つでもある、
リロードの速さを活かして小まめにデバッグすることは良いことです。
正しく動いているかconsole.logを仕込んで
意図した制御ができていることを確認しながら進めるのが地道ですが
私にとっては一番の近道でした。
ドキュメントが充実しています
例えば、ハイライトのボタンを作成したい場合、以下のようなドキュメントがあります。
デザインだけで言えば、React Nativeはコンポーネント化された外部モジュールを読み込み、htmlの要素名に指定してあげるだけで反映されるので凄く簡単に実装できる印象でした。
モジュールの仕組み
exportでモジュールにしたらimportで読み込みます。
imortドキュメント
具体例
import React from 'react';
import { Button } from 'react-native'; // {}囲みは一部の機能のみ使用することを意味する
class MyButton extends React.Component {
render() {
return (
<Button title="送信" color="red" />
);
}
}
export default MyButton; // これでモジュール化できて外部ファイルからimportできる
import React from 'react';
import MyButton from './MyButton'; // importして使えるようにする
class MyScreen extends React.Component {
render() {
return (
<MyButton />
);
}
}
export default MyScreen;
（「送信」ボタンが表示されます。）
その他便利なライブラリ
- react-navigation： 画面遷移で使用
- FlatList: 大量データの読み込み負荷を軽減してくれる
今後の課題
- expoでできること/できないことを把握して今後のアプリ開発の判断材料にする←記事書きました
- Authを使ったユーザ管理
- mBaaSとしてfirebaseを使うときに必要なサービスを調べる
- 型安全に書きたい（TypeScriptとFlowの比較検討）
- Jestで単体テストを書けるようになりたい
- NoSqlの設計方法
- ビジネスロジック書くためのCloud Functionsの実装方法
さいごに
効率よく学習できない自分にとってはudemyは良い学習サイトでした。
実務では触らない技術も講師に教えてもらいながら進められるのでオススメです