はじめに
この記事は、ウェブ制作を学びたいけど何から始めていいのかわからない人に向けて書かれています。
ゼロからウェブ制作を学ぼうと考えている人を対象としているので比較的やさしい内容です。ウェブ制作に興味のある人はぜひ最後まで読んでください。
この記事の対象者
- ウェブ制作を基礎から学びたい人
- プログラミングに興味がある人
- ウェブ制作を行うための環境を構築したい人
この記事の目標
- テキストエディタについて知る
- テキストエディタをインストールする
- ウェブブラウザについて知る
- 複数のウェブブラウザをインストールする
ウェブ制作で絶対に使うアプリケーション
ウェブ制作を学ぶ上で最低限必要となるツールとして、テキストエディタとウェブブラウザが挙げられます。
ウェブ制作を行うにはHTMLやCSSと言った言語を学ぶ必要があり、これらを学ぶためにテキストエディタとウェブブラウザを使用します。HTMLやCSSのコードをテキストエディタで記述して保存し、保存したファイルをウェブブラウザで表示するという流れが学習の基本的な手順になります。
まずはテキストエディタとウェブブラウザをインストールしましょう。
テキストエディタとは？
テキストエディタとは、その名のとおりテキストを編集するためのアプリケーションです。Wordのように文章をキレイにしたり画像を挿入する機能は無く、文字を入力することに特化していることが特徴です。
Windowsのパソコンには『メモ帳』、macであれば『テキストエディット』など、標準でインストールされているものがあります。しかし、機能が少なく拡張性もないため、一般的にはプログラミングに特化したテキストエディタをインストールしてコーディングを行います。
高機能なテキストエディタを使うメリット
コードが見やすい
プログラミングに特化した高機能なテキストエディタには、標準でシンタックスハイライトという機能がついているものが多いです。シンタックスハイライト機能はコードを見やすく色分けしてくれます。また、ファイルを一つのウィンドウで複数表示できるので、コードを見比べたりすることが簡単にできます。
プログラミングのための機能が豊富
コーディングの助けになる機能がたくさんあるので、使いこなすことで開発スピードが速くなります。主な機能としては、文字の検索や置換、コードの自動補完等があります。
上手に使いこなせればタイプミスも少なくなり、正確なコードを書くことができます。
機能を追加できる
拡張機能をインストールすることで様々な機能を追加することができるため、開発をより便利に行うことができます。学習や開発を行う上で必ず恩恵を受けると言っても過言ではありません。
テキストエディタの種類
高機能なテキストエディタには以下のようなものがあります。無料で使えてWindowsとMacの両方に対応しているものを厳選してご紹介いたします。
Visual Studio Code (VS Code)
Microsoftが開発したテキストエディタです。初心者から上級者まで多くのエンジニアに好まれており、シェアが多いのでネットで調べれば情報が豊富にあります。
また、オープンソースとしてソースコードが公開されているので拡張機能が豊富にあり、カスタマイズすることで多くの言語に対応した開発環境を構築できます。
インストール直後では英語表記になっているため、日本語表記にするためには拡張機能をインストールする必要があります。プラグインのインストールは簡単なので、プログラミング初心者の人にオススメです。
Sublime Text
「恋に落ちるテキストエディタ」というキャッチフレーズが印象的なテキストエディタです。
公式サイトによると継続使用にはライセンスの購入が必要とありますが、無料で使える評価版を制限なし（定期的にライセンス購入の案内が表示される）で使用することができます。
動作が軽く拡張機能も豊富で、自由にカスタマイズできることが強みと言われています。
こちらもネット上に使い方等の情報が豊富にありますが、Visual Studio Codeと同じでインストールした直後では日本語設定にはなっていません。また、拡張機能のインストールにはコンソールを開いてコマンドを入力する必要があるため、プログラミングに触れたことのない人には少しハードルが高いかも知れません。
ウェブ制作の学習を進める中でコンソールの使用はいつか必要になるので、学習の最初の段階でコンソールに慣れておきたいというストイックな人や、コンソールでのコマンド操作に抵抗が無い人にオススメのテキストエディタです。
Vim
起動や動作が非常に軽く、柔軟な編集ができるため世界的にも人気の高いテキストエディタです。
拡張機能によるカスタマイズもできて効率的にプログラミングを行うことができますが、コマンドを覚える必要があったり、マウスでの操作ができないなど、操作方法が独特なので使い慣れるまでに時間がかかります。
ゼロからウェブ制作を学ぶ人にはとてもハードルの高いテキストエディタなのでオススメはできませんが、制作に慣れてきてテキストエディタを見直したいと思ったときに検討してみるとVimの魅力に惹きつけられるかも知れません。
オススメのテキストエディタ
Visual Studio Code、Sublime Text、Vimの3つのテキストエディタをGoogle Trendsで比較しました。結果は以下になります。
2023/07/04時点から過去12か月間
VimやSublime Textもとても優れたテキストエディタですが、無料で初心者にも使いやすく、拡張性も高いVisual Studio Codeが圧倒的な人気を誇っているようです。
また、当サイト管理人もVisual Studio Codeを使用しているので、当サイトで公開するコンテンツは基本的にVisual Studio Codeの使用を前提としています。
Visual Studio Codeのインストール方法については以下の記事で詳しく解説しているので、興味のある人は参考にしてください。
ウェブブラウザとは？
ウェブブラウザとは、ウェブページを表示するためのアプリケーションです。
ウェブページはHTTP（Hipertext Transfer Protocol）という技術を使うことで、ウェブブラウザとウェブサーバー間で情報のやり取りを行います。
ユーザーがウェブブラウザでURLを入力したり、ウェブページ上のリンクやボタンをクリックすることでウェブサーバーへHTTPリクエストを送信します。
ウェブサーバーはウェブブラウザから受け取ったHTTPリクエストの解析をして必要なファイルの読み取りなどを行い、HTMLやCSS、JavaScriptといった情報を含んだHTTPレスポンスをウェブブラウザに返します。
ウェブサーバーから返されたHTTPレスポンスをウェブブラウザが解析することでウェブページが表示されます。
WindowsにはMicrosoft Edge、MacやiphoneであればSafariが標準でインストールされています。
ウェブブラウザの種類
ウェブブラウザにもいろんな種類があり、コードの解釈やプログラムの挙動が異なる場合があるため、ウェブ開発の現場では複数のウェブブラウザでデバッグを行うことが一般的です。以下が主要なウェブブラウザになります。
Google Chrome
PC、モバイル共に世界No.1のシェアがあり広く普及しているウェブブラウザで、Android端末に標準でインストールされていることが多いです。
Googleアカウントと同期することでGmailやGoogoleドライブのデータなどを複数の端末で共有することができるので、ウェブページの閲覧以外にも利用シーンの多いウェブブラウザです。
Microsoft Edge
Microsoftが開発したブラウザです。
windows10以降で標準でインストールされていますが、iOSやAndroid端末でも使用できます。
日本国内ではGoogle Chromeに次いで2番目に使用されており、ブラウザにこだわらないWindowsユーザーに多く利用されています。
近年ではAI技術の搭載に力を入れており、今後シェアを拡大させていく可能性があります。
Safari
iPhoneやMac PCに標準でインストールされているウェブブラウザです。
Windows用のSafariは現在サポートを終了しているためWindowsのPCで使用することはできませんが、iPhoneがあればios-webkit-debug-proxyというツールを使用することでデバッグを行うことは可能です。
Mozilla Firefox
Mozilla Foundationが開発したウェブブラウザです。
オープンソースで開発されているため、エンジニアであれば機能の追加や修正が可能であり拡張機能も豊富です。
利用者はPCとモバイル端末間ではPCでの利用率が高く、2023年5月時点では日本国内で4.26%と多くはありませんがコアなユーザーが多い印象です。
Internet Explorer（IE）
Microsoft Edgeと同様、Microsoftが開発したウェブブラウザです。
最新のウェブ技術に対応しておらず、以前のウェブ制作の現場ではIEのために特別な対応を強いられることがよくありました。長期間ウェブエンジニアの頭を悩ませていたウェブブラウザですが、2022年6月にサポートを終了しており現在ではほとんど使われておりません。
ウェブ制作の現場ではサポート終了以前のコードに触れることもあるため、予備知識としてIEの存在を知っておいても無駄ではないでしょう。
異なるウェブブラウザでの表示の違い
ウェブサイトの見た目はCSSファイルに記述されているコードをウェブブラウザが読み込むことで実装されています。
ウェブブラウザにはデフォルトのCSS（ユーザーエージェントスタイルシート）というものがあり、内容がウェブブラウザ毎に異なります。
そのため、異なるウェブブラウザを使用すると表示崩れなどが発生する可能性があるので対策を行わなければなりません。
また、ウェブブラウザによっては不具合やバグが放置されているようなケースもあります。
HTML・CSSの初期の学習ではウェブブラウザは一つインストールされていればできますが、実際のウェブ制作の現場では異なるウェブブラウザでのデバッグは必須です。
SafariはAppleデバイスがなければ難しいかもしれませんが、Google Chrome、Microsoft Edge、Firefoxの3つのブラウザはインストールしておくことをオススメします。
最後に
ゼロからウェブ制作を学びたい人に向けて、学習の事前準備としてテキストエディタとウェブブラウザについて紹介しました。
ウェブブラウザの説明ではHTTPについて少し触れました。ゼロからウェブ制作を学ぶ人にとっては優先順位は低い内容なので深く理解しなくても大丈夫ですが、知っているとトラブルの解決に役立つことがあります。HTMLやCSS、JavaScriptなどの学習を進めていく中で余力があれば学んでおくと良いでしょう。
こちらの記事にもHTTPに関する記述があるので興味のある人はどうぞ。
以上です。この記事を読んでゼロからの第一歩を踏み出していただけたら嬉しいです。