React + Redux + Firebaseで開発を始めました。まだまだ勉強中のところもありますが、自身の力でアプリを作成できるようになってきたので、ここまでどのように学んできたか書いておきます。主に他言語の経験者でwebの経験があると参考になると思います。
習得チャート
英語
2018年9月現在、日本語の情報が少ないので、英語で技術的内容が読める程度にはなっている必要があります。習得方法は愚直に辞書を引きながら読むしかないと思います。
ES6(ES2015)
ES6は、JavaScript(正確には、ECMAScript)のバージョン6のことです。2015年に標準化されました。
JavaScriptの概要をざっと復習したい場合には、こちらを読んでおくとよいです。
昔のJavascriptしか知らない場合には、ES6でいくつか記法が追加されているので、下記を読んでおくとよいです。
- アロー関数 - JavaScript | MDN
- クラス - JavaScript | MDN
- let - JavaScript | MDN
- const - JavaScript | MDN
- スプレッド構文 - JavaScript | MDN
- デフォルト引数 - JavaScript | MDN
- 分割代入 - JavaScript | MDN
- テンプレート文字列 - JavaScript | MDN
- オブジェクトリテラルのプロパティ/メソッドのいろんな書き方(ES6版)
React
ReactはJavaScriptでhtmlを構築するためのライブラリです。ユーザのアクションによって状態を書き換えて再描画するための便利な機能が提供されています。
Reactの習得には、公式tutorialを実践しました。公式は英語ですが、有志の方が日本語訳を公開しています。チュートリアルではcodepenを使用するので、面倒な環境設定が不要です。
babel
babelはES6でやJSXで書かれたスクリプトをES5に変換するのに使用します。
日本語だとここのページががわかりやすいです。
実際の設定はcreate-react-appで自動でやってくれるので、自分で設定できなくてもとりあえずはOKです。
Webpack
WebpackはJavaScriptやcss, 画像を一つのファイルにまとめてくれるツールです。
日本語だとここのページがが分かりやすかったです。
実際の設定はcreate-react-appで自動でやってくれるので、自分で設定できなくてもとりあえずはOKです。
ESLint
静的コード解析ツールです。
下記ページを読みました。
create-react-appを利用すれば自動で設定されているので、自分で設定できなくてもとりあえずはOKです。
create-react-app
Reactの環境を作成するツールです。
習得には、はじめに日本語ページをざっと読み、次に公式ページに目を通し、 最後に日本語ページの内容を一通りローカル環境で実行すると理解しやすいと思います。
- 公式ページ(英語) create-react-app/ at next · facebook/create-react-app · GitHub
- 日本語(Qiita) Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する
Redux
状態管理を行うJavaScriptのライブラリです。Reactと直接関係のないライブラリですが、Reactと組み合わせることでコードが書きやすくなります。
まず、公式のドキュメントを読むのが一番理解できました。IntroductionとBasicsを読見ました。公式は英語ですが、有志の方が日本語訳を公開しています。
Basicsの最後の2章がReactと一緒に使うための説明とサンプルコードです。
connect()
が分からないと思ったので、このプログ記事を書きました。
Reduxの習得にはサンプルコードを書き写しました。create-react-appを使用してローカル環境を構築して、サンプルコードを書き写し、実行しました。
$ yarn create react-app todo-sample $ cd todo-sample # redux と tract-redux をインストールする $ yarn add redux react-redux # サーバを起動する $ yarn start # http://localhost:3000/ でサーバが立ち上がる # サンプルコードを書き写す
Firabase
Firebaseはデータベース、ストレージ、ホスティング、アナリティクスなどのサービスの集まりです。
習得にはFirebase Tutorialが一番理解できました。Optionalになっているものもやるとよいです。 2018年9月現在、Notificationは、webは対象外になっているため、行うことができませんでした。
- Firebase tutorial : Firebase Web Codelab
おわりに
以上でReact+Redux+Firebaseでアプリ開発を行うための準備ができました。勉強するために書籍を購入することも検討しましたが、あまり評判のよい書籍が見当たらず、web(主に公式ドキュメント)のみで勉強しました。各ライブラリともチュートリアルが充実していたので、書籍がなくても問題ありませんでした。
ドキュメントを読んでいる間は何も手を動かせないので、早く何かを作りたくてウズウズしました。しかし、忍耐強く読んで知識を固めておくことが重要だと感じています。
今回、英語の必要性をひしひしと感じました。まだまだ検索しても日本語のドキュメントが表示される割合は少ないです。英語はとにかく慣れるしかないですね。
★次の記事
★目次