# 20250626_1カ月フロントエンド勉強したよ
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

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

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

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
ウォルト
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
NUTMEGのメンター制度における，勉強会で約1カ月間フロントエンドを勉強しましたことについて振り返ります．
}

<br>

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

}

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

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

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

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

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

---

***以下に本文を記載してください***
## はじめに
はじめまして．NUTMEGに所属して2カ月が経った，B3のウォルト（中田）です．この記事では，NUTMEG内で実施されているメンター制度における勉強会で，約1カ月間フロントエンドを勉強したことについて振り返ります．

## 勉強内容
NUTMEGには，フロントエンド・バックエンド・デザイン・インフラ・DS(Data Science)の5つの領域があります．私は，フロントエンド・バックエンド・DSに興味がありました．
どのプロジェクトに配属されるとしてもフロントエンドを知っていて損はないということで学習を始めました．
メンターのたかちゃんさんが作成した「フロントエンドカリキュラム」に沿って学習を行いました．

### まずはHTML・CSSから
HTMLはWebページの骨格を作り，文章や画像などの要素に「ここは見出し」「ここは段落」というようにWebページの枠組みを作ります．
そしてHTMLで作られた骨格に対して，CSSでは文字の大きさや，レイアウトといった「見た目」を整えます．
この2つはあらゆるWebページで使われており，フロントエンドの基本であり，Webページの人に見える部分の大部分を担っている重要な要素です．

今回は，
【無料・初心者向け】Webサイトの作り方と準備|Webデザインの教科書
（https://web-design-textbook.com）
というサイトを参考に学習を行いました．
私は，以前少しだけHTMLとCSSを触った経験があったため，「こんなHTMLタグあったぁ」と少し懐かしい気持ちになりながら勉強を進めました．
忘れていた部分も多くありましたが，改めて基礎を学ぶことで，Webページの構成に対する理解がより深まったように感じます．

#### 意外だったCSS


Webサイトでたまに見かける，リスト項目の左側に引かれている縦線．
「どうやって実装しているのだろう」と気になっていました．
これは，左側の枠線を太くしているだけで，想像している以上にシンプルなもので驚きました．
たった１行で書ける

border-left: solid 10px #cccccc;

### TypeScript
次にTypeScriptの勉強を行いました．
Webページに動きを付けるために，JavaScriptという言語が広く使われています．
TypeScriptはJavaScriptの上位互換の言語であり静的な型付けが可能となっています．
静的型付けは，変数や関数の引数に「これは数値(number)」「これは文字列(string)」といったように，あらかじめ「型」を定義しておく仕組みです．
これにより，意図しないデータが代入されるといった問題を発見しやすくなり，コードの意図が明確になります．

「TypeScript 開発 入門 環境構築からアプリ作成まで」(https://zenn.dev/ippei523/books/6b5c153743be13)，
「TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜」
(https://typescriptbook.jp/)といったサイトを参考に学習を行いました．

### React
Reactは，UI(ユーザーインターフェース)を構築するためのJavaScriptのライブラリの１つです．
Webサイトやアプリケーションの見た目部分を作成することができ，コンポーネントベースで開発を行うことができます．
React入門(根本的なことからわかりやすく解説)(https://zenn.dev/hinoshin/articles/77f06d10940efe)
この記事を参考にして，Reactの基礎を学習しました．JSXというReactでの記法，コンポーネントにデータを渡すProps，コンポーネントの状態を管理するためのStateについてをサンプルプログラムを実行することで理解しました．

### 卒業課題
カリキュラムの最終課題を実施しました．
最終課題の内容は，FigmaでデザインされたWebページをReactで再現するといった内容でした．
最初の内は，要素の大きさの指定を安易にpxで指定してしまい，レイアウトが崩れるなどのミスはありましたが，無事完成させることができました．
特に１ページ目の作成では，要素をどう配置し，どのようなクラスに分割すればよいか，悩む時間が多かったです．
しかし，２ページ目の制作に取り掛かるころには，１ページ目の経験から，どのように要素を配置すればよいかがすぐに頭に浮かび，製作時間がかなり短くなったことを実感しました．
**作成したWebページ1**
**作成したWebページ2**

## おわりに
このブログを書いている途中に感じたことを書いていきます．
このブログを書くにあたって，フロントエンドの勉強に使用したWebページをいくつか見返しました．
すると，自分の中で知識の定着度に大きな差があることに気づきました．
例えば，フロントエンドの卒業課題で使用した，HTMLやCSSに関する知識はほとんど頭に残っていました．
一方で，TypeScriptについては，忘れている部分がしばしばありました．
この違いが発生した要因は，**「自分の頭で考えてアウトプットをしたかどうか」**なのだと思います．
HTMLやCSSは卒業課題で自分自身で試行錯誤しながら書いていたが，TypeScriptはWebサイトを読みサンプルプログラムを写経していただけでした．
知識として「知っている」ことと，それを使いこなして「できる」ことには，大きな壁があります．
その壁を超えるために必要なのが，試行錯誤っしながらでも自分の手で何かを作るという実践，つまり「アウトプット」なのだと，このブログを書きながら改めて強く認識させられました．
これからも，学んだことを積極的に形にしていくことを大切にしていきたいです．