React + Redux を使用したモダンフロントエンド開発

昨今、ウェブ制作の環境は 10 年前とは大きく変わりました。特に JavaScript の変化が大きく、ちょっとしたアニメーションを実装するための存在だった JavaScript は、今やフロントエンドの主役として、インタラクティブな UI を提供するための中心的な役割を果たしています。

具体的には本講義で取り上げる React 等の JavaScript によるビューライブラリが盛んに使用されるようになりました。

- React アプリケーション開発の難しさについて

React 自体は JavaScript で書かれた「ライブラリ/フレームワーク」であって、React のために書くコードも React 特有の文法はほぼなく、JavaScript がわかれば React は理解できるものではあります。

しかし、そこで必要な JavaScript の知識は、純粋なウェブサイトの作成では必ずしも必要となるものではないため、ウェブサイト制作の業務から React を用いたウェブアプリケーションの作成に移行する際に、JavaScript の知識が壁となって React への参入が難しくなっているものだと思われます。

実際私はそうでした。ランディングページやシンプルな企業サイトにおいては、HTML と CSS の知識が中心的に必要なものであり、JavaScript は jQeury を使ったアニメーションやトグルやスライドを実装する際に少し必要というレベル感であって、この JavaScript の知識では React に取り組むには足りませんでした。

- React 学習の困難さを減らすための本講義

そしてこのギャップを埋めるためには自学自習するしかないのですが、そのためのちょうどいい資料が日本語ではないと感じていました。特に公式のドキュメントやチュートリアルが日本語では提供されていないことが大きな壁です。幸い私は英語のドキュメントを読むことができたので、学習を進めつつ、その資料の日本語訳をおこないました。

この資料はそういった学習を通して得た知識の日本語へのトランスコンパイルであり、さらに手を動かしてコードを書きやすいように整理したものでもあります。単に知識を羅列するのではなく、初学者が順番にコードを書きながら、順番に知識をつけていくことができることを目的としています。

- 充実した基本的なシンタックスの説明

import, export, class, map, arrow-function といった ES2015+ のシンタックスの説明にもかなりの分量を割き、コードを読んでいく上でつまづかないようにしました。

- CodeSandbox で動くコードを確認できる

動画で説明をされただけでは、なかなか理解できないと思います。そこで、ブラウザ上で提供される CodeSandbox というサービスを使い、全てのコードを動く状態で確認することができるようにしました。

テキストに付属されたリンクをクリックするだけですぐに現状のソースと挙動を確認することができます。

- テキスト

動画に加えて、テキストにも力を入れました。該当レクチャーのテキストに軽く目を通してから、動画を確認し、復習の際にはテキストを見る、というフローになるようにしています。どこが変更されたのか、最終的にまとめて確認できることが、学習を進める上で重要だと考えたからです。

- Webpack, Babel, loader 等の設定の難しさについて

React 開発における難しさのもう一つの側面は開発環境の構築です。React の開発のためには、一般的に Webpack, Babel, Webpack の loder の知識、それからこれらに先行する Node,npm の知識が必要です。

もちろん最近のウェブ制作においては Sass を Gulp を使ってトランスコンパイルする等々、こういった開発環境を用いた開発は浸透していますが、しかし使用することはできても、本質的な意味は理解していない、苦手だという方は多いと思われます。

そのためこういった環境構築は React そのものよりも難しいとさえいえると思われます。

今回の講義では、こういった環境構築の難しさをスキップして、全ての環境が整った CodeSandbox を使用することで React 学習のハードを下げることとしました。

- React エンジニアへの道筋

ですので、まずは CodeSandbox を用いて、動的に変化する要素の少ないコーディングを学習した上で、次に state を動的に変化させる TodoList 的なアプリケーションを開発し、最後に Webpack 等の開発環境を身に付けるのが良いと思います。

その後に Redux 等の state 管理用のフレームワークを身につけ、そして一つの壁である AJAX 通信等の非同期処理をできるようになると、SPA シングルページアプリケーションのエンジニアの入り口に立てるのではないかなと思います。本講義はここまでスムーズに導くことを目標としています。

もちろんこれだけの知識では実務エンジニアになるためには足りません。膨大な知識が必要であって、私も日々吸収するために頑張っています。ただ、それでも一旦 React エンジニアへの道筋がつけば、きっとうまくいくはずです！