はじめに
仕事の関係でReactとTypeScriptをする必要がでたのですが、社内に知見のある方がいなかったため自分である程度学習する必要がありました。
また、今後社内に普及していく中でどのような学習手順を踏んでいけば効率よく学習ができるようになるかも含めて色々な教材を行い感想を簡単にまとめます
教材一覧の順番で学習を進めましたので参考にしてみてください
教材一覧
今回紹介するコンテンツの一覧です。×がついているものは学習済みのものになります
TypeScript
- × TypeScriptハンズオン
- × ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
- × TypeScript入門 (ドットインストール)
- × 手を動かしながら学ぶ TypeScript
- サバイバルTypeScript
- type-challenge
React(Next)
- × React (プロゲート)
- × React入門 (ドットインストール)
- × ReactでTodo管理アプリを作ろう (ドットインストール)
- × モダンJavaScriptの基本から始める React実践の教科書
- × モダンJavaScriptの基礎から始める挫折しないためのReact入門
- × りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】
- × Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
- × 基礎から学ぶ React/React Hooks
- ×【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座
- × 最短・最速で作る Youtube クローンアプリ React・React Hooks編
- × Atomic Design ~堅牢で使いやすいUIを効率良く設計する
- ×【脱初心者向け】実践！Firebase, Typescript, Reactなどを使ったWebアプリ開発ハンズオン
- × ReactでTrelloクローンアプリケーションを作ってReactをマスターしよう！
- × React開発 現場の教科書
- ×【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう！
- × りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】
- × Firebase未経験者のためのReactで作るチャットアプリ開発入門！最速最短でゴール到達！
- × AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発
- × 作って学ぶ Next.js/React Webサイト構築
- × りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ. React応用編】
- ×【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
- × TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
- りあクト！ TypeScriptで極める現場のReact開発
- りあクト！ Firebaseで始めるサーバーレスReact開発
- × TDD&NEXT.jsで公式テックブログを1から作る
Go言語
- × Go (プロゲート)
- × はじめてのGo言語 (ドットインストール)
- × Go言語入門 (ドットインストール)
- ×【Go入門】Golang基礎入門 + 各種ライブラリ + 簡単なTodoWebアプリケーション開発(Go言語)
- × たった1日で基本が身に付く! Go言語 超入門
- × はじめてのGolang Part2 Webフレームワーク Gin
- ×【Go言語】基礎文法からweb開発まで攻略コース
- × fluct 鈴木健太『Goライブコーディング』【技育祭2020】
- ×【Go】技術ブログサイトを自作してみよう！
- × GoとSAMで学ぶAWS Lambda
- ▲ 詳解Go言語Webアプリケーション開発
- × APIを作りながら進むGo中級者への道
- 実用 Go言語 ―システム開発の現場で知っておきたいアドバイス
- 初めてのGo言語 ―他言語プログラマーのためのイディオマティックGo実践ガイド
- Goで学ぶ実践gRPC入門
TypeScript
TypeScriptハンズオン
JavaScriptがある程度できるなら読み切れる難易度
内容はかなりまとまっているがハンズオンはなかった
TSを幅広く説明しているので1度やることで全体を知れるのがよかった
Kindleだとセールで半額で変えるのでそのタイミングに買うのがおすすめ
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
型や機能などについて一つ一つ丁寧に説明がされている
また開発環境構築も丁寧に説明されているのでスムーズに学習が可能
一通りTSのことを理解してからやるのがよさそう
ハンズオンはないのでそこだけ惜しい
TypeScript入門
ほぼJavaScriptのような説明でTSならではの紹介が少ない
内容もかなり簡単なのでアカウントを用意してわざわざやる必要はない
手を動かしながら学ぶ TypeScript
(2022年8月11日)
TypeScirptだけで行うハンズオンはおそらくこの本でしか現在ないかと思われる貴重な1冊
だいたいがTypeScript×ReactでハンズオンをするなかTypeScriptオンリーで2つアプリを実装している
内容は中級者向けで、コード量もまぁまぁ多くカンバンボードは実装も難しめだった
最後にはReactのStyled-componentの部分のみを開発している。これだけにフォーカスしたコンテンツもこれが初めてだった
TypeScriptのハンズオンが行えるということでは価値のある書籍だと思う
Serverless入門 TypeScriptで始める個人開発
書籍(同人誌)
学習中
React.js (Next.js)
React
Progate
ハンズオンベースで行われるのでReactの全体感をはじめに知るのには向いているが課金してまでやるようなボリュームではなかった
React入門
ドットインストール
3分しかないからか型の説明1つ1つの内容が薄い
初学者が難しいと感じる内容まではいかないのでやる必要はない
ReactでTodo管理アプリを作ろう
ドットインストール
ハンズオンベースで学習を行う
全17回でReactのよく利用する機能を学ぶことができるのでよかった
内容は基本的なものになるのでReactのイメージがつかない人はやると効果的かと思う
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】
Reactを学習するうえで最強と言われている本
JavaScriptからTypeScriptまでを環境構築から丁寧に説明されている
またフロントエンドの動向など歴史的なところもまとめられているのでかなり詳しくなれる
内容的にはJavaScriptやオブジェクト指向をある程度理解できていないとよくわからないとなるかと思うのでしっかり時間を取って理解する必要がある
1巻は輪読会で会社のチームで読んでいるが複数人で読むとかなり効果的だなと感じた
ある程度レベルが上がったら絶対読むべき
モダンJavaScriptの基本から始める React実践の教科書
Kindleでよくセールをやっているので買うならKindleがおすすめ
りあクト!リスペクトな感じで書かれているが敷居がかなり低くなっているため最初に読む本としても読みやすい内容になっていた
この本の特有の内容としてレンダリング最適化やHooksなどについても触れられているので時々耳にするHooksが何なのかを理解することができた
どこに力をいれて今後学習すべきか、どこがReactの難しいところなのかを知っておけるのは良いかと思う
最後にTypeScriptとReactのハンズオンもあるのでそこまでやると値段以上の価値があるかと思う
モダンJavaScriptの基礎から始める挫折しないためのReact入門
(2022年8月2日)
このコースの面白いのはJavaScriptのハンズオンをしてからまったく同じものをTypeScriptで作成することでした。JavaScriptの理解が甘くても基本から理解でき、歴史などもしっかり説明されています。ある程度Reactがわかる人には簡単です。SandBoxをつかうので環境構築は不要でした
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
とにかく参考になったしクオリティも高い
React入門した人がやるにはぴったしで実際に手を動かしながら学べて、最後のハンズオンで総復習するという内容
また、ChakuraUIやStyledComponent、Atomic Designなども利用するのでこのハンズオンを行ったらよりよいシステムが構築できるようになるかと思います
今後も実務で詰まったら復習します
作って学ぶ Next.js/React Webサイト構築
(2022年9月19日)
Next.jsをはじめて学習する際に読んだ本
すぺてがカラーページになっており、説明も写真がたくさんあるためわかりやすかった
CSSをかなり書かないといけないのでそこまで理解するとなると大変だがざっくりやるなら十分
Googleアナリティクスなどの実践的な話もあるので、一通りできれば質の高いサイトが作れるようになる
Reactを学びたいという目的でやるのであればおすすめはしないが、Next.jsを学習するなら最初にぴったりだった
TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
基礎から学ぶ React/React Hooks
(2022年8月8日)
JavaScriptのReactをやるうえで必要な知識を紹介した後にReactを紹介してTODOアプリのハンズオンを行う
Hooksをまとめて紹介している本は今回が初めてでいままでよくわからなかったUseRefを知ることができた
ハンズオンではChakraUIやjson-serverの使い方も学ぶことができる
機能とその使い方を章ごとに紹介はしているが、初めてReactを触るのであればわかりづらく感じるかもしれない
一通り機能に触れた後に勉強するのがよさそう
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】
やっとReactに入るかと思いきや7割くらいは歴史の教科書
歴史をここまでまとめるのは長く追っていないと書けないと思う。それだけで差別化されている
後半でやっとReactのコードが紹介される、内容としてはReactを書いたことのない人にはハードルが高いので、ある程度広く知っから読んだほうが良い
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ. React応用編】
routerや状態管理などについてかなり詳しく歴史の部分から説明されている。難易度は少し高めになるがここまでまとめられてる資料はなさそう
りあクト！ TypeScriptで極める現場のReact開発
りあクト！ Firebaseで始めるサーバーレスReact開発
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
(2022年9月24日)
Next.jsで重要になる動的ルーティングとSSGについて主に説明している講座
この方の動画はかなりまとまっているので短時間で効率よく学習ができる
とくにSSGとSSRの違い、動的ルーティングのやり方などわかりやすく説明しているので実際に行う際には参考になる
【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座
(2022年8月8日)
ハンズオンを3つ行ってアプリケーションの作り方を学べる講座
一通りReactを理解した人がやるにはちょうど良いのと複数パターンができる
ここではFirebaseとViteを始めて触ることができた
またReact-router-domやFirebaseなど最新のバージョンで行われていたのがよかった
難易度もちょうどよいのでReactを一通り復習するのにはよかった
しかしファイル構成などはスコープ外になっている
Reactの説明は不要でハンズオンをやりたい人にはおすすめ
最短・最速で作る Youtube クローンアプリ React・React Hooks編
Reactの説明はほぼなく(router, context, hooksも)、とにかくハンズオンを行っている
ある程度勉強が済んでとにかく手を動かしたい人がやるべき教材
ハンズオンではYoutubeのようなサイトを作るが、APIを使った実用的な開発、おしゃれなUI、scss、useContextの実践的な使い方、レンダリングの最適化についてスタイリッシュに説明がされていてとても良い教材だった
また、npmも色々使うので、linkifyやnormalized.cssなど色々知見が広がった
Youtube APIが時々403を返して、認証情報作成しなおしがあったり、一部API的にエラーがでたりと依存に苦労したが最後までやってとてもよい教材だと感じた
【Twitterクローン】React×Firebaseでツイッターアプリをハンズオン形式で自作してみよう！
2022年8月26日
Firebaseの説明をかなり丁寧に行っており、いままでで一番わかりやすい動画だった
また、CSSをあてる作業も多いため個人的には多くを学べた
Hooksなどの内容はかなり少ないので、フロントエンドとFirebaseを学びたい人におすすめ
とにかく充実度が高いおすすめの講座だった
Atomic Design ~堅牢で使いやすいUIを効率良く設計する
Atomic Designにフォーカスした数少ない本
またStoryBookについても載っている
しかしコードの難易度は少し高めに感じた
React開発 現場の教科書
Atomic designについて書かれていたので購入
内容は古いReactのバージョンになっているので内容を実際に確かめることはできない
Atomic designに関して学ぶのであればそこの章は勉強になる
【脱初心者向け】実践！Firebase, Typescript, Reactなどを使ったWebアプリ開発ハンズオン
React+TypeScriptの数少ない講座の一つ
Firebaseの手前まで行ったが、後半Reducerを使ったり難易度が高くなる
一応説明はあるが早送りでコーディングが進むため十分でない気もした
初心者というよりは中級者がやるとよさそう
仕様書などがGitHubにまとまっているのはとてもよかった
- ReactでTrelloクローンアプリケーションを作ってReactをマスターしよう！
2022年8月20日
react-beautiful-dndの説明を詳しく説明してくれている、また丁寧な説明なので全体的にわかりやすかった
Reactの基本の説明はほぼないのである程度理解している人がステップアップするのには良さそう
この方の動画は丁寧なのでどの講座を買ってもはずれがない安心感がある
Firebase未経験者のためのReactで作るチャットアプリ開発入門！最速最短でゴール到達！
2022年9月2日
内容的には初級～中級になるくらいのレベル
実装はそこまで大変でないものを7時間かけてじっくり説明している
useRefの実用的な使い方やエンターキーで登録などする方法はこの講座で学びがあった
ある程度講座をやった人はやる必要はなさそう(説明が丁寧すぎて長い)
AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発
Amprifyを説明するのにReactを使っていたのでこのリストにのせた
React自体は難しいことはしていないのであくまでも説明のために利用している
AmprifyやLambda、GraphQLを扱っているのでその知識もすこしついた
仮にAmprifyで開発を進めることにしたら最初はかなり参考にする本になりそう
しかし、Reactを勉強するのにはあまり向いていない
TDD&NEXT.jsで公式テックブログを1から作る
ラプラスがやっているモブプロ配信。そのまま真似るだけでTDDのやり方やRSSからのブログ作成、Cypress、Next.jsまで学べる。5時間の内容だが、かなりコスパが良いし実際に調べながら実装するので考えてることを声にしてくれるのがとても良かった。
Go言語
Go言語 ハンズオン
kindleのセールで安く買える
Goについて一通り説明が行われており、ハンズオンとしてGUi、スクレイピング、Webアプリを作成できる
最初の1冊にピッタリの内容だがオブジェクト指向の理解が甘いとインターフェースや構造体で詰まるかもしれない
Go(Progate)
ハンズオン形式で学べる
ポインタの使い方などを具体的に説明している
雰囲気を掴みたい場合にちょうどよさそう
はじめてのGo言語
Goというよりはプログラミングの話でプログラミング初心者用の内容
Go特有の話はまったくないのでやる必要なし
Go言語入門
3分で説明するのでさわりしか説明できていない
これもやる必要はないかと思う
【Go入門】Golang基礎入門 + 各種ライブラリ + 簡単なTodoWebアプリケーション開発(Go言語)
とにかく作者がわかりやすく、丁寧に作っているのでかなり良い教材に仕上がっている。Goの機能からパッケージまで詳しく説明しているうえに、ハンズオンでのToDoアプリの作成で認証機能まで作成、そのあとの超内容の濃いゴルーチンの話と充実の内容
GoでWebアプリを作るなら絶対やるべき
たった1日で基本が身に付く! Go言語 超入門
インターフェースや構造体などの説明はわかりやすいが、HTTPやゴルーチンなどの説明はさらっと終わってしまう
またポインタの説明は初学者には厳しい気がするので難易度が章ごとにばらばらになっている
ポインタの説明は他の書籍では説明していないようなnextで次のポインタを保存する構造の説明があった
はじめてのGolang Part2 Webフレームワーク Gin
二人のやり取りがかなり面白かった
この動画を学習として利用するのは厳しい
【Go言語】基礎文法からweb開発まで攻略コース
(2022年8月11日)
基本的なGOの説明を行った後にWeb開発のハンズオンでDBを利用しないローカルのファイルを利用したWikiのようなサイトを作成する
内容は基本的なWeb開発の流れだがパスのパラメータの取得やバリデーションなどはとても参考になった
ハンズオンも内容がしっかり絞られていてスマートなのでやる価値はある
画面がみづらいのと声が小さいのは少し気になる
【Go】技術ブログサイトを自作してみよう！
(2022年8月13日)
Echoを使って技術ブログを作成する
最初のほうはコードの説明があるが中盤から説明がなくなりコピペするという指示でなにも理解せずに進めてしまう
コードが何をしているのか自分で確認していく必要があるので初心者には厳しいかもしれない
個人的にはGooseというライブラリ、そしてEchoをなんとなく触れたので収穫だったが、ハンズオンとしては何も考えずにコピペで最後まで行ってしまったので微妙だった
GoとSAMで学ぶAWS Lambda
Goをlambdaにデプロイするために買ってみたがGoのバージョンがかなり古いため参考にならなくなっていた
テスト駆動開発でGO言語を学びましょう
途中まで行った。テストの書き方について学べるのがよかったが、実践でテストを始めたので挫折
内容はよくまとまっていて、どういう思考でテストを書いていくのか学べる
詳解Go言語Webアプリケーション開発
この本を読み始めてまだまだGoを理解していないなと再認識した
いきなりContextの説明が始まりわからない箇所がどんどん重なって途中で挫折
何度か読み直すたびに(時間がたつたびに)理解できる箇所が増えているのでこれから頑張りたい
初心者が最初に読む本ではないのでGoになれてからやるほうがよい
fluct 鈴木健太『Goライブコーディング』【技育祭2020】
(2022年8月12日)
実際の開発の流れやテストのやり方についてを理解できる
コーディングは早く進んでしまうため、テストの流れを理解した
実用 Go言語 ―システム開発の現場で知っておきたいアドバイス