概要
掲題の通り、React学習の初めの一歩として「学習記録のログアプリ」を実装してみての感想について記します
やったこと
- モダンなJavaScriptの記法・Reactの文法について最低限の内容をUdemyで学ぶ
- じゃけぇさんの講座で学習させていただきました
- 学習成果を生かして、勉強事項と勉強にかかった時間を記録 & 累積学習時間を確認できる簡潔なアプリを作ってみる
成果物
ご覧の通り、入力欄を1項目1行にするための最低限の装飾を除き、ほぼCSSを書いていない、React・JavaScriptの記述にフォーカスした、ごく素朴なWebアプリです。
学習事項を記録するDBの類もないので、ブラウザをリロードするとリセットされます
感想
座学について
Reactそのものというよりは、ECMAScript5以降のモダンな記法についてのレクチャーが印象に残りました。
私がReactに敷居の高さを感じていた理由の一つに、なんでこんな書き方になるのか・この書き方は文法的にどう説明がつけられるのかよくわからない・・・ということがありました
例えば以下のようなコードです
const name = 'taro';
const age = 30;
const myProfile = { name, age };
const { name2, age2 } = myProfile;
const DisplayPersonInfo = ({ name, age }) => {
console.log(`${name}は${age}歳です`);
};
DisplayPersonInfo(myProfile);
昔上記のようなReactのコードを読んで以下のようなことを感じた記憶があります
- なんでオブジェクトを表すはずの中括弧({})が、キーバリューじゃない形式で、配列みたいな記法で変数代入の右辺にいるのか
- 変数代入だけでなく、関数の引数にいたりもする。どういう意味これ？
- 中括弧({})とか角括弧（[])が変数代入の左辺にいる式見たことない、きもい・・・
Udemyの動画では混乱を招く可能性のある記法・React中でよく使われる記法について焦点を絞って紹介されています。いずれについても、座学を通じてしっかり説明がつくようになったので、非常にスッキリしました
Reactをいち早く学びたい気持ちを抑えて、「Reactでよく使われるJavaScriptの記法」を学んでおくことで、上記のようなことに対する引っ掛かりを抑えられるように備えておくことは非常に大切なことと思います（Udemy講師のじゃけぇさんも同趣旨のことをおっしゃっていました）
実際に書いてみて
書く上でもやはりJavaScriptの基礎知識は大事
モダンな記法については、コードを読む・学習する際のストレスを下げるだけではなく、実装効率を上げることも身にしみて感じました
以下のようなことを講座中では教わったのですが「学んだことだから、せっかくだから使おう」と強く意識するまでもなく、自然と全部使う機会がありました
- テンプレート文字列
- アロー関数
- 分割代入
- オブジェクトの省略記法
- スプレッド構文
- 配列に対するmap()やfilter()の利用
作ったアプリは冒頭で画像を引用した通りかなりちゃちいアプリですが、そのちゃちぃアプリだけでも上記のような文法はすべて使う余地があるということです（もっとも、作ったアプリは JISOU が用意したお題に基づくものなので、座学編の良い応用となるよう多少意識・工夫してくれたお題なのかもしれません）
これらの文法を使うか使わないかではそれなりにコードの文量・シンプルさが違ってきます。本格的なWebアプリを作る場合であれば尚更でしょう。ので、知識を身につけるだけでなく、早くいいコードを書く上でもやはり「Reactでよく使われるJavaScriptの記法」の知識は初期の時点であった方が良いのだろうと思います
おわりに
「座学について」のセクションで紹介したコードや、「書く上でもやはりJavaScriptの基礎知識は大事」のセクションで列記した文法事項についてわからない・理解に自信がない方については、焦らずにぜひその点の理解をして地固めしてから、Reactを学び始めることをおすすめします
今は結構React周りの教材は充実してきている感があるので、最適解は一つではないかもしれませんが、少なくとも じゃけぇさんの講座 はばっちりな内容でした
また、そういう良い教材を選定してくれており、かつ間髪入れず実践させる良いコンテンツ・文化がある JISOU もぜひご検討ください・・・という宣伝でもって今回の雑記は締めたいと思います
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼