■数分で始めるJavaScript

• VSCodeをインストールする
  • VSCodeはどの言語を書くにせよ必ず必要になるので入れれ
• VSCodeに拡張機能 Live Server をインストールする
  • 左側にある田の一角が崩れたようなアイコンが拡張機能だ
  • 検索窓に Live Server と入力すると色々出てくるがとりあえず作者名が Ritwick Dey になってるやつを入れといて
• PCの好きなところにフォルダを作ってそのパスをコピーしとく
• VSCodeを開き、Ctrlキーを押したまま K、O と打ち、出てきた開くダイアログに上のパスをペーストして開く
• Ctrl + N（新規作成）、Ctrl + S（名前を付けて保存）して「index.html」という名前で保存する
• Ctrl + N（新規作成）、Ctrl + S（名前を付けて保存）して「script.js」という名前で保存する
• index.html の編集画面に半角英字で「!」と入力し、Tabキーを押す
  • ずらずらっと十数行のHTMLコードが勝手に出てくるはず
• ＜title＞Document＜/title＞ の下に ＜script src="./script.js"＞＜/script＞ という行を追加する
  • ↑↓の不等号は全角で書いてるけど半角に置き換えてくれ
• さらに、＜body＞ と ＜/body＞ の間にテスト文言を ＜h1＞てすと＜/h1＞ とでも書いておく
  • 書いておく文字はとりま何でもいい
• VSCode の一番下の帯の右の方にある「◎Go Live」をクリックする
• 勝手にブラウザが立ち上がって、さっきbodyの中に書いたテスト文言が左上に表示されているはず
  • 以下、Google Chrome を使っている前提で話を進める
• 立ち上がったブラウザでF12キーを押して開発者ツールを起動する
  • 開発者ツールはブラウザにドッキングしたままでもいいが別ウィンドウにすることもできる。右上の「︙」メニューで選べる
• Escキーを押すと開発者ツールの下から何やら出たり引っ込んだりするので出しておく（コンソールという）
• コンソールのメニューの「Console」（日本語を選んであればコンソール）を選んでおく
• VSCodeに戻り、script.js に１行 console.log("Hello, World!"); とタイプし、上書き保存する
• 開発者ツールのコンソール画面に

Hello, World!

と出力されていれば成功。

これで JavaScript を実行する最小限の環境は整った。

好きなようにプログラムを書いてコンソールに出力したり画面に書き出したりしてみて。

「指示の通りにならない！」という時はどこでつまずいてるか書いて。対応策を助言できるかもしれない。

Permalink | 記事への反応(2) | 12:15

ツイートシェア