こくぶん研究室

JavaScript を始める準備

JavaScript は実はなにも準備しなくても始められるのですが、あると便利なソフトがいくつかあります。それらをインストールして、初めて JavaScript を書いてみます。パソコンは Windows 10 を想定して進めます。また、パソコンがインターネットにつながっている必要があります。さらに、管理者権限のあるユーザとして Windows にサインインしている必要があります。

Visual Studio Code のダウンロードとインストール

Visual Studio Code(ビジュアルスタジオ・コード)は、JavaScript だけでなく、色々なプログラムを書くのにとても便利なソフトです。

https://code.visualstudio.com/ にアクセス。

Visual Studio Code のトップページ
Visual Studio Code のトップページ

「Download for Windows」をクリックするとダウンロードが始まります。

「VSCodeSetup-x.x.x.exe」という名前(x.x.x の部分はバージョン番号)でダウンロードされます。通常は C:\Users\(ユーザ名)\Downloads というフォルダにダウンロードされます。

ダウンロードされた「VSCodeSetup-x.x.x.exe」をダブルクリックします。すると「Visual Studio Code セットアップウィザードの開始」というウィンドウが開きます。

セットアップウィザードの開始
セットアップウィザードの開始

「次へ」ボタンをクリック、「●同意する」にチェックを入れて「次へ」ボタンをクリック、あとはそのまま「次へ」ボタンをクリックしていけばインストールできます。

▲TOP

Chrome と Firefox のインストール

JavaScript はブラウザ(Web ページを見るソフト)でプログラムを実行します。Windows 10 には Edge(エッジ)というブラウザがはじめから入っていますが、Edge だと JavaScript がうまく動かないことがあります。JavaScript がよく動く Chrome(クローム)と Firefox(ファイアフォックス)という二種類のブラウザをインストールしましょう。

Chrome のインストール

https://www.google.co.jp/chrome/ にアクセス。

Chrome のダウンロードページ
Chrome のダウンロードページ

「Chrome をダウンロード」をクリックすると、利用規約が表示されます。

Chrome の利用規約画面
Chrome の利用規約画面

「同意してインストール」をクリックすると「ChromeSetup.exe」というファイルがダウンロードされます。これをダブルクリックしてインストールします。

Firefox のインストール

https://www.mozilla.org/ja/firefox/ にアクセス。

Firefox のダウンロードページ
Firefox のダウンロードページ

「無料ダウンロード」をクリックすると「Firefox Setup Stub xx.x.x.exe」というファイルがダウンロードされます(xx.x.x はバージョン番号)。これをダブルクリックしてインストールします。

▲TOP

初めての JavaScript

Windows のスタートメニューから「Visual Studio Code」を探し出して、クリックして実行します。立ち上がったら「ファイル」メニューから「新規ファイル」を選びます。

Visual Studio Code
Visual Studio Code

以下のプログラムを打ち込みましょう。初めてにしては少し長めですが頑張りましょう。日本語の部分以外はすべて半角文字です。 ; (セミコロン)も忘れずに書きましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>初めてのJS</title>
</head>
<body>
    <script>
        alert("こんにちは");
    </script>
</body>
</html>

書き終えたら「ファイル」メニューから「名前を付けて保存...」を選び、「index.html」というファイル名で好きな場所に保存します。以下の画像の例では C:\js というフォルダの中に保存しました。

index.html の保存
index.html の保存

上でインストールした Chrome または Firefox のアイコン(デスクトップにある)に、保存した index.html をドラッグ&ドロップします。すると「こんにちは」と書かれたウィンドウが表示されます。

Chrome での実行結果
Chrome での実行結果
Firefox での実行結果
Firefox での実行結果

さきほど書いたプログラムのうち、9行目の alert("こんにちは"); が JavaScript のプログラムです。

    <script>
        alert("こんにちは");
    </script>

alert(); というのは、( ) 内の文字を警告ウィンドウに出す、という命令です。

この1行以外は実は JavaScript ではなく、HTML といって、Web ページを作るためのプログラムです。ここでは HTML については詳しく触れませんが、JavaScript はこのように、Web ページの中で様々なことをするプログラムです。

さぁ、これで JavaScript を始める準備は OK です。次は、書籍(例えばコチラ)を手に入れて詳しく学びましょう!

▲TOP