muku.のプロフィール
Next.jsの記事の画像

Next.js+TypeScriptでこのブログを作るまでの最速学習手順

2020.9.16

このブログ「mukunoblog」は、フロントエンドの現状のモダン技術であろう、ReactとそのフレームワークのNext.js、そしてTypeScriptで作成しました。 作成を含めた1ヶ月間、どのように学習を進めていったのかまとめました。

前提

僕はまったくの初心者から学習を始めたわけではありません。Go言語をはじめとしたバックエンド周りの学習は前々からやっていました。Reactを触ってみたい、ポートフォリオにReactをフロントエンドに使用したい、ということでReact、TypeScriptの学習を行いました。

それと、プログラミング自体が初めての方は書籍やドットインストールProgateでJavaScriptの学習を行ってからが良いと思います。

学習手順

まず全体として、学習していくうちに浮かんだ疑問点は、公式ドキュメントを見て解決するのが結局は一番正確だし早いと思います。それプラス副次的にQiitaや個人ブログなどを参考にしていきます。

ではここから実際に行なった手順を書いていきます。


1.ProgateのReactコース

プログラミングを初めて学んだときの名残から、なんとなくProgateのReactコースで触り始めるところからスタートしました。がしかし今思えばこの工程はいらなかったと思います。基礎の基礎すぎて物足りない感がありました。 Reactとはどんなものかはじめに知りたい方はReactの公式ページのチュートリアルをやりながら、ドキュメントを読むことをおすすめします。(この段階ではReactがどんなものか雰囲気を掴めれば十分だと思います。)


2.りあクト!を読んだ。が...

次に巷で話題のりあクト!(第2版)を読みました。がしかし、今読むべきでではなかったなと当時思いました。コード自体もTypeScriptを前提に書かれていたので、まずはTypeScriptを学んで、Reactも一通り理解してから読むと良いと思いました。

ちなみにこの書籍自体は本当におすすめです。絶対読むべきだと思います(笑)。 僕は2版を読んだのですが、最近第3版が出されました。こちらは3部構成になっていて、 1.言語・環境編 2.React基礎編 3.React応用編 となっていました。僕はこちらの方まだ読んでいないので中身はわかりませんが、第2版よりアップデートされているだろうと思われるので良書確実だろうと思います。紹介ページや著者である大岡由佳さんのツイッターをみる限り、第2版よりもさらに丁寧に、さらに詳しく書かれているようです。この記事書くために紹介ページ見たら今すぐ読みたくなりました。今後余裕があれば読み込みたいと思います。

(本当に余談なんですが、いつか技術書書きたいな..という憧れがあります。そして書けるほどの技術力を身につけたい...。余談失礼しました。)


3.udemy「Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)

Reactの学習を網羅的に行いたければこのudemyの動画がおすすめです。React基礎からReact Router、Redux、Hooks、Redux ThunkなどReact周りの技術を網羅的に学習できます。 この教材は良さそうだったので、英語が得意なわけではありませんでしたが取り組みました。実際この教材を選んで良かったと思います。

ここで一つ注意があります。教材内で出てきたコードを写経をしてはいけません。いや、コピペして試してみるなどはいいと思うのですが一言一句コードを書いてもあまり効率が良くないと思います。 なのでそこはぐっと我慢して、まずはどのような機能があってどのように使用するのかを認識します。ここで認識さえしてしまえば、あとは必要な時に必要な技術が頭に浮かぶので、使用時にググれば問題解決です。なのでここではReactの全体像とReact製作者の思想を汲み取ることに専念します。

詳細は実際に手を動かして作成する時に何度も調べると思うので手早く次のステップへ進みます。


4.udemy「[世界で7万人が受講]Understanding TypeScript - 2020最新版

TypeScriptはこのudemyの動画で学習しました。TypeScriptをまったく知らなくても理解できるほど網羅的に、そして詳しく解説されているのでおすすめです。 ただし、この動画の評価コメントの中には「JavascriptのES6の知識がないと少し根気が必要」といった意見もあったため、こちらで学習する前にさらっとでもES6について学んでみると良いかと思います。こちらのサイト(jsprimer)で無料で学べます。


5.Next.jsの公式チュートリアル

Next.jsは公式チュートリアルを一通り読み込んだ程度です。あとは作りながら調べればなんとかなるだろうということで、ブログ作成にすぐさまうつりました。


6.あとはとにかく作り始める

これで一通り使用するスキルセットは学習し終えました。ついにここまできました。あとはもうとにかく作り始めましょう。そして作り始めると必ず疑問点が出てくるのでその度にググりましょう。実際作っていく中での疑問点の認識→解決が一番いい流れだと思います。

あと、僕がこのブログ作成後に思った反省点は 1.設計をしっかりと行ってからコードを書いていった方が結局は早い 2.難しいことを一気にやろうとしない。一つ一つ粒度を下げて取り組む。 の2点です。当たり前ですね。 でも僕は学習に時間をかけすぎていたこともあって焦ってとりあえずコードを書き始めてしまっていました。次ポートフォリオを作るときの改善点です。


その他

他には、このサイトのようにブログ機能をつけるにはCMS(コンテンツ管理システム)といったものを使用するかと思います。 僕はこのブログのCMSはcontentfulを使用しました。ですが後々調べたら、microCMSという日本発のCMSも登場しているようです。ドキュメントも日本語で書かれており、開発スピードも速いらしいので、これから作ろうとしている方には、どちらかといえばmicroCMSの方をおすすめします。というか僕もそっちで作ってみたかった。

あとはCSSinJSにemotion、そしてsemanticUIを所々に使用しました。どちらも公式ドキュメント、あるいは使用してみた系の記事があるためそちらを参考にすれば良いかと思います。

まとめ

自分の学習手順としては悪くはなかったのではないかなと思います。以前の学習ではコードを写経してしまったり、メモを多くとってしまったりして、効率の悪い進め方をしていました。 でも効率が悪いと自覚するにも、学習を続けていなければわからなかったことなので、まずは続けることが一番大事ですね。

これから学びたいと思っていた僕と同じ初学者の方の参考になれば幸いです。

今後も自分の学習内容やその他のカテゴリについても発信していく予定なので、もし良ければツイッターのフォローよろしくお願いします。(@mmuu_kkuu)