udemy「モダンJavaScriptの基礎から始める挫折しないためのReact入門」を受講したざっくりな感想

react

ざっくりな内容

合計6時間とudemy講座の中では比較的短い講座となっている。(僕自身は、動画を止めながら、講座を受けた為、12〜15時間程かかりました。)

前提知識のhtml、cssから丁寧に説明してくれる。

htmlやcssの簡易的なコーディングも一緒にやるため、どのような考えで余白を作っているかなど参考になる。

javascriptの転換期である2015年から変更になったモダンな技術を学ぶことがで出来る。(演算子など)

講座自体はjavascriptを用いて、TODOアプリを作成し、その後Reactを用いて同じTODOアプリを作成する事でReactの良さを知る事が出来る。

Reactを学ぶ上で、理解しておくべき重要用語と概念

下記のようにReactを学ぶ上で、理解しておくべき重要用語と概念の説明を一通りして頂けます。

そもそもReactって何が凄いのかについては、【React入門】Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!が分かりやすかったので、リンク貼っておきます。

・DOMとは

htmlなど木構造で表現したもの。

これまでのjavaScriptやjQueryは直接DOMを操作していた。(レンダリングコスト高い(読込みが遅くなる)ことやコードが複雑化する)

→そのため、直接DOMを操作するのではなく、一度仮想DOMを作成し、変更した差分だけをDOMに反映させる。

難しいように聞こえるが、ReactやVueを使用する際は、裏側で勝手に上記の処理をしてくれるので、意識しなくても大丈夫。

・パッケージマネージャーとは

かつてのjavaScriptは1つのファイルで全ての処理を行っていた。

改善策として、jsファイルを大きな使用用途別に分けてファイルを複数読込していた。しかし、読込順の意識しないとエラーになる(依存関係)やどのファイルから読み込まれたかがわからなくなる問題があった。

そこで、、npmやyarn等のパッケージマネージャーを使用。内部では、Nodo.jsが動いて上記の問題である依存関係を解決してくれるようになった。(ざっくりの概念は理解できれば大丈夫)

・ESとは

エクマスクリプトと呼ばれ、javaScriptの標準規格(こういうルールで書こう)

es2015(2015年)で追加された規格が多くある。

例:let.constの記述、アローファンクション、Class構文、分割代入など。

・モジュールバンドラーとは

webpackが有名です。

開発時に分けていた複数のjsファイルを1つにまとめるためのもの

利点としては、本番環境にビルドするときにファイルを1つのファイルにまとめてくれるので、読込み速度が上がる。依存関係も良い感じにしてくれる。

・トランスパイラとは

新しいJavaScriptの記法を古い記法に変換してくれる。

ES2015で増えた新しい記法を古い記法に変更して、対応が遅れているブラウザでも使えるようにする。(IEとか)

・モジュールバンドラーとトランスパイラのまとめ

「開発は効率良く、本番実行時はうまく変換」

最近はフレームワーク・ライブラリが割と面倒を見てくれる為、意識する機会は減っている。

・SPAとは(Single Page Application)

最初のhtmlを読み込むのは一緒だが、別ページ(プロフィール)に飛ぶ時に、データのみをjsで書き換えて、表示させる。

メリットとしては、ページ遷移ごとのチラつきがなくなる、表示速度アップ、コンポーネント分割が容易になることで開発効率アップなど。

受講した感想

製作者の方の雑談が各セッション終わりに休憩タイム(5分程)として入っているのが、地味に楽しみだったし、現状のフロントエンド事情など、なかなか聞けない情報でタメになりました。

1回で理解できない場合は、2回、3回と復習をすると良いと思います。(javaScript初心者でReact初見の僕はまた勉強し直して2回目を見ようと思ってます。)

モダンjavaScriptの大まかな基礎とReactの凄さをざっくり知ることが出来ました。自分の力不足を存分に感じたので、引続き勉強します、、(笑)

気になる方はこちらの「モダンJavaScriptの基礎から始める挫折しないためのReact入門」から受講頂ければ幸いです。

アフェリエイトではなく、個人的に受講して良かったと思うので、リンク貼ってます(笑)

ここまで読んで頂き有難うございました。