この記事の概要

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

フロントエンドエンジニアが熱い理由

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

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

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

学ぶにあたって

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

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

Node.jsとは？現場に入れるメリット

以下の記事を読んでください。

以下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を使った現場が増えてきたので学んでおいた方がいいです。

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のコードがいいみたいです‼︎

Next.js、Nuxt.js

Next.jsについてです。

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

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

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

Prettier、ESLint

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

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

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

テスト(Jest)

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

Storybook

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

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

StoryBook導入メリット

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

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

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

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

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

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

情報共有の大切さ

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

CI、CD

CI
継続インテグレーションのことです。テストの自動実行のことです。
CD
CIを実行するためのツールで、CIに問題なければテスト実行後に本番環境のリリースまでやります。

GitHubActions

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

OpenAPIを用いたスキーマ駆動開発(Swagger)

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

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

参考資料

ChatGPT