ウェブ技術のコア (HTML, CSS, JavaScript のような) での快適なプログラミングを開始して、経験を積んで、色んなリソースを読み、色んなコツや技を学習すると、JavaScript フレームワークからテスト自動化ツールやそれ以外まで、すべてのツールに出くわします。ウェブプロジェクトが大きく複雑になっていくと、こうしたツールを活用したり、コードの信頼できるテスト計画を考案したくなるでしょう。

さらに、クロスブラウザーのサポートを引き続き維持することを念頭に置き、ユーザーのウェブブラウジングに使用されているさまざまなブラウザーやデバイス間でプロジェクトを動作させるベストプラクティスに従う必要があります。そして障害を持つ人々が利用できるようにすることです。

あなたが使用すべきツールを考え出すことは難しい処理でありえるため、私たちは一連の記事を書いて、利用可能なツールの種類、あなたのためにできること、現在の業界のお気に入りを利用する方法をお伝えします。

メモ: このトピックでは多数のツールを参照していますが、必ずしもこれらのツールを最良または唯一の方法として推奨しているわけではなく、動作していてサポートしているためです。ほとんどの場合、他にも方法がありますが、古いものは時代遅れで、間違いなく新しいものが出てきます。

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

あなたが目標に向かって頑張るために必要なすべての必要な情報を含むコースをまとめました。

始めましょう

前提条件

ここで説明したツールを使用する前にまずベースとなる HTML、CSS、および JavaScript 言語の基本を最初に理解しておく必要があります。たとえば、複雑なウェブコードで問題をデバッグしたり、JavaScript フレームワークを効果的に使用したり、テストランナーなどを使用してコードをテストして実行したりする前に、これらの言語の基礎を知る必要があります。

それに加えて、このトピックの最初のモジュールから始めて、そこでエリア全体の便利な概観を得るべきでしょう。

モジュール

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

クライアント側のツールには脅威を感じますが、この記事シリーズではいくつかの普遍的なクライアント側のツール種類ごとに目的を例示して、一緒に連携させるツールや、パッケージマネージャーを使ったインストール方法、コマンドラインでの制御を説明します。最後にツールチェーンの例と、どのように生産的になるのかを示します。

クライアント側 JavaScript フレームワークを理解する

JavaScript フレームワークは、現代のフロントエンドウェブ開発に欠かせないもので、スケーラブルでインタラクティブなウェブアプリケーションを構築するための試験済みのツールを開発者に提供しています。多くの企業がフレームワークをツールの標準的な部分として使用しているため、フロントエンド開発の仕事の多くはフレームワークの経験を必要としています。このモジュールでは、クライアント側のフレームワークがどのように機能し、ツールセットにどのように適合するかについての基本的な背景知識を学び、その後、現在最も人気のあるフレームワークのいくつかをカバーするチュートリアルシリーズに進みます。

Git と GitHub

開発者はいくつかの バージョン管理システム (VCS)を使い、このツールにてプロジェクトの他の開発者と、お互いの成果を上書きする危険なく、後に問題が見つかった場合前バージョンのコードベースにロールバックできます。最も人気のある VCS (少なくともウェブ開発では) は Git と、それで動作するリポジトリとツールをホストするサイトの GitHub です。このモジュールではその両方について知っておくべきことを教えます。

クロスブラウザーのテスト

このモジュールではさまざまなブラウザー間でウェブプロジェクトをテストする領域を具体的に示しています。ここでは、ターゲットとするユーザー層 (たとえばユーザー、ブラウザー、端末の中で最も心配する必要があるもの)、テストの方法、さまざまな種類のコードで直面する主な問題、問題をテストして解決するのに最も有用なツールと、テストをスピードアップするために自動化する方法について説明します。