いわゆるホームページ、Webサイトを実現する技術として、HTMLやCSS、JavaScriptが代表的です。これらは、知識として読んでいるだけでは抽象的でよくわからないと感じることが多いので、実際にやってみてその動きを見ながら学んでいくのが効率的です。
今回は、HTML、CSS、JavaScriptを学ぶにあたって必要な予備知識や、オススメのツール、アプリを２つだけ紹介します。
まずはブラウザ：「Google Chrome」
まずはじめに、できたものを見るWebブラウザからいきましょう。オススメは「Google Chrome」です。
Chromeは、2008年頃登場し、JavaScriptが高速に動くブラウザとして普及し始め、いまではMicrosoft（Internet Explorer）を追い抜いてシェア1位を獲得しています。
こういう場合のツール選択では、まずは利用者が多いもの選ぶことが大事です。トラブルがあったときに、利用者が多ければ、世界のどこかに必ず同じ目にあっているヒトがいるからです。利用者が多ければ、同じトラブルがあったときにどうやって解決したのかを、カンタンに見つけることができます。
Chromeで必須機能：ディベロッパーツール
JavaScriptが高速で動いたために、まずは開発者に受け入れられました。
Web技術を学び、あるいは開発していく観点で、非常に重要なのが開発者向け機能である「ディベロッパーツール」です。
Chromeで、ディベロッパーツールの起動するにはいまは３つの方法があります。
- １）Ctrl+Shift+「I」（アルファベットの「i」）
- ２）右クリックして「検証」を選択
- ３）左上のメニューから、「その他のツール」→「ディベロッパーツール」
どれを使っても同じように起動します。ぜひ1番目の「Ctrl+Shift+i」を覚えましょう。目にもとまらぬ速さで一瞬で起動すると、それだけでデキる感じがしてきます（真剣）
「ディベロッパーツール」は、HTMLやCSSの分析、加工にも使えますが、JavaScriptの開発で猛烈に強い武器となります。特に「Console」タブの機能を使いこなすことで生産性が格段に上がりますので、ぜひマスターしてください。
開発者向けのChrome拡張機能
Googleの登場をみた他社も追っかけて、Microsoft Internet Explorerや Microsoft Edge、Firefoxなども高速化し、開発者向けのツールも最初から付いている形になりました。（注：Chromeのディベロッパーツールの元は、Firefoxの「Firebug」という一時期大流行した拡張機能をマネしているものと思いますので、Chromeが先行者だと誤解しないでください。）
他社が追っかけている間に、数が増えて充実し利用者も拡大し続けているのが、Chromeの「拡張機能」です。Chrome専用に開発されたプログラムを、機能追加することができます。
開発者向けの拡張機能が数多く出され、利用者が数多くいます。利用者が多いことは安心感につながるので、そうカンタンには他社が追いつけないメリットです。
無料、マルチプラットフォーム
現在シェア争いを展開しているブラウザはすべて無料ですが、無料でいつでもダウンロードできることは非常な利点です。
また、パソコンでもスマホでも使えます。具体的には、Windows、Mac、Linux、Android、iOS（iPhone）で、利用できます。
エディタとして：「Visual Studio Code」
HTMLやCSS、JavaScriptなどのプログラム開発は、極論を言うと「メモ帳」でも可能です。Windowsに必ず付属しているアレです。
しかし、ここではあえて「Visual Studio Code」をオススメします。
プログラマでなくとも、デザイナやディレクタでも使ってみて経験しておくとよいです。
Microsoft社が自社のOS、つまり、「Windows」上で動くソフト・アプリ開発を行うために出しているツールの名前が「Visual Studio」でした。一部無料化の動きはあるものの、昔から有料で提供されていました。
その「Visual Studio」という名前を冠した、「Windows」向けでないプログラム開発も対象にしたツールをMicrosoftが無料で提供した、というのは、それなりにインパクトのある出来事だったと思います。
機能豊富、かつ、どんどん拡張できる
そして、Chromeと同じように、拡張機能をカンタンにインストールすることができます。つまり、機能をどんどん増やすことができるわけです。使うほどに充実していくことになります。
シェア急増中
この２～３年の間にシェアが急増している印象です。
また、Microsoft社が出しているため、そうカンタンにはなくなりそうにない、という安心感があります。
使ってみるとわかりますが、かなり頻繁にアップデートされており、自動で更新がかかります。これも利用者側の安心感につながっていると思います。
無料、マルチプラットフォーム
Chromeと同じように、「Visual Studio Code」も無料でダウンロードでき、Windowsだけでなく、MacOSやLinuxでも利用できます。
まとめ
ホームページ・Webサイト制作の技術として、HTML、CSS、JavaScriptを学ぶために、ぜひ入れてほしい必須のおすすめツールを２つだけに絞り込んで紹介しました。たった２つですので、使っていないかたはぜひぜひインストールしてみてください。
お役に立てば幸いです。
コメント