1. はじめに

この記事はNuco Advent Calendar 2024の20日目の記事です。

この記事では、2024年最新のフロントエンド開発に必要な知識を得られるおすすめ資料を初心者向けにまとめます。
これからフロントエンド開発を始めたい人はもちろん、ベテランエンジニアの方でも役に立つ情報もありますので、ぜひ目を通してもらえると嬉しいです。

2. フロントエンドの基礎

HTML

Webページの構造を作る言語で、見出し、段落、画像、リンクなどを配置するために使います。
フロントエンド開発をする以上、ブラウザでHTMLを表示する、という仕組みから離れることはできません。少しでもHTMLの知識に不安がある人は、以下の資料で知識の再確認をすることをお勧めします。

文系大学生のためのHTML／CSS入門

HTMLとCSSの基礎はもちろんのこと、IT用語の注釈など情報系の知識がない人でもとても読みやすい内容になっています。実際の出力結果の画像が掲載されていて、直感的にコードを理解することができます。章末にCSSに関する小技やCSSプロパティの早見表までついて、この資料だけで一気に中級者まで駆け上がれます。

HTMLの基本 - ウェブ開発を学ぶ

HTMLの基本構造や要素が網羅的に掲載されています。HTML文書の必須要素や、画像、見出し、段落、リスト、リンクの使い方など広い範囲でカバーしていて、実際の業務でHTMLを扱う際の虎の巻のような使い方ができます。前述の資料から一歩踏み入って、ユーザーのアクセシビリティについてもまとめられており、より実践的なHTMLの使い方や考え方を学ぶことができます。

CSS

ページの見た目を整えるために使う言語。文字の色やサイズ、レイアウトを設定します。モダン開発現場においては、後述のライブラリの充実も相まって、直接一から書く機会は減ってきてはいますが、細かい調整や、カスタマイズをしたいときに、知識の下地がないと全く太刀打ちできないので、基礎的なところはしっかり押さえておきましょう。

【初心者向け】CSSが上手くなるちょっとしたポイント

前述の資料などでCSSの基礎を学び、実際にWebサイトを作ろうと思っている人におすすめの資料で、序盤に躓きがちな、「思った位置に要素を配置できない」問題を解決してくれます。脱初心者を目指しているフロントエンジニアは、Web制作をする上で頭の隅に留めておきたい内容ですね。

CSS入門 - ウェブ開発を学ぶ

HTMLの基本と同じサイトで、CSSについても網羅的に掲載されています。CSSはHTMLよりさらにスタイルや構文が多いので、このような網羅資料はすぐに確認できるようにしておくと、開発がとてもスムーズに進みます。

CSSのクラス名を決めるときに使うリストをつくりました

cssのクラス名を作成する際に役立つ英単語がまとめられています。上二つに比べると補助的な立ち位置にはなりますが、実際に開発する上で、「クラス名どうしようかな..」という瞬間は必ず発生するので、この資料でクラス名を即決し、スピーディーに開発を進めましょう！

JavaScript

ページ内での動作やインタラクションを制御する言語。ボタンをクリックしたり、フォームを送信したり、動的なコンテンツを表示したりできます。HTML・CSSと並ぶ三大必須要素で、後に紹介するライブラリ・フレームワークも、基本的にJavaScriptの知識がないと使えないので、これができないとフロントエンドエンジニアとは言えないと言っても過言ではないほど重要な言語です。

JavaScript Primer - 迷わないための入門書

JavaScriptの基礎から応用までを「なぜそうなるのか？」を重視して解説している、初心者から中級者向けの資料です。基礎を確実に固めて、理解しながら実践に繋げたい人にとって必読の内容です。JavaScriptの学習に迷ったら、まずこのサイトを活用して効率的にステップアップしましょう！ブラウザ上で動かせるエディタもついていて、この資料だけで、基本文法は学習が完結するのでおすすめです。

TypeScript

JavaScriptのコードに型（type）を追加して、エラーを早めに発見しやすくした言語。JavaScriptとほぼ同じですが、より安全でエラーが少なくなるように設計されています。モダンな開発現場ではJavaScriptを完全に喰っていおり、各種フレームワークも最近ではTS準拠であることが多々あります。今からフロントエンドエンジニアとして活躍するなら必須の言語なので、以下の記事でしっかり基礎を学びましょう！

TypeScriptチュートリアル -環境構築編-

インストール方法や設定ファイルの内容などの開発環境のセットアップからHello Worldの実装、クラスや型の定義まで具体的な手順で説明されており、迷うことなく進められます。また、自動コンパイルやリロード機能の設定が含まれており、実際の開発に近い環境が整えられるため、これからTypeScriptで開発を始める人にまずお勧めしたい記事です。

TypeScript入門 『サバイバルTypeScript』

上述のチュートリアル後や、TypeScriptの初歩を学んだ人におすすめの資料で、TypeScriptの基本文法、型システム、オブジェクト指向プログラミングなど、TypeScriptの入門から応用までを幅広く網羅しており、TypeScriptの知識を一気に実践レベルまで押し上げてくれます。

TypeScriptの型入門

上述の記事などで文法は学んだけど型のことはよく分からない人やJavaScriptをひととおり学び、これからTypeScriptを学び始めたい人におすすめで、この資料だけでTypeScriptの型システムのほとんどを理解できます。TypeScriptは型の言語と言っても良いくらい型が重要なので、TypeScriptで開発を行うフロントエンジニアは必読の資料です。

フロントエンド基礎知識まとめ

【保存版】Webフロントエンド基礎力（初心者向け）

ここまでで紹介してきたフロントエンドの基礎である、HTML、CSS、JavaScriptを一つで網羅できる資料となっています。短時間でインプットしたい人や、フロントエンド開発の大枠をまず理解したい人におすすめです。

令和のHTML / CSS / JavaScriptの書き方50選

フロントエンドの基礎のモダン開発における書き方を取り上げた資料で、基礎を学び終え、モダンな書き方に興味を持った人や、会社やプロジェクトの文法を最新のものにアップデートしたいエンジニアにお勧めです。

3. フレームワーク

フレームワークとは、Webシステムやアプリケーションを開発する際の枠組みです。
効率よく大規模なアプリを作るために、便利なツールが用意されています。モダンな開発現場ではフレームワークを使って開発することがほとんどで、フロントエンド開発を行うならほぼ必須の項目になります。プロジェクト単位で決まっているものなので、以下の資料で様々なフレームワークに精通していくと、必ず仕事の役に立ちます！

React

Reactは、Facebookによって開発されたUI構築用のJavaScriptライブラリで、特にシングルページアプリケーションの開発に適しています。JavaScriptフレームワークでは今最も人気で勢いのあるフレームワークなので、まだReactを学んでいない人は以下の資料でしっかりと基礎を身につけましょう。

クイックスタート - React

Reactの公式ドキュメントです。Reactの基本概念、コンポーネント、フック、状態管理、イベント処理など、Reactアプリケーション開発に必要な知識を学べます。公式ドキュメントは読みにくいのが通説ですが、この資料はコードエディタ付きなので実際に手を動かして学べ、さらにボリューミーなチュートリアルまでついておりまさに最初に読むにはもってこいの内容となっています。日本語対応しているのも嬉しいポイントです。

今から始めるReact入門 〜 React の基本

Reactの基本的な使い方を解説しています。コンポーネント、JSX、props、stateなどの主要な概念について説明しています。前述の公式ドキュメントから少しハードルをあげた内容になっており、一通りの動かし方を学び、より深い理解を得たい人におすすめの資料です。

Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件

Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」を引き合いに、Reactアプリケーションの堅牢なアーキテクチャについて解説しています。Zennというエンジニア向け情報共有サービスのReactカテゴリで一番人気の資料であり、Reactでのフロントエンド開発を一つ上のレベルにあげたいエンジニアは必読です。

【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！

上述の３資料とは打って変わって、「短い時間ですぐにReactを使えるようになりたい」エンジニアにおすすめの資料になっています。Youtubeの解説記事もついていて、短時間でとても高水準の学習効果を見込めます。

Vue.js

Vue.jsは、学ぶべき基本機能が直感的で少なく、環境構築の手間も少ないため、初心者でもすぐに成果を実感できる、Reactと１、２を争う人気のフレームワークです。React同様に、採用しているプロジェクトは多数あるので、以下の資料で基礎をマスターしましょう！

Vue.js（公式ドキュメント）

Vue.jsの公式ガイドです。Vue.jsの基本概念、テンプレート構文、コンポーネント、リアクティビティ、ディレクティブなどの主要機能について説明しています。こちらもReact同様これだけで良いんじゃないかと思うほど豊富な内容になっています。さらに、チュートリアルと概要だけでなく機能の実装例まで掲載されているので、初心者がまず読むのはもちろんのこと、中級者が見返すのにも最適です。

Vue.jsを100時間勉強して分かったこと

Vue.jsの構文を上述の公式ガイドからさらに深掘りした内容の資料です。開発を進めていく中で構文に躓いた時は、この資料を読むことをお勧めします。構文ごとに見出しになっているので、公式ガイドでは理解しきれなかった部分だけをかいつまんで読むといった活用の仕方もお勧めです。

Next.js

Next.jsは、Reactに基づいた、モダンかつ強力なフロントエンドフレームワークで、開発者の効率を高める機能を数多く備えています。例えば、ファイルベースのルーティングにより、ページファイルを配置するだけで自動的にルートが設定され、複雑な設定を省略できます。今がアツいモダンフレームワークなので、基礎を学んでおくと必ず役に立ちます。

大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました

Next.jsの公式ドキュメントも他のフレームワークの例に漏れず大ボリュームなのですが、日本語対応していない...そんな悩みをこの資料は払拭してくれます。ただ和訳するだけではなく、必要に応じて画像やコードブロックが再込まれたりしていて、とても読みやすくまとめられています。Next.jsを始めたい方はもちろんのこと、中上級者の方にも目を通していただきたい資料です。

ざっくりApp Router入門【Next.js】

Next.jsの説明でも触れた、ページファイルを配置するだけで自動的にルートが設定される機能について詳しくまとめられています。図や画像と合わせてApp Routerがとてもわかりやすくまとめられています。前述の資料と合わせて初心者に超お勧めです！

Nuxt.js

先ほどのNext.jsがReactベースなのに対し、Nuxt.jsは、Vue.jsベースのモダンフレームワークです。同じくファイルシステムベースのルーティング機能を備えており、Vueライクにモダン開発を行いたいエンジニアは必見ですので、ぜひ以下の資料に目を通してください！

Installation ･ Get Started with Nuxt

Nuxt.jsの公式インストールガイドです。Nuxt.jsのセットアップ方法、プロジェクトの作成、開発サーバーの起動方法について説明しています。全文英語ですが、直感的な作りでインストール方法が説明されているのでわかりやすいです。

Nuxt チュートリアルへようこそ！

Nuxt.jsの日本語チュートリアルです。Nuxt.jsの基本概念、ルーティング、ビュー、非同期データ、ストアなどについて段階的に学べます。Nuxt.jsだけでなく、Vueのチュートリアルも兼ねているので、「Vueは知らないけどNuxtを触って見たい」という人でも安心してNuxt.jsを学べます。

Svelte

Svelteは、コンパイラベースのフレームワークで、なんと言ってもその魅力はスピードで前述のReactやVueよりも速いことです。最近話題になり始めているフレームワークなので、興味を持った方は以下の資料で基礎を学びましょう！

Vue・Reactを超える！？ 近年話題の Svelte に入門してみよう！

Svelteの基本的な使い方を解説しています。基本的な構文の書き方が紹介されているので、これからSvelteを学びたい人は後述の公式チュートリアルの前に目をとしておくとよりスムーズに学習を進められます。

Welcome to Svelte ･ Svelte Tutorial

Svelteの公式チュートリアルです。Svelteの基本的な概念、コンポーネント、リアクティビティ、イベント処理などについて、インタラクティブに学べます。注目すべきはチュートリアルで、コードが穴埋め式になっていて、初心者で簡単に始められる内容になっています。まずチュートリアルから入り、その後処理の詳細をドキュメントで学ぶと言った順序がお勧めです

Lit

LitではWebコンポーネントという技術を使用しており、ブラウザ上で直接動くDOMコンポーネントを生成できます。
メジャーどころのフレームワークと言えばReact・Vueなどですが、これらが扱う仮想DOMとは一線を画する自由度・カスタマイズ性を持っているのがLitです。
自由度が高い分、難易度もやや高めですが、既存のプロジェクトの統合やリプレイスを行うような現場では、採用されるケースがドンドン増えてくる可能性が高いです。

Lit（公式ドキュメント）

初心者に何よりもありがたいのが、説明と自分で動かす環境が一緒に提供されているチュートリアル。
このリンク先もまさにそうで、英語なのでちょっとだけ敷居は高いかもですが、読み解きながら手を動かして理解することで、Litについての生きた知識が身についてくるはず。

Angular

AngularはGoogleが開発したフルスタックのフレームワークで、SPA（シングルページアプリケーション）の開発に特化しています。TypeScriptを使用し、依存性注入やリアクティブプログラミングなどが組み込まれています。上述の二つに比べると最近の人気は落ちますが、元々プロジェクトに採用されているケースも多いので、以下の記事で基礎を頭に入れておきましょう。

Angular 日本語版

Angularの公式ドキュメントの概要です。Angularの主要な機能、アーキテクチャ、コンポーネント、モジュール、サービスなどについて説明しています。Angular開発のベストプラクティスも載っており、事前学習はもちろんのこと、実際にプロジェクトで扱う際にも有用な資料になっています。また、体験ページではコードエディタで実際に手を動かして動作を確認できます。

今日からはじめるAngular

上述の公式ドキュメントと比較してより文章ベースで丁寧に解説されており、また、初心者が迷いがちなディレクトリ構造についても各フォルダごとに解説がなされており、スムーズに学習を勧められます。どんどん読み進める形で学習を進めたい人にお勧めです。

Angular初心者がハマりがちなポイントとその学習法

Angular開発で躓きやすいポイントとその解決策を紹介しています。上記二つの資料を読んでいてわからなくなった時や、実際の作業中に躓いてしまった時にお勧めの資料です。わかりやすい説明だけでなく、質の高い学習リソースへのリンクも添付されているので、何かあればまずこの資料に目を通してみましょう！

Ember.js

Ember.jsは、強力なツール群と一貫した設計パターンを提供するフレームワークで、大規模なアプリケーションに適しています。デフォルトで多くの機能を提供し、開発者が生産性を高めやすいです。昨今はあまり勢いがないですが、一時代を築いたフレームワークであり、採用しているプロジェクトもあるので、学んでおくとどこかで役に立つはず！

introduction - Part 1 - Ember Guides

Ember.jsの公式チュートリアルです。英語ではありますが、画像やコードブロックでわかりやすく解説されています。新たにEmber.jsを始めたい人や、少しでもEmber.jsについて学んでおきたい人にお勧めです。

Tailwind CSS

Tailwind CSSは、ユーティリティファーストなCSSフレームワークで、デザインをクラスベースで直接指定することができる画期的なフレームワークです。モダンな開発現場では、CSSを直接書くことが減っているくらいシェアを広げています。以下の資料でTailwind CSSの基礎を学び、モダン開発に適応しましょう！

Installation - Tailwind CSS

Tailwind CSSの公式インストールガイドです。Tailwind CSSのセットアップ方法、設定ファイルの作成、ビルドプロセスについて説明しています。Tailwind CSSは他のフレームワークとは違ってただインストールするだけではなくて幾つかの設定が必要なので、公式のインストール方法資料はとても重要です。

Tailwind CSS とは | Tailwind CSS 入門と実践

Tailwind CSSの基本的な使い方を解説しています。Tailwind CSSの基本的な使い方を知りたい人にお勧めです。サイズやレイアウトなど使用するクラスごとに章が分かれていているので、読み返す際にも便利です。

Tailwind CSS のテンプレート & UI キット集【まとめ】

Tailwind CSSのテンプレートとUIキットをまとめた包括的なガイドです。より実践的な内容で、実際にプロジェクトで使用する時にデザインを迷ってしまうような人にお勧めです。

Bootstrap

Bootstrapは、モバイルファーストでレスポンシブなウェブデザインを簡単に実現できるCSSフレームワークです。多数のUIコンポーネントやレイアウトツールを提供しており、広く利用されています。UIフレームワークではTailwindと同じくらい人気なので、以下の資料で基礎を学びましょう。

CSSフレームワーク「Bootstrap」超入門

Bootstrap 5の新機能と変更点を解説しています。グリッドシステムの改善、ユーティリティクラスの追加、JavaScriptプラグインの変更などについて説明しています。初心者が始めに読むべき資料で、普通のCSSとCSSフレームワークで何が違うの？と言った素朴な疑問についても解説してくれます。

はじめに

Bootstrap 5の日本語公式ドキュメントです。Bootstrapのインストール方法、基本的なHTML構造、コンポーネント、ユーティリティについて説明しています。先ほどの資料で基礎を学んだ後に読むべき記事で、Bootstrapの記法の全てが網羅的に確認できます。

4. ライブラリ

ライブラリとは、クリックボタンや入力フォームなどのユーザーが直接見て操作するUI（ユーザ・インターフェース）部分の機能を多くのアプリケーション開発に利用できるようにまとめられたプログラム群です。フレームワークと同様にこちらもフロントエンドエンジニア必須項目ですので、以下の資料で知識を身につけましょう！

React Router

React Routerは、Reactアプリケーションにおけるルーティングを提供するライブラリです。シングルページアプリケーション（SPA）という、あたかも複数のHTMLファイルにアクセスしているようにスクリプトを動かす技術を管理するために使用されます。前述のReactやVueがそのSPAにあたるため、ほぼ学習必須なライブラリとなっているため、以下の資料でしっかりと基礎を学びましょう。

React Router v7 ドキュメント 日本語版

React Routerの日本語チュートリアルです。インストール方法から実践的な使い方まで丁寧に解説してくれているため、初心者はまず読むべき内容になっています。

今から始めるReact入門 〜 React Router

上記の記事からより実践的な内容でReact Routerについて解説してくれています。上記の記事とこの記事でReact Routerの理解を完璧にしましょう！

Redux

Reduxは、アプリケーションの状態管理を行うライブラリで、特にReactと組み合わせて使われます。アプリケーションの状態を一元管理し、状態の変更が予測可能なものにします。Reactで開発を行う場合は知っておきたいライブラリなので、以下の資料で基礎を頭に入れておきましょう。

React初心者でも読めば必ずわかるReactのRedux講座

Reduxを使用した基本的な実装方法を解説した資料です。useSelector、useDispatchの使い方や、Reduxの基本的な概念について説明されています。初心者向けに分かりやすく書かれており、実践的なコード例も多く含まれているので、初心者〜中級者にお勧めの内容になっています。

Redux 入門 〜Reduxの基礎を理解する〜

上記の記事を読んだ後、より深い理解を得たいと思った方におすすめの資料で、Storeの作成方法や、Action、Reducer、Dispatchの概念について詳しく説明されています。また、実際のコード例を交えながら、Reduxの流れを分かりやすく解説している点も魅力です。

Axios

Axiosは、HTTPリクエストを簡単に送信できるPromiseベースのライブラリです。APIとの通信を行う際に使われ、クロスブラウザ対応で便利です。こちらもReact Router同様頻出なライブラリになるので、基礎を頭に入れましょう。

初めてでも分かるaxiosの備忘録

Axiosの基本的な使い方を解説しています。GETリクエスト、POSTリクエスト、エラーハンドリング、インターセプターなどについて説明しています。Axiosをはじめて使う人にお勧めで、同じくHTTPリクエストを飛ばせるAxiosとは何が違うのかなども解説されています。

Axios入門

Axiosの公式ドキュメントです。Axiosの特徴、インストール方法、基本的な使い方、リクエストとレスポンスの設定について説明しています。簡潔にわかりやすく網羅的に書かれています。もとより複雑すぎるライブラリでもないので、これだけで完璧にAxiosをマスターできます。

Lodash

JavaSciriptの配列やオブジェクトの操作、標準機能だけだと絶妙にかゆいところに手が届かないところが多く、例えば配列からの重複の削除やオブジェクトのディープコピーなどの場合、自前で3~4行の関数を実装することになる。
Loadashは、そんな処理を一行でシンプルに済ませられる関数を提供してくれるライブラリです。「この処理毎回書くのめんどくさいな…」と思った時、Loadashを探ると、ピンポイントな答えを提供してくれることも多いはずなので、以下の資料でしっかりと使い方を学びましょう。

[JavaScript] 配列の操作はLodashを使いこなせると便利

Loadashの良さ、便利さがまだピンとこない」という人が最初に読むべき記事で、Loadashを使うとどんなことができるか、の具体例とともに、Loadashを使わなければどう書くか、も一部紹介してくれているので、よりその威力がわかりやすい内容となっています。

Lodashで使える便利な関数と代替可能なJavaScriptの標準機能

上の記事でLoadashの有効性を理解したら、この記事で自分が使いたい関数を探してみましょう。いろんなLoadash関数を説明付きで紹介してくれているため、必要なものを探すのに便利な記事です。

dayjs

day.jsは、日付や時刻の操作を簡単に行えるライブラリで、日付のパース、フォーマット、比較、計算などが簡単にできます。開発で一度は目にするライブラリなので以下資料で基礎を学びましょう。よく比較される日付ライブラリとして、date-fnsがありここではdate-fnsも紹介します。機能としてはほとんど同じですが主な違いとしては、day.jsはJavaScriptで、date-fnsはTypeScriptで開発されています。

【JavaScript】dayjsでの日付処理まとめ

dayjsの基本的な使い方を解説しています。日付の解析、フォーマット、操作、比較などの主要機能について説明しています。これだけで実践で使用する際に一切困らないほど必要な内容が簡潔にまとまっています。

date-fns 使い方あれこれ

date-fnsの活用方法を紹介しています。日付の解析、フォーマット、操作、比較、ロケール設定などの機能について説明しています。こちらも上記と同じく簡潔なまとめ記事となっています。実装で迷った際の辞書的な使い方もおすすめです。

D3.js

「D3」とは「Data Driven Documents」の略称であり、読んで字のごとくデータに基づいた可視化を実現するための機能を持つものです。簡単に言えば、Webページでグラフを作成するためのライブラリで、こちらも古くから使用されている歴史あるものなので、以下の資料で基礎を頭に入れておきましょう

D3.js v4/5 使い方 徹底攻略

D3.jsの基本的な使い方から実際の使用例などもまとめてあり、初心者はもちろんのこと、実際に業務で使う際の辞書的な使い方や、忘れた頃に読み返して復習するなど様々な使い方が考えられるボリューミーな内容になっています。

Chart.js

Chart.jsは、HTML5のCanvasを使用したオープンソースのチャートライブラリで、簡単に美しいグラフやチャートを作成できます。こちらも頻出のライブラリになるので、以下の資料で基礎を学んでおくと業務で役に立ちます！

【Chart.js入門】使い方まとめ

Chart.jsでグラフやチャートを描画する方法を解説しています。折れ線グラフ、棒グラフ、円グラフなどの基本的な使い方から、色や線の設定、アニメーション機能についても説明されています。Chart.jsの基本的な使い方をまず学びたい初心者におすすめの記事です。

実装例

Getting Started | Chart.js

Chart.jsの公式ドキュメントです。npmやCDNを通じたインストール方法と、バーチャートの基本的な実装例が紹介されています。サンプルコードでは、グラフの種類、ラベル、データセット、オプションの設定方法が詳しく解説されています。上記の記事で基本的な使い方を学んだあとにお勧めの資料で、網羅的にChart.jsの使い方を学べます。

Recharts

Rechartsは、Reactで美しいグラフを簡単に描画できる非常に便利なライブラリです。Reactで開発を行うエンジニアはぜひ使えるようにしておきたいライブラリなので、以下の資料で基礎を頭に入れておきましょう。

実装例

【React + Typescript】Rechartsのグラフをカスタマイズする

基本的な線グラフの描画から、軸やグリッド、ツールチップなどの細かい設定方法まで、具体的なコード例を交えて説明されています。初心者はもちろんのこと、グラフのデザインや機能をカスタマイズしたい方にも役立つ内容になっています。

Three.js

JavaScriptで3D表現をするためにはWebGLというJavaScript APIを用いるのですが、WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。
しかし、Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。この機会に以下の資料でThree.jsの基礎を学びましょう！

Three.js入門サイト - ICS MEDIA

Three.jsの基本的な使い方を学べるチュートリアルサイトです。3Dグラフィックスの基礎から、オブジェクトの作成、ライティング、アニメーションなど、実践的な内容が含まれています。初心者から中級者にお勧めの資料です。

three.js docs

Three.jsの公式ドキュメントのインストールガイドです。Three.jsをプロジェクトに導入する方法が説明されています。npmを使用したインストール方法や、CDNを利用した方法など、複数の導入方法が紹介されています。上記の記事で基礎を学んだ後の、網羅的な学習におすすめの資料です。

GreenSock (GSAP)

GSAPは、アニメーション作成のための強力なJavaScriptライブラリで、パフォーマンスと柔軟性に優れています。複雑なアニメーションを簡単に作成することができます。最近のWebサイトには複雑なアニメーションが不可欠になってきているので、以下の資料でしっかりと基礎を学んでおきましょう。

GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編）

GSAPのインストール方法やおさえておくべき最低限の使い方から、現場で役立つテクニックなど、初心者から中上級者まで幅広い層にお勧めの内容になっています。実際の出力やソースコードが確認できたりするのも魅力です。

GSAP入門（後編）- タイムライン制御やスクロール演出などの魅力的なJSライブラリ

上記の資料の後編にあたるもので、中上級者向けに、タイムライン機能、スクロールトリガープラグイン
、モーションパスプラグイン、quickSettter、ユーティリティー関数など様々な機能について解説しています。この前編と後編を読めば、迷いなく実践でGSAPを使いこなせます。

jQuery

近年では使われる機会が少なくなってきているが、かつてはRuby on Rails等の多くのWebフレームワークとともに活用されてきた歴史あるライブラリです。
完全新規の案件で使われることはあまり無いかもしれないが、既存の案件の追加開発など、まだまだ多くの現場で触れる機会が多いため、「こういう使い方をするんだ」というのは知っておくと便利。

【jQuery入門①】環境構築・基本的な使い方

jQueryをとりあえず使って理解するために読むべき資料で、
jQuery特有の書き方が視覚的にわかりやすく解説されているため、これを読んでおくだけで、現場で「あ、jQueryだ」と気付けるようになります。

jQuery（公式ドキュメント）

公式ドキュメントなので、網羅的に学習できる。
実際にjQueryを使う、となったら、このドキュメントを読んでjQueryでできることを一通り把握しましょう。必要に応じて、辞書的に見返すようにするとより定着します。

5. ツール・環境構築

コードエディタ

コードエディタは、コードを書くのを効率化する便利なツールです。構文のハイライトや自動補完、デバッグ機能が備わっており、エラーを見つけやすく、作業がスムーズになります。以下では定番のコードエディタについての資料を紹介します。

Visual Studio Code

Visual Studio Code（VS Code）は、軽量で高速な無料のコードエディタです。多くのプログラミング言語をサポートし、拡張機能で機能を追加してカスタマイズできます。初心者からプロまで幅広い開発者に使われています。実際の業務では必ずと言って良いほど使用することになるので、以下の資料で使い方を学びましょう！

VSCode(VisualStudioCode)の定番機能を一挙解説

VS Codeの基本的な使い方と主な機能を紹介した資料です。お勧めの設定なども載っているので、まだVS Codeをインストールしていない人でも、この資料を読めば実践的な環境構築が完了し、すぐにVS Codeを扱えるようになります。

【作業効率3倍UP】VSCodeチートシートの永久保存版

VS Codeの便利なショートカットキーをまとめた資料です。これを覚えれば、開発スピードが格段にスピードアップすること間違いなしなので、初心者の方や、まだVS Codeのショートカットキーを使いこなせていないエンジニアは必読の内容です。

フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選

VS Codeの便利な機能や設定について解説した記事です。実際の現場で活悪しているフロントエンジニアが紹介してくれているので、どの拡張機能を使用すればいいか悩んでいる初心者の方はぜひ読んでいただきたいです！

パッケージ管理ツール

JavaScriptのパッケージ管理ツールは、便利なライブラリやフレームワークを簡単にインストール・管理でき、依存関係を自動的に解決してくれるので、手作業の手間を大幅に削減します。フロントエンド開発では必須のツールなので、以下の資料で使い方を学びましょう！

npm

npm（Node Package Manager）は、JavaScriptやNode.jsのライブラリやツールを管理するためのツールです。簡単なコマンドで必要なパッケージをインストール・更新・削除でき、開発を効率化します。Node.jsをインストールすると一緒に使えるようになります。１番メジャーなパッケージ管理ツールで、フロントエンド開発にはほぼ必須なので、以下の資料で使い方をマスターしましょう。

そもそもnpmからわからない

npmの基本的な概念と使い方を解説した資料です。macOS、Linux、Windowsでのnvmとnpmのインストール方法、Node.jsのバージョン管理、基本的なコマンドについて詳しく説明されています。そもそもnpmとは何なのか？なぜ必要なのか？という初心者は必見の資料です。

そろそろ適当に npm install するのを卒業する

この記事は、npmの基本的な使い方と、npm installコマンドの詳細な解説を提供しています。主に、パッケージのインストール方法、package.jsonの役割、グローバルとローカルインストールの違いについて、初心者向けに分かりやすく説明しています。よくわかってないけどとりあえずnpm installしているという中上級者の方にもぜひ読んでもらいたい資料です。

Yarn

Yarnは、JavaScriptやNode.jsで使うパッケージマネージャーで、ライブラリやツールのインストールや管理を効率的に行えます。動作が速く、信頼性が高いのが特徴で、npmと互換性があります。npmにシェアは劣りますがこちらも多く使われているので、以下の資料で使い方を学び、柔軟な対応ができるエンジニアになりましょう！

Yarn（公式ドキュメント）

Yarnのインストール方法を説明した公式ドキュメントです。各オペレーティングシステムでのインストール手順が詳しく解説されています。また、インストール後の確認方法や、基本的な使い方、トラブルシューティングについても触れられています。ますYarnを使いはじめたいと思っている初心者の方におすすめの資料です。

yarnチートシート

Yarnの基本的な使い方と、npmとの違いについて解説した記事です。パッケージのインストール方法や、依存関係の管理、スクリプトの実行方法などが説明されています。また、Yarnを使用するメリットについても触れられています。上述の記事を読んでより詳しい使い方を知りたい人や、npmは知っているけどyarnはよくわからないという方におすすめです。

Docker

Dockerは、開発環境を簡単に統一・共有できるコンテナ技術で、いちいち環境設定をしなくても、これ一つで「どこでも動く」アプリを実現します。チームでの開発ではまず必要な技術なので、以下の資料でしっかりと使い方を学びましょう！

Docker 概要

Dockerの概要と基本的な概念を説明した公式ドキュメントのページです。Dockerの主要コンポーネントや、コンテナ技術の利点、Dockerの基本的なワークフローなどが解説されています。Dockerを始める前の基礎知識として役立つ内容なので初心者がまず読むべき資料です。

Docker初学者がやるべきこと3選

上の記事で基本的な使い方を学んだ後に、結局dockerってなんのか？どういう構造なのか？をしっかり理解したい人にお勧めの記事で、図解などでわかりやすくDockerの全体像を解説しています。基本的なコマンドも紹介されているので、まずDockerがどういうものか知りたい方は上の資料を読む前にこちらの資料を読んでも、十分な基礎知識が得られます。

Dockerがわからない人へ。これ1本で0から学べる丁寧なDocker入門

短時間でDockerを学びたいという方におすすめの資料で、Dockerのインストール方法から基本的な使い方まで簡潔に要点を抑えて解説しているので、短時間でもすぐにDockerが始められる知識が身に付きます。

ホスティング

ホスティングは、ウェブサイトやアプリをインターネット上に公開するための作業です。これにより、ユーザーがブラウザを通じてアクセスできるようになります。少し中上級者的な項目ですが、知っておいて損はないものなので、以下の資料で基本的な使い方を学んでおきましょう！

Amplify

Amplifyは、フロントエンドとバックエンドの開発を簡単にするクラウドサービスです。ユーザー認証、データベース、APIなどを簡単に構築・管理でき、ReactやVue.jsなどのフレームワークと統合可能です。初心者でも直感的にアプリをデプロイできます。AWSとの親和性がある点が他のホスティングサービスにはない利点です。

AWS Amplifyの超詳細解説

Amplifyはどういうサービスで何ができるのかを超詳細にまとめられています。これからAmplifyを始めたい初心者はもちろんのこと、Amplifyがどういうサービスか説明できるようになりたい、Amplifyを採用するときのベストプラクティスを説明できるようになりたい人にもおすすめです。

Amazon Amplify でウェブアプリケーションをデプロイする 入門ガイド

AWS Amplifyを使用してウェブアプリケーションをデプロイする方法を解説したガイドです。Amplifyの基本的な概念や、セットアップ方法、デプロイの手順などが説明されています。また、Amplifyの主要機能や利点についても触れられています。上の記事を読んで、より詳細にAmplifyを理解したい人にお勧めの記事です。

Vercel

Vercelは、主にフロントエンドアプリケーションや静的サイトを簡単にホスティングできるプラットフォームです。デプロイが簡単で、GitHubと連携して自動でビルド・公開ができます。無料プランでも十分に使え、スケーラビリティにも優れています。Next.jsを開発した同じチームによって提供される公式ホスティングサービスなので、Next.jsの全機能を最大限に活用できる点が魅力です。

Vercelにデプロイしてみよう | TypeScript入門 『サバイバルTypeScript』

TypeScriptで作成したアプリケーションをVercelにデプロイする方法を解説したチュートリアルです。Vercelの基本的な概念や、アカウントの作成方法、デプロイの手順などが説明されています。また、Vercelの特徴や利点についても触れられています。上述で紹介したTypeScriptのお勧め記事内のページで、前段のNext.jsのチュートリアルから続く形で行われるので、スムーズにチュートリアルが行えます。

Netlify

Netlifyは、ウェブサイトやアプリケーションを簡単にデプロイ（公開）できるプラットフォームです。GitHubやGitLabと連携し、自動でビルドとデプロイが行えます。サーバーレス機能やCDNも提供され、スムーズな運用が可能です。無料で商用利用が可能な点やSlack通知がデフォルトで設定されている点が魅力です。

超便利ホスティングサービス Netlify

Netlifyの基本的な使い方と、静的サイトのデプロイ方法を解説した記事です。Netlifyのアカウント作成から、GitHubとの連携、ビルド設定、カスタムドメインの設定などが説明されています。また、Netlifyの便利な機能についても紹介されています。Netlifyとはどういうものかを知りたい人にお勧めで、簡単に概要や使い方に解説してくれます。

Get started with Netlify

Netlifyの公式ドキュメントです。Netlifyの基本的な概念や、サイトのデプロイ方法、カスタムドメインの設定方法などが説明されています。また、Netlifyの主要機能や、継続的デプロイメントの設定方法についても触れられています。上の資料を読んで実際にNetlifyを動かしてみたいという方にお勧めな網羅的な内容になっています。

Cloudflare Pages

Cloudflare Pagesは、静的ウェブサイトやアプリを高速にデプロイできるサービスです。GitHubやGitLabと連携して、自動的にビルドと公開が行えます。パフォーマンスが高く、簡単にセットアップできるため、初心者にもおすすめです。無料プランでチーム開発が可能なのが魅力です。

【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ

Cloudflare Pagesでのデプロイの仕方を実際に公開手順を実演する形で行っていて、初心者でもデプロイまでの手順が直感的に理解することができます。初心者から中級者まで、Cloudflare Pagesでのデプロイはどういった作業を行うのか知りたい人にお勧めです。

Cloudflare Pages documentation

Cloudflare Pagesの公式ドキュメントです。Cloudflare Pagesの基本的な概念や、プロジェクトの作成方法、デプロイの手順などが説明されています。また、カスタムドメインの設定や、環境変数の管理、Functions機能の使用方法についても触れられています。上の記事より実践的にCloudflare Pagesを導入したいという方にお勧めです。

アプリケーション構造

アプリケーション構造を学ぶことで、コードが整理されメンテナンスしやすくなり、開発スピードと品質が向上します。また、チーム開発時の効率が上がり、バグを減らせます。一つ上のフロントエンジニアを目指すなら必須科目ですので、以下の資料でしっかりと基礎を頭に入れましょう！

ソフトウェア設計・アーキテクチャの学び方

ソフトウェア設計とアーキテクチャが大事なのは分かるけど、学習の幅があまりにも大きすぎてどこから手をつけていいかわからない...そんな人のためにこの資料ではソフトウェア設計とアーキテクチャを学習リソースとともに原理原則に立ち返って学び方を解説してくれています。初心者はもちろんのこと、これからソフトウェア設計とアーキテクチャを学びたい中級者の方も必読の内容になっています。

SPA, SSR, SSGって結局なんなんだっけ？

この記事では、当たり前に行われていて理解しないままになっていることの多いWeb開発における3つの主要なアーキテクチャ（SPA、SSR、SSG）について解説しています。SPA, SSR, SSGとかよく聞くけどこれは何？ReactはSPAだから速いってどういう意味？と言った疑問を持っている初心者の方にはぜひ読んでもらいたい資料です。

ウェブ上でのレンダリング

これも上の記事と同じで、当たり前に行われているWebアプリケーションのレンダリングについて説明されています。上の記事と合わせてWebサイトはどういう原理に表示されていて、どのような処理が行われているかを知ることで、他のフロントエンド初心者と大きく差をつけましょう！

監視ツール

監視ツールを使うことで、アプリのエラーやパフォーマンスの問題をリアルタイムで把握し、迅速に対応できます。ユーザー体験を改善し、システムの安定性を確保するために不可欠です。また、運用効率を高め、開発チーム全体の生産性向上にもつながります。少し上級者向けですが、以下の記事で基礎を頭に入れておくと、実際に業務でに目にしたでも抵抗感がなくなるはずです。

Prometheus

Prometheusは、オープンソースが特徴の監視ツールで、システムやアプリケーションのメトリクスを収集し、リアルタイムで監視できます。データは時系列で保存され、強力なクエリ機能で解析可能です。主にインフラやサービスの監視に使用されます。

10分で理解する Prometheus

Prometheusの基本概念と使用方法について解説されています。メトリクスの収集、クエリ言語PromQLの基本、アラートの設定方法などが説明されており、Prometheusを用いたモニタリングシステムの構築方法が紹介されています。初心者でも短時間で大枠を学べるので、Prometheusをプロジェクトでは扱わないけど大枠は知っておきたい人にもお勧めです。

とほほのPrometheus入門

Prometheusの概要と基本的な使い方が解説されています。Prometheusのアーキテクチャ、インストール方法、設定ファイルの書き方、メトリクスの収集方法などが詳細に説明されており、実践的な導入ガイドとなっています。Prometheusの基礎が網羅的に掲載されているため、辞書的な使い方もできます。

Grafana

Grafanaは、データの可視化や監視のためのオープンソースツールで、ダッシュボードを簡単に作成できます。複数のデータソースを接続してリアルタイムデータを表示でき、特にシステム運用や分析に便利です。コード不要で使いやすいので初心者でも扱いやすく、Prometheusなどの様々なデータソート連携可能な点が特徴です。

10分で理解するGrafana

Grafanaの基本的な使い方について解説されています。ダッシュボードの作成方法、データソースの設定、パネルの追加と編集などが説明されており、Grafanaを用いた可視化システムの構築方法が紹介されています。この資料では上記の10分で理解する Prometheusの記事で作ったデータをデータソースとして使用しているので、二つ合わせて初心者でも簡単にサーバーの監視が実現できる内容になています。

New Relic

New Relicは、アプリケーションやインフラのパフォーマンスを監視するためのツールです。リアルタイムでシステムの状態を把握し、問題の特定や改善を支援します。初心者でも簡単に導入でき、パフォーマンスの最適化に役立ちます。上の二つの監視ツールは併用で使用するのが一般的なのに対し、New Relicは一つで完結するオールインワンプラットフォームであることが特徴です。

New Relicを使い始める

New Relicの公式ドキュメントで、概要と基本的な機能が紹介されています。アプリケーションパフォーマンスモニタリング、インフラストラクチャモニタリング、ログ管理などの主要機能が説明されており、New Relicを使用したシステム監視の基本が解説されています。初心者から中級者まで、New Relicを始めるならこれだけで完璧と言って良いほど充実な内容です。

ビルドツール

Webpack

Webpackは、JavaScriptやCSS、画像などのファイルをまとめて最適化するツールです。開発中のコードを効率的にビルドし、ブラウザで実行可能な形式に変換します。これにより、アプリケーションのパフォーマンスが向上し、管理が簡単になります。歴史のあるビルドツールであり、プロジェクトで使用しているケースも多いので、以下の資料で基礎を頭に入れておきましょう。

いちばんやさしい webpack 入門

webpackの基本概念と使用方法を解説しています。webpackのインストール、基本的な設定、Babelとの統合、開発モードの設定、そしてwebpack-dev-serverの使用方法について詳しく説明しています。webpackって何？使うと何がいいの？と言った初心者の疑問も解決してくれるので、webpackを触ってみたい人はまず読むべきおすすめの資料になります。

最新版で学ぶwebpack 5入門 JavaScriptのモジュールバンドラ

フロントエンド開発におけるWebpackの基本的な使い方と設定方法について解説しています。また、設定ファイルの作成やエントリーポイントの指定方法についても触れられています。上の記事に比べてさらに実践的に解説されているので、上の記事で大枠を理解した後に読むのがお勧めです。

Vite

Viteは、モダンなフロントエンド開発のための高速なビルドツールです。開発中のホットリロードが瞬時で、素早くコードの変更を反映できます。設定が簡単で、ReactやVueなど様々なフレームワークと一緒に使えます。今一番勢いのあるビルドツールで前述のwebpackを追い越す勢いでシェアを拡大しています。以下の資料で基礎を学んで、モダンなビルドツールを使いこなしましょう！

Vite ってよく聞くけど何なんですか？ あれは

Viteの概要と特徴について解説されています。Viteの高速なビルド性能、ES modules を活用した開発サーバー、プラグインシステムなどが説明されており、従来のビルドツールとの比較も行われています。Viteってそもそも何？というところから解説してくれているので、Viteの大枠を理解したい、とりあえず知識として頭に入れておきたい人にお勧めです。

Vite を使う理由（公式ドキュメント）

Viteの公式ガイドが日本語で提供されています。Viteの特徴、プロジェクトの作成方法、開発サーバーの使用方法、ビルドの設定などが詳細に説明されており、Viteを用いた高速な開発環境の構築方法が解説されています。具体的な使用方法やTipsが丁寧にまとめられているので、これからViteを始めたい人にお勧めの記事です。

6. テスト手法

フロントエンド開発のテスト手法には、静的テスト、単体テスト、結合テスト、E2Eテストがあります。これらを組み合わせることで、アプリケーションの品質を確保できます。テストはコードのバグを早期発見・修正し、予期せぬ動作を防げる、初心者にこそ必要なものなので、以下の資料でしっかりと基礎を学びましょう！

【入門】フロントエンドのテスト手法まとめ

ReactとTypeScriptを用いたフロントエンド開発におけるテスト手法を実際のテストコードを交えながら丁寧に解説しています。フロントエンドのテストの概要を知りたい人、具体的なテストの書き方を学びたい人におすすめの記事です。

フロントエンドのテスト戦略について考える

実際に現場で働いているエンジニアが、機能によってテストが書かれたり書かれなかったり、テストを書くにしても個人によって書く粒度にバラツキがあったという経験をもとに、フロントエンドのテスト戦略の方針を解説してくれています。チーム開発でこれからテストを書き始めるという人は必見の資料です。

フロントエンドのテスト戦略ってどうすればいいの？

フロントエンドテストの導入に向けた戦略を探求し、テストの導入の優先順位を決める内容となっています。テスト導入の際に何から始めればいいかわからない、テストの種類が多すぎて整理できない！と言った悩みを持った人にお勧めです。

7. SEO

SEOとは「Search Engine Optimization」の略称で日本語にすると「検索エンジン最適化」といいます。検索エンジンにはSEO対策をしっかりやることで、検索上位になりやすくなるという仕組みがあります。サービスやWebサイトを作ってもアクセスされないとはじまらないので、フロントエンドエンジニアは、ただ動くアプリケーションを作るだけではなく、こういった点にも気を配る必要があります。なので以下の記事でSEOについての理解を深めていきましょう！

Google公式SEOスターターガイド

Googleが提供するSEO（検索エンジン最適化）の基本ガイドが日本語で解説されています。タイトルやメタディスクリプションの最適化、サイト構造の改善、コンテンツ品質の向上など、SEOの基本的な要素が説明されており、検索エンジンでの可視性を高めるための実践的なアドバイスが提供されています。SEO対策を始めたい人はまずは読むべき資料です。

アクセス解析ツール

Google Analytics

Google Analyticsは、ウェブサイトやアプリの訪問者データを分析できる無料のツールです。誰が、どこから、どのようにサイトを訪問しているかを把握し、マーケティングや改善に役立てられます。初心者でも基本的な指標を確認するだけで効果的な分析が可能です。上の記事でSEO対策の重要性を学んだ人はぜひ以下の資料で具体的な活用方法を知りましょう。

初心者や小規模ビジネスのための Google アナリティクス

Google Analyticsの基本的な使い方が初心者向けに解説されています。アカウントの設定方法、トラッキングコードの実装、基本的なレポートの見方、データの解釈方法などが説明されており、ウェブサイトのアクセス解析の基礎を学ぶためのガイドとなっています。Google Analyticsをまず始めたいエンジニアにお勧めです。

Googleアナリティクスの導入・設定方法と活用のポイント【初心者向け】

Google Analyticsの初心者向けガイドが提供されています。アカウントの作成からトラッキングコードの設置、基本的なレポートの見方、主要な指標の解釈方法などが説明されており、ウェブサイトのパフォーマンス分析の基礎を学ぶことができます。上の記事で概要を理解した人に向けたより詳細なガイドになっています。

Google Search Console

Google Search Consoleは、ウェブサイトの検索パフォーマンスを分析・改善するための無料ツールです。検索結果での表示状況やキーワードのデータ、エラーの修正方法を確認できます。初心者でもサイトのSEO改善を始めやすいサポート機能が揃っています。以下の資料を読んでGoogle Search Consoleを賢く活用し、上質なSEO対策を始めましょう！

Search Console（サーチコンソール）の使い方

Google Search Consoleの基本的な使い方が解説されています。アカウントの設定方法、サイトの登録と確認、主要な機能の概要、パフォーマンスレポートの見方などが説明されており、ウェブサイトのSEO状況を監視し改善するための入門ガイドとなっています。Google Search Consoleを始めたい人はまずこれを読みましょう。

Googleサーチコンソールとは？使い方や設定など基本を初心者向けに解説！

Google Search Consoleの効果的な活用方法について詳細に解説されています。サイトのインデックス状況の確認、検索パフォーマンスの分析、モバイルフレンドリーネスのチェック、構造化データの検証など、SEO改善のための具体的な手順が説明されています。タブごとに説明がされているので、上の記事を読んで実際にサーチコンソール使用、または使用したい人にお勧めです。

8. サイトパフォーマンス

サイトパフォーマンスは、ウェブページがどれだけ速く読み込まれるか、操作がスムーズかを指します。速いパフォーマンスは、ユーザー体験を向上させ、SEOにも良い影響を与えます。画像圧縮やコードの最適化などでパフォーマンスを改善できます。前の章でSEOの大切さを知った人は、以下の資料でサイトパフォーマンスにも気を配りましょう！

速度改善

How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー

Webパフォーマンスを改善するための知識を7つのポイントに分けて解説しています。ユーザー体験を向上させるための具体的なアプローチが紹介されており、速度改善したいけど何から始めれば良いのかわからない人にお勧めです。

フロントエンドを100倍速くした（ ＾ω＾）

ABEJA社のフロントエンド開発者が、パフォーマンス改善の取り組みを振り返り、初期描画速度を約30秒から3秒に短縮した過程を紹介しています。上の資料で速度改善のアプローチを学んだ後、具体的に何をどうしたら速度が改善したのかを知りたい人にお勧めです。

パフォーマンス測定ツール

Lighthouse

Lighthouseは、ウェブページのパフォーマンスやSEO、アクセシビリティを評価する無料ツールです。Chromeの開発者ツールやコマンドラインで使え、スコアと改善点を教えてくれます。ウェブサイトを最適化する初心者にも役立つガイドですので、以下の資料でしっかりと使い方を学んでおきましょう。

Lighthouseの概要

Google Chromeの開発者ツールであるLighthouseの概要と使用方法が解説されています。パフォーマンス、アクセシビリティ、SEO、ベストプラクティスなどの観点からウェブサイトを分析する方法が説明されており、ウェブサイトの品質向上のためのガイドラインが提供されています。Lighthouseを始めてみたい初心者の方にお勧めです。

GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門

診断結果の見方の日本語対応表など実践で使い始める時に役にたつ要素がまとめられているので、上の記事を読んでLighthouseを始めた人にお勧めで、中級者の方でも、辞書的な使い方で有用です。

キャッシュ

キャッシュは、一度使ったデータを一時的に保存しておく仕組みで、次回同じデータを使うときに素早くアクセスできるようにするものです。これにより、処理速度が速くなり、サーバーやデバイスの負荷が軽減されます。例えば、よく見るWebページを一時保存することで、再読み込みが速くなるのがキャッシュの働きです。

キャッシュについてGoogleが解説

2024年12月時点でのSEOキャッシング最適化のヒントが提供されています。ブラウザキャッシュの設定、CDNの活用、サーバーサイドキャッシングの実装など、ウェブサイトの高速化とSEO改善のための具体的な方法が説明されています。
キャッシュについて知らない人も知ってる人もとても勉強になる記事なので必読です。

画像最適化

画像最適化とは、ウェブサイトやアプリで画像のサイズを小さくして、読み込み速度を速くしつつ画質を保つ技術です。圧縮やフォーマット変更、適切な解像度の選択が主な方法です。これにより、ユーザー体験の向上と検索順位の向上が期待できます。サイトパフォーマンスで重要な項目の一つなので以下の記事で基礎を頭に入れておきましょう。

SEO初心者がまずやるSEO対策5/画像最適化

SEOのための画像最適化テクニックについて解説されています。適切なファイル形式の選択、画像圧縮、alt属性の最適化、遅延読み込みの実装など、画像を活用したSEO改善の具体的な方法が説明されています。初心者でもすぐに取り掛かれるわかりやすい解説になっているので、画像最適化を行いたいならまず読んでおいて損はない資料です。

9. 2024年注目の技術トレンド

AI支援ツールが進化し、開発効率を大幅に向上させる一方で、ライブラリの進化により、開発者はさらに迅速に機能を実装できるようになりました。以下の記事で最新のトレンドを知り流行に敏感なフロントエンドエンジニアになりましょう！

ライブラリ

es-toolkit

es-toolkitは、Lodashの代替として高速かつ軽量なJavaScriptユーティリティライブラリです。TypeScriptネイティブで、パフォーマンスとバンドルサイズの最適化に優れています。モダンな開発環境に適した、次世代のユーティリティライブラリとして注目されています。

es-toolkitの紹介

es-toolkitの概要と使用方法が解説されています。JavaScriptの最新機能を活用するためのツールセットの紹介、セットアップ方法、基本的な使い方などが説明されており、モダンなJavaScript開発環境の構築方法が紹介されています。初心者はもちろんのこと、中上級者でも辞書的な使い方ができるほどボリュームのある内容になっています。

shadcn/ui

shadcn/uiは、再利用可能なUIコンポーネントのコレクションで、Radix UIとTailwind CSSをベースに構築されています。従来のUIライブラリとは異なり、必要なコンポーネントだけをプロジェクトにコピーして使用でき、高度なカスタマイズが可能です。誰でも簡単にスタイリッシュなデザインのコンポーネントを利用できる革新的なツールとして注目されています。

shadcn/ui 日本語サイト（公式ドキュメント）

shadcn/uiコンポーネントライブラリの日本語ドキュメントです。インストール方法、コンポーネントの使用方法、カスタマイズオプションなどが詳細に説明されており、高品質なUIコンポーネントの実装方法が解説されています。資料でいいな思ったコンポーネントを簡単に自身のプロジェクトに持ってこれるので、商品カタログのように使用できます。

AI支援ツール

フロントエンド開発に限らず、現代のプログラミングにおいていかにAIをいかにうまく活用できるかもエンジニアの重要なスキルになりつつあります。以下の記事ではフロントエンジニアに欠かせない話題のAI支援ツールについて解説します。これを読んでコードの品質や開発速度を大きく向上させましょう！

ChatGPT

ChatGPTは、言わずもがなですが、コードの生成やデバッグ、フロントエンド開発のアドバイスを受けることができるAIツールです。ReactやVue.jsなど、フロントエンドフレームワークに関するサポートも提供します。以下の記事ではChatGPTのフロントエンドにあった使用方法を紹介します。

生成AI時代のフロントエンド開発術

ChatGPTを活用してフロントエンド開発を効率化する3つの方法を紹介しています。具体的には、FigmaからReactコンポーネントを生成し、ビジネスロジックを実装し、テストコードを作成する流れが解説されています。もっとChatGPTをうまくフロントエンド開発に活用したいという方にお勧めです。

GitHub Copilot

GitHub Copilotは、コードエディタ（例えばVSCode）で直接利用できるAIペアプログラマーで、フロントエンド開発のコード補完や提案を行います。JavaScriptやTypeScript、Reactなど、コードの記述を効率化します。実際に使用している身からしてもとても便利なので、ぜひ以下の資料で使い方を学んでください！

GitHub Copilot導入後、初めて使う時。(豊富な使用例付き)

GitHub Copilotを効果的に使うためのテクニックが紹介されています。特に、問題を小さく分けてAIに具体的な情報を提供することで、より正確な提案を得る方法が強調されています。また、VSCodeでのショートカットキーの活用法や、Copilotの各種機能についても説明されています。

VSCode ではじめる GitHub Copilot 活用術

GitHub CopilotをVSCodeで活用する方法を解説しています。CopilotはAIによるコード補完ツールで、自然な形でコード提案を行い、プログラミングの効率を向上させます。具体的な導入手順や活用術、注意点についても詳しく説明されています。GitHub Copilotを導入したい、どんなメリットがあるのか知りたいエンジニアは必見です。

v0

v0はVercelが開発したAIベースのUIデザイン・コード生成ツールで、テキストプロンプトやデザインモックアップから高品質なUIコードを生成できます。Tailwind CSSとshadcn/uiを基盤とし、リアルタイムで複数のデザインバリエーションを作成できます。プロトタイピングから本番環境まで、開発効率を大幅に向上させる革新的なツールです。開発で使わなくても触っているだけで楽しいので、ぜひ以下の資料で使い方を学びましょう！

【Vercel】v0とは？主要機能や使い方、料金体系を徹底解説！活用事例も紹介

v0について詳細な解説が行われています。AIを活用したUIデザイン生成の仕組み、v0の特徴と利点、実際の使用例などが説明されており、デザインプロセスの効率化とイノベーションの可能性が紹介されています。使用方法が知りたい人だけでなく、v0は何ができるの？いくらかかるの？という疑問を持ったエンジニアにもお勧めです。

10. 学習の進め方

ここまでたくさんの資料を紹介してきましたが、多すぎて結局どれから始めれば良いの？という疑問は必ず生まれると思います。
この章では、そんな悩みを解決する学習に役立つ教材やロードマップ資料を紹介します。これに従って学習を進めて、完璧なフロントエンドエンジニアを目指しましょう！

フロント学習の最高の教材集

フロントエンド学習に役立つ無料または低価格の教材を紹介しており、特に実務で役立つスキルを身につけるための指針を提供しています。著者自身の経験を基に、JavaScriptやReact、TypeScriptなどの具体的な教材を挙げています。フロントエンドを網羅的に学び、かつ実務でも活かせる基礎作りを行い人は必見の記事です。

【2024年度版】0から始める！フロントエンドエンジニアのロードマップを徹底解説

必要なスキルや学習ステップが初心者向けに分かりやすくまとめられており、成長の道筋が明確になります。技術選定や学習リソースについても触れているため、キャリアを始めたい方に役立つ内容です。ここでは紹介しきれなかった項目も網羅しており、かつ2024年度版なので学習の出戻りの心配もありません。0からフロントエンドエンジニアの大枠を学びたい人にお勧めです。

Udemyを使って、フロントエンドエンジニアになるためのロードマップを考えてみた

Udemyを活用してフロントエンドエンジニアになるためのカリキュラムが提案されており、特に「Web Developer Bootcamp 2023」などの講座が推奨されています。幅広い内容を学べる講座を選定し、初心者向けに具体的な学習ステップを示しています。ネット記事だけではなく実際の講座などでフロントエンド開発を学びたい人にお勧めです。

11. 終わりに

フロントエンド学習は最初は難しく感じるかもしれませんが、基礎をしっかり学び、小さなステップで進むことが大切です。

今回紹介した資料を活用し、楽しみながらスキルを伸ばしていきましょう！継続すれば、必ず成長を実感できるはずです。

皆さんの学びが充実したものになることを願っています！