yucatio@システムエンジニア

趣味で作ったものいろいろ

React + Redux + Firebase でアプリを作るための前提知識と勉強の仕方

React + Redux + Firebase

React + Redux + Firebaseで開発を始めました。まだまだ勉強中のところもありますが、自身の力でアプリを作成できるようになってきたので、ここまでどのように学んできたか書いておきます。主に他言語の経験者でwebの経験があると参考になると思います。

習得チャート

f:id:yucatio:20180923165728p:plain

英語

2018年9月現在、日本語の情報が少ないので、英語で技術的内容が読める程度にはなっている必要があります。習得方法は愚直に辞書を引きながら読むしかないと思います。


ES6(ES2015)

ES6は、JavaScript(正確には、ECMAScript)のバージョン6のことです。2015年に標準化されました。

JavaScriptの概要をざっと復習したい場合には、こちらを読んでおくとよいです。

昔のJavascriptしか知らない場合には、ES6でいくつか記法が追加されているので、下記を読んでおくとよいです。

React

ReactはJavaScriptでhtmlを構築するためのライブラリです。ユーザのアクションによって状態を書き換えて再描画するための便利な機能が提供されています。

Reactの習得には、公式tutorialを実践しました。公式は英語ですが、有志の方が日本語訳を公開しています。チュートリアルではcodepenを使用するので、面倒な環境設定が不要です。

reactjs.org

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の環境を作成するツールです。

習得には、はじめに日本語ページをざっと読み、次に公式ページに目を通し、 最後に日本語ページの内容を一通りローカル環境で実行すると理解しやすいと思います。

Redux

状態管理を行うJavaScriptのライブラリです。Reactと直接関係のないライブラリですが、Reactと組み合わせることでコードが書きやすくなります。

まず、公式のドキュメントを読むのが一番理解できました。IntroductionとBasicsを読見ました。公式は英語ですが、有志の方が日本語訳を公開しています。

Basicsの最後の2章がReactと一緒に使うための説明とサンプルコードです。

connect()が分からないと思ったので、このプログ記事を書きました。

yucatio.hatenablog.com

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は対象外になっているため、行うことができませんでした。

おわりに

以上でReact+Redux+Firebaseでアプリ開発を行うための準備ができました。勉強するために書籍を購入することも検討しましたが、あまり評判のよい書籍が見当たらず、web(主に公式ドキュメント)のみで勉強しました。各ライブラリともチュートリアルが充実していたので、書籍がなくても問題ありませんでした。

ドキュメントを読んでいる間は何も手を動かせないので、早く何かを作りたくてウズウズしました。しかし、忍耐強く読んで知識を固めておくことが重要だと感じています。

今回、英語の必要性をひしひしと感じました。まだまだ検索しても日本語のドキュメントが表示される割合は少ないです。英語はとにかく慣れるしかないですね。

★次の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com