JavaScriptのコードを書くためのエディターは、開発効率に大きな影響を与えるため、しっかり選ぶことが大切です。
エディターの中でも、VS Codeは豊富な機能と使いやすさで多くの開発者に支持されています。
本記事で、そんなVS Codeの特徴やインストール方法について見ていきましょう。
JavaScriptにおすすめのVS Codeとは
VS CodeはVisual Studio Code（ビジュアル・スタジオ・コード）の略称で、Microsoftが開発した無料のエディターです。Web開発を効率的に行えるツールとして高い人気を誇ります。
デフォルトでも充実した機能を備えていますが、拡張機能を導入することで、自分好みにカスタマイズが可能です。
また、VS Codeはクロスプラットフォーム対応で、Windows、Mac、Linuxといった主要なOS上で動作するため、開発環境を問わず多くのエンジニアに利用されています。
さらに、初心者にも扱いやすい直感的なインターフェースも魅力の一つです。
VS Codeのインストール方法
実際に、VS Codeをインストールする方法について見ていきましょう。
1.公式サイトからインストーラーをダウンロードする
まずは、お使いのブラウザから「VS Code ダウンロード」と検索して、VS Codeの公式サイトに移行しましょう。Windowsなら「Windows」を、Macなら「macOS」のダウンロードボタンを押します。
2.VS Codeをインストールする
インストーラーがダウンロードされたら、ダウンロードフォルダーからインストーラーを開きましょう。
使用許諾契約書の同意画面では、「同意する」のラジオボタンをアクティブにして「次へ」ボタンをクリックします。
続いて、インストール先の指定画面では、VS Codeをインストールしたいフォルダを指定して「次へ」ボタンをクリックしましょう。
特に指定がない場合は変更せずに「次へ」ボタンをクリックしてください。
スタートメニューフォルダーの指定画面では、任意で名前を変更して「次へ」をクリックします。
追加タスクの選択画面では、必要なタスクを追加して「次へ」をクリックしましょう。
なにが必要かわからない場合は、デフォルトのままでも問題ありません。
最後に「インストール」ボタンをクリックしたら、VS Codeのインストールが開始されます。
VS Codeを日本語化する方法
VS Codeは初期では英語表示になっているので、インストールしたら日本語化して使いやすくしておきましょう。
日本語化は以下の手順で拡張機能をインストールして行います。
- サイドバーにある「Extensions」のアイコンをクリックする
- 検索窓から「Japanese Language Pack」と検索する
- 表示された「Japanese Language Pack for Visual Studio Code」をクリックする
- 「Install」をクリックする
- 画面右下に表示される「Change Language and Restart」をクリックする
- VS Codeを再度立ち上げる
再起動すると表記は日本語に変わっています。英語で使いづらいと感じる方は、ぜひ試してみてください。
VS CodeでJavaScriptを使う手順
VS CodeでJavaScriptを使うには、ファイルの作成やパスの紐付けなど、事前準備が必要です。VS CodeでJavaScriptを使えるようになるまでの手順について見ていきましょう。
1.フォルダーを開く
まずは、VS Codeで使用するフォルダーを事前に作成しておきます。Windowsならエクスプローラー、MacならFinderで任意の場所に空のフォルダーを作っておきましょう。このときのフォルダー名は任意で問題ありません。
VS Codeを開いたら、エクスプローラの中にある「フォルダーを開く」ボタンをクリックします。
すると、フォルダーの選択ができるので、事前に作成しておいたフォルダーを選択しましょう。
2.HTMLファイルを作る
フォルダーがVS Codeで読み込まれたら、エクスプローラー上部のファイルを追加ボタンから、ファイルを新規で作成しましょう。
このときのファイル名は任意ですが、拡張子は必ず「.html」にしてください。今回は「index.html」にしています。
追加されたHTMLファイルをクリックで開き、エディタ上で「!」を打ち込んでEnterキーを押しましょう。
すると、VS Codeの補完機能が働き、HTMLの雛形が自動で出力されます。
また、出力されるhtmlタグのlang属性は、デフォルトで「en」になっているので、日本語の「ja」に変更しておきましょう。
3.JavaScriptファイルを作る
続いて、JavaScript用のファイルを作成します。HTMLファイルを作ったときと同じ手順で、エクスプローラー上部のファイルを追加ボタンから新規ファイルを作成しましょう。
ファイルの名前もHTMLファイルと同じく任意ですが、拡張子は必ず「.js」にしてください。今回は、「script.js」にしています。
追加されたJavaScriptのファイルも、クリックで開いておきます。
また、JavaScriptに関しては、別でファイルを作らなくても、HTML内でscriptタグを使うことでコードは書けるので、開発の規模に合わせてどちらの方法を使うかは決めましょう。
| インラインスクリプト | 外部スクリプト | |
| メリット |
|
|
| デメリット |
|
|
また、JavaScriptについてより詳しく知りたい方は、以下の記事を参考にしてみてください。JavaScriptの特徴や活用方法について解説しています。
4.HTMLファイルにパスをつなげる
JavaScriptのファイルにコードを書いても、HTMLファイルに紐付けされていなければ、コードは反映されません。
HTMLファイルにJavaScriptのファイルを紐付けするには、bodyタグの最後に以下の記述が必要です。
scriptタグのsrc属性の中に.jsのパスをつなげることで、HTMLファイルと紐付けができます。
今回は、HTMLファイルとJavaScriptのファイルが同じ階層にいるので、上記の記述になりますが、例えば、.jsファイルがjsフォルダーの中に入っている場合は、以下の記述になります。
このように、階層によってパスの記述方法は異なるので注意しましょう。
作成したJavaScriptのファイルをHTMLファイルに紐付けできたらコードを書く準備は完了です。
後はJavaScriptのファイルにコードを書いていくことで、内容を反映できます。
VS Codeで実際にJavaScriptを書いてみる
VS CodeでJavaScriptを書く準備ができたので、実際に以下の動きを実装するコードを書いてJavaScriptを動かしてみましょう。
- スタイルを変更する
- アラートを表示させる
実装①スタイルを変更する
JavaScriptでタグのスタイルを変更してみます。まずは、HTMLファイルのbodyタグに以下の記述をしましょう。
記述ができたら、Ctrl＋Sでファイルを更新してください。このとき、作成した.htmlファイルをフォルダーからダブルクリックしてブラウザで開いておきましょう。
続いて、JavaScriptのファイルに以下を記述します。
title.style.color = “red”;
一行目のコードでは、HTMLファイルから取得してきたh1タグの要素を「title」という定数に格納しています。
二行目のコードでは、.style.colorで定数titleに格納されたh1のcolorプロパティをredに変更しています。
このコードをCtrl＋Sで保存してブラウザを更新してみると、黒色で表示されていた「タイトル」という文字が赤色に変わります。
このように、JavaScriptを使えば、HTMLのスタイル属性の変更が可能です。
また、JavaScriptでHTML要素を取得する方法については、以下の記事でより詳しく解説しています。
生成したりHTML要素を追加する方法も解説しているので、ぜひあわせてご覧ください。
実装②アラートを表示させる
アラートとは、ブラウザ上に表示されるエラーメッセージのことです。入力の確認や、結果を表示させる場合などに使われます。
そんなアラートは、JavaScriptに以下のコードを記述するのみで実装できます。
alertの引数に表示させたい文字列や数値を入力することで、入力した値がブラウザ上にポップアップウィンドウで表示されます。
実際にブラウザを更新して確かめてみましょう。
簡単に実装できる動きなので、JavaScriptを導入した際に問題なく動くかの確認にも使われます。
JavaScriptを学習するおすすめの方法は？
JavaScriptを学習するなら、まず書籍やオンラインツールで基礎を理解することから始めるのがおすすめです。
サンプルを見ながら、実際にコードを書きながら学ぶことでより理解が深まります。
また、独学では学習が続かない方や、効率的にJavaScriptを学びたい方には、スクールへの通学や講座の受講もおすすめです。
お金を払ってプロに教えてもらうことで、効率的にJavaScriptのスキルを身につけられます。
さまざまな選択肢から、自分に合った学習方法を見つけましょう。
VS CodeとJavaScriptについてのまとめ
今回は、JavaScriptを使うのにおすすめのエディターであるVS Codeについて紹介しました。VS Codeは、軽量でありながら豊富な拡張機能を備えており、カスタマイズ性が高いのが特徴です。
また、クロスプラットフォーム対応で、どのOS環境でも一貫した使い心地を提供します。そのため、JavaScript開発に使えるエディターを探している方は、ぜひVS Codeをチェックしてみてください。
