基本的なソフトウェアのインストール

この記事では、簡単なウェブ開発に必要なツールと、それらを正しくインストールする方法を示します。これで、コードエディターと最新のウェブブラウザーなど、必要最小限のツールを設定することができます。

前提知識: コンピューターのオペレーティングシステムに慣れていること。
学習成果:
  • 始めるのに必要なソフトウェアを理解すること。
  • 基本的なソフトウェアをインストールすること。
  • プロのウェブ開発者が使用するソフトウェアについて、大まかに理解すること。

コードエディターのインストール

コンピューターには、おそらくすでにテキストエディターが入っています。 Windows にはメモ帳が、 macOS にはテキストエディットが、 Linux にはディストリビューションによっていろいろですが、 Ubuntu 22.04 LTS リリースには GNOME Text Editor が初めからインストールされてされています。

ウェブ開発においては、おそらくメモ帳やテキストエディットより良いものがあります。おすすめは Visual Studio Code で、これは無料のエディターであり、ライブプレビューやコードヒントを提供しています。

最新のウェブブラウザーのインストール

ひとまず、コードをテストするために、デスクトップウェブブラウザーを数種類インストールします。できれば、それぞれの行からブラウザーを1つずつインストールし、テストできるようにしておいてください（同じレンダリングエンジンをベースにした複数のブラウザーだけでテストすることのないように）。

ローカルのウェブサーバーのインストール

いくつかの例では、正しく動作させるためにウェブサーバー上で実行する必要があるものもあります。ローカルテストサーバーのインストール方法にて、その方法が見つかります。

プロはどんなツールを使っている？

以下の一覧はいかにも怖そうですが、幸いなことに、これらのほとんどについて何も知らなくてもウェブ開発を始めることは可能です。

  • コンピューター。当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとしたウェブ開発のためには、Windows、macOS、Linux などが動作するデスクトップやノートパソコンを使ってください。
  • テキストエディター。コードを書くために必要です。テキストエディター（たとえば Visual Studio Code、Notepad++、Sublime Text、GNU Emacs、VIM）でも、複合的な機能を持つソフトウェア（Dreamweaver や WebStorm）でも構いません。 Office 文書のエディターは、ウェブブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。
  • ウェブブラウザー。自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、Firefox、ChromeSafari、Microsoft Edge などです。また、モバイル端末や、対象とするユーザーが使用している可能性のある他のブラウザーで、サイトがどのように表示されるかについても検査すべきです。テキストベースの端末ウェブブラウザーである Lynx は、視覚障碍のあるユーザーがサイトをどのように体験しているかを見るのに適しています。
  • 画像編集ソフト（GIMP、Figma、Paint.NET、Photoshop、Sketch、XD など）。ウェブページの画像を作成するために必要になります。
  • バージョン管理システム。複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、 Git が最も有名なバージョン管理システムであり、これに基づいたコードホスティングサービスの GitHub や GitLab もとても有名です。

他にも、自分のプロジェクトに特化したツール、特にウェブ開発者向けのツールについての詳細情報は、「クライアントサイドのウェブ開発ツールについて理解する」をご覧ください。