【JavaScript第1回】かんたん！環境構築をしよう【Mac/Windows共通】

今回は、JavaScriptの環境構築についてお伝えします。

このブログを読むことで以下のことができるようになります。

JavaScriptプログラミングを始めることができる
JavaScriptについて知ることができる

JavaScriptとは
環境構築をしよう
1. Visual Studio Codeをインストールする
2. Visual Studio Codeの設定をする
実際にプログラミングしてみよう！
まとめ

JavaScriptとは

JavaScriptはプログラミング言語です。

JavaScriptは、ネットスケープコミュニケーションズのブレンダン・アイクによって開発されました。

よく名前の似た言語に「Java」というものがありますが、これは、JavaScriptが生まれた当初、Javaというプログラミング言語が人気を浴びていたことから、JavaScriptと名付けられただけで、あまり関係はありません。

JavaScriptは、WebサイトやWebアプリの開発などに用いられることが多いです。

JavaScriptはプログラミング言語である
JavaScriptは、WebサイトやWebアプリの開発などに用いられることが多い

環境構築をしよう

それでは、環境構築をしましょう！

JavaScriptのプログラミングを行うには、「エディター」というものが必要となります。

今回は、「Visual Studio Code」というエディターを使用します。

Visual Studio Codeのインストール方法からお伝えします。

Visual Studio Codeをインストールする

まず、「Visual Studio Code」というソフトウェアをインストールします。
こちらのページを開いてください↓
https://code.visualstudio.com

ページを開くとこのような画面が出てくると思います。
ページを開いたら、真ん中あたりにある「Download」をクリックして、ファイルをダウンロードしてください。
ダウンロードできたら、手順に従ってインストールをしてください。

Visual Studio Codeの設定をする

インストールできたら、Visual Studio Codeを開いてください。

すると、こんな画面が出てくると思います。
何やら英語だらけでよく分かりませんね（汗）
ということで、言語設定を日本語にしたいと思います。
左側の上から5つ目のアイコンをクリックします。

画像の赤丸で囲った部分です。
するとこんな画面が出てきます。

左に何やら色々出てきましたね（笑）
では、上の「Search Extensions in Marketplace」に「Japanese Language Pack」と入力してみましょう。

すると、一番上にJapaneseと書いてある地球儀のマークが出てくるので、クリックしてください。
地球儀のマークはたくさんあるので、注意してくださいね。
そして、これをインストールします。
「Install」のボタンをクリックします。
インストールが終わったら、「Install」というボタンが「Uninstall」というボタンに変わりますので、変わったらVisual Studio Codeを一度閉じて、再度開いてみてください。
すると、言語が日本語に変わっていると思います。

これでJavaScriptプログラミングの環境構築は完了です！
おめでとうございます！
これであなたもプログラミングができるようになりますよ。

実際にプログラミングしてみよう！

それでは実際にプログラミングをしてみましょう！

フォルダを用意する

まずは、任意の場所にフォルダを作ります。
好きな場所で良いですが、私は、Macの方は「書類」フォルダの中に、Windowsの方はCドライブの中に作ることをおすすめします。
私はMacで、書類フォルダの中に、「cplab」というフォルダを、さらに「cplab」というフォルダの中に「JavaScript」というフォルダを作りました。
CPLABでは、JavaScript以外の言語でのプログラミングもお伝えしていこうと思っていますので、言語ごとにフォルダを分けるために、「cplab」の中に「JavaScript」というフォルダを作りました。

さらに、「JavaScript」フォルダの中に、「001」というフォルダを作りましょう。

これで、フォルダの準備は完了です。

「index.html」ファイルを生成する

メニューバーの「ファイル」から「フォルダーを開く」をクリックして、先ほど作った「001」フォルダを選択してください。
この時、何かメッセージが出てきたら、「はい、作成者を信頼します」をクリックしてください。

すると、左側に開いたフォルダーが出てくると思います。
次に、画像の赤丸で囲ってあるマークを選択してください。

すると、ファイル名の入力を求められるので、「index.html」と入力してください。

これで、「index.html」というソースファイルが出来上がりました！

また、同じ流れで、「main.js」というファイルも作ってください。

実際にコーディング・プログラミングしてみる

お待たせしました！
ではまずはHTMLのコーディングをしてみましょう！

以下のコードを記述してください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
        <script src="main.js"></script>
    </head>

    <body></body>
</html>

ここまでコーディングできたら保存してください。
保存は、「command」+「S」（Mac）、「Ctrl」+「S」（Windows）を押してください。
そうすると保存ができます。

保存できたら、次は、main.jsのプログラミングを行います。

main.jsを開いて、以下のコードを記述してください。