| この記事のランク | |
|---|---|
| 読む時間 | 4分 |
| 重要度 | |
プログラミングをはじめる際に避けて通れないのが開発環境の準備ですが、数あるプログラミング言語のなかでも、HTMLとCSSは最もはじめやすいと言われています。
実は、HTMLとCSSをはじめるために必要なものは、「テキストエディタ」と「Webブラウザ」のたった2つしかありません。
今回は、HTML/CSSをはじめるために必要な開発環境をご紹介いたします。
ななころTwitter(@nana_korobi04)でも情報発信していますので、
フォローいただけると嬉しいです！
テキストエディタ
テキストエディタで皆さんが最も馴染みのあるものは、Windowsでいえば「メモ帳」、MacOSでいえば「テキストエディット」でしょう。
もちろん、プログラミングにはOS標準のテキストエディタでも開発はできますが、世の中にはプログラミングを補助するための便利な機能が備わったプログラミングに特化したテキストエディタが数多く存在しています。
プログラミングに特化したテキストエディタを活用することにより、プログラマにどのようなメリットがあるのでしょうか？
ソースコードが見やすい
プログラマが利用するテキストエディタの多くには、テキストの一部を属性や構文ルールに合わせて色を変えてくれる「シンタックスハイライト」と呼ばれる機能があります。
色をつけなくてもソースコードは記述できますが、色をつけることで手が必要とする部分をいち早く探すことができるため可読性が上がるというメリットがあります。
拡張子を自動的に識別できる
「メモ帳」を保存する場合は一律「.txt」というテキストファイルの拡張子になりますが、ソースコードはプログラミング言語ごとに拡張子が異なるため毎回拡張子を反応する必要があります。
しかし、テキストエディタの中にはソースコードの記述から自動的に何のプログラミング言語かを識別して、対応する拡張子で保存してくれるものがあります。
毎回、テキストエディタとプログラミングに対応した拡張子を関連付けする作業が不要となり、作業が効率化できることがメリットです。
コードの間違いを指摘してくれる
一部のテキストエディタでは、ソースコードで構文が間違っている場合に、エラーメッセージを表示して指摘をしてくれる「デバッグ」をサポートしてくれる機能があります。
スクリプト言語であれば、実際にエディタ上でプログラムを動かして動作が確認できる製品もあれば、1行づつステップ実行してクラスや変数の中身まで見れる製品もあります。
オススメのテキストエディタ
HTML/CSSに限らず、プログラミングを行う際に、テキストエディタが重要であることがお分かり頂けたかと思いますが、具体的にどのような製品が良いのでしょうか？
ここでは無料で利用できるプログラミングにオススメのテキストエディタをいくつかご紹介します。
Visual Studio Code（ビジュアル・スタジオ・コード）
VSCodeという略称で人気のあるMicrosoftが2015年にリリースしたテキストエディタで、以下のサイトから無料でダウンロードすることができます。
上記でご紹介した機能をすべて満たしていることに加えて、他のプログラミング向けのエディタに比べると軽量でサクサク動くため、ストレスなくコーディングをすることができます。
また、VSCodeはデフォルトで「Emmet」という機能が含まれており、HTMLのタグを全部入力しなくても、Emmetの省略記法を使うことにより、自動的にタグを展開してくれます。
他にも拡張機能が豊富に用意されており、スペルミスをチェックしてくれる機能や、ソースコードをウィンドウ内に収まるように自動的に折り返しする機能などがあり、自分好みにカスタマイズすることができます。
サクラエディタ
日本人によって製作された日本製のテキストエディタで、Windows95の時代から長らく使われてきた堅実なエディタです。
認知度では同じく日本製の「秀丸」というテキストエディタが有名ですが、秀丸は有償であるのに対して、サクラエディタは無料で利用できるため、個人利用しやすいのがメリットです。
下記のサイトから無料でダウンロードすることができ、ソースコード以外にも議事録やメモ帳として使う人も多いようです。
VSCodeのようなリッチな拡張機能はありませんが、シンプルで使いやすく、フォルダ全体で文字列検索ができるGrep機能はソースコードの調査などでシステム開発の現場では良く使われています。
Webブラウザ
有名なWebブラウザは、Windowsなら「Microsoft Edge」、MacOSなら「Safari」が標準ですが、他にもAndroidであれば「Google Chrome」や、高いセキュリティを持つ「Firefox」といったWebブラウザがあります。
HTML/CSSを開発するにあたり、どのようなWebブラウザを選べば良いのでしょうか。
Google Chrome（グーグル・クローム）
StatCounterというアクセス解析サービスによると、日本のWebブラウザの利用者数が最も多いのは、Google Chromeで全体の約50%を占めています。
続いて2位の「Safari」が27%、3位の「Microsoft Edge」が13%と続いており、他は5%未満となります。
グローバルで見てもGoogle Chromeが60%と圧倒的な利用者数のため、特に理由がなければGoogle Chromeで開発するのが良いでしょう。
Google Chromeには、英語サイトを日本語に変換する「ページ翻訳ツール」があったり、「ソースの表示」という機能でウェブサイトのソースコードが見れるなど標準でも便利な機能が備わっています。
ななころGoogle Chromeの拡張機能を使うと、Webサイト上で調べたいカラーコードをワンクリックで調べられる機能や、開いているページのテキストのフォントを調べられるなど、Webページの制作が捗る機能がいくつも用意されています。
Safari（サファリ）
MacOS標準のWebブラウザであり、iPhoneユーザーが多い日本ではGoogle Chromeに続いて利用率の高いWebブラウザです。
Google Chromeで出来ることはSafariでも大抵は実現可能ですが、Safariは他のブラウザに比べて消費電力が少ない点や、MacOS上での高速ブラウジングが魅力ですので、Apple製品を主体にするのであれば切り離すことはできません。
スマートフォン向けにWebサイトを開発するのであれば、Google ChromeとSafariのどちらも閲覧できるようにすることは必須でしょう。
実際にシステム開発の現場では、複数のブラウザに対応できるようにWebサイトの構築をして、それぞれのブラウザで問題なく挙動するか、細かい動作確認を行なっています。
まとめ
今回はHTML/CSSの開発環境として、オススメのテキストエディタ、ブラウザご紹介しました。
簡単にはじめられるHTML/CSSだからこそ、プログラミングにおけるテキストエディタやブラウザによる機能の違いを知っているだけで、専門家としての説得力が上がります。
ぜひこの記事を参考に、ご自身に合った開発環境を探してみて下さい。
