【SkillsBuild】これで挫折しない！モダンJavaScriptから書いて覚えるReact入門！@アイドルエンジニア

1. 自己紹介

初めまして、アイドルエンジニアです。
簡単に自己紹介をしたいと思いますが、四年制大学の情報科でネットワークやセキュリティの技術を学んだ後に組込系の業務に従事していました。学生時代は主にサーバーサイドの技術を扱う機会が多かったのですが、よりクリエイティブな開発を求めて、最近ではフロントエンド技術を学びながらアイドルをしています。

2. なぜ今フロントエンド技術が必要なのか

最近のエンジニア界隈では特にフロントエンド技術の進化が目覚ましく、開発現場においてもより洗練された、よりモダンな技術の吸収に余念がないと聞きます。スマートフォンの普及なども手伝って、ユーザーが簡単にWebを通じてアプリケーションを利用できるようになったことから、Webアプリケーションに対する需要は急速に増大しており、それに伴って求められるクオリティも高くなっています。
代表例をあげると急速に市場規模を大きくしている「YouTube」などの動画共有プラットフォームや、近年、児童や転職者から広く求められているプログラミング学習に代表されるオンライン教育システム。今、私が執筆している文書共有プラットフォームであるこの「note」もWebアプリケーションと言っていいでしょう。分野に絞ると、ゲーム等のエンターテインメント分野では情報のわかりやすさも去ることながら、ユーザーを引き付けるデザイン的に優れた機能が要求され、ネットショップに代表されるECサイトなどは、より直感的でわかりやすく、かつ機能的であるアプリケーションであることが、市場競争で生き残るための必須条件になっていると言っても過言ではないでしょう。
このように、現代ではもはやWebアプリケーションは生活の一部どころか利用するサービスの大部分を占めるようになり、プログラマーやSE、デザイナーにとってもフロントエンド開発スキルの必要性は高くなっています。

3. 「React」が今アツい！でも・・・

さて、「フロントエンド　開発」で調べるとどうやら巷では「Reactがアツい！」ということがわかりました。フロントエンド開発を志したことがある人なら一度は聞いたことがある名前ではないでしょうか。
Reactはユーザーインターフェース構築のためのJavaScriptライブラリです。Facebookのソフトウェアエンジニアによって開発され、あのInstagramもReactによって開発されています。
というわけでReactについて軽く調べて入門したのですが、すぐに挫折してしまいました。Reactって難しいんですよね。JSXという独特の記法をしていますし、これまでフロントエンドに触れてこなかったので、概念的な理解が難しく、なかなか習得ができませんでした。せいぜいHTML、CSS、JavaScriptの基礎がわかる程度の知識で臨んだのが間違いだったのかと思い、つい学習を後回しに。調べてみると同様の理由でReact開発に挫折したという人も多く、どうやら共通の課題であるようです。
それではいったいどうすれば挫折することなくReactを理解することができるのでしょうか、「SkillsBuild」の下記の講座ではそれを「『JavaScript』への理解不足によるものだ」と喝破しています。

4. モダンJavaScriptの基礎から始める挫折しないためのReact入門

ReactはモダンJavaScriptの機能を多く使って開発していきます。つまり、モダンJavaScriptの概念や記法を理解することで、どのような点でReactは従来のコーディングの課題を解決しているのかということを体感することができます。
SkillsBuildで提供されている講座の「モダンJavaScriptの基礎から始める挫折しないためのReact入門」では、その点にフォーカスし、まずモダンJavaScriptへの理解を深めるためにその機能、そして周辺知識やパッケージについて学ぶことができます。例えば、「従来ではDOMを直接書き換えていたのを、今では仮想上でDOMを操作して、差分をDOMに反映するという形をとることで、ユーザビリティを向上している」という話があります。このように「なぜその技術（機能）が必要になったのか」ということを逐一確かめながら学習できるため、コーディングの段階になったときに「なぜこのように書く必要があるのかがわからない」といった疑問を感じることなく、自然に理解していくことができます。
ほとんどのReact入門の講座ではここからReactを用いてTODOリストなどのアプリケーションを開発していきますが、本講座ではまず初めにプレーンなJavaScriptのみを用いてアプリケーションを開発していきます。そしてその後に、まったく同じ機能を持ったアプリケーションを、Reactを使って開発していきます。これによって「いったいReactを使ってなにがうれしいのか」ということを見失うことなく、またフロントエンド開発にどのような視点（考え方）が必要なのかということも体感することができます。また、初めからコンポーネント化されたコードを書くのではなく、共通の機能をもった部分を併合していく過程を実演するなど、ほとんどのプログラミングに必要な考え方を、順を追って確認していくことができます。

プレーンなJSで記述したコード

以下では、実際にプレーンなJavaScriptで記述して、TODOリストの機能を実現しています。入力フォームにタスクを入力した後に、「追加」ボタンをクリックすることで、タスクは「未完了リスト」へと格納されます。未完了リストに格納されたタスクには「完了」と「削除」の2つのボタンが実装されており、完了ボタンをクリックした場合は、未完了リストから当該タスクを削除し、「完了リスト」へとタスクを追加し、削除ボタンをクリックした場合は、そのまま未完了リストから当該タスクを削除します。完了リストに追加されたタスクには「戻す」ボタンが実装されており、戻すボタンをクリックすると、当該タスクが完了リストから削除され、未完了リストへと追加されます。

プレーンなJSを用いたTODOリストの実行結果

その後、同様の機能をもったプログラムをReactによって記述していきます。
ここで、ただリファクタリングしていくのではなく、Reactを用いる上で必須知識となってくるstateや副作用の概念を理解するために、以下のような実演を交えています。
「カウントアップ」ボタンはクリックするごとにnumの値を1ずつ増加させます。例では、numの値が3の倍数の時に、設定した顔文字を表示するという機能を実装していきます。また、それとは別に顔文字の表示の切り替え機能をもった「on/off」ボタンも同時に実装します。

Reactによる実演

ここで、値の更新と、顔文字の表示を両方useState()によって更新していることに注意しなければなりません。この場合、値を更新すると、「on/off」が効かなくなってしまいます。

効いていないon/offボタン

これは、on/offボタンをクリックした際に、副作用が働くことで、再び3の倍数の時にのみ顔を表示する判定を行ってしまい、その後に再レンダリングされることに起因したバグです。このデバッグのためにはuseEffect()を使用して、関心の分離を行う必要があります。
このように「なぜその関数を使わなければならないのか」ということを、実際に起こりうるバグを通して体感することで、なにも考えずに「おまじない」のように関数を記述していく事態に陥らないように工夫されています。
本コースの講師は「自分自身、学生時代はプログラミングに興味がなくわからなかった」と語ります。一度、プログラミングに挫折している立場だからこそわかる、いったい初学者がどこでつまずくのか、なにに難しさを感じるのかという視点を意識した講座になっているため、知らず知らずのうちに置いてきぼりになることなく、安心して受講することができます。また、「息抜き」と称してセクションの合間に講師の体験談や、コラム的な話が盛り込まれており、リラックスして学習に臨むことができます。

5. まとめ

実際に講座を受講してみて、ぼんやりとしていたReactへの理解がTODOリストの作成を目標に、モダンJavaScriptで記述したコードをReactを用いてリファクタリングすることで、比較という形をもって、具体的にすることができました。加えて、コードのコンポーネント化や、発生しやすいバグなどを、コーディングをしながら体感することで、Reactのより本質的な理解を可能にしていました。

6. おわりに

今回紹介した「モダンJavaScriptの基礎から始める挫折しないためのReact入門」はIBMが提供しているオンライン学習プラットフォームである「SkillsBuild」で受講することができます。

詳細はこちらを参照してください。