Web制作にお勧めのエディタとブラウザ － 新米web担のためのホームページの作り方 | 第5回

ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。今回は２回に分けてプログラミングに必要なツールの準備について解説したいと思います。

プログラミングに必要なツールの準備（前半）

ホームページの作成を行なう際には大きく分けて、４つのツールが必要になります。ここではそのうち2つをご紹介します。

１．テキスト・エディタ

テキストエディタとは、テキストファイルを作成、編集、保存するためのソフトウェアのことです。このソフトを用いて実際にプログラムを記述していきます。このテキストエディタの多くは無料ですし、機能的にも無料のソフトで十分ですので、これを自分のパソコンにインストールしておきましょう。

このテキストエディタとして、例えば使っているパソコンがWindowsの場合、最初から入っている「メモ帳」でも作業を行なうことができます。しかし、一般的にプログラミングを行なう際には、無料の専用ソフトを活用します。その理由として・・・この下の画像は同じプログラムを、左は「メモ帳」で、右が「Atom」を用いて表示したものです。「Atom」を使用したほうがずっと見やすくなっていることにお気づきになると思います。

そのようなわけで、見やすさや使い勝手を考慮し「Atom」や「Sublime Text」などのソフトを使用することをおすすめします。この2つのソフトはどちらも無料ですし、どちらも機能的には大差ありませんので、使ってみて自分の使いやすいほうをその後も使用されるといいと思います。

以下からダウンロードできます。ちなみに「Atom」も「Sublime Text」も日本語化することができますので、活用してください。

Atom　 https://atom.io/

Atomのインストールと日本語化の方法　 https://eng-entrance.com/atom-editor

もしくは

Sublime Text　 https://www.sublimetext.com/

Sublime Textのインストールと日本語化の方法　https://eng-entrance.com/sublimetext-start

２．ウェブ・ブラウザ

ウェブ・ブラウザ、もしくはブラウザとはウェブ-ページを表示するための閲覧用ソフトウエアのことです。皆さんもインターネットで特定のページを見るときにいつも使用しておられると思います。有名なブラウザでは「Google Chrome」や「Internet Explorer ＝ IE」などがあります。（MacOSの場合はSafariなど）このブラウザを使用して、作成したプログラムを実際に表示します。

使い慣れたウェブブラウザを使用することができるのですが、多くの機能が備わっている「Google Chrome」は最低限インストールしておかれることをおすすめします。「Google Chrome」には、プログラムの分析やレスポンシブ表示（今後詳しく説明します）などの機能が備わっています。

加えて・・・実は、同じプログラムを実行しても、ブラウザによって「表示のされ方」が異なる場合があるのです。まれに、あるブラウザでは表示されるものの、ほかのブラウザでは表示されないというケースがあります。今後皆さんが作成したホームページを一般のユーザーが、どのブラウザで閲覧するかは分かりませんので、主要なブラウザすべてで「表示のされ方」を確認しておく必要があります。

そのようなわけで、次に挙げるよく使われているブラウザは使えるようインストールしておかれることをおすすめします。（もちろんすべて無料です）

Google Chrome　https://www.google.com/chrome/browser/desktop/index.html

Internet Explorer ＝ IE    WindowsOSを使用している場合最初から入っています。

Edge　Windows 10では最初から入っています。

Firefox　https://www.mozilla.org/ja/firefox/new/

ちなみに現時点でのシェアは日本国内と世界では若干異なるようで、日本では4人に1人は「IE」を使用しており、第二位は「Google Chrome」だそうです。世界では3人に1人が「Google Chrome」を使用しており、「IE」を使用している人は10人に1人もいないようです。最近は「Edge」などタブレットでも操作性のよいものが出ています。

まとめ

ここではまず　１）テキスト・エディタ　２）ウェブ・ブラウザ　を紹介しました。　上のリンクをクリックすればすぐにダウンロードできますので、ご使用のパソコンに入れておいてくださいね。　ちなみに今後の作業では、テキスト・エディタは「Atom」を、ブラウザは「Google Chrome」をベースに解説していきたいと思います。

プログラミングに必要な準備の残り2つは次のブログをご覧ください。