クライアントサイドツールには、なかなか難しいものもありますが、この記事シリーズでは、いくつかの一般的なクライアントサイドツールの種類について、その目的を示し、一緒に連携させることができるツール、パッケージマネージャを使ったインストール方法、コマンドラインでの制御を説明します。最後にツールチェーンの例を示して、生産性を高める方法を説明します。

前提条件

ここで紹介しているツールを使う前に、まずはコアのHTML、CSS、JavaScriptの基礎を学習することをお勧めします。

フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

始めましょう

ガイド

1. クライアントサイドツールの概要

この記事では、最新のウェブツールの概要、どのような種類のツールがあるのか、どこでウェブアプリ開発のライフサイクルを見つけるのか、そして個々のツールのヘルプを見つける方法について説明します。

2. コマンドライン集中コース

開発プロセスにおいて、ターミナル (または"コマンドライン") で何らかのコマンドを実行する必要があることは間違いありません。この記事では、ターミナルの紹介、ターミナルに入力する基本的なコマンド、コマンドを連鎖させる方法、独自のコマンドライン・インターフェース (CLI) ツールを追加する方法について説明します。

3. パッケージ管理の基本

この記事では、プロジェクトツールの依存関係をインストールしたり、最新の状態に保つなど、自分のプロジェクトでどのようにパッケージマネージャを使用できるかを理解するために、パッケージマネージャーについて詳しく説明していきます。

4. ツールチェーンの紹介

このシリーズの最後の数回では、サンプルケーススタディのツールチェーンを構築するプロセスを通じて、ツールに関する知識を確実なものにします。開発環境を構築し、変換ツールを導入し、実際にアプリをNetlifyにデプロイするプロセスを紹介します。

5. アプリのデプロイ

シリーズの最終回では、前回の記事で構築したツールチェーンの例を使い、サンプルアプリをデプロイできるようにしていきます。コードをGitHubにプッシュし、Netlifyを使ってデプロイし、簡単なテストを組み込む方法も紹介します。