この記事 is 何？
フロントエンドロードマップなるものがありますが、
項目多いし英語だしムリムリだったので、自分用にまとめました。
知らない単語も多いので ChatGPT さんに質問しつつ、
それぞれ三行まででまとめてみたよ🫶
めっっっちゃ項目多いので、流し見して分からないところだけ
なるほど分からん。って読んでもらえると嬉しいです！
長いので前編・後編に分けます！（それでも長いけど…）
フロントエンドロードマップ
https://roadmap.sh/frontend
フロントエンドロードマップ
えっなんか最初から三行で説明するハードル高いものきた🥺🥺🥺
ふわっとした理解なので説明ってなったら難しいね。
インターネットの仕組み関連
インターネットはどのように機能するのか
- インターネットは、複数のコンピュータが相互に接続されており、情報をやり取りするための仕組み。
- データはパケットと呼ばれるちっちゃい単位に分割されて、それぞれが異なる経路を通って目的地に届くらしい！
- ブラウザやアプリを使って、私たちはウェブページやメール、ファイルなどの情報を送受信できる。すご。
HTTPとは何ですか?
- HTTPは、ウェブブラウザとウェブサーバーがやり取りするための仕組み。
- ブラウザがウェブページをリクエストして、サーバーから返答をもらいます。
- リクエストメソッド（GETやPOSTとか）やレスポンスコード（200や404とか）が使われます！
ドメイン名とは何ですか?
- ドメイン名は、ウェブサイトやメールサーバーなどのインターネット上のリソースを識別するための名前。
- URLの一部として使われてて、ユーザーがウェブページにアクセスするときに入力するあのアドレスのこと。
- 例：
example.com、google.co.jp
ウェブホスティングとは何ですか?
- ウェブホスティングとは、ウェブサイトやオンラインアプリケーションをインターネット上で公開するためのサービス。
- 自分のウェブコンテンツをオンラインで他の人と共有できるようになる〜。
DNSとその仕組みとは?
- DNS（Domain Name System）は、ウェブサイトやドメイン名をIPアドレスに変換するためのシステム。
- ユーザーがウェブサイトにアクセスする時、ウェブブラウザがDNSサーバーにドメイン名を送り、それがIPアドレスに変換される。
- このIPアドレスを使ってウェブサーバーが特定され、ウェブページの表示やデータのやり取りが行われる仕組みらしい。
ブラウザとその仕組みとは?
- ブラウザは、ウェブページやオンラインコンテンツを閲覧するためのソフトウェア。
- ユーザーがURLを入力すると、ブラウザがウェブサーバーにリクエストを送り、サーバーから返されたHTMLやCSSなどのコードを解釈してウェブページとして表示してくれる。
- また、ブラウザにはアドオンや拡張機能もあって、個人が使いやすいようにカスタマイズもできる！google chromeなしでは生きていけない…。
web制作者お馴染みのや〜つ〜
ここは困ることなくまとめました🙆♀️
HTML
セマンティックHTMLの作成
- 文章構造に応じて綺麗にHTML書こう！！！
フォームと検証
- フォームの検証は、ユーザーが入力したデータが正しい形式や要件を満たしているかをチェックするプロセス。
- ブラウザの組み込みの検証機能やJavaScriptを使用して、必須項目の入力やメールアドレスの形式チェックなどを行うことができます。
- サーバー側でも検証が行われることが一般的らしい。（どうやるのかは分からない…。）
アクセシビリティ
- アクセシビリティとは、情報やサービスが、あらゆる人々に理解しやすく利用しやすい状態になっていることを言うよ。
- 身体的・認知的な障害や高齢による制約を持つ人々にも、ウェブサイトやアプリケーションが使えるよね、っていう状態にしておきたい。
- 画像の代替テキストの提供、適切な色の選択、キーボード操作のサポートなど、さまざまな修正や設計上の改善が行われることでアクセシビリティを考慮するよ。
SEOの基本
- SEOはウェブサイトを検索エンジンで上位に表示させるための対策や最適化のことだよ。
- キーワードリサーチやメタタグの最適化、コンテンツ品質の向上などが重要な要素です。
- ユーザーのニーズに合った有用なコンテンツを提供することで、検索エンジンからのランキング向上などが期待できるよ。
CSS
レイアウトの作成
- HTMLは文章構造、CSSはレイアウトを制御するやで。役割が違うやで
レスポンシブデザイン
- PC・SPなどデバイス毎に画面サイズが違っても、いい感じに自動でレイアウトするようにCSSを組むよ。
JavsScript
DOM操作
- JavaScriptを使用してHTML文書の構造やコンテンツにアクセスし、変更するための手法。
-
documentオブジェクトを通じて要素の選択、属性の変更、新しい要素の作成などが可能。 - イベントリスナーを使用してユーザーのアクションに反応したり、アニメーションを制御したりすることができ〜る！
API取得/Ajax
- ブラウザから外部サーバーとデータを非同期にやりとりする手法で、ページの再読み込みなしに動的なコンテンツを取得できる。
- JavaScriptの XMLHttpRequest オブジェクトや、近年では fetch 関数を使用して、HTTPリクエストをサーバーに送信し、レスポンスを取得するよ。
- 取得したデータはJSONやXMLなどの形式で受け取り、それに基づいて動的なコンテンツを生成したり、アプリケーションの状態を更新したりできるよ。QiitaもAPIがあるよ🟢
バージョン管理システム
分かるっちゃ分かるんだけど、違いについては分からんものが多いな〜。
てことで色々と調べてまとめてみました！
Git
- Gitはプログラムの管理に使うツールで、コードの変更を履歴として保存が可能。
- 各開発者は自分のブランチで作業し、後でそれをまとめてプロジェクトに反映させることができるよ。
- 後述するGitHubやGitLabといったプラットフォームを使って、複数の人が協力して効率よく開発できるのがメリットだよ。
ホスティングサービス
GitHub・GitLab
- ソフトウェア開発者がコードを上げることで機能するプロジェクトを管理するためのウェブプラットフォームだよ。
- チーム協力をサポートするために、Issue、プルリクエスト、CI/CDなどのツールが統合されていて、オープンソースプロジェクトやプライベートリポジトリに使われているよ。
- プロジェクト全体の進捗や変更履歴が可視化され、効率的なコードの管理と協力開発が可能だよ。
Bitbucket
- BitbucketはAtlassianが提供しているリポジトリのホスティングサービスで、GitとMercurialのどちらでも使えるよ。
- Atlassianの他のツールと統合が強力で、Jira（プロジェクト管理ツール）やConfluence（協力型ドキュメンテーションツール）と連携して開発とプロジェクト管理を一元化できるよ。
- trelloとも連携できるらしい。
パッケージマネージャー
npm
- npmは、JavaScriptやNode.jsのプロジェクトで依存関係を管理し、パッケージをインストール・公開するためのツールだよ。
- プロジェクトごとに必要なライブラリやツールをパッケージとして管理し、package.jsonファイルに依存関係を記述することで、プロジェクトの一貫性を保つことができるよ。
- コマンドラインを通じて簡単にパッケージのダウンロードやアップデートができ、モダンなJavaScript開発に欠かせないツールの一つです。
pnpm
- pnpmは、JavaScriptのプロジェクトで依存関係を管理するためのパッケージマネージャーで、npmと同じくらい人気があるよ。
- 依存関係をグローバルに管理し共有するので、同じパッケージが複数のプロジェクトで再利用されてディスクスペースを節約できるよ。
- 「ホットノードモジュール」のアプローチを採用し、変更が即座に反映できるようになるよ。
yarn
- npmと同じくJavaScriptパッケージの依存関係管理に使用されるツールだよ。
- Facebookによって開発され、初めからパフォーマンスが重視されています。
- 特に依存関係の解決やキャッシュの効果的な利用が行われ、一般的に高速です。
フレームワーク
Svelte
- SvelteはJavaScriptフレームワークで、実行時のフレームワークのオーバーヘッド（コストや負荷）を最小限に抑えて効率的なコンパイルを行う特徴があるよ。
- コンパイラがコンポーネントを素のJavaScriptに変換するため、ランタイムが必要なく、軽量で高速なアプリケーションを構築できる。
- UIの変更に対して動的なUIを構築するためのコンポーネントや、簡潔な文法を備え、開発者にパフォーマンスとシンプルな記述を提供する新しいアプローチのフレームワーク。
Solid JS
- Solidは、Reactに似たJavaScriptライブラリで、リアクティブなUIを効率的に構築することに焦点を当てているよ。
- 仮想DOMではなく、リアルDOMを使用し、変更があった部分だけをアップデートしてパフォーマンス向上を実現している。
- モダンで柔軟な開発体験を提供し、React開発者にも馴染みやすい機能が備わっているんだ。
Qwik
- Qwikは、Googleが開発したJavaScriptフレームワークで、後述するAngularをベースに高速かつ効率的な開発を目指しているよ。
- サーバーサイドレンダリング（SSR）やプリレンダリングに焦点を当て、初期表示速度の向上を実現している。
Angular
- Angularは、Googleが開発したJavaScriptフレームワークで、大規模で複雑なウェブアプリケーションの構築をサポートしているよ。
- 堅牢なアプリケーション開発やリッチな機能セットが求められる場面で、Angularは強力な選択肢となっているね。
Vue.js
- Vue.jsは、シンプルで柔軟なJavaScriptフレームワークで、導入が簡単で学習曲線が緩やかなのが特徴だよ。
- リアクティブなデータバインディングやコンポーネントベースのアーキテクチャを提供し、小規模から中規模のプロジェクトまで広く利用されている。
- 軽量かつパフォーマンスが良いため、フロントエンド開発者にとって使いやすいツールとして人気があるよ。
React
- ReactはFacebookが開発したJavaScriptライブラリで、仮想DOMを使った効率的なUIの構築が可能なフレームワークだよ。
- コンポーネントベースのアーキテクチャや一方向データフローなど、モダンなUI開発のパターンを提供している。
- 豊富なコミュニティやライブラリがあり、大規模なアプリケーション開発において非常に強力なツールとなっています。
CSSフレームワークなど
Radix UIとshadcn/ui知らなかった〜。
特に後者は新しいんだね、ライブラリじゃないって言うのが面白いな。
Tailwind CSS
- Tailwind CSSはユーティリティファーストなCSSフレームワークで、細かなスタイリングを簡単に行えるのが特徴だよ。
- HTMLクラスに直接スタイルを適用するアプローチで、デザインの柔軟性と保守性を向上させる。
- ドキュメントが充実しており、カスタムデザインやコンポーネントの構築がスムーズだよ。
Radix UI
- Radix UIはモダンでアクセシブルなUIコンポーネントライブラリで、特にドロップダウンやモーダルなどのUI要素に焦点を当てているよ。
- ローカルステート管理やアクセシビリティに配慮し、カスタマイズが容易で、柔軟なUIコンポーネントの構築が可能。
- モダンなWebアプリケーションの構築において、ユーザーエクスペリエンスの向上と開発者フレンドリーなAPIが魅力の一つ。
shadcn/ui
- Radix UIとTailwind CSSをベースに開発された、比較的低レイヤーなUIコンポーネントツールだよ。ライブラリじゃないよ。
- NextjsやVite、RemixにAstroなど様々なプロジェクトで活用できるよ。
CSSアーキテクチャ
BEM
- BEMは、CSSのクラス命名規則で、HTMLとCSSの結びつきを強化し、メンテナンス性を向上させるために設計されているよ。
- ブロック（Block）、要素（Element）、修飾子（Modifier）の3つの要素から成り立ち、クラス名には block__element--modifier のような形式が使われる。
- コンポーネント志向の設計で、疎結合で再利用可能なスタイル付与が可能で、大規模なプロジェクトで一貫性のあるスタイリングを実現するために広く使われている。
CSSプリプロセッサ
- SassはCSSの拡張言語で、変数・ネスト・mixin・関数などの機能を追加してスタイルシートの記述を効率的にするよ。
- 複雑な構造をより簡潔に表現でき、メンテナンス性や再利用性を向上させる。
- プリプロセッサとしての特徴を持ち、コンパイルによって通常のCSSに変換され、とってもよく使われるよ。
PostCSS
- PostCSSは、CSSの処理を行うためのツールで、プラグインを使って様々な処理を実行できるよ。
- ベンダープレフィックスの自動付与、カスタムプロパティの使用、メディアクエリの整理など、柔軟なCSSの変換が可能。
- カスタマイズ可能でモダンなCSS開発の要件に対応し、高い拡張性とパフォーマンスを提供している。
ビルドツール
だいぶん怪しくなってきた！
リンター・フォーマッターくらいしか分からん！
モジュールバンドラー
Vite
- Viteは新しい世代のフロントエンドビルドツールで、めっちゃ速いのがウリ。
- ESModulesに基づいて動いてて、開発中はサクサクリロードでストレス少ない。
- ビルド時にはRollup（と言うモジュールバンドラー）を使って最適化するから、本番環境でもパフォーマンス◎。
esbuild
- esbuildはめちゃくちゃ速いJavaScriptバンドラー・ビルドツール。
- Go言語で書かれてて、多くのJSやCSSのトランスパイルとバンドル作業をミリ秒単位でこなすよ。
- Webpackとか他のバンドラーより桁違いに速いから、ビルド時間短縮したい時にはよき！
Webpack
- Webpackはフロントエンドのアセットをバンドルするのに使う人気のツールだよ。
- JavaScript、CSS、画像などのファイルを依存関係に従ってひとまとめにできる。
- プラグインやローダーが豊富で、カスタマイズ性も高いから、どんなプロジェクトにも合わせやすいのが特徴。
Rollup
- ES6モジュールに最適化されたビルド過程で、ツリーシェイキング（不要なクスポートを取り除く最適化プロセス）を利用して不必要なコードを除外できるよ。
- 高速ビルドと軽量アウトプットが特徴で、ライブラリやフレームワークの開発に適しています。
- JavaScriptエコシステムにおいて、Webpack等の他バンドラーよりシンプルでパフォーマンスが優れたビルドが可能。
parcel
- ParcelはHTMLやJavaScriptなんかのエントリーポイントから依存ファイルを掘り起こして、全部バンドルしてくれる。
- BabelやPostCSS、さらにはSCSSみたいなプリプロセッサも自動でサポートしてくれて、設定がほぼ要らないのが良き！
- キャッシングやマルチスレッド処理を駆使しているから、ビルドがとっても早いし、大きいプロジェクトでも余裕で扱える〜。
前編終わり！
- 最初１記事にまとめようとしたけど、長すぎてとても無理だった…。
- 後編の記事ではテスト、SSRやパフォーマンスなどに触れていきます👐
- 分からない単語を調べて勉強してまた記事にまとめるので、
興味がある人がいれば後編も読んでくださいね、お楽しみに🌷