この記事は、フラー株式会社 Advent Calendar 2023 の 16 日目の記事となっています。15 日目は**@bearone236**さんによる「PaLM2 を用いた AI チャット開発 (ハンズオン形式)」でした！

はじめに

はじめまして。長岡技術科学大学の実務訓練でお世話になっている、市之瀬拓実と申します。
私はフロントエンド未経験だったのですが、現在はNext.jsを利用してウェブサイトを作成しております。最初の一ヶ月が勉強期間として与えられたので、その期間にどのような勉強をしていたのかを綴っていこうと思います。

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

目指すレベル

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

ざっくり道筋

reactチュートリアル

↓

react公式ドキュメント

↓

Next.jsチュートリアル

↓

簡易なアプリ開発

↓

Next.jsの新チュートリアル

react

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

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

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

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

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

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

Next

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

簡易な開発

Next.jsのチュートリアルまで作成したので、簡易なアプリを作成していきました。
これまで行ってきたチュートリアルやドキュメントは、全てJavaScriptで記述されていました。ですが、実務ではtypescriptを用いることが決まっていたので、まったく触ったことがなかったのですが利用してみました。

この実際の開発が、この一ヶ月で一番勉強になったと思います。
自分で一から作ることで、実際の仕事に近い開発が行えました。

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

typescript以外にも学んだはずのことがまだ身についておらず詰まることが多々ありました。一番詰まったのは、コンポーネントを作ることでした。今までずっとfunctionを用いていたのに、調べた記事でReact.FCなどを用いているものが多く、まずはここでつまづきました。また、引数への型の渡し方などが理解しきれておらず、ここでも時間を使いました。

何事も、手を動かさないと学ばないと改めて実感しました。

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

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

このチュートリアルでは、バージョン14に変わったことによるサーバーアクションを押しているように感じました。前回のチュートリアルよりもこったものが作られるので、やっていて結構楽しいチュートリアルでした。また、App Routerなどの基礎となる技術についても学べました。どこが大切なのか、なぜ大切なのかがわかりやすかったため、とても良いチュートリアルだったと思います。

このチュートリアルが終わった日に1ヶ月も終了したので、なんとかぎりぎりやれるところまでできたと思っています。

今振り返ってみて

もし今もう一度勉強しろと言われたら、上記の勉強以外にもhtml,CSSをしっかり勉強する時間をとればよかったなと思います。CSSは奥が深すぎてまだまだわからないことだらけなので、これからの実務訓練期間で学んでいきたいと思います。

最後に

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

だからこそ、フロントエンド未経験者を4か月実際の業務に携わらせていただけるフラー株式会社に心から感謝しています。ほんとにありがとうございます。

続いて、フラー株式会社 Advent Calendar16 日目は、@devKyousuke さんの「visionOSで簡単なアプリを１つ作ろう」です！