---
title: 基本的なソフトウェアのインストール
slug: Learn/Getting_started_with_the_web/Installing_basic_software
tags:
  - WebMechanics
  - 'l10n:priority'
  - セットアップ
  - ツール
  - テキストエディタ
  - ブラウザ
  - 初心者
  - 学習
translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p><em>「基本的なソフトウェアのインストール」</em>では、あなたが簡単な Web 開発をするのに必要なツールを紹介して、それらのツールを適切にインストールする方法について説明します。</p>
</div>

<h2 id="What_tools_do_the_professionals_use" name="What_tools_do_the_professionals_use">プロフェッショナルはどんなツールを使っている？</h2>

<ul>
 <li><strong>コンピューター</strong> 当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとした Web 開発のためには、Windows、Mac、Linux などが実行されているデスクトップパソコンやノートパソコンを使った方がいいです。</li>
 <li><strong>テキストエディター</strong> コードを書くために必要です。テキストエディター (たとえば <a href="https://code.visualstudio.com/">Visual Studio Code</a>、<a href="https://notepad-plus-plus.org/">Notepad++</a>、<a href="https://www.sublimetext.com/">Sublime Text</a>、<a href="https://atom.io/">Atom</a>、<a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>、<a href="https://www.vim.org/">VIM</a>) でも、複合的な機能を持つソフトウェア (<a href="https://www.adobe.com/jp/products/dreamweaver.html">Dreamweaver</a> や <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>) でも構いません。Office 文書のエディタは、Web ブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。</li>
 <li><strong>Web ブラウザー</strong> 自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、<a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie">Internet Explorer</a> や <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> などです。携帯電話などのモバイルデバイスで Web サイトがどのように表示されるのかもテストするべきです。また、Web サイトを見る人たちが使うかもしれない古いブラウザー (IE 8-10 など) でもできればテストした方が良いです。<span class="tlid-translation translation" lang="ja"><span title="">テキストベースのターミナル Web ブラウザーである </span></span><a href="https://lynx.browser.org/">Lynx</a><span class="tlid-translation translation" lang="ja"><span title=""> は、視覚障害のあるユーザーがサイトをどのように体験しているかを見るのに最適です。</span></span></li>
 <li><strong>画像編集ソフト</strong> (<a href="http://www.gimp.org/">GIMP</a>、<a href="http://www.getpaint.net/">Paint.NET</a>、<a href="https://www.adobe.com/jp/products/photoshop.html">Photoshop</a> など) Web ページの画像を作成するために必要になります。</li>
 <li><strong>バージョン管理システム</strong> 複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、<a href="http://git-scm.com/">Git</a> が最も有名なバージョン管理システムであり、<a href="http://git-scm.com/">Git</a> に基づいたコードホスティングサービスの <a href="https://github.com/">GitHub</a> もとても有名です。</li>
 <li><strong>FTP プログラム</strong> Web ページを公開する時にファイルをサーバーにアップロードするために必要です (この目的で、だんだんと、FTP の代わりに <a href="http://git-scm.com/">Git</a> が用いられつつあります)。(S)FTP の機能が含まれている、<a href="https://cyberduck.io/">Cyberduck</a>、<a href="http://fetchsoftworks.com/">Fetch</a>、<a href="https://filezilla-project.org/">FileZilla</a> などのプログラムを使うと良いでしょう。</li>
 <li><strong>自動化システム</strong>、<a href="http://gruntjs.com/">Grunt</a> または <a href="https://gulpjs.com/">Gulp</a> のようなソフトウェアを使うと、同じような繰り返し作業を自動的に実行することができます。たとえば、コードのサイズを自動的に小さくしたり、エラーがないかどうかを自動で確認することができます。</li>
 <li>テンプレート、ライブラリ、フレームワークなど。これらを利用すると、Web サイトを作る時によく使われるコードを短時間で用意することができます。</li>
 <li>他にも便利なツールがたくさんあります！</li>
</ul>

<h2 id="What_tools_do_I_actually_need_right_now" name="What_tools_do_I_actually_need_right_now">今の私にはどんなツールが必要？</h2>

<p>上のリストにはたくさんのツールが書かれていて、ちょっと恐ろしかったかもしれませんね。でも大丈夫です。Web 開発を始めるのには、まだ上のツールをほとんど知らなくても問題ありません。これから私たちが、Web 開発に必要最小限のツールのセットアップの仕方を説明しておきます。必要なものは、テキストエディタと最新の Web ブラウザーだけで十分です。</p>

<h3 id="Installing_a_text_editor" name="Installing_a_text_editor">テキストエディタのインストール</h3>

<p>あなたのコンピューターには、おそらく初めから基本的なテキストエディタがインストールされているはずです。Windows には<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3">メモ帳</a>が、MacOS には<a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%83%83%E3%83%88">テキストエディット</a>が、Linux の場合はディストリビューションによっていろいろですが、Ubuntu には <a href="https://ja.wikipedia.org/wiki/Gedit">gedit</a> が初めからインストールされているはずです。</p>

<p>ただ、Web 開発をする時には、メモ帳やテキストエディットのようなソフトウェアよりも、もっと高機能なプログラムを使うべきです。私たちのおすすめのソフトウェアは、 <a href="https://code.visualstudio.com/">Visual Studio Code</a> です。これは無料で利用することができ、ライブプレビューやコードヒントを提供します。</p>

<h3 id="Installing_modern_web_browsers" name="Installing_modern_web_browsers">最新の Web ブラウザーのインストール</h3>

<p>次に、これから私たちが書くコードをテストするためのブラウザーをいくつかインストールしましょう。あなたが使っているオペレーティングシステムを選び、リンクから好きなブラウザーをインストールしてみてください。</p>

<ul>
 <li>Linux: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="https://brave.com">Brave</a>。</li>
 <li>Windows: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie">Internet Explorer</a>、<a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>、<a href="https://brave.com">Brave</a>  (Windows 10 には Edge がデフォルトで付属していますが、Windows 7 以降の場合は、IE Internet Explorer 11 をインストールすることができます。そうでない場合には、Internet Explorer 以外のブラウザーをインストールしてください)</li>
 <li>Mac: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="https://brave.com">Brave</a> (Safari は、iOS と MacOS に初めからインストールされています)</li>
</ul>

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

<div class="blockIndicator note">
<p><strong>メモ</strong>: Internet Explorer は最新の Web 機能と互換性がなく、プロジェクトを実行できない場合があります。現在は Internet Explorer を使用している人はほとんどいないので、通常はあなたの Web プロジェクトとそれの互換性について心配する必要はありません — 間違いなく学習中はあまり心配する必要はありません。</p>
</div>

<h3 id="Installing_a_local_web_server" name="Installing_a_local_web_server">ローカルの Web サーバーのインストール</h3>

<p>いくつかの例では、動作を成功させるのに Web サーバーでの実行が必要です。<a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカルテストサーバーのインストール方法</a>にて、その方法が見つかります。</p>

<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ul>
 <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
 <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
 <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
 <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
 <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
 <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
 <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li>
 <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
</ul>