クライアントサイドウェブ開発ツールの理解

クライアントサイドのツールは敷居が高いかもしれませんが、この一連の記事は、最も一般的なクライアントサイドツールの型の目的を示し、一緒に連携できるツールを説明し、パッケージマネージャーを使用してそれらをインストールする方法を説明し、コマンドラインを使用してそれらを制御することを目的としています。最後に、生産的になる方法を示す完全なツールチェーンの例を提供することで完了します。

前提条件

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

ガイド

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

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

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

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

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

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

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

このシリーズの最後の数記事では、サンプルケーススタディツールチェーンを構築するプロセスを紹介することで、ツールの知識を固めます。理にかなった開発環境を設定し、その場所に変換ツールを置くところから、実際に Netlify にアプリを展開するところまで、すべて説明します。この記事では、ケーススタディを紹介し、開発者ツールを設定し、コード変換ツールを設定します。

5. アプリのデプロイ

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