はじめに

はじめまして。NUTMEGで普段インフラ・バックエンドをしている市之瀬と申します。

技大の実務訓練というカリキュラムを用いて現在フラー株式会社で業務に関わらせてもらってます。フロントエンドは未経験だったのですが、ウェブサイトのフォームを作る仕事をしております。最初の一ヶ月は勉強期間にしてくださったので、その期間にどんな勉強をしていたか綴っていきます。

勉強開始時点の自分の知識は、HTML・CSSは授業で聞いた程度、Next.js、reactは見たことある程度、typescriptは書いたことないレベルでがちがちの初心者です。

目指すレベル

今回目指したゴールは、「Next.jsを利用して開発できるようになる」というものでした。そのため、Next.jsを問題なく利用できるようにするために必要な勉強を進めていきました。

ざっくり道筋

reactチュートリアル
↓
react公式ドキュメント
↓
Next.jsチュートリアル
↓
簡易なアプリ開発
↓
Next.jsの新チュートリアル

react

reactとは

Next.jsはreactのフレームワークとなっています。そのため、まずはreactの勉強から始めました。 勉強するための教材としては、チュートリアルとreactのドキュメントを利用しました。まずはチュートリアル、その後ドキュメント読みの順で進めていきました。

要点

終わった今思うと、ここでは以下の3つを特に意識するとよいと思いました。

• state
• jsx（tsx）
• コンポーネント

勉強の仕方

チュートリアルは、ちょっと下にスクロールすると答えが全部見えてしまうため、やろうと思えば全部コピペでチュートリアルが終わってしまいます。それでは勉強ではなくコピペの練習になってしまうため、些細なことにも疑問を持って、どんどん自分で調べて、どんどん会社のエンジニアに質問することを意識していました。

疑問をもつために意識したことは、以下の二点です。

• チュートリアルをしながら自分でメモを取る
• コピペせずに手打ちする

自分で読み進めたり、コードをコピペするだけだと、どうしても読み飛ばしがちになってしまいました。そのため自分でなるべく書き出すことで意識的に読むようになり、細かいところに引っかかるようになりました。その分時間がかかるようになってしまいましたが、自分で残した文章が残る＆多くの疑問にぶつかるので、とても良い方法だと思っています。

ドキュメント読みも、チュートリアル同様になるべくドキュメントにまとめながら進めていきました。ドキュメントにはチャレンジ問題があり、これのおかげで各項目を手を動かし流れ勉強できたので、とても良い教材だと思います。

reactの勉強は、今でもチュートリアルと公式ドキュメントで良いと思います。これらは何より読みやすいですし、これから公式ドキュメントを読む癖をつける意味でも最適だと思います。

Next

Nextとは

次は、Next.jsのチュートリアルを行いました。こちらも上記のreact同様、ドキュメントにまとめながら進めていきました。こちらのチュートリアルは古いので、下記で述べる最新版のチュートリアルを行うことをおすすめします。

要点

もし今このチュートリアルをするなら下の二つを勉強するのが良いと思います。

• レンダリング方法
• Next専用コンポーネント（Link,Image）

簡易な開発

Next.jsのチュートリアルまで作成したので、簡易なアプリを作成していきました。

この実際の開発が、この一ヶ月で一番勉強になったと思います。チュートリアルを写経するのと、自分で考えて書くのでは勉強の質に雲泥の差がありました。

要点 これまででreact,Nextに関して学んできましたが、まだtypescriptについて全く勉強しておりません。なのでここでは、以下を意識していました。

• typescriptの勉強
• react,Nextの復習

型難しすぎる

そもそもゼロ知識でtypescriptを触るのはとってもしんどかったです。仕事を振られる前に触っておいてよかったと心から思います。今ではちょっとだけわかってきたtypescriptですが、pythonなどの型推論をしてくれる言語を主に触ってきた私としては、型という概念がそもそもわかっていませんでした。

つまったポイントは、

• コンポーネントの書き方が違う
• 引数に型を付けることが未知

がメインだったと思います。何にしても型関係でした。今までずっとfunctionを用いていたのに、調べた記事でReact.FCなどを使ってコンポーネントを作っていたり、引数が見たことない形になっていたりして意味わかんなかったです。

typescript以外にも、学んだはずのことがまだ身についておらず詰まることが多々ありました。特に、Stateの管理でよく詰まりました。どのコンポーネントで定義するべきなのか、いつ更新するのがベストなのか、わからないことだらけです。 チュートリアルを写経するのと自分で作るとでは全然違うのを思い知らされました。

絶対に、typescriptも個別で勉強しておいた方がよかったです。個人的なおすすめはこのサイトです。あと、プレイグラウンドを使ってなんでもconsole.logしてました。

新しいNext.jsチュートリアル

開発で四苦八苦していると、Next.jsの新しいチュートリアルが公開されました。開発は一時停止してこちらのチュートリアルに移りました。

このチュートリアルからNext.js version14に対応したチュートリアルになっているため、結構以前のものと内容が変わっているし、内容が凝っていると思います。 結構本格的なダッシュボードになるので、やっていて面白いです。

要点

Next14で勉強する上で、以下のことを意識すると良いと思います。

• app Router
• server Actions
• 二種類のコンポーネント（サーバーorクライアント）

サーバーアクションすごい

サーバーアクションを勉強したのですが、これがすごすぎてめっちゃ面白かったです。バックエンドをフロントエンドで書けるようになるのでほぼフルスタックエンジニアです。

ただ、サーバーコンポーネント、クライアントコンポーネントという概念が非常に難しかったです。このコンポーネントの差とレンダリングがよくぐちゃぐちゃになります。

今振り返ってみて

今振り返ると、基礎となるtypescript,html,CSSの勉強が圧倒的に足りなかったなと思います。 ただ、今回の勉強方法でも最低限は書けるようになったので、これからの勉強や、来年のメンターでフロントエンドを教える際に参考にしてみてください。

最後に

こんな形で1ヶ月勉強した結果、なんとか最低限の知識をそろえて開発できるようになりました。フロントエンドはどんどん新しい技術がでるのに、古くからあるhtml,CSSなども勉強する必要があり、とても大変なエンジニアだと知ることができました。

フロントエンドは大変なエンジニアですが、とってもおもろいです。ぜひみんなも勉強してみてね。