JavaScript を始める準備
JavaScript は実はなにも準備しなくても始められるのですが、あると便利なソフトがいくつかあります。それらをインストールして、初めて JavaScript を書いてみます。パソコンは Windows 10 を想定して進めます。また、パソコンがインターネットにつながっている必要があります。さらに、管理者権限のあるユーザとして Windows にサインインしている必要があります。
Visual Studio Code のダウンロードとインストール
Visual Studio Code(ビジュアルスタジオ・コード)は、JavaScript だけでなく、色々なプログラムを書くのにとても便利なソフトです。
https://code.visualstudio.com/ にアクセス。
「Download for Windows」をクリックするとダウンロードが始まります。
「VSCodeSetup-x.x.x.exe」という名前(x.x.x の部分はバージョン番号)でダウンロードされます。通常は C:\Users\(ユーザ名)\Downloads というフォルダにダウンロードされます。
ダウンロードされた「VSCodeSetup-x.x.x.exe」をダブルクリックします。すると「Visual Studio Code セットアップウィザードの開始」というウィンドウが開きます。
「次へ」ボタンをクリック、「●同意する」にチェックを入れて「次へ」ボタンをクリック、あとはそのまま「次へ」ボタンをクリックしていけばインストールできます。
Chrome と Firefox のインストール
JavaScript はブラウザ(Web ページを見るソフト)でプログラムを実行します。Windows 10 には Edge(エッジ)というブラウザがはじめから入っていますが、Edge だと JavaScript がうまく動かないことがあります。JavaScript がよく動く Chrome(クローム)と Firefox(ファイアフォックス)という二種類のブラウザをインストールしましょう。
Chrome のインストール
https://www.google.co.jp/chrome/ にアクセス。
「Chrome をダウンロード」をクリックすると、利用規約が表示されます。
「同意してインストール」をクリックすると「ChromeSetup.exe」というファイルがダウンロードされます。これをダブルクリックしてインストールします。
Firefox のインストール
https://www.mozilla.org/ja/firefox/ にアクセス。
「無料ダウンロード」をクリックすると「Firefox Setup Stub xx.x.x.exe」というファイルがダウンロードされます(xx.x.x はバージョン番号)。これをダブルクリックしてインストールします。
初めての JavaScript
Windows のスタートメニューから「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 というフォルダの中に保存しました。
上でインストールした Chrome または Firefox のアイコン(デスクトップにある)に、保存した index.html をドラッグ&ドロップします。すると「こんにちは」と書かれたウィンドウが表示されます。
さきほど書いたプログラムのうち、9行目の alert("こんにちは"); が JavaScript のプログラムです。
<script> alert("こんにちは"); </script>
alert(); というのは、( ) 内の文字を警告ウィンドウに出す、という命令です。
この1行以外は実は JavaScript ではなく、HTML といって、Web ページを作るためのプログラムです。ここでは HTML については詳しく触れませんが、JavaScript はこのように、Web ページの中で様々なことをするプログラムです。
さぁ、これで JavaScript を始める準備は OK です。次は、書籍(例えばコチラ)を手に入れて詳しく学びましょう!