準備編-後編では、WEBサイトを作成するために必要な「インターネット通信環境」「ブラウザのインストール」「エディタのインストール・設定」「参考サイト」について説明します。ここからはパソコンが必要です。まだ用意が出来ていない方は、前回の記事『準備編-前編』をご確認ください。
一つずつ順番に進めていきましょう
インターネットを使えるようにしましょう
まずはインターネットを使えるようにしましょう。安定したネット通信を望む場合は光回線、引っ越しが多くその度に工事が面倒な方はコンセントに差すだけのホームルーターがおすすめです。それぞれ複数のサービス会社がありますので、サービ内容と契約内容を確認して選びましょう。
また、既に契約をされている方も他社と比較されることをオススメします。他社に乗り換えることで料金が安くなることもあるため、面倒でも月々に掛かる固定費はしっかり見直しましょう
準備編-前編では本体と液晶が分かれているタイプのデスクトップパソコンを推奨しましたが、それらのパソコンには無線LAN（Wi-Fi）が内蔵されていないことが多いです。
そのため、インターネットに接続する場合は、有線LANケーブルを接続しましょう。もし無線LANでインターネットに接続したい場合は、USB端子に装着できる小型の無線LAN子機（受信機）を別途購入しましょう。
契約されているサービスによっては途中解約をすると高額な違約金が発生する場合があります。解約前に契約内容を必ず確認しましょう
ブラウザをインストールしよう
ブラウザとは、インターネットで調べものをする時や作成したWEBサイトを閲覧するためのソフトウエアです。Windows10以降のOSでは「Microsoft Edge」が最初から組み込まれていますが、WEBサイトを作成する場合は「Google Chrome」がオススメです。
Google Chromeは拡張機能（便利な機能）を追加して自分仕様にカスタマイズできます。しかもその多くの機能は無料で追加できます。もちろんGoogle Chromeも無料ですので、早速インストールしましょう。
今後の説明でGoogle Chromeを使用しますので、この機会にインストールしておきましょう！
拡張子を表示させる
拡張子とはファイルの種類を区別するためのものです。例えば写真であれば「.jpg」エクセルであれば「.xlsx」というようにファイルには必ず拡張子がついています。WEBサイト作成に使用する「HTML」や「CSS」などのファイルにも拡張子がついていて、HTMLでは「.html」CSSでは「.css」とそれぞれ分類されます。
拡張子をみてどの種類のファイルかを確認することもあるため、パソコンで拡張子が表示される設定に変更しておきましょう。設定方法は下記を参照ください。画像はWindows10を使用した場合の変更方法です。
まずは、デスクトップ画面下部のタスクバーにある「エクスプローラー」をクリックします。
続いて上部のメニューから「表示」をクリックします。
右側にある「ファイル名拡張子」にチェックをいれます。これで準備完了です。
よく使うファイルの拡張子は覚えましょう。
エディタとは！？
WEBサイトはHTMLやCSSなどのマークアップ言語という専用の文字列を入力して作成します。その文字列（コード）を入力するときに使用するのがエディタと呼ばれるソフトです。エディタの種類は多くWindowsに標準で搭載されている「メモ帳」もエディタの一種です。
メモ帳でも作成できますが、WEBサイト作成においては、私のような初心者からプロのエンジニアの方まで幅広く使用されている「Visual Studio Code」（ビジュアル・スタジオ・コード）、通称「VSCode（ブイエスコード）」が一番オススメです。
VSCodeは、入力する文字の入力候補が自動的に表示されたり、拡張機能を追加して作業しやすい環境にカスタマイズできたりと非常に便利なエディタです。しかも無料なんです。これはありがたいですね。
WEBサイトの多くはHTMLやCSSで構成されていて、これらの言語をエディタに入力して作成します。
VS Codeをインストールしよう
では、さっそくVSCodeをインストールしましょう。下記にインストール方法を記載しますが、VSCodeの公式サイトのデザインが更新された場合は見た目が異なる場合があります。あらかじめご了承ください。（下記をクリックするとVSCodeのダウンロードページが開きます）
ページ上部にある「今すぐダウンロード」をクリックします。
VSCodeは「Windows」「Linux」「Mac」とOSごとにダウンロードするファイルが異なります。お使いのパソコンのOSにあったファイルを選択しましょう。Windows10を使用している場合は、赤枠のところをクリックすると自動的にファイルのダウンロードが始まります。
ダウンロードしたexeファイルを実行してインストールしましょう。
1～2分ほどでインストールが完了します。
VSCodeの設定（日本語化とテーマの設定）
VSCodeのインストールが完了したらそのままでも使用できますが、設定をいくつか変更することでさらに使いやすくなります。
日本語化に変更する
VSCodeは初期設定では英語表示です。英語表示でも問題がない場合はそのままご使用ください。英語が苦手なかたは言語を日本語に変更しましょう。変更方法は、インストール直後の画面右下に「インストールして再起動」というところをクリックします。クリックすると、自動的に再起動が行われて表示言語が日本語に変更されます。
テーマの変更
テーマとは、見た目の配色を意味しています。配色を変更するにはいくつかの方法がありますが、下記に3つの方法を紹介します。いろいろなテーマを試して作業しやすい環境にカスタマイズしましょう。
VSCodeをインストールした直後の場合、赤枠の部分からテーマを変更できます。
「変更方法1」については、タブを消すと表示されなくなるため、画面左下の管理（歯車のマーク）をクリックして「配色テーマ」を選択しましょう。なお配色テーマはショートカットキーが用意されていて、Windowsの場合は「Ctrl+K」を押して「Ctrl+T」を押すと配色テーマの設定画面に移行します。
配色テーマの設定画面です。いろいろなテーマを試してみましょう。
もともと用意されているテーマで十分ですが、拡張機能からテーマをインストールすることも可能です。インストールするには、画面左側の拡張機能（左側の赤枠）をクリックして、検索のところに（上側の赤枠）「GitHub」と入力します。表示された一覧（一覧の赤枠）からインストールしましょう。
配色テーマが表示されますので、一覧から好きなテーマを選択しましょう。
私は最後に紹介した拡張機能の「GitHub Theme」から「GitHub Light」のテーマを使用しています。
VSCodeの設定（その他）
VSCodeはカスタマイズ性が高く、細かな設定を変更することが可能です。変更するには、画面左下の管理（歯車のマーク）から設定をクリックして、各項目の値を変更します。 私は下記の5項目を変更して使用していますが、変更せずに初期状態でも問題ありません。
1.Auto Save
「Auto Save」とは、ファイルを更新したときに自動保存をおこなうかどうかを設定する機能です。この機能をONにしておくと、うっかり保存せずにファイルを閉じてしまったという悲劇から守ってくれます。初期値は「off」に設定されていますので、自動保存をONにするには、値を「afterDelay」に変更しましょう。
2.Tab Size「Tab Size」は、tabキーを押したときの空白のサイズを指定する機能です。初期値は4に設定されていますが、4だと少し間延びした感じになるため値を「2」に変更しています。
3.Render Whitespace「Render Whitespace」は半角スペースを空白でなく「・」で表示するように変更できる機能です。初期値は「selection」ですが「all」に変更しています。
4.Word Wrap
「Word Wrap」は、入力が長くなった場合に自動的にウィンドウの幅で折り返しを指定する機能です。初期値はoffに設定されていますので、設定を有効にするには「ON」に変更しましょう。
Emmet Variables
「Emmet Variables」は、htmlファイルの言語設定を日本語に変更する機能です。日本語を入力しない英語のサイトだけを作成する場合は変更の必要はありませんが、日本語のWEBサイトを作成する場合は設定を変更しておきましょう。
変更方法は、検索窓に「Emmet: Variables」と入力し、表示された項目の追加をクリック、値の「en」を「ja」に変更します。上記で変更した箇所には横に青い線がつきます。初期値を変更したかどうかはそちらの線を確認しましょう。
拡張機能を追加しよう
VSCodeには無料で使える拡張機能が豊富にそろっていて、それらを利用することで効率よく作業を進めることができます。例えば私は「Live Preview」という拡張機能をインストールしています。
Live Previewは、エディタに入力した内容がブラウザでどのように表示されるかを同一画面内で確認できます。しかも保存や更新などの必要もなく瞬時に表示されます。WEBサイトはHTMLやCSSといったマークアップ言語（英数字や記号）で入力していくために出来上がりのイメージを見ることができないため、瞬時にプレビューを確認できる機能は大変便利です。
拡張機能をインストールするには、拡張機能（上記画像の左側の赤枠部分）をクリックして、検索窓に「Live Preview」と入力します。表示された一覧から該当の機能をインストールしましょう。
似たような拡張機能はありますが、私はLive Pewviewが一番しっくりきました。是非使ってみてください。
MDNを活用しよう
WEBサイトの作成を進めていくと分からないことが多々出てきますが、そんなときは「MDN」というサイトを活用しましょう。MDNではHTMLのタグの意味や例文、属性などを確認できます。今は何のことを言っているか分からないかもしれませんが、勉強を進めていくと使用する機会が増えますので「MDN」は覚えておきましょう。
MDNは現役のエンジニアの方も利用しているサイトです。無料ですのでうまく利用していきましょう
まとめ
今回は準備編-後編として「インターネット通信環境」「ブラウザのインストール」「エディタのインストール・設定」「参考サイト」について記事を作成しました。次回はVSCodeエディタでよく使うショートカットキーについて記事を作成します。では、次回もよろしくお願いします。
コメント