# 20230330_フロントエンドってどうやって強くなるの？教えていまいまい！
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

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

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

<br>

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

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
フロントつよつよになる方法について
}

<br>

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

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

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift
フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter
ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma
分野
- [ ] Web-design
- [ ] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] API関係

---

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

なんだかんだNUTMEGはフロント人材が少し不足しつつあります。
フロントエンドをこれから勉強する後輩に向けて書きました。

# 書け！慣れろ！以上！

~ fin ~

# くわしく

ごめんなさい

## viewについて

人に見える箇所の実装をviewと言います。ザ・フロントな部分です。
これに関しては、しょうみプログラミングというよりはパズルゲームに近いです。

冗談ではなくて、テトリスやパズドラとあまり変わらず、書いて慣れるしかないと思います。逆に慣れたら脳死で書けます。

例えとしてヘッダーを考えてみます。


これはどういうDOMになるか考えてみましょう。
DOMはHTMLとかで見る下のような入れ子構造のことです。

<div>
    <p>test</p>
    <div>
        <p>hogehoge</p>
    </div>
</div>

ヘッダーをDOMにしたいので、ざっとそれぞれの要素をタグに置き換えて考えてみましょう。


赤枠がdivタグ、緑枠がpタグやらaタグです。
おそらく大体こんな感じになると思います。（勘）
Portfolioをdivで囲むかどうかは任せます。ロゴなので、ロゴ画像などが追加されるのを想定してdivで囲んでいます。
**これができたら、あとは書き起こすだけです。**

<div>
    <div>
        <div>
            <p>Portfolio</p>
        </div>
        <div>
            <p>About</p>
            <p>Work</p>
            <p>Link</p>
        </div>
    </div>
</div>

上のコードの入れ子構造と、ヘッダーの図の入れ子構造が一致しているのがわかるでしょうか。これが僕がview部分をパズルゲームと言っている理由です。

**実装したいviewのどの部分がどの塊になっているかを取られることができれば、自然とコードを書くことができます。**

あとはCSSを当てるだけですが、これも慣れで、全体の内容を上下左右中央揃えにして、ロゴとメニューは端に寄せて、メニューは1remごとの隙間を開けたらそれっぽくなると思います。
大体はflexやgridが解決してくれます。

実際にコードに起こすと以下のページみたいになります。

https://codepen.io/imaimai17468/pen/GRXPyer

### Viewに強くなる方法

- ただひたすら書きまくること
- パズドラと同じ、俺はできんけど
- 個人開発をしまくる
- 自分で考えてコードを書く
- CSSの沼に落ちて無限に苦しむといい
- ~~競プロをやる~~
- アルゴリズムが身につくってだけじゃない
- 自分の思考、文字をコードに落とし込む速度が段違いに上がる

## Logicについて

「ViewとLogicを分離する」とよく言われるLogicくんです。
apiから受け取った値を処理したり、フォームなどで入力した値を処理したり、フロント側で処理する部分を指します。


フロントは一見人に見える部分を作るだけに思われがちですが、**それらを描画するために必要な情報を、裏でapiから送受信して処理するのもフロントの仕事です。**

フロントエンドはこいつが沼です。
これに比べればviewなんて赤ちゃんです。
ロジックになると途端に「プログラミングぽさ」が増します。

Logicの例を挙げます。

### api処理

- apiから受け取った値を、フロントで表示する形にコネコネして表示する
- apiに送るために、formなどから得た情報を指定の形にして送信する
- エラーハンドリング
- 正常にget / postできたか、できなかった場合はどうするか

### 型定義

- apiに送るデータが本当に指定の型になっているか
- 表示したいデータの型がundefinedになり得ないか
- なり得るならそのハンドリングはなされているか

## Logicに強くなるには

- **プログラミング**に慣れる
- C言語、JavaScript、TypeScript、Python、なんでもいい
- プログラミングの基礎文法の流れを知っていれば最低限何とかなる
- 単純にプログラミングが好きなほどLogicは強い
- Arrayのprototype関数をしる
- TypeScriptのロジックは大抵map関数とかfilter関数とかが役にたつ
- for文で10何行かかるコードが1行になることだってある
- 型についてしる
- そのデータはstringなのか、intなのか、booleanなのか
- nullにしとくのか、undefinedじゃないか
- 型定義で型安全に
- 型推論で開発を安全に
- ~~競プロをやる~~
- プログラミングの問題を解くことに慣れることができる
- アルゴリズム知識は単純に強い
- 「この実装したいな〜」からの本実装までが早くなる

# HTML/CSS+JSの立ち位置について

僕はこの記事で、HTML/CSSは簡単だぜ〜な旨の文章を書いています。
ただ、簡単だからといって、これを飛ばしてReactやVueを触ることはお勧めしません。

**それが簡単であることとなおざりにしていいことは別**だからです。

HTML/CSS+JSの知識は、すべてのフロント知識の根底に紐づいています。
なので、**これをやらずに先端的な技術を学ぶと、挫折する確率が高いです。**

どの技術にしても、チェーンの繋がってない、関係性の薄い技術に急に触れようとすると、挫折率が高くなることを覚えておいてください。

といっても、最近の技術はチュートリアルが充実していて、初心者でも触れやすいようになっているので、とっかかり自体は掴みやすくなっています。

ですが、その技術をより深く潜ろうと思うほど、**根底にあるHTML/CSS+JSについての知識量が露呈していきます。**

軟弱な地盤に立派な家は立たないので、基礎知識を固めることはとても重要です。

## もっと具体的に

CSSを使わず簡単にスタイルを記述する方法がいくつもあります。

- TailwindCSS
- MaterialUI
- ChakraUI
- Mantine

これらのライブラリは、`<Card>`とか`<Button>`とかのコンポーネントがあり、スタイルを書かなくてもおしゃれなUIを実装することができます。
(TailwindCSSはclassNameに記述するのでちょっと違う)

でも、それらをカスタマイズしたい時、結局はstyleを指定してあげなくてはいけません。
これらのライブラリにはあらかじめ、カスタマイズするために、CSS likeな書き方をするための方法があります。

例えば、**中にある要素を縦に中央揃えで整列させたい**時、TailwindCSSなら

<div className="flex flex-col items-center">
    <div>hoge</div>
    <div>huga</div>
</div>

MaterialUIなら

<Box sx={{dispaly: 'flex', flexDirection: 'column', alignItems: 'center'}}>
    <Box>hoge</Box>
    <Box>huga</Box>
</Box>

のようになります。
CSSに慣れていると1分足らずでかけますが、そうでないと普通に悩みます。
結局、先端的技術であってもCSSの知識は必要であることがわかります。

ちなみにゆめみのフロントエンドコーディングテストでは、CSSの知識を見るために、**こういったCSS系のライブラリの使用を禁止されています。**

## 誤解を生まないために

別に、`HTML/CSS+JS`もできないのに新しい技術を触るな！😠という訳では全くありません。新しい技術にたくさん触ることは重要ですし、いつまでも足踏みしている暇はないと思います。

**基礎は大事だという単純な話だと捉えてください。**

サービス開発でReactなんかを学びながら、暇な時に、ポートフォリオなんかをHTML/CSS+JSなんかで書いてみたりして、成長した頃に、それをReactなんかでリプレイスしてみてください。

最初にReactを触った時より基礎ができてきて、少しは書きやすくなってるんじゃないかなと思います。

# フロントを怖いと思わないで

色々と難しいことをいってきましたが、フロントはそこまで怖いものじゃありません。基本的に結果は視覚的に現れますし、バックエンドより直感的に書けると思います。

それに、量子コンピュータやディープラーニングの最先端よりかは、**よっぽど一般人でも挑戦しやすい技術でもあります。**

# たくさんの技術を学ぶことについて

**学んで損のある技術はありません。**

テストで点を取るために学んだ行列の回転が、ゲームの3D処理の原理と関わっていたり、Pythonが使えるからという理由で適当に採用したFastAPIに、実はSwaggerが標準搭載されているのを後から知ったり、**どの技術がどれと繋がっているのかは、とても判断できません。**

**僕が今フロントエンド1つの技術に特化できているのは、その裏で何十もの技術を殺してきたからに他なりません。**

フロントエンドはweb開発の基礎となる技術なので、ぜひ触れてみて欲しいなと思います。

これは技術以外にも言えます。思いつきで加入したバイト先が協賛企業になってくれたり、**人やイベントでの繋がりだって何に発展するかわかりません。**

NUTMEGという巨大な支援を背に、この先の１年というの短い間も、アクションを起こし続けていきたいなと思います。

# おわりに

**NUTMEGに入ったみんなは特急券を持っています。**

成功の反対は何もしないことだって、好きな厳ついラッパーが言ってました。
技術に自分から触れることを恐れないでください。

金を稼げるレベルまではいけなくとも、何か1つアウトプット行くところまでは、ある程度の技術は独学でいけるものと思っています。

**先輩から振られた技術やタスクだけじゃなく、気になった技術を積極的に触っていって欲しいなと思います。**
そして、触れた経験から、こんなものが作れそうだな、活かせそうだなというアイデアを生み出して、個人制作なりNUTMEGのプロジェクトなりに落とし込んでくれたらなと思います。

以上、3000文字以上のポエムを読んでいただきありがとうございました。