はじめに
娯楽要素が強いイメージであるYouTubeですが、プログラミングを学習できる無料プラットフォームでもあります。
今回は業務で使用することになったReact,TypeScript,Next.jsのおすすめ動画を紹介したいと思います。
筆者のレベル感ですが、これら3つすべて初めて触った初心者です。
React
Reactは、ユーザインターフェース構築のためのJavaScriptライブラリです。公式ドキュメントはこちら。
そんなReactの基礎を学ぶことができる動画はこちら↓
ReactでTodoアプリを作ることができます。
クラスコンポーネントではなく、関数コンポーネントを用いているので、教材の内容が古い！なんてことありません。
React hooksの中で
- useState
- useEffect
の使い方を学ぶことができます。
TypeScript
TypeScriptは、JavaScriptに型を定義できるようにした言語です。公式ドキュメントはこちら。
そんなTypeScriptを学べる動画はこちら↓
この動画では
- TypeScriptで書かれたファイルがどのようにJavaScriptにトランスパイルされるか理解することができる
- TypeScriptの基礎、例えば以下のようなことを学ぶことができます(詳細はYouTubeの概要欄を参照)。
- 環境構築
- 型の基礎
- ReactにTypeScriptを導入
先ほど紹介したReactのみで作ったTodoアプリにTypeScriptを導入してみましたので、こちらから参考にしてみてください。
Reactのみで作ったTodoアプリと比較してわかったことは、TypeScriptは可読性を上げてくれるということです。すぐに好きになってしまいました(笑)
YouTubeではないのですが、わからないことがあったらサバイバルTypeScriptという記事を参考にすればおおよそのことは解決できます！
疑問に感じた点
- typeとinterface、どっち使えばいいの？
- https://zenn.dev/luvmini511/articles/6c6f69481c2d17
- typeの方が個人的にはいいなと感じました。interfaceの「知らないうちに拡張される可能性がある」点は記事に書かれている通り、結構困りそうだなと。
- コーディング規約どうなっているんだろ？
Next.js
Next.jsは、Reactのフレームワークです。公式ドキュメントはこちら。
公式のDocsを見ていただけるとわかると思うのですが、すごくチュートリアルが充実しています。
そんなチュートリアルをさらに充実にしてくれるのがこちら↓
シリーズものになってまして、全部で12回あります。
公式の内容をわかりやすくしてくれる内容となっておりますので、とてもおすすめです。
疑問に感じた点
- ディレクトリ構成
- SPA、SSR、SSGについて整理する
その他の教材
TypeScript + Next.js + Laravelのハンズオン
YouTubeではないですが、こちらはLaravelを普段使っている方におすすめです。
さいごに
無料で学ぶことができるっていいですよね。
時間あったら、おすすめチャンネルまとめてみようと思います。