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

最新ツールの概要

ウェブ用のソフトウェアの作成は、年月を経てより洗練されてきました。 HTML、CSS、および JavaScript を「手作業で」記述することは依然として完全に合理的ですが、開発者がウェブサイトまたはアプリの構築プロセスを高速化するために使用できる豊富なツールが現在あります。

開発コミュニティの間で一般的な「おなじみの名前」になっている非常に確立されたツールがいくつかあり、特定の問題を解決するために毎日新しいツールが作成およびリリースされています。 自分自身の開発プロセスを支援するソフトウェアを作成したり、既存のツールではまだ処理されていないように見える特定の問題を解決したりすることさえあるかもしれません。

1 つのプロジェクトに含めることができる膨大な数のツールに圧倒されがちです。 同様に、 webpack のようなツールの単一の構成ファイルは数百行の長さになる可能性があり、そのほとんどは魔法の呪文であり、動作をしているように見えますが、それはマスターエンジニアだけしか完全には理解できません！

最も経験豊富なウェブ開発者でさえ、ツールの問題で行き詰まってしまうことがあります。アプリケーションコードの 1 行に触れる前に、ツールパイプラインを機能させるために何時間も無駄にする可能性があります。過去に苦労したことがある場合でも、心配しないでください。あなたは一人ではありません。

これらの記事では、ウェブツールに関するすべての質問に答えるわけではありませんが、基礎を理解するのに役立つ出発点を提供し、そこから構築することができます。 あらゆる複雑なトピックと同様に、小さく始めて、徐々に高度な用途へと進めていくのが良いでしょう。

最新ツールのエコシステム

今日の最新の開発者ツールのエコシステムは巨大であるため、ツールがどのような主な問題を解決しているかについて幅広い考えを持っていると役に立ちます。 お気に入りの検索エンジンで、"フロントエンド開発者ツール"と検索すると、テキストエディターからブラウザー、メモを取るのに使用できるタイプのペンに至るまで、膨大な範囲の結果が表示されます。

コードエディターの選択は確かにツールの選択ですが、この一連の記事ではそれを超えて、ウェブコードをより効率的に作成するのに役立つ開発者ツールに焦点を当てます。いくつかの具体的なツールをお勧めします。次のチュートリアルでは、それらの使用方法を説明します。これらは、この記事の執筆時点で人気のある標準的なツールです。相対的な利点を理解している場合は、これらのツール以外のツールを使用することも可能です。

大まかな観点から、クライアントサイドツールは、解決すべき問題を次の 4 つの大きなカテゴリーに分類できます。

• 環境 — 開発環境の設定に役立つツール（他のツールのインストールや実行など）です。
• セーフティネット — コード開発時に役立つツール。
• 変換 — 何らかの方法でコードを変換するツール。 中間言語をブラウザーが理解できる JavaScript に変換します。
• 開発後評価 — テストツールやデプロイツールなど、コードを記述した後に役立つツール。

これらをそれぞれ詳しく見ていきましょう。

環境

エディター、オペレーティングシステム、ブラウザーはすべて開発環境です。ここでは、あなたが最も使いやすいものをすでに決定していると想定します。ただし、他のツールをインストールして実行する前に、さらに 2 つの選択を行う必要があります。

• ツールを実行する場所。ローカルで実行されるツールのほとんどは JavaScript で記述されているため、コマンドラインから呼び出すことができる JavaScript インタープリターがコンピューターにインストールされている必要があります（ブラウザーのインタープリターではありません）。 Node.js は現在も業界標準であり、ここではこれを使用します。 Bun は、その速度と強力な API で知られる Node.js のドロップイン代替品として意図されています。
• ツールをどのようにインストールするか、言い換えれば、「パッケージマネージャー」です。 Node は既定で npm を提供しているので、これを使用します。それ以外にも、Yarn や pnpm など、それぞれ速度やプロジェクト管理などの利点がある人気のあるツールがあります。

セーフティネット

これらは、作成するコードを少し改善するためのツールです。

ツールのこの部分は、自分自身の開発環境に固有のものであるべきですが、すべての開発者が同じプロセスを使用するように、何らかのポリシーや 事前設定をインストールすることができる企業も珍しくありません。

これには、安定した信頼性の高いコードを開発するために、開発プロセスを容易にする何らかのものが含まれます。セーフティネット ツールも、コードを毎回触れることなく、間違いを防いだり、間違いを自動的に修正したりすることを支援するものでなければなりません。

開発者が使用している非常に一般的なセーフティネットツールの種類は次のとおりです。

リンター

リンターは、コードをチェックして、存在するエラー、エラーの種類、エラーが存在するコード行を通知するツールです。 多くの場合、リンターはエラーを報告するだけでなく、チームが使用している可能性のある特定のスタイルガイドの違反も報告するように構成できます（たとえば、インデントに間違った数のスペースを使用しているコード、または通常の文字列リテラルではなくテンプレートリテラルを使用しているコード）。

ESLint は、業界標準の JavaScript リンターです。これは、潜在的な構文エラーを検出し、コード全体で「ベストプラクティス」を奨励する高度に構成可能なツールです。 一部の企業やプロジェクトも ESLint 構成を共有しています。

それ以外にも、stylelint など、他の言語用のリンティングツールを見つけることができます。

ソースコード管理

バージョン管理システム (VCS) とも呼ばれるソースコード管理は、作業のバックアップやチームでの作業に不可欠です。 典型的な VCS には、変更を加えるローカルバージョンのコードが含まれます。 次に、サーバーのどこかに保存されているリモートリポジトリー内のコードの「マスター」バージョンに変更を「プッシュ」します。 通常、コードの「マスター」"コピーに対してどのような変更がいつ行われるかを制御および調整する方法があるため、開発者のチームがお互いの作業を常に上書きすることはありません。

Git は、最近ほとんどの人が使用しているソースコード管理システムです。 主にコマンド ラインからアクセスしますが、使いやすいユーザー インターフェイスからアクセスすることもできます。 コードを git リポジトリーに格納すると、それを独自のサーバーインスタンスにプッシュしたり、GitHub、GitLab、Bitbucket などのホストされたソース管理ウェブサイトを使用したりできます。

このモジュールでは GitHub を使用します。 詳細については、Git および GitHub を参照してください。

コードフォーマッター

コードフォーマッターは、コードのエラーを指摘するのではなく、通常、スタイルルールに従ってコードが正しくフォーマットされていることを確認し、理想的には見つけたエラーを自動的に修正する傾向があることを除いて、リンターに多少関連しています。

Prettier はコードフォーマッターの非常に一般的な例であり、モジュールの後半で使用します。

型チェッカー

型チェッカーは、コードが適切な場所に適切な型のデータを使用しているかどうかを調べ、より信頼性の高いコードを書くのに役立つツールです。これにより、存在しないプロパティへのアクセス、予期しない undefined など、一般的なバグの発生を防ぐことができます。

TypeScript は、JavaScript の事実上の標準型チェッカーです。これには独自の型注釈構文が用意されており、ある意味で適切な言語であるため、このモジュールでは取り上げません。

変換

ウェブアプリのライフサイクルのこの段階では、通常、「将来のコード」（ブラウザーでネイティブサポートされていない可能性のある最新の CSS や JavaScript 機能など）でコーディングするか、 TypeScript などの別の言語を完全に使用してコーディングすることができます。 変換ツールは、ブラウザーと互換性のあるコードを生成して、本番環境で使用できるようにします。

一般にウェブ開発は、HTML、CSS、JavaScript の 3 つの言語と考えられており、これらすべての言語に変換ツールがあります。 変換には、(とりわけ) 3 つの主な利点があります。

1. 最新の言語機能を使用してコードを記述し、日常の端末で動作するコードに変換する能力。 たとえば、最先端の新しい言語機能を使用して JavaScript を記述したい場合がありますが、それらの機能をサポートしていない古いブラウザーでも最終的な製品コードを動作させることができます。 ここでの良い例は次のとおりです。

   • Babel: 開発者が最先端の JavaScript を使用してコードを記述できるようにする JavaScript コンパイラー。Babel はそれを受け取り、より多くのブラウザーが理解できる旧式の JavaScript に変換します。 開発者は、Babel のプラグインを作成して公開することもできます。
   • PostCSS: Babel と同じようなことを行いますが、最先端の CSS 機能を対象としています。 古い CSS 機能を使用して何かを行う同等の方法がない場合、PostCSS は JavaScript ポリフィルをインストールして、必要な CSS 効果をエミュレートします。

2. コードをまったく別の言語で記述し、それをウェブ互換言語に変換するオプション。 例えば、

   • Sass/SCSS: この CSS 拡張機能を使用すると、変数、ネストされたルール、ミックスイン、関数、およびその他の多くの機能を使用できます。その一部はネイティブ CSS （変数など）で使用でき、一部は使用できません。
   • TypeScript: TypeScript は、多数の追加機能を提供する JavaScript のスーパーセットです。 TypeScript コンパイラーは、本番用にビルドするときに TypeScript コードを JavaScript に変換します。
   • React、Ember、Vue などのフレームワーク。フレームワークは多くの機能を無料で提供し、バニラ JavaScript の上に構築されたカスタム構文を介して使用できます。 バックグラウンドでは、フレームワークの JavaScript コードがこのカスタム構文を解釈し、最終的なウェブアプリとしてレンダリングするために懸命に働いています。

3. 最適化。これは、バンドリングツールによって提供されます。バンドリングツールは、例えば「ツリーシェイク」によって、実際に使用しているコードライブラリーの部分だけが最終的な本番コードに確実に含まれるようにしたり、「縮約 を使用して、本番コードの空白をすべて除去し、サーバーにアップロードする前にコードをできるだけ小さくします。例えば、次のようにします。

   • Webpack は、膨大な数のプラグインと強力な設定システムを備えた、長い間最も人気のあるバンドラーです。しかし、設定が非常に複雑であり、現行の代替ツールに比べて速度が遅いことでも知られています。
   • Vite は、そのスピード、分かりやすさ、豊富な機能で人気の、より新しいビルドツールです。

開発後評価

開発後評価ツールにより、ソフトウェアがウェブに公開され、実行され続けることが保証されます。 これには、展開プロセス、テスト フレームワーク、監査ツールなどが含まれます。

開発プロセスのこの段階は、アクティブな対話を最小限にしたい段階です。そのため、構成が完了すると、ほとんど自動的に実行され、何か問題が発生した場合にのみポップアップして通知します。

テストツール

これらは通常、コードに対してテストを自動的に実行して、先に進む前にコードが正しいことを確認するツールの形をとります（たとえば、変更を GitHub リポジトリーにプッシュしようとする場合）。 これには、リンティングだけでなく、コードの一部を実行して正常に動作することを確認する単体テストなどのより高度な手順も含まれます。

• テストを作成するためのフレームワークには、 Jest、Mocha、Jasmine が含まれます。
• 自動化されたテスト実行および通知システムには、 Travis CI、Jenkins、Circle CI、その他様々なツール があります 。

デプロイツール

デプロイシステムを使用すると、ウェブサイトを公開することができ、静的サイトと動的サイトの両方で使用でき、一般にテスト システムと一緒に動作する傾向があります。 たとえば、一般的なツールチェーンは、変更がリモートリポジトリーにプッシュされるまで待機し、いくつかのテストを実行して変更が問題ないかどうかを確認し、テストに合格すると、アプリを運用サイトに自動的にデプロイします。

GitHub Pages は GitHub 自体とよく統合されており、すべての公開リポジトリーで無料で利用できます。それ以外にも、Netlify や Vercel などのサービスも、豊富な無料クォータ、スムーズな展開ワークフロー、GitHub との統合などの機能でとても人気があります。

その他

開発後の段階で使用できるツールは、他にもいくつかの種類があります。たとえば、コード品質指標を収集するための Code Climate、クロスブラウザーの互換性やその他のチェックのランタイム分析を実行するための webhint ブラウザー拡張機能、より強力な機能を提供するための GitHub ボットなどがあります。 GitHub の機能、アプリの稼働時間の監視を提供する Updown など、他にもたくさんあります！

ツールの種類に関するいくつかの考え

開発ライフサイクルでさまざまなツールタイプが適用される順序は確かにありますが、ウェブサイトをリリースするためにこれらすべてを用意する必要はありませんのでご安心ください。 実際、これらは必要ありません。 ただし、これらのツールの一部をプロセスに含めることで、独自の開発エクスペリエンスが向上し、コードの全体的な品質が向上する可能性があります。

新しい開発者ツールがその複雑さに慣れるまでには時間がかかることがよくあります。 最もよく知られているツールの 1 つである webpack は、操作が非常に複雑であるという評判がありますが、最新のメジャー リリースでは、一般的な使用法を簡素化することが大きく推進されたため、必要な構成は最小限に抑えられています。

ツールの成功を保証する特効薬は絶対にありませんが、経験を積むにつれて、 適した 自分やチームとそのプロジェクトに ワークフローを見つけることができます。 プロセスのねじれがすべて平らになれば、ツールチェーンは忘れることができるものになり、機能する はず です。

特定のツールを選択してヘルプを表示する方法

ほとんどのツールは、単独で作成およびリリースされる傾向があるため、ほぼ確実に利用可能なヘルプがありますが、同じ場所または形式になることはありません。 そのため、ツールの使用に関するヘルプを見つけることや、使用するツールを選択することさえ難しい場合があります。 どのツールを使用するのが最適かについての知識は少し部分的です。つまり、まだウェブコミュニティに参加していない場合、どのツールを使用すればよいかを正確に判断するのは困難です。 これが、このシリーズの記事を書いた理由の 1 つであり、他の方法では見つけるのが難しい最初のステップを提供することを願っています。

おそらく、次のものの組み合わせが必要になるでしょう。

• 経験豊富な教師、メンター、仲間の学生、または経験があり、以前にそのような問題を解決した経験があり、アドバイスを提供できる同僚。

• 検索するのに便利で最適な場所。 フロントエンド開発者ツールの一般的なウェブ検索は、検索しているツールの名前がわかっている場合を除き、通常は役に立ちません。

  • たとえば、npm パッケージマネージャーを使用して依存関係を管理している場合は、 npm ホームページ にアクセスして、探しているツールの種類を検索することをお勧めします。日付フォーマット ユーティリティ、または一般的なコードフォーマッターを検索している場合は「formatter (フォーマッター)」。 人気度、品質、メンテナンス スコア、およびパッケージが最後に更新されたのはいつ頃かを確認してください。 また、クリックしてツールページにアクセスし、パッケージの月間ダウンロード数や、必要な機能を備えているかどうかを判断するために使用できる適切なドキュメントがあるかどうかを確認してください。 これらの基準に基づくと、 date-fns ライブラリー は、使用するのに適した日付フォーマット ツールのように見えます。 このモジュールの第 3 章では、このツールの動作を確認し、パッケージマネージャー全般について詳しく学習します。
  • ツール機能をコードエディターに統合するためのプラグインを探している場合は、コードエディターのプラグイン/拡張機能のページを参照してください。たとえば、VSCode 拡張機能を参照してください。フロントページで注目の拡張機能を確認し、必要な種類の拡張機能（またはツール名、たとえば VSCode 拡張機能ページで "ESLint" を検索）を検索してみてください。 結果が得られたら、拡張機能の品質の指標として、星の数やダウンロード数などの情報を確認します。

• MDN Learn Discourse や Stack Overflow など、使用するツールについて質問するための開発関連のフォーラム。

使用するツールを選択したら、最初に立ち寄るのはツールプロジェクトのホームページです。 これは本格的なウェブサイトである場合もあれば、コードリポジトリー内の単一の readme ドキュメントである場合もあります。 たとえば、date-fns のドキュメントは非常に優れており、完全で、簡単に理解できます。 ただし、一部のドキュメントは技術的でアカデミックなものであり、学習ニーズに適していない場合があります。

代わりに、特定の種類のツールを使い始めるための専用のチュートリアルを見つけたいと思うかもしれません。 CSS Tricks、Dev、freeCodeCamp、Smashing Magazine などのウェブサイトは、ウェブ開発業界向けに作成されているため、最初に検索することをお勧めします。

繰り返しますが、おそらくいくつかの異なるツールを試して、適切なツールを探し、それらが理にかなっているか、十分にサポートされているか、目的の機能を実行しているかどうかを確認します. これは問題ありません。すべて学習に適しています。経験を積むにつれて、道はスムーズになります。

まとめ

これで、クライアント側のウェブツールのトピックの概要についての簡単な紹介を締めくくります。 次に、多くのツールが呼び出されるコマンド ラインの速習コースを提供します。 コマンド ラインで何ができるかを見てから、最初のツールをインストールして使用してみます。

• Overview: クライアントサイドウェブ開発ツールを理解する
• 次のページ