# 20231221_フロントエンド未経験者が仕事をするためにやった1ヶ月の勉強
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
市之瀬拓実
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
一ヶ月でフロントエンド勉強
}

<br>

## 表示される部分
***サムネイル画像***
{

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [ ] メンバーの趣味
- [x] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [x] HTML
- [x] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [x] JavaScript
- [x] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [x] React.js
- [x] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [x] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] Web-design
- [ ] API関係

---

***以下に本文を記載してください***

## はじめに

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

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

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

## 目指すレベル

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

## ざっくり道筋

reactチュートリアル

↓

react公式ドキュメント

↓

Next.jsチュートリアル

↓

簡易なアプリ開発

↓

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

## react

### reactとは

Next.jsはreactのフレームワークとなっています。そのため、まずはreactの勉強から始めました。
勉強するための教材としては、[チュートリアル](https://react.dev/learn/tutorial-tic-tac-toe)と[reactのドキュメント](https://react.dev/learn/describing-the-ui)を利用しました。まずはチュートリアル、その後ドキュメント読みの順で進めていきました。

### 要点

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

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

### 勉強の仕方

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

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

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

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

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

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

## Next

### Nextとは

次は、[Next.jsのチュートリアル](https://nextjs.org/learn-pages-router/basics/navigate-between-pages)を行いました。こちらも上記のreact同様、ドキュメントにまとめながら進めていきました。こちらのチュートリアルは古いので、下記で述べる最新版のチュートリアルを行うことをおすすめします。

### 要点

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

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

## 簡易な開発

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

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

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

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

### 型難しすぎる

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

つまったポイントは、

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

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

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

絶対に、typescriptも個別で勉強しておいた方がよかったです。個人的なおすすめは[このサイト](https://typescriptbook.jp/)です。あと、[プレイグラウンド](https://www.typescriptlang.org/play)を使ってなんでもconsole.logしてました。

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

開発で四苦八苦していると、Next.jsの[新しいチュートリアル](https://nextjs.org/learn/dashboard-app)が公開されました。開発は一時停止してこちらのチュートリアルに移りました。

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

### 要点

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

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

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

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

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

## 今振り返ってみて

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

## 最後に

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

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

****