path: root/files/ja/learn/common_questions/what_software_do_i_need/index.html

---
title: Web サイトを作成するのにどんなソフトウェアが必要か？
slug: Learn/Common_questions/What_software_do_I_need
tags:
  - NeedsActiveLearning
  - WebMechanics
  - 初心者
translation_of: Learn/Common_questions/What_software_do_I_need
---
<div class="summary">
<p>この記事では、Webサイトを編集、アップロード、または閲覧するときに必要なソフトウェアについて説明します。</p>
</div>

<table class="learn-box nostripe standard-table">
 <tbody>
  <tr>
   <th scope="row">学習の前提:</th>
   <td><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違い</a>を理解しておいてください。</td>
  </tr>
  <tr>
   <th scope="row">学習の目的:</th>
   <td>Web サイトを編集、アップロード、閲覧するときに必要なソフトウェアについて学びます。</td>
  </tr>
 </tbody>
</table>

<h2 id="Summary" name="Summary">概要</h2>

<p>Web 開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。</p>

<p>次のようなツールが必要です。</p>

<ul>
 <li>Web ページの作成と編集</li>
 <li>Web サーバにファイルをアップロードする</li>
 <li>Web サイトを見る</li>
</ul>

<p>ほぼすべてのオペレーティングシステムには、デフォルトでテキストエディタとブラウザが含まれており、Web サイトの閲覧に使用できます。結果的には、通常はファイルを Web サーバに転送するためのソフトウェアを入手するだけで済みます。</p>

<h2 id="Active_Learning" name="Active_Learning">アクティブラーニング</h2>

<p><em>実習はまだありません。<a href="/ja/docs/MDN/Getting_started">あなたの力をお貸しください</a>。</em></p>

<h2 id="Dig_deeper" name="Dig_deeper">より深く掘り下げる</h2>

<h3 id="Creating_and_editing_webpages" name="Creating_and_editing_webpages">Webページの作成と編集</h3>

<p>Webサイトを作成したり編集したりするために、テキストエディターが必要です。テキストエディターは、形式を持たないテキストファイルの作成や修正を行います。 <strong>{{Glossary("RTF")}}</strong> のような他の形式では、太字や下線のような書式を追加することができます。しかし、これらの形式はWebページの作成には適していません。Webサイトを構築する際に幅広い作業に使用するので、どのテキストエディターを使用するかを考えておきましょう。</p>

<p>すべてのデスクトップ OS には、基本的なテキストエディターが付属しています。これらのエディターはすべて簡単なものですが、Webページのコーディングのための特別な機能は持っていません。そこで、お望みなら、利用可能なサードパーティのツールがたくさんあります。サードパーティのテキストエディターには、構文の色付け、自動補完、セクションの折りたたみ、コード検索などの便利な追加機能がよくついています。エディターの簡単なリストを挙げておきます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">OS</th>
   <th scope="col">内蔵エディター</th>
   <th scope="col">サードパーティのエディター</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Windows</td>
   <td>
    <ul>
     <li><a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3" rel="external">メモ帳</a></li>
    </ul>
   </td>
   <td>
    <ul>
     <li><a href="http://notepad-plus-plus.org/">Notepad++</a></li>
     <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li>
     <li><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></li>
     <li><a href="http://brackets.io/">Brackets</a></li>
     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <td>Mac OS</td>
   <td>
    <ul>
     <li><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" rel="external">TextEdit</a></li>
    </ul>
   </td>
   <td>
    <ul>
     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
     <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li>
     <li><a href="http://brackets.io/">Brackets</a></li>
     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <td>Linux</td>
   <td>
    <ul>
     <li><a href="https://ja.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)</li>
     <li><a href="https://ja.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
     <li><a href="https://ja.wikipedia.org/wiki/Kate" rel="external">Kate</a> (KDE)</li>
     <li><a href="https://ja.wikipedia.org/wiki/Leafpad" rel="external">LeafPad</a> (Xfce)</li>
    </ul>
   </td>
   <td>
    <ul>
     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
     <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li>
     <li><a href="http://brackets.io/">Brackets</a></li>
     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <td>Chrome OS</td>
   <td></td>
   <td>
    <ul>
     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>こちらは、高度なテキストエディターのスクリーンショット例です。</p>

<p><img alt="Notepad++ のスクリーンショット" src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p>

<p>こちらは、オンラインのテキストエディターのスクリーンショット例です。</p>

<p><img alt="ShiftEdit のスクリーンショット" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="height: 311px; width: 475px;"></p>

<h3 id="Uploading_files_on_the_Web" name="Uploading_files_on_the_Web">Web上へのファイルのアップロード</h3>

<p>Web サイトを公開する準備が整ったら、Web ページを Web サーバにアップロードする必要があります。さまざまなプロバイダからサーバ上のスペースを購入できます (<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Web で何かをするためにどのくらいコストがかかりますか？</a>を参照)。どのプロバイダを使用するかが決まったら、プロバイダは通常、SFTP URL、ユーザ名、パスワード、およびそれらのサーバへの接続に必要なその他の情報の形式で、アクセス情報をメールで送信します。(S)FTPは今や幾分時代遅れになっていて、<a href="https://ja.wikipedia.org/wiki/Rsync">RSync</a> や <a href="https://help.github.com/en/articles/using-a-custom-domain-with-github-pages">Git/GitHub</a> のような他のアップロードシステムが普及し始めていることを覚えておいてください。</p>

<div class="blockIndicator note">
<p><strong>メモ: </strong>FTP は本質的に安全ではありません。ホスティングプロバイダが安全な接続、例えば  SSH を介した SFTP または RSync の使用を許可していることを確認してください。</p>
</div>

<p>Web サーバを作成する際、Web サーバにファイルをアップロードすることは非常に重要なステップなので、<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">別の記事</a>で詳しく説明します。ここでは、単純な機能に限った無料 (S)FTP クライアントの例を示すにとどめます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">OS</th>
   <th colspan="2" rowspan="1" scope="col" style="text-align: center;">FTP ソフトウェア</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Windows</td>
   <td>
    <ul>
     <li><a href="http://winscp.net" rel="external">WinSCP</a></li>
     <li><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></li>
    </ul>
   </td>
   <td colspan="1" rowspan="3">
    <ul>
     <li><a href="https://filezilla-project.org/">FileZilla</a> (すべての OS)</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td>Linux</td>
   <td>
    <ul>
     <li><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)</li>
     <li><a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td>Mac OS</td>
   <td>
    <ul>
     <li><a href="http://cyberduck.de/">Cyberduck</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <td>Chrome OS</td>
   <td>
    <ul>
     <li><a href="https://shiftedit.net/">ShiftEdit</a> (すべての OS)</li>
    </ul>
   </td>
   <td colspan="1"></td>
  </tr>
 </tbody>
</table>

<h3 id="Browsing_websites" name="Browsing_websites">Webサイトの閲覧</h3>

<p>ご存知の通り、Webサイトを閲覧するためにはWebブラウザが必要です。 私用でブラウザ使う時には、<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E4%B8%80%E8%A6%A7">たくさんのブラウザ</a>の選択肢がありますが、あなたがWebサイトを開発している時には、あなたのWebサイトがほとんどの人々のために働くことを確認するために、少なくとも以下のブラウザで動作確認、テストをする必要があります。</p>

<ul>
 <li><a href="https://www.mozilla.org/ja/firefox/new/" rel="external">Mozilla Firefox</a></li>
 <li><a href="https://www.google.co.jp/chrome/" rel="external">Google Chrome</a></li>
 <li><a href="http://windows.microsoft.com/ja/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
 <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
</ul>

<p>特定のグループ (技術プラットフォームや国など) を対象にする場合は、追加で <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, <a href="http://www.ucweb.com/ucbrowser/" rel="external">UC Browser</a> などブラウザでサイトをテストする必要があります。</p>

<p>しかし、ブラウザによっては特定のオペレーティングシステムでしか動作しないものがあるため、テストをすることは複雑になります。 Apple Safari は iOS と Mac OS 上で動作し、 Internet Explorer は Windows 上でのみ動作します。 <a href="http://browsershots.org/" rel="external">Browsershots</a> や <a href="http://www.browserstack.com/" rel="external">Browserstack</a> のようなサービスを利用するのが最善です。 Browsershots は、様々なブラウザで見た場合のWebサイトのスナップショットを提供します。 Browserstack は実際には仮想マシンへの完全なリモートアクセスを提供し、最も一般的な環境でサイトをテストすることができます。他にも、独自の仮想マシンをセットアップする方法もありますが、それにはいくらかの専門知識が必要です。 (もしこの方法を使うのであれば、 Microsoft は <a href="https://modern.ie" rel="external">modern.ie</a>　ですぐに使える仮想マシンを含む開発者のためのいくつかのツールを提供しています。)</p>

<p>是非、実際のデバイス、特に実際のモバイル機器でいくつかのテストを実行してください。モバイル機器のシミュレーションは、進化中の新技術であり、デスクトップのシミュレーションよりも信頼性が低いです。もちろん、モバイル機器はお金を必要としますので、 <a href="http://opendevicelab.com/">Open Device Lab</a> の取り組みを見てみることをお勧めします。多くのプラットフォームでテストする場合は、過度な出費を抑えて機器を共有することもできます。</p>

<h2 id="Next_steps" name="Next_steps">次のステップ</h2>

<ul>
 <li>一部のソフトウェアは無料ですが、すべてではありません。<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">Web上で何かをするのにいくらのコストがかかるかを調べましょう</a>。</li>
 <li>テキストエディターについてさらに学びたいのなら、<a href="/ja/docs/Learn/Common_questions/Available_text_editors">テキストエディターの選び方とインストール方法</a>に関する記事をお読みください。</li>
 <li>Web上にWebサイトを公開する方法が分からないのであれば、<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">"Webサーバにファイルをアップロードする方法"</a>を参照してください。</li>
</ul>