本記事ではVisual Studio Code というテキストエディタを使ったJavaScript の環境構築方法についてご紹介いたします。
YouTubeに同じ内容のものがあるので、動画派の方はこちらをご覧ください。
JavaScriptの環境構築
Visual Studio Code のインストール
まず Visual Studio Code というエディタをインストールします。
もちろん無料です。
上のリンクからアクセスするとこのような画面になるかと思います。
この画面から下の方へスクロールしていくと、
↑このように、 Windows や Mac のマークが出てきます。
Windows を使用している人は左のボタン、Mac のパソコンを使っている人は右のボタンをクリックすることでインストールすることができます。
↑この画面では「同意をする」を選択して「次へ」と進みます。
↑次の画面でもそのまま「次へ」をクリックします。
↑ここでも「次へ」を押します。
とりあえず、「次へ」をクリックしていけばインストールすることができます。
↑こちらの画面でもそのまま「次へ」をクリックします。
↑最後に「インストール」を選択します。
↑そして「完了」を押します。
完了ボタンをクリックすると、インストールが始まります。
インストールが終了すると Visual Studio Code が自動的に起動されます。
日本語表記に変更をする
インストール直後は表記がおそらく日本語ではなく英語になっているはずです。
なのでまず日本語表記に変更をします。
↑左にあるアイコンの一番下、「拡張機能（Extensions）」というものをクリックします。
↑そして、検索窓のところに「Japanese」とタイプし、Japanese Language Pack for Visual Studio Code という拡張機能をインストールします。
この拡張機能をインストールした後にリセットをすることで表記が日本語に変更されます。
便利な拡張機能について
次にJavaScriptでコードを書くにあたって、便利な拡張機能についてご紹介いたします。
まず、Live Server。
ブラウザの更新を自動的に行ってくれます。
次に、HTML CSS Support。
インストールというボタンをクリックすることで、インストールができます。
次に、 JavaScript (ES6) code snippets。
こちらもインストールをして下さい。
indent-rainbow
こちらもインストールをしておくと便利です。
最後に、Bracket Pair Colorizer。
これぐらい拡張機能をインストールしておけば、スムーズにJavaScriptの勉強をすることができます。
Hello World と表示をするプログラムを書く
拡張機能をインストールし終わった後は、実際に簡単なプログラムを書いてみます。
まず、フォルダの作成をします。
フォルダを作成する場所は別にどこでも構わないのですが、今回はデスクトップ上に作ってみることにします。
デスクトップでマウスの右クリックを押し、
「新規作成」→「フォルダー」を選択します。
そしてフォルダに名前を付けます。
ここでは javascript というフォルダ名を付けています。
フォルダを作成が終わったら Visual Studio Code に戻り、
「ファイル」を選択し、「フォルダを開く」をクリックします。
次に先ほど作ったフォルダを選択し、このフォルダの中にファイルを作っていきます。
↑「新しいファイル」という右から4番目のアイコンをクリックしてファイルの作成を行います。
ファイルの名前は○○.htmlというものにします。
今回は”index.html”というファイルを作成します。
ファイルの中には下記のように書きます。
<title></title>で囲まれている中に、下の写真のようなブラウザのタブにつけるタイトルを書きます。
Hello World というタイトルを付けています。
そして、<script></script>の間に、console.log(“Hello World”) と書くことで、カッコの中の文字列である Hello World を出力することができます。
index.html を右クリックし、Open with Live Server を選択すると、下のように今作成した index.html ファイルが表示されます。
この画面からキーボードの右上の方にある「F12」をクリックすると、下のように Console 画面が表示されます。
ここに、先ほど書いた”Hello World”が表示されます。
以上が”Hello World”と表示するプログラムです。
コメント