フロントエンド全体像‼︎(この辺は知っておいた方がいいもの)

# この記事の概要
フロントエンジニアを目指す人向けに書いていきます。
そのためにまずは***全体像から把握していく記事***となっています。
***自分の考えも書きます***し、***なぜこの技術を使うのか***も書いていきます。
***技術選定の参考***にして欲しいです。


# フロントエンドエンジニアが熱い理由
結論として、***フロントエンド主体の開発が増えていき、活躍の場が多い***からです。
***ITの知見がない顧客からも使いやすいサービスの需要があり、ユーザーの近い立ち位置で開発ができます***。

バックエンド、フロントエンド、インフラを全部経験してきて、エンジニア教育の実績がある方は自分に対して、フロントエンドエンジニアをおすすめされました‼︎
***目に見えて成果がわかるし、1番面白い***とおっしゃってましたが、自分は業務で少し Next.jsに関わりましたが、
もっと専門的にできるようになりたいと思えました😀。

ReactやVue.jsの開発も増えてきていますし、TypeScriptの導入も増えてます。
SPAの開発も増えてきました。
自分が今いる現場もTypeScript、Reactにリプレースを始めているとこです。

# 学ぶにあたって
フロントエンドはツールなどが多すぎて、全部学んでいたらキリがないです。
***なぜその技術を使うのかを知ることが大切***です。

# フロントエンドのツール群

## Node.jsとは？現場に入れるメリット
以下の記事を読んでください。

https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

以下4点が導入メリットです。

1.***非同期処理を効率的に実行でき、高速な処理が可能***です。

2.***JavaScriptをフロントエンドからバックエンドまで使える***ため、
***開発者が同じ言語とツールセットで開発***できます。

3.***イベントループモデルを採用***し、***システムやソフトウェアが負荷や要求の増加に柔軟に対応(スケーラビリティ（Scalability)でき、軽量な処理が可能***です。これにより、大規模なアプリケーションでも効率的に処理ができます。

4.***npmと呼ばれるパッケージマネージャーを通じて、豊富なライブラリやフレームワークが利用でき、開発効率が向上***します。

# npm yarn
```npm（Node Package Manager）```と```Yarn```は、
JavaScriptで***パッケージ（ライブラリやツールなどの再利用可能なコードのまとまり）***を***管理するためのツール***です。

- ```npm```
イメージとして、***JavaScriptのプログラムで必要な追加の部品（パッケージ）を手に入れるための大きな倉庫や市場のようなもの***です。
JavaScriptのプロジェクトで使えるさまざまなパッケージを提供していて、
プロジェクトを始める際に、***npmを使って必要なパッケージを簡単にダウンロードして使うことができます。***
また、***どのパッケージが必要かもを管理***することもできます。


- ```Yarn```
イメージとして、***npmの強化版で、パッケージをより高速にダウンロードし、効率的に管理するツール***です。***npmよりも高速で、セキュアなパッケージのダウンロードと管理を提供***してます。また依存関係の解決やキャッシュ機能など、さまざまな機能を備えていて、そのため、大規模なプロジェクトやパフォーマンスにこだわる場合には、Yarnを選択することが多いみたいです。

## コンパイラー、モジュールバンドラー(Babel、Webpack)
- ```Babel(コンパイラ)```

イメージとして、***新しいバージョンのJavaScriptを古いバージョンに変換する翻訳者のようなもの***です。JavaScriptは常に進化しており、新しい機能や構文が追加されますが、***古いブラウザや環境ではこれらの新機能がサポートされていないことがあります***。***Babelを使うと、開発者は最新のJavaScriptコードを書くことができますが、Babelがそれを古いバージョンに変換***してくれます。これにより、***古いブラウザでも新しい機能を使ったコードを実行***することができます。

- ```Babel(モジュールバンドラー)```
イメージとして、***複数のJavaScriptファイルやリソースを1つにまとめるパッカーのようなもの***です。大規模なJavaScriptプロジェクトでは***複数のファイルに分かれているコードやリソース（画像、CSSなど）を効率的に管理するためのツール***です。Webpackは、これらのファイルをまとめて1つまたは複数のバンドルと呼ばれるファイルにまとめます。


つまり、
***Babelは新しいJavaScriptのコードを古いバージョンに変換してくれる翻訳者***であり、***Webpackは複数のJavaScriptファイルやリソースを1つにまとめて効率的に管理するパッカー***です。


## TypeScriptとは
***JavaScript(JS)を拡張したプログラミング言語***です。
静的型付け言語なのが特徴です。

## TypeScriptで解決できること
1.***型が定義されるので他のメンバーがわかりやすい***
2.***バグを前もって検知できる***
3.***VSCodeで自動補完できる***

最近だとTypeScriptを使った現場が増えてきたので学んでおいた方がいいです。

https://qiita.com/Hashimoto-Noriaki/items/d501797377f5bcfe4c4d

## Vue.js、Angular、React
1.```Vue.js```
- ***コンポーネントに主眼を置いたUI構築***
- ***JSのフレームワーク***
- ***単一ファイルコンポーネント(HTML、CSS、JavaScriptを1つのファイルにまとめてコンポーネントを定義)***

***Vue.jsをベースとしたJavaScriptフレームワーク***が```Nuxt.js```です。

2.```Angular```
- ***コンポーネントに主眼を置いたUI構築***
- ***JavaScriptのフレームワーク***
- ***単一のフレームワークでルーティング、フォーム処理、HTTPクライアントなどの機能を提供***

3.```React```
- ***UI構築のためのライブラリ***
- ***仮想DOMにより、パフォーマンスを向上***
- ***データの流れが一方向であることにより、アプリケーションの状態管理が容易***
- ***JS構文として記述***
- ***変更しやすい***

***3つに共通していることは、コンポーネント指向***です。
コンポーネント指向のフレームワーク、ライブラリを使うことで、
フレームワーク、ライブラリを使うことで、コードベースの一貫性や保守性を保てます。

# Reactのコンポーネント設計を学ぶには(smartHR社)
Reactのコンポーネント設計を学ぶのに、smartHR社が公開しているUIのコードがいいみたいです‼︎

https://github.com/kufu/smarthr-ui

# Next.js、Nuxt.js
Next.jsについてです。

https://qiita.com/Hashimoto-Noriaki/items/600353ebb34adc05b0e0

Nuxt.jsはこの記事を参考にしてください。

https://techmania.jp/blog/javascript0009/#outline__2_1

## Redux
***JavaScriptのための状態管理ライブラリ***です。
Reactと組み合わせて使用されることが一般的ですが、
***他のフレームワークやライブラリとも統合***できます。

これを使うことで、***アプリがどのように動作し、どのように見えるかを管理***する一連のルールや手順を提供してます。

Reduxを理解するために必要な基本的な概念です。

|レイヤ|役割|
|-----|----|
|***Action***|アプリ内で何かが起こったときに、その情報を運ぶためのものです。たとえば、ボタンをクリックしたり、テキストを入力したりすると、それがアクションとして認識されます。|
|***Dispatch***|アクションを送るための方法、つまり、何かが起こったときに、それをReduxに知らせる方法です。|
|***Store***|アプリ全体の情報を保持する場所で、この情報には、ユーザーが入力したデータや現在の画面などが含まれます。|
|***View***|UIそのもので、Storeの変更通知を受け取ります。ViewからActionも発行されます。|

## Reduxで解決できること
データの管理や状態の追跡に関するさまざまな問題が発生します。Reduxは、これらの問題を解決するための手段です。

1.```データの管理``` 
アプリはたくさんのデータが使われすが、これらのデータを効果的に管理し、整理します。
ex)
ログイン情報やショッピングカートの内容など

2.```状態の追跡```
ユーザーがボタンをクリックしたり、フォームに情報を入力したりすると、画面が変わったりします。Reduxは、その状態を追跡し、必要に応じてデータを更新します。

3.```データの流れを整理```
データがどのように動いているかを理解することが重要で、データの流れを整理し、予測可能な方法で処理します。

# React Router
***Reactアプリケーションでページ間の移動やナビゲーションを管理するためのライブラリ***です。

Reactアプリケーションはウェブサイトやウェブアプリケーションのようなもので、複数のページがありますが、そのアプリケーションの中で、***ユーザーが別のページに移動したり、リンクをクリックして異なるコンテンツにアクセスしたりする際のナビゲーションを管理***します。

ex)
ウェブサイトのホームページからブログページに移動したい場合、
React Routerを使ってブログページのリンクを設定します。
そしてユーザーがそのリンクをクリックすると、***React Routerがブログページに遷移するようにしてくれます***。

React Routerを使うことで、***ページ間の移動やリンクの管理が簡単になり、UXが向上***します。

# CSS-in-JS
***JavaScriptコード内でスタイルを定義し、適用する方法***です。
CSS-in-JSでは、***JavaScriptの中にスタイルを記述することができます***。

こうして、***スタイルとコンポーネントのロジックを同じ場所にまとめる***ことができます。

ex)
Reactアプリケーションでは、各コンポーネントに関連するスタイルをそのコンポーネントのJavaScriptファイル内に記述することができます。


# Sass
***CSSの拡張言語であり、より効率的にスタイルシートを記述するためのツール***です。

ウェブサイトやウェブアプリケーションは、見た目やスタイルがHTMLとCSSで定義されていて、通常のCSSでは、スタイルの記述が繰り返しになったり、複雑になったりすることがあります。***Sassは、これらの問題を解決し、CSSの記述をより効率的***にします。


Sassでは、以下のような機能が提供されてるみたいです。

1.```変数``` 
スタイルで使用する値を変数として定義することができ、色やフォントサイズなどの値を一箇所で管理しやすくなります。

2.```ネスト``` 
CSSのセレクタをネストさせることができ、HTMLの構造と同じようにスタイルを組織化することができます。

3.```ミックスイン``` 
スタイルの一部を再利用可能なブロックとして定義することができ、同じスタイルを複数の場所で使い回すことができます。

4.```継承``` 
スタイルの共通部分を抽象化して別のスタイルに適用することができ、コードの重複を減らし、保守性を向上させます。

以下の記事も読んでみてください。

https://qiita.com/f-ono/items/3e947c32dc0a35d0f77d


# Prettier、ESLint
***静的解析ツール***です。つまり***コードの品質やスタイルを維持するためのツール***です。

- ***Prettier***
イメージとして、***プログラムのコードを見やすく整形してくれる***美容師のようなものです。コードを書くときに自動的にコードを綺麗にしてくれます。これにより、コードが統一され、読みやすくなります。


- ***ESLint***

イメージとして、***コードの品質やエラーをチェックしてくれる、コードの監視役***のようなものです。バグや品質の低いコードを防ぐためにルールやガイドラインがありますが、ESLintは、そのルールに従ってコードをチェックし、潜在的な問題やエラーを見つけてくれます。これにより、プログラマーは品質の高いコードを書くのに役立ちます。


# テスト(Jest)
Mocha、Karmaがあるが、本を読んだ感じだと```Jestがベスト```な感じがします。
Jestは***テストフレームワーク***で、JavaScriptプログラムの***テストを作成、実行、管理するためのツール***で、***プログラムの品質を確認するためのツール***です。***プログラムが期待どおりに動作するかどうかを自動的にテストすることができ***ます。

# Storybook
***共通で使うコンポーネントをカタログ化***したものです。
フロントエンドフレームワークを使用して作成された***UIコンポーネントを開発、テスト、ドキュメント化するためのツール***です。
アプリケーションで使う部品や機能（コンポーネントと呼ばれるもの）を作って、その見た目や使い方を試すことができます。

ex)
ボタンやメニュー、入力フォームなどがコンポーネント


https://storybook.js.org/

https://zenn.dev/fullyou/articles/853b77a3ce9144

### StoryBook導入メリット
1.```可視化```
***デザインパーツ（ボタン、フォーム、メニューなど）を見える形で整理でき***、
どのようなパーツがあるかを一目で確認できます。

2.```テストが簡単になる``` 
***各パーツが期待通りに動いているか、簡単に動作チェックできます***。

3.```情報共有ができる```
デザイナーや開発者は、Storybookを通じて***デザインや動作に関するアイデアを共有し合うことができ、みんなが同じページで作業しやすくなります***。

4.```コミュニケーション```
***チーム内でのコミュニケーションを促進***し、コメント機能やフィードバック機能を使って、アイデアや意見を共有し合えます。

5.```作業効率の向上```
デザインパーツの再利用が簡単になり、***同じパーツを何度も作り直す必要がなくなり、作業効率が向上***します。

Storybookを導入することで、ウェブやアプリの開発作業がスムーズになり、チーム全体がより効率的に作業できるようになります。

### 情報共有の大切さ
Web開発の現場では、```情報共有の施策はStorybookに限らず、どの現場でも求められています```。
***情報共有の施策を提案すると技術力無くても活躍できそう***ですね。


# CI、CD
- ```CI```
***継続インテグレーションのことです。テストの自動実行***のことです。

- ```CD```
***CIを実行するためのツールで、CIに問題なければテスト実行後に本番環境のリリースまでやります***。

# GitHubActions
***GitHub上で実行される自動化ワークフローを提供する機能です。これにより、コードのビルド、テスト、デプロイなどの一連の作業を自動化***することができます。アプリケーションの開発およびデプロイを容易にすることができます。


# OpenAPIを用いたスキーマ駆動開発(Swagger)
以下の記事を読んでみてください。

https://qiita.com/Hashimoto-Noriaki/items/8695e6c290519f3d7670

# HTMX(世界で流行っているみたい)

https://qiita.com/twrcd1227/items/7bce18167fb02ec22729



# 参考資料

https://www.amazon.co.jp/フロントエンド開発入門-プロフェッショナルな開発ツールと設計・実装-安達稜-ebook/dp/B08SQQWPDW?__mk_ja_JP=カタカナ&crid=38WRN2LUCPHMN&keywords=フロントエンド開発入門&qid=1644680499&sprefix=フロントエンド開発入門,aps,203&sr=8-1&linkCode=sl1&tag=read007hhd-22&linkId=82fd07557f56ff83e09b2c3975020618&language=ja_JP&ref_=as_li_ss_tl

https://read-engineer.com/2021/01/07/frontend/#index_id3

ChatGPT