テキストエディットやメモ帳を開いて「<HTML>」と入力し、プロジェクトが幕を開ける。そんな手法には、何とも言えない哀愁と魅力があります。多くの人が、そうやってプログラミングの世界に没頭してきました。そして今、ウェブ開発ツールはもはや、テキストを記録するだけにとどまらず、プロジェクトの運営を支援し、そのプロセス全体を加速させるものに。HTMLやCSSだけでなく、さまざまな要素が網羅されています。
例えば、企画段階でもツールが重要な意味を持ちます。ワイヤーフレーム、デザインの選択、共同作業のワークフローなどを検討する必要があります。さらに、JavaScriptフレームワークの選定、統合開発環境（IDE）の使用などについても考慮が欠かせません。
この記事では、2024年に知っておきたい62のウェブ開発ツールをご紹介します。まずは、本題に入る前に、私たちが考える「ウェブ開発ツールとは」という基本からお話ししたいと思います。
ウェブ開発ツールとは
表面的には、ウェブ開発ツールの分類は簡単そうに見えます。しかし、実際には考慮すべき点がいくつもあり、その境界は曖昧です。
例えば、動画配信サービスが開発ツールに含まれるかどうか。黎明期には、おそらくそうではなかったでしょう。しかし、特定のデザインのために画面を録画するのであれば、一種のコラボレーションツールに早変わりします。
私たちが考えるウェブ開発ツールとは、プロジェクトの目的を集中的に達成するためのものです。個々のプログラミング言語は含まれませんが、サブセット、スーパーセット、TypeScriptのようなフレームワークがあり、その境界線をまたいでいます。開発者として腕を上げるには、こうした点を理解しておくことが重要です。
もうひとつの例として、Gitを考えてみましょう。このバージョン管理システム（VCS）は、多くの分野をカバーしていると言えるかもしれません。コマンドを実行するために使われる特定の言語があり、中核となる機能はウェブ開発の面で非常に多くのメリットをもたらしてくれます。また一方で、学習ツールとして使うこともできます。特に、課題追跡ログやコミットを徹底的に調べることで、多くの学びを得ることができるでしょう。
ウェブ開発ツールは、プロジェクトを効率的かつ生産的に進めるためのものであれば、何でもありです。実際にこの記事を読み進めていけば、この多様性に気づくはずです。
ウェブ開発ツールでワークフローを効率化する方法
身に覚えのある人なら誰もが肝を冷やす言葉、それがクランチ。
クランチとは、ゲームを主にした開発業界で、納期寸前に追い込みをかけ、それに伴い多くの残業が発生する（強要される）状況を指します。言うなれば、ウェブ開発ツールに救いを求める悲鳴。統計データからは、多くの開発現場にクランチ文化が根付いていることが予想されます。
あなたの会社にクランチや残業があるかどうかは別として、ウェブ開発ツールは、あらゆる作業の効率化を助けます。一日の雑多な作業を自動化することで、手間を大幅にカット可能です。
しかし、スクラムのようなアジャイル開発のもとで作業している場合、ツールの利用からさらなるメリットが得られることも。例えば、JSFiddleのようなツールは、スプリント最終段階に他のチームとコードを共有し、次のスプリントに備える術として有用です。
毎日のスタンドアップミーティング（※注釈：アジャイル開発現場で広く採用されている短い会議）が一般的な情報共有に終始するのに対し、DiscordサーバーやSlackチャンネルは、既存のスプリントのゴールに関連したプレッシャーから離れ、目の前のタスクに集中し調整を行う便利な手段となります。
ウェブ開発ツールについて言えば、実行そのものと同じくらい、計画することが重要です。
開発スタックの選定方法
このように、ウェブ開発ツールには、ゴールドのM1チップ搭載MacBook Airに引けを取らない価値があります。特定のプロジェクトに適したツールを組み合わせて使うことが、仕事の基礎を固めることに直結します。
これまで特に意識したことがないのであれば、最初の計画段階を大事にしましょう。使用するツールの決定に時間がかかると、プロジェクトのコーディングに遅れが出そうなものですが、ソフトウェアに関連する潜在的な問題が少なくなるため、この時間は後で取り戻せます。また、全員が同じ見解と方向性を持つことで、一貫したアウトプットに集中することができます。
開発スタック選定における留意事項
プロジェクトに適したスタックを選ぶには、以下の点を考慮しましょう。
- 複雑さ：成果物がどの程度複雑になるかを検討し、それによってスタックの構造を決定します。
- スケーラビリティ：プロジェクトが地域密着型の企業であれば、グローバル企業とは異なるソリューションが必要になります。目的にあった柔軟性を特定するようにしましょう。
- セキュリティ：言うまでもなく、ユーザーとサイトのセキュリティは、どのようなものであっても妥協すべきではありません。
- コスト：予算が限られている場合は、コストに重きを置く必要があります。
テクノロジーは2つの側面に分けられます。
- サーバーサイド： 使用するバックエンドテクノロジーに注目します。例えば、ホスティングやウェブサーバーの選択、Key-ValueやSQLストレージ、アプリや自動化フレームワーク、そしてもちろんプログラミング言語などが挙げられます。
- クライアントサイド：フロントエンドのツールの選択は、特に使用する言語に関して言えば、サーバーサイドよりも簡単です。HTML、CSS、JavaScriptを使用することが予想されますが、JavaScriptフレームワーク（およびフレームワーク）の選択には、それなりの考慮が必要です。
実際の開発スタックを見ると、多くの大規模サイトで、JavaScriptとReact.jsの組み合わせに加え、Nginxが使用されているようです。また、Memcached、Redis、Ruby on Railsも開発スタックで高い人気を誇ります。
2024年に注目したいウェブ開発ツール62選
それでは、2024におすすめのウェブ開発ツールを見てみましょう。カテゴリー別に整理しましたが、それ以外は順不同です。お急ぎの場合は、下記のリンク一覧から気になる項目にジャンプしてください。
ローカル開発環境
ローカル開発環境は、あらゆる開発スタックに求められる要素です。特にウェブ開発には欠かせません。人気のローカル開発ツールをいくつかご紹介します。
1. DevKinsta
個人的な見方も入りますが、DevKinstaは2024年以降、ナンバーワンの座を獲得し得る優れたウェブ開発ツールです。
DevKinstaはKinstaが自社開発したもので、私たち社員一同、このツールを誇りに思っています。
DevKinstaは、すぐに使えるWordPressサイトのローカル開発環境ツールです。MacOSとWindows（Linux版も準備中）に対応し、WordPressサイトをデザイン、開発、デプロイできる包括的スイートとして機能します。
現在進行中のプロジェクトに合わせて、事細かに調整可能です。例えば、サーバー（NginxやApache）、PHPバージョン、MariaDBやMySQLなど、さまざまなものを選択することができます。
さらに多くの機能があります。内蔵のSMTPサーバーを通じて、メールのデバッグとテストができ、データベース管理には、Adminerを使用することもできます。
言うなれば、DevKinstaは現代のWordPress開発シーンをあらゆる面から後押しするソリューションです。しかも、ワークフローにスムーズに導入することができます。
私たちは、開発者、デザイナー、フリーランス、代行業者といった方々を念頭に置いて、このツールを開発しました。日常的に開発を行う（特にKinstaのホスティングサービスをご利用中の）あらゆる人にご活用いただけます。
さらに嬉しいことに、DevKinstaは完全に無料です。
2. MAMP
高速なサンドボックスツールの登場により、ウェブページを作成・デプロイする過去のツールはお払い箱に。そんなイメージを抱いている人は少なからずいるはずです。しかし、LAMP、MAMP、XAMPPといった歴史あるウェブサービススタックは、今でも健在です。
一般的には、Linux、macOS、Windowsなどのオペレーティングシステム（OS）と、Apacheウェブサーバー、MySQLデータベース、Python、PHP、Perlなどのプログラミング言語が1つのスタックにまとめられています。このようなウェブサービススタックは、2024年もまだ活用されることでしょう。
MAMPは、macOSに特化したツールです。スタックをインストールし、設計とデプロイメントに取り組むことができます。この手法は、最新のセットアップに比べると、長時間になることがありますが、内部には同程度の柔軟性が確保されています。
DevKinstaのようなツールでは、洗練されたグラフィカルユーザーインターフェース（GUI）から操作できますが、ウェブサービススタックでは、必要な機能を適宜、自分の力でインストールする必要があります。例えば、WordPressサイトを立ち上げるには、自分で設定する以外に方法はありません。メールのテストも同じです。
他のローカル開発環境ツールと同様、MAMPは完全に無料です。しかし、WindowsとMacの両方に対応したMAMPの有料版もあります。機能が強化された、包括的かつ堅牢なウェブ開発ツールです。
その柔軟性と価格から、歴史あるウェブサービススタックは今でも、多くの開発者のパソコンで活躍しています。特にHomebrew、Flatpak、Niniteのようなパッケージマネージャを愛用している人にとって、有力なソリューションになるはずです。
もちろん、Apacheの開発者も、MySQLやPython、PHPの開発者と同じように、これらのスタックを使うことになるでしょう。ひいては、WordPress開発者の役にも立ちます。
3. XAMPP
XAMPPもまた、WordPressを含むPHP開発者から愛されるウェブサービススタックです。名前にある「X」はこのツールのクロスプラットフォーム性を表しています。Windows、macOS、Linuxにインストールすることができます。
以前は様々なウェブサービススタックに差がありましたが、絶え間ないアップデートと改善により、開きは少なくなっています。とは言え、XAMPPにはいくつかの特徴があります。
例えば、MySQLがデフォルトのリレーショナルデータベース管理システム（RDMS）ではなくなり、代わりにXAMPPではMariaDBが使用されています。Oracle社による買収後、他のソリューションに切り替えたことを考えると、MariaDBの方がより正確に本番サーバーを表現していると思われます。
さらに、XAMPPのパッケージにはウェブアプリのインストーラが含まれています。BitnamiはSoftaculousなどのソリューションと似ていますが、XAMPPに特化したものです。
多くのアプリが用意されています。興味深い点としてWordPressのインストーラもこれに含まれます。多くのアドオンがあり、XAMPPはローカル開発のための柔軟なソリューションとなっています。
テキストエディターとコードエディター
どのコードエディターを使うべきか、という議論をし始めれば枚挙に暇がありません。様々な意見があり、それぞれに熱狂的なファンがいます。
しかし、調査結果が正しければ、おそらくSublime Text、Visual Studio Code（VSCode）、またはIntelliJ IDEAが広く利用されていると言えるでしょう。この4つのツールは、単純なテキスト編集から本格的な統合開発環境（IDE）までを網羅するもので、理にかなっています。しかし、他にも言及に値するものがあります。そのうちのいくつかを見てみましょう。
4. Visual Studio Code
2015年に発売されて以来、Visual Studio Codeはあらゆる種類の開発環境に採用されています。
Microsoftによって開発されたオープンソースのコードエディターです。IDEとみなされるのに十分な機能を備えています。ウェブ開発者の55%が日々、Visual Studio Codeを使用しており、市場の半分以上を占める十分な機能性を提供していることは間違いありません。
デフォルトの設定では、Visual Studio Codeは何よりもまずテキストエディターです。しかし、拡張ライブラリと組み合わせることで、モジュール化され、あらゆる開発ニーズに対応できる柔軟性を備えます。
選択した言語のリンターやフィクサー（ESLintやPHP CS Fixerあり）、そして、DockerやVagrantの拡張機能などをインストールすることができます。
言語といえば、Visual Studio CodeはJavaScript、Node.js、TypeScriptをデフォルトでサポートしています。拡張機能は多岐にわたり、好みの言語をサポートするものを簡単に見つけることができるはずです。
さらに、GitHubをはじめとする他のMicrosoft製品との連携も充実しています。
Visual Studio Codeは完全に無料であり、機能を考えると、多くの人にとって理想的なものです。VS CodeはIDEAとSublime Textの間の優れた存在と言えるでしょう。Sublime Textについては、次の項目をご覧ください。
5. Sublime Text
Sublime Textは、テキストエディターの世界では主力です。Sublime Textは他のエディターよりもシンプルですが、その外見とは裏腹にパワフルな機能を備えています。
Sublime Textの機能の多くは、他の競合製品にも見られます。コマンドパレットは、多くのソリューションで採用されているもので、簡単に使いこなすことができます。
さらに、複数の列を一度に編集する複数選択など、便利な編集用キーボードショートカットが用意されています。また、Goto Anything機能を使い、Vimのようなキーボードショートカットの組み合わせで、ファイルをたどることができます。
Sublime Textは、非常に自由な試用期間を持つ有料ツールです。無料とも言えますが、継続的に使用するにはライセンスを購入する必要があります。
私たちの見るところ、多くの小規模または趣味で嗜むプログラマーにとって、Sublime Textは必要最低限の機能をしっかりと網羅した優れたエディターです。美しいビジュアル、煩わしさのないレイアウト、拡張性により、多くの開発者に支持されています。
6. Atom
一時期、Atomは多くの開発者に愛用されていました。しかし、Visual Studio Codeの登場以来、その採用は減少しています。様々な用途に使える優れたコードエディターであるだけに、残念でなりません。
GitHubで開発されたアプリなので、Microsoftで序列が下がっている理由も、何となくわかるかもしれません。しかし、定期的に更新されており、Visual Studio Codeの代替と考えることもできます。
テキスト編集は機能的で、Visual Studio Codeと同様にGitHubとの統合が組み込まれています。また、「パッケージ」と呼ばれるアドオンも多数あります。
Atomにはたくさんのパッケージが用意されており、ワークフローやプロジェクトに合わせて、自由にカスタマイズできます。テーマも複数あり、中にはOne Darkのように、他のエディターに採用されるほど人気の高いものがあります。
Atomは機能的なコードエディターであり、試してみるだけの価値はあります。しかし、AtomはElectronをベースに作られており、一部のユーザーからは、ファイルの大きさやプロジェクトの実行が遅いことに不満の声が挙がっています。そのため、小規模なプロジェクトや素早い記述には適していますが（特に内蔵のターミナルパッケージ）、複雑な作業には向いていないかもしれません。
7. Notepad++
Notepad++は、IntelliJ IDEAやVisual Studio Codeのような、「大物」コードエディターの代わりにはならないかもしれません。しかし、シンプルなスクリプトや一般的なテキスト編集といった用途であれば、便利な選択肢です。
プロジェクトによっては、乗り換えを検討するのも悪くないでしょう。Notepad++は、そのシンプルさにもかかわらず（またはそれを武器に）、さまざまなプロジェクトで使用されています。
Windows専用のコードエディターなので、名前の「プラス・プラス」の要素も納得です。もちろん、メモ帳はWindowsに標準で搭載されている、ごく普通のテキストエディターです。Notepad++は、メモ帳に似ていますが、以下のような開発に特化した機能も備えています。
- タブとスプリットウィンドウ
- 約80のプログラミング言語をサポート
- オートコンプリート機能
- 関数リスト：ファイル内で使用されているすべての関数を一目で見ることができる
さらに、Notepad++は、プロジェクト管理に関しても柔軟です。セッション、ワークスペース、プロジェクトという3つのアプローチに対応しています。Notepad++を使い始めると、1ページのスクリプトだけでなく、より大規模なプロジェクトに使えることがわかるはずです。
Notepad++は、カスタマイズ可能な優れた機能性を求める開発者におすすめです。また、オープンソースのVimのような雰囲気もあり、プロジェクト次第では十分に有用でしょう。
8. JetBrains
開発用IDEといえば、JetBrainsの製品群の名前がまず挙がるはずです。ビジネスモデルが秀逸で、JetBrainsから多くのエディターが公開されていますが、それはすべて、主要なエディターであるIntelliJ IDEAの「サブセット」という位置づけになっています。
IDEAは、Java IDEを標榜し、実質的に、他のIDEツールにある機能のすべてを網羅していると言っていいでしょう。そして、プログラミング言語も数多くサポートしています。
例えば、PyCharmはIDEAからPythonに関連した機能を抜き取り、個別のツールとしてパッケージ化したものです。また、phpStormやWebStormも同じような機能を持っています。
IDEAは簡単に使えます。設定や構成に手間をかけることなく、コーディングに専念できます。意外かもしれませんが、VimのようなコマンドラインエディターとIDEAには類似点があります。
どちらのツールもワークフローと効率に重点を置いており、IDEAではVimのキーボードバインディングをインポートすることもできます。
大規模なプロジェクトや企業でソフトウェア契約を結んでいる場合、IntelliJ IDEAの使用頻度が高くなることが予想されます。プロジェクトの共有や一貫した環境の確保に便利です。多くのWordPress開発者がJetBrains製品を使う背景には、プロジェクト管理の強さがあります。
価格も無視できない重要な要素です。IntelliJはサブスクリプションモデルを採用しており、年間数万円の費用が発生します。
とは言え、JetBrains製品には「コミュニティ」エディションが存在します。しかし、完全なソフトウェアに比べると縮小版であり、基本的には複数の要素を取り除いたオープンソースソリューションとなっています。
さらに、JetBrainsは、オープンソースプロジェクト、スタートアップ、教育機関、Docker Captainなど、多くのグループに対して特別価格を提供しています。
ウェブデザインとプロトタイピングツール
もちろん、ウェブアプリケーションは、優れたユーザーエクスペリエンス（UX）なしには成立しません。レイアウトやビジュアルのプロトタイピングには、専用のツールが必要になるものです。デザインツールは、サーバー側とクライアント側の両方の開発において重要です。そこで、以下に、人気の高いツールをいくつかご紹介します。
9. Figma
Figmaは、今話題のウェブ開発ツールです。共同作業に使えます。
ドラッグ＆ドロップ式のエディターを使って、インターフェースや各要素を構築することができます。スキル次第では、コードを編集し、プロジェクトにそのまま埋め込むこともできます。Figma は、アイデア出しから実装までのプロセスをスムーズにしてくれる優れものです。プロジェクトチェーン全体を通した修正の必要性を最小限に抑えることができます。
また、フォントや色の選択に使える便利な機能も揃っています。Type Scaleのような外部ツールを使う手間が省けます。
もちろん、Adobe Color、Coolorsなどのカラーピッカーも不要になります。
Figmaは一人での利用にも便利ですが、規模が大きくなればなるほど強さを発揮します。チームでの作業を行う際には、アセットリポジトリや再利用可能なコンポーネントなど、多くの機能の利便性が光ります。また、チームをまとめる立場の人は、各ユーザーの作業を把握する機能に大きな価値を見いだせるはずです。
価格については、Figmaは標準的な階層では「エディター/編集者」1人につき12ドル、企業ベースのチームでは「エディター/編集者」1人につき45ドルかかります（「エディター」というのは「利用者」と読み変えることができます）。このように、何人もスタッフを雇うと、価格が上がっていく可能性があります。
10. Sketch
SketchはmacOS専用アプリで、開発者の間でもよく名前が挙がります。
Sketchは、macOSのネイティブアプリであることを考えると納得の使い勝手です。AppleのXcode IDEに少し似ていますが、これは決して悪いことではなく、むしろ高い操作性を意味します。
ベクター編集やサイズ変更など、基本的な機能が網羅されています。これにとどまらず、このアプリには、デザインを作成したあとに、他の人にすばやく共有する機能もあります。
例えば、Sketchのスマートレイアウトは、自動でサイズを調整（例：ボタン内の文字数にあわせてボタンそのもののサイズを自動で拡大縮小）する便利な機能です。また、多くのコラボレーション機能が用意されており、利用者思いのツールとなっています。
SketchはFigmaのようなツールとは異なり、フリーランスや一人の開発者が無料で利用でき、必要であれば、サブスクリプションを購入することが可能です。Sketchの価格設定は、99ドルの一括払いか、1ユーザーあたり月額9ドルとなっています。
11. InVision Studio
InVision Studioは、「スクリーンデザイン」アプリを自称するツールです。たしかにこの宣伝文句は理に適っているかもしれません。InVision Studioは、直感的なレイヤーベースのエディターやベクターサポートなど、業界で必要とされる様々な特徴や機能を誇ります。
とりわけ、プロトタイピングとアニメーションを得意としています。例えば、ポイント、クリック、ドラッグでアートボードとスクリーンをリンクさせることができます。この機能により、アニメーションを後で合わせる代わりに、デザインプロセスの一部として構築することが可能です。
共有コンポーネントライブラリ、グローバル同期オプション、堅牢なインスペクトモードなどがあるため、チーム全体でInVision Studioを使い作業を進めることが可能です。
価格体系も魅力的です。InVision Studioの無料版では、保存できるドキュメントの数に制限があるだけで、有料版のほぼすべての機能が利用できます。Pro（約95ドル/ユーザー/年）は、その機能性を考えると十分に利用する価値があります。
12. Affinity Designer
Adobe Illustratorユーザーであれば、Affinity Designerの存在は知っているかもしれません。開発元Serifのグラフィックデザインに対するアプローチは、Adobeの製品群に決して引けを取らないレベルです。
発売以来、コミュニティとの密な関係、優れた設計、魅力的な価格モデルにより、急成長を続けています。Mac、Windows、iPadバージョンがあり、それぞれでベクター、ラスター、またはその両方を同時に扱うことができます。
カラープロファイルや書き出しオプションなど、Illustratorにあるような機能の数々が広く網羅されています。
端的に言えば、プロ仕様のグラフィックス作成に必要な機能が一通り揃っています。さらに、価格設定も破格です。一回払いで50ドル程度です。Illustratorのようなクラウドベースのオプションはありません。それでも、1回限りの購入で、Adobeに引けを取らない機能が手に入ります。
13. CodePenまたはJSFiddle
先ほどIntelliJ IDEAについて説明したとき、そのマイナーであるものの便利な機能の一つであるScratchファイルには触れませんでした。この機能により、作業中のプロジェクトに影響を与えることなく、素早くコードを書いてテストすることができます。
他のコードエディターをお使いの方には、CodePenやJSFiddleのようなソリューションが優れた代替品となります。HTML、CSS、JavaScriptの3つのテキストエディタと、結果を確認するための出力画面が用意されており、どちらも似たような仕組みになっています。
プラットフォームに応じ「Pen」や「Fiddle」と名前を付け、保存して、他の人と簡単に共有することができます。プロジェクトを進める上で発生した、まだまとまりきっていない考えを、素早く記述したり、検証したりするのに便利です。
「オンラインIDE」機能も有用です。ファイルの中の特定の要素を示し、変更点などを説明することができます。さらに、チャットや「ライブ通話」によるコラボレーションも可能です。
オンラインIDEは、あまり頻繁に言及されませんが、優れたコード記述のために多くの開発者に使用されているという点で、縁の下の力持ち的なウェブ開発ツールだと言えます。
14. Buttons Generator
Buttons Generatorは、無料のオンラインCSSボタン生成ツールで、クリックするだけで様々なCSSスタイルを作成することができます。表示される中から、好きなものを見つけて利用できます。スタイルをクリックすると、CSSがクリップボードに追加されます。
ボタンの色やスタイルをそのまま使うこともできますし、CSSを編集して好きな色やスタイルをボタンに与えることもできます。3D、グラデーション、シャドーボーダー、ニューモフィズム、レトロ、スライディングエフェクトなど、さまざまなスタイルから選択可能です。
CSSボタンを簡単に生成することができる、楽しく便利なツールです。
Gitクライアント
コードを保存、変更を文書化し、チームで重複なく作業するために一元的なアプローチが欠かせません。それを可能にするのが、バージョン管理システム（VCS）です。それでは、VCSの一つであるGitを扱うクライアントをいくつかご紹介します。
まず、VCSそのものについて見てみましょう。
15. Git
Gitは現代の開発シーンに無くてはならないツール。簡単に言えば、プロジェクトのコードに加えた変更を文書化し、それを「リポジトリ」に保存するシステムです。
GitはLinuxの生みの親であるLinus Torvalds（リーナス・トーバルズ）氏によって発明されました。一連のコマンドを使ってファイルの変更を「ステージングエリア」に追加、リポジトリに「コミット」し、そこから、オンラインでホストされているリモートリポジトリに「プッシュ」する、という流れになります。
これが唯一のVCSであるというわけではなく、例えば、WordPressの開発チームは今でも多くのプロジェクトでTracを使っていますが、それでも人気の選択肢です。GitやTracのようなVCSは、コードを一元的にホスティングすることで、チームでの共同作業を支援します。
基本的なコマンドは、コマンドラインから実行できます。gitという文字を使い、例えば以下のようになります。
git add file.phpこの例では、file.phpがステージングに追加されます。最終的な仕上げ前の保存といった用途に便利です。1つのファイルまたはプロジェクト全体に対してこれを行うことができます。
ファイルをコミットするには、git commitを実行します。そして、コミットについて他の人に伝えるためのコメントを追加することができます。その後、プライマリ「ブランチ」へのプッシュに進みます。もちろん、これはリモートの「リポジトリ」で作業しているかどうかにもよります。
GitやVCS全般についての予備知識がない場合には、GitLabによる、Gitをコマンドラインで使うための初心者向けの解説もあわせてご覧ください。GitLab自体についても後で少し触れます。
16. GitHub
大多数の開発者が、GitHubでプロジェクトのGitリポジトリを管理、保存しています。
GitHubはMicrosoftが所有するソリューションで、Gitよりもはるかに多くの機能をカバーしています。自動テストツールもたくさんあり、コラボレーションに便利な機能が盛りだくさんです。
オープンソースプロジェクトでは、GitHubのようなプラットフォームがほぼデファクトスタンダードとなっています。そのため、ウェブ開発ツールとしてのGitHubは、多くのオープンソースユーザーや学習者、開発者にとって貴重な存在です。特に、インストールしたパッケージの問題を解決するのに、GitHubのissueトラッカーを確認するのがおすすめです。
GitHubはレポジトリを保存するためだけのものではありません。ウェブ開発など他のコーディングプロジェクトや、書籍にも利用されています。
全体として、GitHubはブランチからコミュニティを構築するのに有用です。しかし、このような特徴を持ったプラットフォームは、これだけではありません。
17. GitLab
先ほども紹介しましたが、GitLabはGitHubのライバルにあたる存在で、同じような役割を果たします。基本的にはGitの技術を土台にし、ソースコードの公開や共有を可能にするものですが、それ以外にも便利な機能が搭載されています。
GitHubが自らを「開発プラットフォーム」と呼んでいるのに対し、GitLabは「DevOps」に比重を置いています。GitLabの無料版では、DevOpsライフサイクルのすべての段階、静的アプリケーションセキュリティテスト（Static Application Security Testing/SAST）、そして継続的開発（CD）と継続的統合（CI）─月あたり約400分─サービスが提供されています。
GitLabのコミュニティ規模は、GitHubのそれには劣ります。とは言え、GitLabはデプロイメントやプロジェクトの全サイクルを支えることに力を投じています。決して一概に欠点とは言えませんが、GitLabはより「孤立した」プラットフォームであり、GitHubほどオープンソースプロジェクトに向いているわけではありません。
ほとんどのチームにとって、GitLabの利用は無料版で事足りるはずです。これで不十分であれば、1ユーザーあたり年間約230ドルで、コードと生産性の分析、約10,000分相当のCD/CI機能が利用できるようになります。
18. Sourcetree
Sourcetreeは、Gitリポジトリのホストではなく、それの管理に使えるグラフィカルユーザーインターフェース（GUI）という位置づけになります。GitKraken、Sublime Merge、GitHub Desktopなど、数多くのソリューションの中の1つです。
SourcetreeはAtlassianの製品で（私たちもAtlassianを愛用中です）、Bitbucketなどの他の製品と接続し、Gitリポジトリの視覚的な操作を可能にします。
Sourcetreeは、簡単にGitを使いこなせるクライアントとして宣伝されており、実際そのとおりなのですが、経験豊富な開発者にも便利です。Git (そしてMercurialも) を利用するチームをサポートするために、十分な機能を搭載しています。
たとえば、Sourcetreeの基本的な仕様として、前回のコミットからの変更点がハイライトされます。そして、もちろん、より高度な機能もあります。チームリーダーによる変更点の確認や必要に応じたブランチ間での作業、グラフや情報タブを使ったコードの視覚化なども可能です。
Gitクライアントの選定は、実際には用途次第です。まだ学習中であれば、フローやプロセスを理解できるように、作業場をターミナルにとどめておくことをおすすめします。Gitを多用するプロジェクトや業務においては、Sourcetreeのようなクライアントを時短目的で利用するのが効果的です。
ブラウザ開発者ツール
ウェブブラウザがなければ、ウェブ開発は成り立ちません。ブラウザを使って、ウェブサーフィンをすることもできますが、それに限らず、開発したサービスの挙動を確認することもできます。
最近のブラウザの多くに、バックエンドのコードを解析し、それをプロジェクトに反映させる開発ツールが搭載されています。人気の選択肢をご紹介します。
19. Chromeデベロッパーツール
Chromeのデベロッパーツールは、診断や検証に便利な優れた機能により、多くの開発者により愛用されています。
Chromiumベースのブラウザの台頭により、多くのブラウザに同じようなショートカットのツールが搭載されるようになりました。Microsoft Edge、Brave、Chromium自体などなど、多くのブラウザを活用しプロジェクトを進めることができます。
Elementsタブでは、ページのソースコードを確認できます。多くの開発者がいつもお世話になっていることでしょう。また、Performanceタブは、他のブラウザのDevToolsにはない、ページ表示速度についての洞察が手に入ります。
Securityタブにある情報は、クライアントのウェブサイトなどを監視（または調査）するのに便利です。
さらに、Chromiumベースのブラウザから直接Google Lighthouseのレポートを作成することができます。
このDevToolsは、個人的にはベストです。ChromeやChromiumベースの多くの開発者が、現にこれを活用しています。とは言え、他のブラウザにもDevToolsがありますので、引き続き見ていきましょう。
20. Firefoxデベロッパーツール
月間アクティブユーザー数約2億2千人のFirefoxは、Googleの優勢にもかかわらず、依然として高い人気を誇るブラウザです。かつてFirebugは一世を風靡しました。
現在では、別のFirefoxデベロッパーツールがあります。
サイトのソースコードを見るための機能（インスペクタ）や、デバッガー、メモリー、ストレージなどの機能があります。
ブラウザ上で直接JavaScriptを実行できるため、Consoleはある意味でコーディングの世界への入り口とも言えるでしょう。コードをここで気軽にテストしてみることができます。
とは言え、Firefox（および他のブラウザ）は、Chromiumベースのブラウザよりもデベロッパーツールの機能が少ない傾向にあります。それでも、クロスブラウザのデバッグやトラブルシューティングのために、Firefoxを使用する機会はあるはずです。全体として、あらゆるタスクの実行に問題なく使用できます。
フロントエンドフレームワーク
フロントエンドは、魅力的なウェブサイトの作成を後押しするものであり、これの選定は非常に重要です。業務やプロジェクトにあったものを選択する必要があります。
それでは、人気の選択肢をいくつか見てみましょう。
21. Bootstrap
モバイル対応は、現代のウェブデザインでは基本中の基本です。モバイル端末を使用したブラウジングがPCを追い越したことを考えると、これは決して不思議なことではありません。モバイルファーストのサイトを素早く立ち上げる方法を手にすることが重要です。
Bootstrapは、多くの人に利用されている、優れたCSSフレームワークです。
Bootstrapは、JavaScriptプラグイン、Sass変数、ビルド済みコンポーネント、高品質のレスポンシブグリッドシステムなどを組み合わせたツールキットです。Bootstrapで動作する公式テーマのマーケットプレイスもあり、多くのWordPressウェブサイトでも、このデザインフレームワークの上に構築されたテーマが使用されています。
もちろん、Bootstrapを使用するかどうかは、プロジェクトが何を必要としているかによって異なります。しかし、予算が限られていて納期が早いウェブ開発プロジェクトでは、Bootstrapを採用し、それをWordPressと組み合わせるのが一つの選択肢として効果的です。フレームワークとWordPressがともに無料であることを考えると、基本的にはリソースとして時間や手間だけを計算すればいいことになります。
22. Tailwind CSS
TailwindCSSは、ページ上で意味をなさないクラスを利用します。そもそもこれはCSSを拡張したものであり、利用する人は、ある程度CSSについての知識を持っていることが予想されます。だからこそ「意味をなさない」と感じてしまうものです。
しかし、実際にはTailwind CSSは非常に理にかなっています。HTMLファイルから離れることなく、サイトのフロントエンドをデザインすることができるようになります。
歴史的に見れば、StyleSheetからCSSを適用するのが一般的です。そしてもちろん、CSSは今でも主要なウェブ開発の構成要素です。しかし、HTMLでレイアウトを構築することで、余計な行き来をする必要がなくなります。構造とスタイルを同時に開発することが可能になるということです。
960 Grid Systemを彷彿とさせるアプローチで、うまく連動させることができるはずです。とはいえ、要素を詰め込みすぎると、見た目が煩雑化する危険性もあります。Tailwind CSSで作業するには、忍耐と規律が必要になりますが、特定のプロジェクトの要件に合っているなら、迅速かつ堅牢なフレームワークとして便利な選択肢です。
23. Bulma
サイト構造やレイアウトのデザインはあらゆる面で進歩を遂げてきました。それに付随するかのように、多くの人が柔軟でレスポンシブ、そしてダイナミックなカラムの作成に手を焼いています。そんなときに便利なのが、Bulmaです。このCSSフレームワークには他にもできることがありますが、この種のお悩みを解決する救世主となるかもしれません。
Tailwind CSSと同様に、BulmaではHTML上のユーティリティクラスを操作します。フレックスボックス、モバイルファースト、モジュール化という特徴を誇ります。必要なコンポーネント数が少ない場合には特に有用です。また、必要に応じてフレームワークを組み合わせることもできます。
さらに、BulmaはCSSのみなので、JavaScriptを使わなくても動作させることができます。最小限のコードでボタンなどのインターフェース要素を追加できるのも強みです。また、特筆すべき点として、Bulmaはオープンソースのフレームワークであり、自分のプロジェクトにあわせて高い柔軟性で利用することができます。
24. Foundation
ZURBにより提供されているFoundationは、ユニークなアプローチを取るCSSフレームワークです。モバイルファーストでセマンティックなツールで、サイト用とメール用の2つの選択肢が用意されています。
Foundationは、アクセシビリティを優先して構築されており、そのすべてのスニペットには、専用のARIA属性が付属します。それ以前に、基本的な面でもFoundationの魅力が垣間見られ、HTMLへの追加が簡単で、素早くプロトタイピングを行うのに便利です。ページ上のありとあらゆる構成要素（さまざまな種類のメニューやナビゲーションなど）を作成することができます。
ZURBからは、フレームワーク内外を学ぶのに有用なドキュメントと解説が豊富に提供されています。Foundationはシンプルに使えると同時に、サイト構築に深く入り込み、複雑なレイアウトや機能性を実現することも可能です。
また、Foundationのウェブサイトには、たくさんのテンプレートがあります。制作を始めるにあたって、土台のワイヤーフレームとして活用することができます。
Foundationは、謳い文句にあるとおりの機能や特徴を備えています。サイト開発の中心に十分据えることのできる選択肢です。決して、すべてのプロジェクトに使用するものではありませんが、このフレームワークを採用し、多種多様なサイトの開発を進められるはずです。
25. Material-UI
Reactについては後で詳しく説明しますが、Material-UIはこのJavaScriptフレームワークのコンポーネントライブラリを土台にしています。Googleが、ウェブサイトのフロントエンドをデザインするある種の「哲学」として、マテリアルデザインを提唱しました。わかりやすく言えば、Robotoフォントや色彩豊かなブロックを利用したおなじみの構成です。
ライブラリをReactにインポートし、専用のHTMLタグを使用してサイトを構築することができます。
要素をさらにカスタマイズするには、HTMLタグにクラスを追加します。コードのブロック全体を関数でラッピングし、Reactで詳細（ひいてはページ）をレンダリングすることになります。
無料/有料のテーマもたくさんあり、多くの用途と価格をカバーしています。
Material-UIは、マテリアルデザインを中心としたサイトの構築を目的にしたもので、これが必要とされる開発シーンでは頼りになるフレームワークです。特に、テーマライブラリは、予算を気にすることなく利用できる貴重な選択肢となるでしょう。
26. HTML5 Boilerplate
WordPressの開発者であれば、Underscoresを目にしたことがあるかもしれません。UnderscoresはWordPressのスターターとも言えるテーマで、サイトの機能的・中核的な要素を組み立てるのにかかる膨大な時間を節約することができます。HTML5 Boilerplateは、一般的なデザインレベルでは、それと同じような機能を備えています。
これには、HTML、CSS、JavaScriptにまたがる7つのファイルが含まれています。いずれも、ページを表示するために必要なコードだけが記述されており、その先はあなた次第です。
HTML5 Boilerplateは、本格的なフレームワークというよりも、手間を削減してくれるユーティリティという位置付けで、多くの愛用者がいます。ひとたびHTML5 Boilerplateを使用すれば、（WordPress開発におけるUnderscoresのように）開発を驚くほどスピードアップさせることができるかもしれません。
27. Materialize
Materializeは、Material-UIの競合と言うと少し語弊があるかもしれませんが、こちらもレイアウト作成におけるマテリアルデザインの原則を利用したフレームワークです。
Materializeは、Reactを使うのではなく、CSSフレームワークとして機能します。そのため、Materializeはフロントエンドでの実装が容易です。他のCSSベースのフレームワークと同じように、HTML内のクラスを使ってフロントエンドで要素を扱えます。
とはいえ、モーダルやドロップダウンなどの要素には、JavaScriptコンポーネントも多数用意されています。
他のフレームワークの多くと同様に、特定のスタイルでレイアウトを構築するのに便利な有料テーマも用意されています。しかし、そのすべてが静的なHTMLテーマであるため、JavaScriptを実装したい場合には問題となる可能性があります。そんなときには、代替案としてMaterial-UIを検討するのがいいかもしれません。
ウェブアプリケーションフレームワーク
簡単に言うと、JavaScriptのフレームワークやライブラリは、いわゆる「素」のコードを別の方法で扱うことができるようにするものです。特定のウェブアプリケーションやサイトの作成を容易にしてくれます。選択肢は豊富に用意されています。
28. React.js
React.jsは、Facebookが設計した人気のあるJavaScriptライブラリで、WordPressのモダンな要素の多くを陰で支えています。WordPress.comのバックエンドとブロックエディターの両方がReactを活用しており、JavaScriptのインターフェースファーストな優れた使用例だと言えるしょう。
そのため、WordPressの開発者は（Matt Mullenweg氏の言葉を借りれば）React.js を深く学ぶ必要があります。とはいえ、WordPress開発者のためのフレームワークというだけではありません。
モダンでダイナミックなユーザーインターフェースが必要であれば、Reactが有力な候補になるでしょう。Reactでは、JSX（JavaScriptの構文を拡張したもの）を使用した要素の作成と、Document Object Module（DOM）へのレンダリングが行われます。
const name = "Ken Starr';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render
Element,
document.getElementById('root')
);JSX内のJavaScript変数には、任意の有効な式を指定できるため、複雑な引数を構築することが可能です。このような理由から、Reactが優れたツールに数えられます。その人気の高さから、どこに開発の時間を費やすかに関わらず、Reactは学んでおいて損はないでしょう。
29. Vue.js
Vue.jsもまた、ユーザーインターフェースの構築に便利なJavaScriptフレームワークです。ビューレイヤーをベースにしており、他のライブラリやフレームワークとの統合に優れています。
HTML側では、Vueはこれ以上ないほどアクセスしやすくなっています。タグにIDを与え、JavaScript側で設定された辞書からキーを呼び出します。これで、データとDOMが連動したリアクティブなものになります。
このように、Vue.jsは、記事の前半に登場したCSSフレームワークとよく似ています。このフレームワークは非常に有用ですので、ぜひドキュメントに目を通して、その詳しい中身を確認してみてください。
Vue.jsはJSX宣言をサポートしていますが、「従来の」ウェブ技術に基づいたテンプレートを使用するのに適しています。そのため、JavaScriptだけで仕事をしたくない開発者にうってつけです。
30. Express.js
Express.jsはNode.jsに組み込んで使用するものなので、メタフレームワークと呼ぶことができるかもしれません。
Express.jsはミニマリストなフレームワークであり（それが名前の由来になっています）、主な利点として、サーバーサイドのコンポーネントを使い慣れたMVC（モデル・ビュー・コントローラ）形式に整理することができます。コードは他のフレームワークよりも（素のJavaScriptと比べた時でさえも）複雑な見た目になります。
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);Express.jsは、データベースを用いたプルやプッシュを多用するアプリケーションに適しています。様々な種類のウェブアプリケーションや、最小限の手間でフロントエンドの作業に取り組みたいバックエンド開発者におすすめです。
31. Svelte.js
ウェブ開発における確かな経験則のひとつは、できるだけ多くのブラウザでサイトが動作するようにすることです。しかし、場合によっては、レガシーブラウザをサポートしない（または、それが重要でない）アプリやウェブサイトを作ることもあるかもしれません。そんな時には、Svelte.jsが優れた選択肢になります。
このフレームワークの名前「svelte（ほっそりした）」の由来は、そのファイルサイズにあります。jQueryのような形式で、使い慣れたユーザーには使いやすいはずです。
$('.hello').text("Hello svelte");Svelte APIの関数は40以下と、簡単に使い始めることができます。さらに、$.fn を使って、気軽に新しい関数を作成することができます。
Internet Explorer 9をサポートするポリフィルがありますが、これはほとんど唯一の譲歩だと言えるでしょう。Svelte.jsは、モダンなブラウザをサポートする、無駄のないフレームワークです。
32. Laravel
ここまでは、JavaScriptやCSSのフレームワークについて見てきました。PHPの普及を考えると、そのフレームワークにも触れておくべきでしょう。Laravelは、その構文とコミュニティにより多くの開発者から人気を集めています。
Laravelには、プロジェクトの運営を支援するツールがたくさん存在するため、一種のエコシステムとも言えます。フレームワーク自体をあまり使わない人でも、Vagrantベースのローカル開発環境であるLaravel Homesteadを利用することができます。
Laravel自体はDockerと相性のいいPHPフレームワークで、CLI（Sailと呼ばれる）を使ってやり取りをすることができます。Vagrantと同様に、Sail upを使ってコンテナを構築し、実行することになります。
しかし、Laravelの魅力は他にもたくさんあります。例えば、フルスタックフレームワークとして、Next.jsアプリのAPIバックエンドとして、そして、その中間に位置するあらゆる要素に活用できます。
PHP開発者であれば、ともすると（例え意識しなくとも）Laravelがワークフローの中心的なツールになるかもしれません。
33. Gatsby
Gatsbyは、最近注目を浴びているオープンソースのフロントエンドフレームワークです。高速かつスケーラブルで、パフォーマンスも高く、優れた安全性を誇ります。
Node Package Manager (npm) を使った超高速インストールは特筆に値します。これについては、後ほど詳しく説明します。GatsbyはJavaScriptフレームワークですが、実行時に静的なHTMLファイルを生成することで、攻撃されにくいという特徴があります。さらに、Gatsbyではパフォーマンス最適化が自動で実行され、サイトのスムーズな動作が期待できます。
パフォーマンス調整の自動化、動的なスケーリング、静的HTMLの構築など、Gatsbyはまるで「生き物」のような印象です。そして、JSX、Markdown、CSSなど、状況に応じて、手の込んだ「お化粧」を施すことができます。ワークフローの各ステップやスタックの一部を、特定の要件に合わせることも可能です。
WordPressの開発者にとっては、Gatsbyとの統合も一つの強みとなります。しかし、すべての用途に適しているわけではありません。例えば、クラウドベースのCMSを事細かに管理する必要があれば、Gatsbyは向かないでしょう。とは言え、Gatsbyはほとんどのプロジェクトに応用でき、WordPressとの相性は抜群です。
34. Django
Pythonは「初心者向け」や「学習しやすい」プログラミング言語として語られることが多いですが、多くの有名サイトで使用されています。Instagram、Uber、Reddit、Pinterestなど、最大級のウェブサイトがDjangoを利用しています。Pythonそのものには触れず、Djangoだけに的を絞って説明がなされることも珍しくありません。
Djangoは、Pythonを使ってサーバーサイドのウェブアプリケーションを作るフレームワークです。Pythonそのものと同じくらいわかりやすく、非常に読みやすい構文で記述することができます。
Pythonはロジックベースのプロジェクトに最適なスクリプト言語です。ウェブアプリケーションに活用するのは理に適っています。しかも、Pythonの処理速度は速く、基本的なファイル構造も軽快です。スピードで強さを見せ、PHPやそのフレームワークと肩を並べるに値する、優れたサーバーサイドフレームワークだと言えるでしょう。
とはいえ、Pythonの「学習者向け」言語としての評判（イメージ）のためか、普及率は低くなっています。しかしDjangoは、JavaScriptといった他の言語とうまく連携し、モダンなウェブアプリケーションの基礎となり得ます。
もちろん、WordPressなどのCMSを使う、または、Reactベースのプロジェクトでソリューションを作る場合などには、選択肢が限られます。それでも、2024年にDjangoを利用したサイトの数が増えることは容易に予想できます。
35. Ruby on Rails
プログラミング言語Rubyは、初心者向け言語やPHPに代わる人気のスクリプト言語です。Pythonと比較されることも多々あります。
そして、Djangoと同じように、Ruby on Railsも多くの開発者に愛用されています。
Rubyは、サーバーサイドやアプリケーションで多く使われています。Ruby on Railsのサーバーサイドフレームワークとしての利用例は、数え切れないほどです。MVCアプローチを採用し、これがウェブサービス、ページ、データベースの構造として機能します。すぐに骨太サイトを構築することができます。
Ruby on Railsは、多くのジョブをスケジュールし、サードパーティソリューションと連携する必要があるプロジェクトに適しています。たとえば、Google Cloudなどのファイルストレージとのネイティブな統合や、メール送信用のラッパーがあります。
全体として、必要に応じてカスタマイズできる強固なデフォルトのセット（フォルダ構造など）が必要とされる場合には、すぐれた選択肢と言えるでしょう。一方、開発中にAPIを使用する予定であれば、最適解とは言えません。
Ruby on Railsのコード構造は、大きなプロジェクトになると複雑になり、理解するのが難しくなる傾向にあります。実行時間にも影響が出るので、スピードを重視するプロジェクトには最適なフレームワークではないかもしれません。
それでも、Ruby on Railsは主要なウェブサーバーサイドフレームワークの1つであり、プロジェクトの目的に応じて、十分に活用することができます。
36. TypeScript
一言で言えば、TypeScriptはJavaScriptに静的な型を付与するものです。TypeScriptはJavaScriptを拡張したものという立ち位置で、他の多くのJavaScriptライブラリもサポートしています。全体として、TypeScriptはJavaScriptにいくつかの機能を加えたものであり、両方の言語を並行してコンパイルすることができます。
多くの開発者が、実行時に直面するエラーの数を減らすためにTypeScriptを活用しています。タイピングミスは最もよくあるエラーの一つであり、これを減らすことで多くの修正にかかる手間を削減できます。
TypeScriptの非常に単純な例として、以下の文字列を考えてみます。
let helloWorld = “Hello World”;
// ^ = let helloWorld: string
helloWorldという変数に通常のvarではなく、letを使っています。ここから、TypeScriptはhelloWorldが文字列であることを認識し、それを元にチェックを行います。
結局のところ、TypeScriptは必須のウェブ開発ツールではないものの、その便利な機能により人気を博しています。時間の節約に貢献してくれる可能性があり、ワークフローに取り入れてみてもいいかもしれません。
37. GraphQL
API内のデータを扱う開発者に相性ぴったりの、ユニークなツールをご紹介します。GraphQLはAPIで使われるクエリ言語で、クエリの結果を提供するランタイムとしても機能します。
標準的なREST APIでは、複数のURLから読み込まなければならないことがよくあります。GraphQLを使えば、1回のリクエストでデータを取得することができます。さらに、GraphQL APIはエンドポイントではなく、タイプごとに分類されます。この分類はクエリの効率を高め、何か問題が発生したときに、エラーの中身がより明確になります。
また、GraphQLの仕様により、型を使うことで、別途コードを記述し手動でパースする手順をスキップすることができます。また、それまでの作業に影響を与えることなく、APIに新しいフィールドや型を追加することも可能です。
このツールは多くの面で柔軟かつスケーラブルです。選択したプロジェクト言語にマッチしたエンジンを選んで利用すれば、GraphQLはプロジェクト内でのAPI統一に力を発揮します。そのため、部分的な解決策というよりは、幅広い範囲に適用するのに向いています。
GraphQLはGitHub、Spotify、Facebookなどのサイトで使われています。あらゆる種類のクエリを多用するサイトで、GraphQLが活躍していることがよくわかるはずです。業務の内容によっては、今後12ヶ月の間に何度もこれのお世話になるかもしれません。
パッケージマネージャ
プログラミング言語やフレームワークなどには、多くの可動域があります。これらの依存関係は、適切なかたちでダウンロード、インストールする必要があります。そこで便利なのが、パッケージマネージャです。パッケージマネージャは、コマンドラインから特定の依存関係をダウンロードし、インストールする作業を助けてくれます。いくつかおすすめのツールをご紹介します。
38. Node package manager (npm)
確かに、インストーラを使ってダウンロードするという選択肢もあります。しかし、コマンドラインの利用で、これを簡素化することができます。パッケージマネージャによって、ほとんどの場合、ウェブからのファイル取得の手間を削減可能です。
Node Package Manager (npm)は、Microsoftが所有するJavaScriptに特化したウェブ開発ツールで、言語固有のパッケージを楽々、まとめてインストールすることができます。
例えば、Reactのパッケージを検索すると、15万5,000件以上の結果が表示されます。
オンラインIDEと同様に、npmはウェブ開発ツールでありながら、あまり「大々的」に取り上げられることはありません。とは言え、人気がないということではなく、むしろ、あらゆるウェブ開発者が当たり前のように使用しています。
しかし、GitHubの傘下に入った今、2024年にはこれまで以上に多くの開発者がnpmを使うことになるでしょう。
39. Yarn
npmやPythonのpipと同じように、Yarnはプロジェクトやそのツールに関連するパッケージのインストールを支援します。違いは、Yarnがプロジェクト管理ツールでもあることです。
インストールは簡単で、新規プロジェクトのためにYarnを初期化するのも最小限の労力で済みます。パッケージのインストールやプロジェクトの管理を並行して行える、堅牢なオープンソースソリューションとなっています。
ワークスペースを使用してmonorepoを作成し、複数のバージョンのプロジェクトが同じリポジトリに存在するかたちで、相互参照することができます。Yarnでできないこと（新しいfetcherやresolverの追加）については、プラグインをインストールすることができます。とは言え、少なくとも公式のものはあまり多くはありません。その代わり、どうしても機能が必要な場合は自分でコーディングすることになります。プロジェクトの要件に合わせてYarnをカスタマイズする余地はあるということです。
Yarnは、主要なパッケージマネージャになれるだけの性能を誇ります。実際のプロジェクトでは、npmに頼ることが多いかもしれませんが、場合によって、各所でYarnがワークフロー改善に役立つ可能性は大いにあります。
APIとテストツール
動作確認はしばしば省略されるものですが、油断にはリスクが伴うものです。そのため、プロジェクトのテスト段階は、徹底的に検証することをおすすめします。
続いては、プロジェクトに必要なAPIとテストツールをいくつかご紹介します。
40. HoppScotch
Netlifyが提供するHoppScotchは、オープンソースのAPI開発ツールです。開発元はこれを「エコシステム」と呼んでいますが、中身は少し異なります。
HoppScotchはシンプルかつ堅牢なソリューションであり、本格的に利用したい人に向いています。このようなツールを使ったことがない場合には、多くを学ぶ必要があるかもしれません。HoppScotchの使い方は、アプリのどのページにもほとんど書かれていませんが、このツールはそもそも経験豊富な開発者向けなので、通常、問題ないはずです。
多くのリアルタイム接続（WebSocket、SSEなど）に対応しており、GraphQLの実装もあります。また、ドキュメント作成ツールも便利です。
HoppScotchの「コレクション」と連動して、その場でドキュメントを作成できるので、時間の節約になります。
全体として、HoppScotchは機能的なツールで、ブラウザでたくさん開くことになるでしょう。気づかないうちにいつも使っている─そんなソリューションのひとつです。
41. Postman
一筋縄ではいかない「コラボレーション」についてです。Postmanは、Postmanプラットフォームを通じて、チームでのアプリケーションプログラミングインターフェース（API）作成を支援してくれるウェブ開発ツールです。
Postmanをワークフローに統合するユースケースはたくさん考えられます。例えば、アプリケーション開発の標準として使うことができ、そのままウェブベースのプロジェクトに反映できます。モックサーバーを使ってエンドポイントをシミュレートすることもでき、これは特にWordPressの開発者にとって魅力的です。
また、APIの利用者がノウハウを吸収できるようにオンボーディングを作成することも可能です。ユーザーの入れ替わりが激しいプロジェクトや、トラフィックが大きいプロジェクトに向いています。
価格については、無料版もありますが、有料版のいずれかを使用することで、利用価値が上昇します。課金サイクルやユーザー数にもよりますが、12ドルから30ドル程度で利用可能です。
42. Testing Library
コードの整合性を確保するだけでは十分ではなく、最終的にはアプリとしての機能を調整する必要があります。Testing Libraryは、その名前が示すように、プロジェクトのテストを支援し、よりよいコーディング手法を使用するよう促してくれるツールです。
アプリの使用を想定したテストを作成することができます。テストが問題なく実行されれば、アプリも問題なく動作する可能性が高いと言えます。これは、フレームワークに依拠しないため、テストランナーとは性質を異にします。実装の詳細から切り離されたところで、メンテナンスの可能なテストを記述することを主な目的としています。
Testing Libraryツールの機能のすべてが、その指針にならうようにして設計されています。そのため、単にテストを作成するだけでなく、それを改善し、より価値のあるものにする術を学ぶことができます。
このため、Testing Libraryが、ワークフローの大部分を占めるようになる可能性は大いにあります。あらゆるプロジェクトチェーンでTesting Libraryが活用できるはずです。React利用者であれば、このツールを標準としてインストールするのも一つの手でしょう。
コラボレーションツール
開発者は往々にして、一匹狼のような印象を持たれがちですが、実際には、技術とコラボレーションは密接に関係しています。
そこで続いては、あらゆるプロジェクトで活用したい、おすすめのコラボレーションツールをいくつかご紹介します。
43. Jira
Atlassianは、ソフトウェアの世界では名の知れた企業です。Kinstaでも、同社が提供する製品を複数利用しています。例えばConfluence、Trello、Sourcetree、Bitbucketなどがありますが、今回焦点を当てたいのがJiraです。
Jiraはアジャイル開発を採用するチーム向けのツールで、特にスクラムはとても人気があります。そのため、パッケージには豊富な機能が搭載されています。例えば、カンバンボードを使用し、タスクとスプリントを整理することができます。また、プロジェクトやそのアプローチに応じて、見通しを立てていくことも可能です。
Jiraは、計画、設計、実装、テストのサイクルを繰り返すワークフローに重点を置いています。これはアジャイルフレームワークの基本となる考え方ですが、プロジェクトの計画に応じて、好みのフローを構築できます。スプリント間でのピボットが必要になった場合でも、柔軟に規模を拡大、縮小することが可能です。
Jiraには無料版があり気軽に試してみることができます。また、他の有料版も良心的な価格設定となっています。とはいえ、Jiraを活用するには、最低でも10名ほどのチームが必要でしょう。少人数で使うのには向いていないかもしれません。
44. Taskade
コラボレーションツールの紹介として、Taskadeの名前が挙がることは、そこまで多くありません。しかし、実際にはチームでの作業や課題への集中を助ける素晴らしいツールです。
AsanaやBasecamp（どちらも後述）など、他のコラボレーションツールを利用したことがあれば、操作に困ることはないはずです。ToDoやリマインダーなど便利な機能が組み込まれています。プロジェクトに応じてさまざまな方法で情報を表示することができます。
「Mindmap/マインドマップ」や「Org Char/組織図」など、表示タイプは豊富にあり、それぞれ、手元にある情報を違った角度から見つめるのに効果的です。
このアプリは、シンプルさに重きを置いています。複雑な設定をすることなく、タスクの表示や管理を柔軟に行うことができます。
チームでのあらゆる作業が、簡単なクリックで完了します。例えば、すべての画面にチャットウィンドウがあり、すぐさま拡張してコミュニケーションを取ることができます。
他のソリューションと比較した場合、Taskadeには必要最低限の機能しかないように思えるかもしれません。しかし、シンプルさを求める利用者には優れた選択肢です。あれこれと考えることなく、すぐにチームでの共同作業を始めることができます。
45. Asana
Asanaは、コラボレーションツールの分野で高い知名度を誇るツールです。プロジェクトの把握やチームでの協働となると、他の選択肢を圧倒する存在だと言えるでしょう。また、Asanaはさまざまなワークフローに応用することができます。例えば、リストとカレンダーを切り替えられるだけでなく、タイムラインとして確認することも可能です。
チームベースの素晴らしい特徴や機能もあります。レポートの中身は包括的で、上位プランでは、パフォーマンスに関連するさまざまな分析データを確認できます。チームメンバーのワークロードを監視する機能もあります。このように、Asanaを使用することで、作業負担を最小限に抑え、チームメンバーの「燃え尽き」を防止することすらできます。
さらに、無料版であっても十分に利用でき、チームの規模に合わせて拡張していけるだけの優れた機能が備わっています。例えば、チームメンバーに仕事を割り当てたり、それぞれのワークフローを管理したりすることができます。また、ワークスペース単位でチーム全体に対してメッセージを送信することも可能です。
共同プロジェクト管理では古株とも言えますが、Asanaはその名声に恥じない利便性を誇ります。また、クライアントや同僚の多くが既にAsanaのアカウントを持っているかもしれません。そんな理由から、このアプリの使用頻度が高まることが予想されます。
46. Basecamp
Basecampもまた、チームベースのプロジェクト管理に強さを見せます。WordPressと同じくらいの歴史があり、古参ツールだと言えるでしょう。コアとなるソフトウェアの歴史はもっと長く、注目に値するだけの実績があります。
Basecampのサイトや一般的な説明からは─競合他社と比較して─とりわけ特別な印象は抱きづらいかもしれません。正直なところ、他のコラボレーションアプリの多くが、Basecampの機能に追いついてきています。とは言え、それだけで判断するわけにはいきません。
Basecampでは、タスクやToDoリストを作成し、チームメンバーに割り当て、プロジェクト単位で作業することができます。そんな基本的な機能に加えて、インフラとデザインの面でも強さを誇ります。
タスクの作成、ToDoとしての規定、チーム内での振り分けといったシンプルな利用は誰にも馴染みがあるものでしょう。プロジェクトを軌道に乗せるための機能が豊富に用意されています。
言ってみれば画期的なものはありませんが、それこそがこのツールの特徴です。Basecampは、気をてらうことなく、信頼できるプロジェクト管理システムとしての地位を確立しています。状況に合わせて拡張することも可能であるため、安定した選択肢です。
47. Livecycle
Livecycleは、開発チーム内の共同作業に焦点を当てて設計された高性能ツールです。このツールでは、開発チームがプルリクエストで変更や機能の一時的で共有可能なプレビューを作成するために使用し、今日一般的な手法になりつつある「プレビュー環境」が力を発揮しています。
Livecycleのプレビュー環境では、ステージングや本番環境に変更をマージすることなく、最新バージョンのスナップショットを共有することができます。
プレビュー環境にFigmaなどのコラボレーションレイヤーを追加すれば、チーム内の全員がコンテキストに応じた視覚的なフィードバックを残すことができます。
このようにレビューフィードバックを管理することで、レビューワークフローが効率化され、開発者に的確なフィードバックを提供し、より素早く本番環境にコードをデプロイすることが可能になります。レビューワークフローや、全体的な開発者体験を向上したいとお考えの方にはうってつけのツールです。
タスクランナー
ウェブ開発において、小さな（そして大量の）タスクは軽視できません。効率的で生産性の高い作業を行うためには、これをひとつひとつこなす必要があります。しかし、その裏返しとして、反復的な作業に時間と労力を費やさなければなりません。
そこで便利になるのが、タスクランナーです。おすすめをいくつかご紹介します。
48. Grunt
GruntはJavaScriptに特化したタスクランナーで、日々の平凡かつ反復的なタスクを自動化してくれます。例えば、リンティング、圧縮、コンパイルなど、他にもたくさんあります。
Gruntは、JSONベースの設定ファイル（「Gruntfile」）を通じて、このタスクを処理します。その例が以下の通りです。
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};もし、日常的に特定の処理を繰り返すことに多くの時間を割いているなら、Gruntをウェブ開発フローに導入するのがおすすめです。
49. Gulp
タスクランナーを比較すると、GulpとGruntの一騎打ちになることが多々あります。Gulpは、ワークフローを自動化し効率を引き上げる、JavaScriptベースのツールキットです。
専用のファイルと「stream/ストリーム」を使って、ディスクに書き込まれる前のアセットやコードを処理します。作成する各タスクは「非同期」関数となり、プライベートかパブリックのどちらかに設定することができます。プライベートタスクは、エンドユーザーが実行することはできず、他の関数と一緒に動作するように設計されています。
さらに、series()やparallel()関数を使って、タスクを作ることもできます。つまり、小さなタスクを、大規模なシステムの1つの歯車にして、ネストさせることができるということです。
また、コミュニティが作成したプラグインによって、Gulpの機能を拡張することも可能です。
よく言われることかもしれませんが、GulpもGruntも得意とすることが違います。Gulpは、広範な指示の一部としてのアセットを扱うことに関して、堅実な選択肢となります。このため、プロジェクトごとに適切なタスクランナーを選ぶのが得策です。
コンテナ化ツール
コンテナ化や仮想マシンを一切使用しないと、ウェブ開発者としての進歩は、ある意味で限定的になることが予想されます。
もちろん、すべての人に当てはまるわけではありませんが、コンテナベースの開発環境を使用することには多くのメリットがあります。おすすめの選択肢をご紹介します。
50. Docker
Dockerは、多くの開発者にとって定番のコンテナベース開発環境です。このオープンソースプラットフォームはコンテナだけが全てではありませんが、それを目当てに利用するのが一般的でしょう。
ボタンをクリックしていくだけで、仮想のサンドボックス型開発環境を手に入れられるというシンプルな構造になっています。もちろん、表面上はシンプルに見えるものでも、その裏側では、複雑な構成になっています。Dockerは、ユーザーインターフェース（UI）、CLI、APIとセキュリティ規定を組み合わせることで、迅速なデプロイメントを可能にします。
多くの開発者にとって、Dockerはアプリ開発の中心的な存在になるはずです。ウェブ開発には（特にWordPressサイト開発など）、これに関連して他のツールを組み合わせるものです。ローカル開発環境となると、FlywheelのLocalやDevKinstaが代表的なプラットフォームとして挙げられます。
Kinstaが開発したローカル環境開発ツール「DevKinsta」をご活用ください。ローカル環境での開発データを、ワンクリックでKinstaアカウントに接続しデプロイすることができます。
Dockerは、多くのツールと統合可能で、そのうちのいくつかはすでにあなたのワークフローにも組み込まれているかもしれません。GitHub、VS Codeなどとスムーズに連動することができます。
全体として、Dockerの魅力や機能について話を始めると、いくつもの記事が書けるほどですが、すでに多くの読者の方がDockerの利便性を肌で感じていることでしょう。
51. LXD
簡単に言うと、LXDはLinuxディストリビューション用のコンテナマネージャ（中でもシステムコンテナを対象）です。イメージベースで、Linux用にビルド済みイメージが複数付属しています。LXDを使うことで、安心して同じデフォルトのエンドユーザーOS上で開発することができます。
Ubuntu開発元であるCanonicalが公開しているもので、もちろんオープンソースという形態を採用しています。非特権コンテナを使ったセキュアな環境の構築や、リソース使用の制御、ネットワーク管理までできるようになっています。
また、LXDはスケーラブルなので、何千ものコンピュートノードを動かすことも、シンプルな状態を保持することもできます。クラウドベースでは、LXDはOpenNebulaと統合可能です。尚、これにはLXDインスタンスを管理するための公式ドライバがあります。
デフォルトでは、多くのコンテナ化ツールがUbuntuを標準の仮想環境として使用しています。LXDはと言うと、ディストロの実行向けに最適化されています。まだ試したことがないのであれば、テストワークスペースを試しに構築してみる価値は大いにあります。特定のワークフローやクライアントのプロジェクトによっては、競合製品を凌ぐかもしれません。
画像最適化ツール
アセット（またはメディアとも）は、ウェブを構成する大事な要素です。画像を中心として、インターネットになくてはならない存在でしょう。そのため、ウェブ開発の際には、使用する画像の数にかかわらず、パフォーマンス向上に注力することが重要です。
人気の画像最適化ツールをいくつかご紹介します。
52. ShortPixel
画像最適化ツールはたくさんありますが、その中でもShortPixelの強固なアルゴリズムは注目に値します。品質に影響を与えることなく、画像のファイルサイズを大幅に削減できます。あえて言えば、デフォルトの設定が最高圧縮であるため、画像が十分に圧縮されていない際にできることがなくなってしまいますが、これは大きな懸念点ではありません。
ShortPixelにはたくさんの機能があります。3つの圧縮レベル、優れたPDF最適化性能、そしてGIFの圧縮まで可能です。後者は他のツールではあまり見かけないものなので特筆に値します。
インターフェースも全体的に使いやすくなっています。画像をドラッグ＆ドロップするだけで、ShortPixelが圧縮を行なってくれます。画像の処理が完了したら、一括でダウンロードすることも、個別の画像を選択してダウンロードすることもできます。
ShortPixelのAPIツールも充実しています。オンライン/オフラインそれぞれの画像縮小用の個別API、包括的なPHP/.NETクライアントライブラリ、JavaScriptベースの適応エンジンなどが用意されています。
ウェブサイトやアプリとの接続に強いことから、ShortPixelは開発者向けのツールだと言えます。また、特に大規模なワークフローの一部として使用する際には、TinyPNG（次に紹介）をも引き離す利便性を見せます。
53. TinyPNG
みんな大好き画像最適化ツール、TinyPNGにも触れておきましょう。TinyJPGも基本的には同じなので、まとめての紹介とします。
TinyPNGは何年も前からあまり変わっていないことがわかるはずです。画像最適化を支えるシンプルなドラッグアンドドロップツールです。ファイル形式は豊富ではありませんが、使いやすさと他のツールとの統合のしやすさは一流です。
例えば、Photoshopプラグインが顕著です。また、より細かな調整には、機能的な開発者用APIが利用できます。APIはPythonもサポートしているので、Pythonユーザーにとっても有用です。多くのサードパーティツールのために、APIを使ったプラグインも複数作成されています。
TinyPNGが画像最適化市場を独占しているとは言いませんが、多くの人にとって定番の選択肢となっています。画像のアップロードはものの数秒で完了し、99.9％見事な最適化が実行されます。信頼に足るツールです。
ウェブサイトテストツール
先ほど、APIやサイトのコードをテストすることについてお話ししましたが、これにはウェブサイトのパフォーマンスも含まれます。続いては、サイトのパフォーマンスを分析できるツールをいくつかご紹介します。
54. Responsively
アプリで整えるメディアクエリの数に圧倒されたことがあるのなら、Responsivelyを利用してみるだけの価値があるかもしれません。選択したデバイスのビューポートに従ってサイトを開発するのに役立つオープンソースのフロントエンドツールです。
このツールの素晴らしい点として、レイアウトを横に並べて比較することができます。デバイス間の一貫性を確保するのにうってつけです。多くのデバイスから選ぶことができるので、特定の端末をターゲットにしている場合には特に有用です。
また、Mozilla Firefox、Microsoft Edge、Google Chromeのブラウザ拡張機能を使って、Responsivelyブラウザにページを送ることができます。そこから、内蔵の開発ツールを開いて、作業を開始することも可能です。
スクリーンショット機能、ホットロードのサポートなど、他にも開発を助ける機能が山ほどあります。Responsivelyは「ウェブ開発者のためのブラウザ」というキャッチフレーズに恥じない性能を搭載しています。あなたのワークフローの中核を担う存在になるかもしれません。
55. Google Lighthouse
多くの人にとって、GoogleのPageSpeed Insightsは重要なツールです。ウェブサイトのパフォーマンスや読み込み速度についての改善箇所を特定するのに使えます。
深く調べるほどに、面白いものが見つかります。多種多様なニーズを満たす情報が満載です。Google Lighthouseは、あらゆるウェブページに対して実行でき、ページパフォーマンス、SEO、Progressive Web Apps（PWA）などの監査結果とレポートが確認できます。
主に、コマンドラインから、Chromeのデベロッパーツールで、またはNodeモジュールとしてGoogle Lighthouseを実行することができます。PageSpeed Insightsのインターフェースからは、パフォーマンスのスコアやそれに付随する洞察が確認可能です。
一見すると、Google LighthouseとPageSpeed Insightsは似ています。しかし、両者の間には違いがあります。PageSpeed Insightsは、実際のユーザーデータとラボデータを組み合わせたものです。Lighthouseの方は、ユーザーデータを無視し、ウェブサイトの要素を測定します。
個人的には、PageSpeed InsightsとLighthouseの両方を実行することをおすすめします。特に検索エンジン結果ページ（SERPs）トップへの上昇を目指すのであれば、そうするだけの価値があります。いずれにせよ、手元に置いておくべき堅実なツールであり、PageSpeed Insightsに取って代わるパフォーマンスツールになる可能性さえあります。
56. Cypress
エンドツーエンドのテストは、多くの開発者にとって楽しいものではありません。そんな流れにまったをかけたのがCypressです。エンドツーエンドテストを簡単に変えてくれるソリューションだと言えます。
ほとんどのエンドツーエンドテストツールはSeleniumをベースにしていますが、Cypressは方向性を異にしています。つまり、Seleniumベースのテスターで起こりがちな問題は、ここには存在しません。実際、開発者であれば、テストのセットアップ、記述、実行をできるだけ簡単に済ませたいはずです。
そのために、ゼロからアーキテクチャを構築し、他の形式を排除してエンドツーエンドのテストに焦点が当てられています。パフォーマンスの向上を考え、Cypressはリモートコマンドを使用することなく、プログラムと同じランループで実行される仕様になっています。
テストコードはブラウザ上で実行されるため、ドライバや言語のバインディングを考慮する必要はありません。とは言え、必要であればJavaScriptにコンパイルをしてからテストを実行することも可能です。
エンドツーエンドのテストにネイティブでアクセスできるという点で、品質保証（QA）エンジニアや開発者にとって、Cypressは注目すべき選択肢です。さらなる魅力として、すべての機能を搭載した無料版もあります。
57. Stack Overflowと検索エンジン
ちょっとだけ、ウェブ開発ツールの境界を広げてみましょう。Stack Overflow（スタックオーバーフロー）は、ウェブ開発に関わっている人なら誰もが知っているサイトではないでしょうか。
プログラミングに特化した質問と回答のサイトですが、他のあらゆるテーマを扱うStack Exchangeネットワークの一部でもあります。
Stack Overflowは何千人もの開発者が利用するリソースとして知られており、そのコミュニティのありかたをめぐって論争が起こってはいる（※一部「ユーザーの対応が親切心に欠ける」と考える人も）ものの、トラフィックは依然としてかなりのものです。検索エンジンとともに、StackOverflowは学習とスキルアップに便利なウェブ開発「ツール」となり得るでしょう。
例えば、コードに関する問題が発生したとき、検索などを通してStack Overflowにアクセスすることがあるはずです。同様に、解決方法のわからないエラーを検索した結果として、このサイトの回答が見つかることもあります。
調査対象者の90%が問題を解決するためにStack Overflowを利用していることを考えると、誰もがこのツールを利用する可能性があります。しかし、初心者の場合、あるいは問題を明確に説明できない場合には、検索エンジンの方が多少「親切」であることは間違いありません。
ウェブ開発のリファレンス
「RTFM」（※日本語では「マニュアルを読みやがれ」と訳されることが多い）の精神に賛同する開発者であるなら、以下のエントリの価値は、すでに明らかでしょう。一方で、問題に正面から体当たりして、自力で解決するのが好きな方には─過去にきっと誰かが同じような問題を解決しているはずですので─記録の力を借りてみることをおすすめします。
それでは、リファレンスやドキュメントのおすすめをご紹介します。
58. MDN web docs
ネット黎明期には、Lycosが運営する、初心者のウェブ開発・プログラミング学習を支えるWebmonkeyというサイトがありました。そのサイトの精神は、MozillaのMDN Web Docsの中で生き続けています。Webmoneyは2004年に閉鎖され、MDN Web Docsは2005年に登場したことで、この2つの間には関連性が見られます。
ある時はプログラミング学習のリソース、またある時はMozillaに特化した製品について知るための説明として活躍します。コンテンツは、テクノロジーとリファレンスガイドの2つのカテゴリに大別されます。能力や経験に応じた解説があり、詳しい説明や関連情報のリンクを閲覧できます。
ガイドの内容は、開発業界の中でも特定のニッチや業界に関連したものとなっています。例えば、Web technologyページは、HTML、CSS、JavaScriptといった様々なウェブ技術の記事をまとめた索引ページとして有用です。
また、ゲーム開発など、さまざまな業界について幅広く取り上げており、それぞれの分野で仕事を始めるには何が必要なのかがわかります。
MDN Web Docsは、初心者のウェブ開発者にとって必須の読み物であると同時に、経験豊富なエンジニアにとっても十分すぎる価値を提供するものです。ブラウザのブックマークに値するサイトがあるとすれば、まずはこれでしょう。
59. DevDocs – API Documentation Browser
以前は、購入した製品のマニュアルはすべて、引き出しや押し入れの中で保管されるのが一般的でした。しかし、デジタル化が進むにつれて、紙のマニュアルは、PDFなどの媒体へと姿を変えています。
その結果、デジタル版のマニュアルを集めたウェブサイトが登場。キュレーションライブラリが構築されました。これによって、必要なものを一つのリポジトリから探し出すことができるまでに。もちろん、ウェブ開発の分野にも、それに等しいライブラリが存在します。
DevDocsはAPIのドキュメントライブラリであり、あらゆる開発者にとって価値のあるウェブサイトです。
全てのライブラリに目を通す前に「Preferences」画面から好みのAPIドキュメントを選択することができます。
これを設定すると、専用のツリーメニューから関連するドキュメントにアクセスできるようになります。
複数のAPIを一度にまとめて調べるという非効率的な問題をシンプルに解決してくれます。DevDocsもブックマークに値するサイトの一つでしょう。さらに素早く参照できるデスクトップアプリがないのが残念なところです。
60. CSS-Tricks
Chris Coyier氏のことは、多くのウェブ開発者が耳にしたことがあるはず。彼が設立したウェブサイト「CSS-Tricks」についても、すでにご存じかもしれません。その名前が示す通り、フロントエンドのコーディング、特にCSSとその上達法に特化したウェブサイトです。
Aboutページにあるように、最初の数年間はCSSが主なトピックでした。しかし、その後、HTML、JavaScript、WordPressなども取り上げられ、フロントエンド開発に焦点を当てたサイトとなっています。多くの記事や動画が、開発を助けるアイデアの源となることでしょう。
CSS AlmanacはCSS内のセレクタやプロパティをまとめたもので、シンプルながら価値のあるページです。CSSについて理解を深め、学習を加速させるのにうってつけでしょう。
CSS Almanacは、CSSのセレクタやプロパティをまとめたものです。
CSS-Tricksにはリファレンス的な側面もありますが、それ自体がリファレンスリソースというわけではありません。しかし、RSSフィードなどを通じて、定期的に訪れたいサイトです。コンテンツの質が高く、今まで考えもしなかったような手法が見つかるかもしれません。ニュースレターを購読し、CSS-Tricksの最新情報をメールで受けとるのがおすすめです。
61. DEV Community
SNS、ウェブ開発、Stack Overflowから優れた部分を抽出して、ひとまとめに。そんなサイトがあるとすれば…DEV Communityでしょう。
ブログプラットフォームであると同時に、開発の問題に対する答えを見つける手段にもなります。タグやフォローする人を選択すると、特定の事柄やジャンルについて、最新の情報を確認することができます。
たしかに他の場所で見つかる情報もありますが、肝心なのは見つけやすさです。DEV Communityの強みは、コミュニティベースで、開発に関するテーマが集約されていることです。「バス停で他の人の会話を盗み聞き」するのとはわけが違います。開発者が勢揃いした「ツアーに身を投じる」ことになります。
また、RSSフィードや受信メールも要チェックです。意識せずとも何度もアクセスする、SNS系リソースだと言えるかもしれません。
62. Can I use…
「ネットで質問をしそれに答える」というスタイルの火付け役として、Ask Jeeves（Ask.com）を挙げる人は少なくないはず。同サイトは、さまざまな検索アルゴリズムに取って代わられましたが、質問ベースの検索は、今でも優れた選択肢です。
この発想をCSSの世界に持ち込み、フロントエンド開発者の手間を省いているのが、Can I use…というサイトです。
CSSのセレクタやプロパティを検索フィールドに入力すると、ウェブサイト制作に使えるかどうかがデータベースから返されるというシンプルな仕組みです。CSSだけではありません。JavaScriptやHTMLにも対応しています。
フロントエンド言語のデータベースなので、PHPやPythonなどのサーバーサイド言語は扱われていません。それでも、Can I use…は、アクセシビリティやマルチデバイスのデザインに関して、計り知れない価値をもたらしてくれます。
特定の要素を選択し、ターゲットとなるブラウザがそれをサポートしているかどうかを一目で確認できます。
さらに、その要素のリリース日や使用率などの統計情報もあります。
全体として、Can I use…は使わないこともあれば、プロジェクトの各所で常に開いておくことにもなり得ます。ブックマークして、ターゲットとなるブラウザの対応状況を把握するのに活用しましょう。フロントエンドのコーディングを陰で支える便利なサービスです。
まとめ
時間とお金は有限です。いつもと同じウェブ開発ツールを選ぶのは、たしかに理にかなっています。しかし、プロジェクトの要件を熟考した上で選択することで、時間、コスト、生産性において多くのリターンを手にすることができます。
この記事では、あらゆる開発者の作業を後押しする、2024年におすすめのウェブ開発ツール62選をご紹介しました。すでに、ここにあるツールの多くを活用している人もいることでしょう。各種調査によると、たくさんの開発者が、プロジェクトでGitHub、TypeScript、その他様々なウェブサービススタック、JavaScriptフレームワークを利用しているとのことです。
どのようなウェブ開発ツールと組み合わせるにしても、Kinstaでは、ワークフローを支える豊富な機能やツールをご用意しています。例えば、自社開発のコントロールパネル「MyKinsta」にあるコード圧縮を使用することで、CSSとJavaScriptファイルの最適化を簡単に行うことができます。
開発者が2024年に活用したい、お勧めのウェブ開発ツールはありますか？以下のコメント欄でご意見をお聞かせください。
コメントを残す