こんにちは、ゆうゆると申します。
前回のpart.1の記事では、Webサイトが表示されている仕組みについてお話ししました。
理解していただけましたか？
今回からさっそくWeb制作を始めていきたいのですが、始める前に用意していただきたいものが二つだけあります。
単刀直入に言ってしまえばこの二つです。
用意していただきたいもの
- ブラウザー
- テキストエディター
どちらも無料なので安心してくださいね
もうダウンロード済みだという方は、次のPart.3に行っていただいて結構ですよ。
では、さっそくブラウザーから解説していきます！
ブラウザーをダウンロードしよう
ブラウザーって何？
皆さんの身近なところにあるブラウザーですが、何のことかわからない方も多くいると思います。
僕も最初は分かっていませんでした
ブラウザーの例を挙げると「GoogleChrome・FireFox・Safari」などです。
前回↓このような画像を使ってWebサイトの表示されている仕組みについて説明しました。
前回解説しませんでしたが実際には、WebクライアントとWebサーバーの間にこのブラウザーが通されているんです。
ブラウザーを通して見たときと通さずに見たときは、このような違いがあります。
通さずに見ると、次回以降から説明していくHTMLのコードが直接表示されてしまっています。
つまり、ブラウザーを通してみることでHTMLのコードを翻訳してくれるということですね。
今はそういった解釈で大丈夫です。
ブラウザーとは
- HTMLのコードを翻訳してくれるもの
標準ブラウザーを決めよう！
先ほど例に挙げたように、ブラウザーにはたくさんの種類があります。
大体の場合はどのブラウザーでも正常に動作します。
ですが「Google Chromeならきれいなのに、FireFoxで見るとレイアウトが崩れる」ということもあるので、表示確認で使う「標準ブラウザー」を一つに定めておきましょう。
この講座では普及率が高く、お手軽にダウンロードできるGoogle Chromeをダウンロード標準ブラウザーとして使用していきます。
GoogleChromeは全世界で40%以上利用されているよ
ブラウザーをダウンロード！
では、実際にGoogleChromeをダウンロードしていきます。
まずは、以下のリンクからダウンロードページに飛び、自分のデバイスに合ったものをダウンロードしてきましょう。
ダウンロードされた「ChromeSetup.exe」を起動し、セットアップを進めていきます。
ダウンロード終了です！
驚きのスピードですが、もうダウンロードは完了しました(笑)
では、次にテキストエディターについて解説していきます。
テキストエディターをダウンロードしよう
テキストエディターって何？
簡単に言うと、文字を書く場所です。
テキストエディターでできることといえば、主に2つあります。
テキストエディターでできること
- メモやレポートを作る
- プログラミングのコードを書く
実は、Windowsに標準で搭載されているメモ帳もテキストエディターです。
メモ帳でプログラミングも一応できます。
ですが、メモ帳はメモやレポートをとる方に特化しているので今回は、プログラミング専用のテキストエディターを紹介していきます。
メモ帳よりもずっと便利です(笑)
Visual Studio Codeとは？
テキストエディターにもさまざまな物があるのですが、今回ダウンロードしていくのは「Visual Studio Code」（以降からVScode）です。
特徴としてはこのような感じです。
VScodeの特徴
- 軽量化されており、ストレスなくプログラミングできる！
- 豊富なプラグイン
- 多数のショートカットキー・Emmetで効率的なコーディング
VScodeにはプラグインというものがあり、VScode標準では付いていない機能を付け加えることができます。
例えば、色分けで見やすくしたり、スペルチェックをしたりなど様々なものがあります。
VScodeのダウンロードが完了した後、3つのプラグインを紹介するので、少しプラグインの説明は後に回します。
そしてショートカットキーやEmmetというのは、少ない文字数でコードを書いたり、キー入力をすることでコードを複製したりできます。
これらについては、次回実際にコードを書いていく際に学習していきます。
VScodeをダウンロード！
では、実際にダウンロードしていきましょう。
まずは、↓このサイトに飛び、自分のデバイスに合ったものをダウンロードしてきましょう。
ダウンロードされたファイルを起動して、セットアップをしていきます。
セットアップはそこまで、難しい点はないと思いますが、わからない点があった方は以下のサイトを参考にしてみてください。
VScodeにプラグインを導入しよう
先ほども言ったように今回は3つのプラグインを導入していきます。
今回導入するプラグイン
- Japanese Language Pack for VS Code(日本語化)
- Bracket Pair Colorizer(括弧の色付け)
- Zenkaku(全角を判定する)
これらを導入していくのですが、まずはプラグインの導入方法を知りましょう。
VScodeのプラグイン導入方法
まずは「表示」のタブから「拡張機能」という項目を選択してください。
そして、先ほどのプラグイン名を検索欄に入力してプラグインを検索しましょう。
検索出来たら、インストールボタンをクリックして有効化します。
ダウンロード方法はこれだけです。
では、3つのプラグインがどのような機能なのか詳しく解説していきます。
Japanese Language Pack for VS Code
プラグイン名を直訳すると、VScode用の日本語化パックです。
その名前のとおり、VScodeを日本語化してくれるプラグインですので、日本人ならダウンロードしておいて損はないででしょう。
実際に使っていて、視覚的に分かりやすくなったのでおすすめのプラグインです。
Bracket Pair Colorizer
プラグラミングにおいて括弧は多用されるもので、階段のような構造にするときによく使われます。
複雑なコードになってくると、どの括弧同士がつながっているのかわからなくなるのでそれを防止するために、色分けをしてくれます。
Zenkaku
プログラミングにおいて、全角スペースや全角文字はほとんど使われません。
ですが、初心者のうちは全角でコードを書いてしまいエラーが出てしまうことがあります。
僕も、最初はやってしまっていました。
それを防止するためのプラグインがZenkakuです。
全角をマークアップしてくれます。
最後に
今回は、ブラウザーとテキストエディターをダウンロードしてきました。
コーディングをしていく上ではどちらも必須なので、しっかりとダウンロードしておきましょう。
次回のPart.3ではついにHTMLの基本を解説していきます。
次回から実際にコードを書いていきますのでお楽しみに。
※Part.3は現在作成中です。少々お待ちください。
