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

基本的なソフトウェアのインストールでは、簡単なウェブ開発をするのに必要なツールを紹介し、それらのツールを適切にインストールする方法を紹介します。

現時点で実際にどのようなツールが必要か

この記事では、必要最小限のツールをセットアップしましょう。テキストエディターと最新のウェブブラウザーです。

テキストエディターのインストール

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

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

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

次に、コードをテストするためのデスクトップウェブブラウザーをいくつかインストールしましょう。以下からオペレーティングシステムを選び、リンクから好きなブラウザーをインストールしてみてください。

次に進む前に、テストに使えるように最低でも 2 つのブラウザーをインストールするようにしてください。

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

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

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

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

  • コンピューター。当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとしたウェブ開発のためには、Windows、macOS、Linux などが動作するデスクトップやノートパソコンを使ってください。
  • テキストエディター。コードを書くために必要です。テキストエディター(たとえば Visual Studio CodeNotepad++Sublime TextGNU EmacsVIM)でも、複合的な機能を持つソフトウェア(DreamweaverWebStorm)でも構いません。 Office 文書のエディターは、ウェブブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。
  • ウェブブラウザー。自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、FirefoxChromeSafariMicrosoft Edge などです。モバイル端末や、ウェブサイトを見る人たちが使うかもしれない古いブラウザー(IE 8-10 など)でもサイトがどう動くのかをテストしましょう。テキストベースの端末ウェブブラウザーである Lynx は、視覚障碍のあるユーザーがサイトをどのように体験しているかを見るのに適しています。
  • 画像編集ソフトGIMPPaint.NETPhotoshopSketchXD など)。ウェブページの画像を作成するために必要になります。
  • バージョン管理システム。複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、 Git が最も有名なバージョン管理システムであり、これに基づいたコードホスティングサービスの GitHubGitLab もとても有名です。
  • FTP プログラム。ウェブページを公開する時にファイルをサーバーにアップロードするために必要です(この目的では、 FTP の代わりに Git が用いられつつあります)。(S)FTP の機能が含まれている、CyberduckFetchFileZilla などのプログラムを使うと良いでしょう。
  • 自動化システムWebpackGruntGulp はコードの最小化やテストの実行などのような反復作業を自動的に実行することができます。
  • ライブラリーやフレームワークなど、共通機能をすばやく書くためのものです。ライブラリーは、既存の JavaScript や CSS のファイルであり、コードで使用するために、すぐに使える機能を提供しています。フレームワークは、この考えをさらに進めて、ウェブアプリケーションを書くためのカスタム構文を持つ完全なシステムを提供する傾向があります。
  • 他にも便利なツールがたくさんあります!