Next.js のチュートリアルページ (https://nextjs.org/learn/foundations/about-nextjs) で Next.js を一通り勉強しました。
I just got 210 points✨ on https://t.co/o52af0XFrz
— shihono (@sh1_hono) 2023年6月3日
チュートリアルにポイントが表示されていて最後まで進みたくなる仕組みになっていた
そもそも JavaScript でデータ分析・解析の結果をインタラクティブに表示できるようにしたいと思って JS について半年ぐらい前から少しずつ勉強してました。
実際に開発するには TypeScript の知識も必要と思い サバイバルTypeScript や TypeScript Deep Dive にざっと目を通していたところ、React や Next.js の存在を把握し、まずは公式のチュートリアルからはじめてみた次第です。
React公式のチュートリアルページ (https://react.dev/learn) も目を通したのですが、component や JSX が便利というのはわかったものの、実際どう使うかイメージが湧かなくて、ある程度 JS での開発経験がある人向けという印象を受けました。
そんな状況で始めた Next.js のチュートリアルは工夫が凝らされておりとてもよかったです。
Next.js はReactのフレームワークなので、HTML・CSS・JavaScriptだけでなく、React の知識も必要なため、必要な前提知識がかなり多いです。
それもあってか、Next.js のチュートリアルはJavaScript → React → Next.js の共通点・違いについてかなり丁寧に書かれています。
まず前提知識が何かを提示した上で、新しい概念を提供するスタイルのため、概念同士のつながりを把握しやすいです。
ハンズオン形式でコードを書き換えていくのと同時並行で説明があると差分がよくわかっていいですね。
React の説明 (https://nextjs.org/learn/foundations/from-javascript-to-react) に関しては React公式のチュートリアルよりも分かりやすくて、こっちを先にやっていればよかったと思いました。
また、セクションごとに Quick Review というクイズが時々挟まれていて、右上のスコアに反映されるのがモチベーションの維持によいなと思いました。
ちなみにこのスコアは読了して次のセクションに遷移しただけでも上がるようになっていることに途中で気がつきました。
そんなこんなで進めて、完成品を Versel にデプロイするところまで終わりました。
https://shihono-nextjs-test.vercel.app/
公開できると、やっぱり達成感がありますね。
無料で使えるホスティングサービスは初心者にはありがたい存在。
一部読み飛ばしたのでスコアは 720 points でした。 全部終えると 1000 points になりそう？
通してかかった時間としては5〜6時間ぐらいだと思います。
開発に必要な知識は一通り把握できたので、これから色々試したいです。
備忘録がわりのブログでした
ここ数ヶ月の間、ブログをまったく更新していないので、やったことを備忘録がわりに投稿してみました。
定期的にアウトプットしたいけど、ついつい長文のブログになりがちなので、短めでも投稿することに慣れていこうと思います。
