はじめに
業務ではバックエンドでPHP(Laravel)を利用して開発しています。
技術のキャッチアップのため、自分でアプリを開発してみたりしますが、バックエンドオンリーの技術スタックでは開発していて面白さが感じられませんでした。
自分の技術の幅を広げるためにも無理のない範囲で、フロントエンドの技術を学んでみようと思い、簡単なものならなんとなく読める、触れるくらいのレベルになってきたので、その学習のステップを共有します。
概要
- 自分の技術の幅を広げるために行ったフロントエンドのキャッチアップ方法を紹介
- レベル感のあった教材選びが大切
- 自分が使った教材の紹介
学んだ技術について
- Javascript
- TypeScript
- React.js
- Next.js
- Figma
学習に躓いたポイント
最近頻繁に耳にするNext.jsが触れるようになりたいと思い、Reactに触ったこともないような状態でいきなりNext.jsの学習をスタートさせてしまったことです。
書籍や動画を見ても何をしているのかさっぱり分からず、ただコードを模写するだけになってしまいました。
自分のレベルに合わせて5〜6割くらいは理解が及ぶところからステップアップして学んでいくのが私には合っているようでした。
学習方法
上で一旦躓いて、レベル感を見直して再度やり直したものになります。
各言語やフレームワークごとに記載します。
JavaScript・React
Udemy講座で学習をスタートさせました。
モダンJavaScriptの基礎から始める挫折しないためのReact入門
https://www.udemy.com/course/modern_javascipt_react_beginner/
プレーンなJavaScriptから説明してくれて、その流れのままReactまで行けるので基礎の把握にちょうどいい教材だったと思います。
Next.js
書籍で学習しました。
最初に「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」という書籍でTypeScriptと一緒に学んでしまおうと考えましたが、TypeScriptと Next.jsに加えて周辺知識となるJestやStorybookにつまづき挫折しました。
レベルを下げました。
書籍の「作って学ぶ Next.js/React Webサイト構築 (Compass Web Development)」
こちらでJavaScriptで動かすNext.jsを学びました。持ち合わせのJavaScriptとReactの知識に上乗せするイメージでNextjsの雰囲気をつかむのに適した教材だったと思います。
TypeScript
すでに2回ほどつまずいているので入念に準備しています。
書籍でハンズオン形式でTypescriptを学べる、次の書籍を活用しました。
TypeScriptハンズオン
その後、Udemyで復習をかねた学習を行いました。
【世界で7万人が受講】Understanding TypeScript 日本語版 | Udemy
全部で１６時間ほどある長尺の講座ですが、評価も高いですし、基礎から学べます。また、実際にハンズオンでアプリを作ったり、バックエンドとの連携も解説されています。私はもともと、バックエンドの勉強を楽しむのが目的でフロントエンドを始めているのでかなり適した記事だったと思います。
Figma
どうせなら簡単なデザインくらいできるようになってしまいたいという気持ちになった時期があり以下で学習しました。
初心者から始めるアプリデザイン＜UI/UXデザインをFigmaで学ぼう！＞Webデザインにも応用可能 | Udemy
デザインの知識は全くありませんが、Figmaの操作自体はそれほど難しくないので動画で気楽に学べていい教材だったと思います。基本操作とオートレイアウト程度を覚えておくと便利かなと感じます。
私の場合はAWS AmplifyからReactコードを自動生成できるという記事をみて俄然興味がわくようになりました。どんなもんか試した記事も書いているのでよろしければご覧ください。
AWS Amplifyを利用してReactコードを自動生成してみる - Qiita
学習用のアプリの開発
上記の書籍やUdemy講座でだいたいの基礎の学習が終わったため、学習用にアプリを開発してみました。
家計簿アプリ
クソアプリすぎるので画像だけで失礼します。
こちらはReact.js, TypeScriptを利用しています。書籍TypeScriptハンズオンでFirebase Realtime databaseが紹介されていたので利用しています。
技術ブログ
ry-tech blog (rytech-blog.vercel.app)
これは「作って学ぶ Next.js/React Webサイト構築」を参考にして作成しています。もともとはJavaScriptで書いていましたが、TypeScriptを導入したり、Qiita APIを利用して自分の投稿した記事を載せたりなど一部オリジナルにしています。
最後に
フロントエンドを学び始めたことでバックエンドオンリーの時期よりも開発が楽しくなりました。
知識が浅いので対応できなくなって挫折することがありますが、自分のレベルにあった教材を見極めるのがコツなのかもしれません。特にUdemyは初心者むけの講座がそろっているので便利ですね。
UdemyとChatGPTを活用した学習のTipsを紹介した記事も書いているのでぜひご覧ください。