JavaScriptの書き方とは。便利なVS Codeを利用した方法をわかりやすく解説!

JavaScriptは、多くのプログラミング言語と同様、実際に書いて動かしてを繰り返すことで身につけられます。

本記事では、初心者向けに、無料で利用できるツールVS Codeを使ったプログラミングの始め方について解説します

VS Codeは多くの開発者が使用している統合開発環境で、プログラミングをサポートする機能が揃っているので、ぜひこの機会に使ってみてください。

JavaScriptの基本については、こちらの記事で詳しく解説しているのでご参照ください。

Webサイトの運営なら
Winserver
共用サーバー!
\ 2週間無料・丁寧な電話サポート/
Windows 共用サーバーを使ってみる

HTMLにJavaScriptを追加する方法

HTMLにJavaScriptを追加するには、HTMLファイルのscriptタグ内に記述して読み込む方法と、外部ファイルにスクリプトを記述して読み込む方法があります。

外部ファイルにスクリプトを記述する方法は、複数のHTMLファイルで同じスクリプトを共有できる点が大きなメリットです。

今回は、スクリプトを外部ファイルに記述して、HTMLファイル内で読み込む方法をご紹介します。

JavaScriptの基本的な書き方

ここからはMicrosoftの提供するVisual Studio Code(VS Code)を使用した、JavaScriptの基本的な書き方について学びましょう。

VS Codeは、コード編集に優れた機能を備えた無料のソースコードエディタで、JavaScript開発に広く利用されています。

VS Codeには、コードを途中まで入力すると候補を表示してくれるコード補完機能や、かっこの対応などシンタックス(文法)を強調表示する機能があり、プログラム開発にとても便利です。

また、画面上から直接ファイルの作成やHTMLファイルの実行、デバッグもできます。

もちろん、普通のテキストエディタでHTMLファイルやスクリプトのファイルを編集し、Webブラウザで表示を確認することも可能です。

しかし、テキストエディタには、先に挙げたような、開発をサポートする機能がほとんどありません。

継続的にJavaScriptを使用して開発を進めるなら、VS Codeには慣れておくことをおすすめします。

VS Codeのセットアップ

まずはVS Codeをセットアップして、JavaScriptを作成して動作させる環境を整えます。

VS Codeのダウンロード

VS Codeは、[Visual Studio Code公式サイト]から無料でダウンロードできます。

インストーラーのダウンロード: 「Download」ボタンをクリックし、インストーラーをダウンロードします。

Windows、Linux、macOSの各オペレーティングシステム向けのインストーラーが用意されていますので、お使いのシステムに合ったものを選んでください。

ダウンロードしたインストーラーを実行し、指示に従ってインストールを完了させます。

\ 2週間無料でお試しできます! /
共用サーバーを使ってみる

Visual Studio Codeを使ってみよう

インストール後、VS Codeを初めて起動すると、基本的な設定画面が表示されます。

まずは、JavaScript開発に役立つ拡張機能をインストールしましょう。

VS Codeの左側にある「Extensions」アイコンをクリックし、必要な拡張機能を検索してインストールします。

おすすめは以下の3機能です。

    • ESLint: JavaScriptコードの問題点発見や修正を支援する
    • Japanese Language Pack for Visual Studio Code :VSSを日本語化する
    • LiveServer:静的ページと動的ページのライブリロード機能を備えたローカル開発サーバー

上記の拡張機能をインストールすると、以下の状態になります。

これで、JavaScriptのコーディングを始める準備が整いました。

VS Codeを使用して、JavaScriptのコードをファイルに書いて実行する手順も確認しましょう。

VS Codeを開き、「ファイル」メニューから「新しいファイル…」を選択するか、キーボードショートカット(WindowsではCtrl + N、macOSではCmd + N)を使用して新しいファイルを作成します。

新しいファイルに、JavaScriptコードを入力してください。

入力が終わったら、「File」メニューから「Save」を選択するか、キーボードショートカット(WindowsではCtrl + S、macOSではCmd + S)を使用してファイルを保存します。

ファイル名を入力する際に、ファイルの拡張子を.js(例:script.js)として保存します。

これはJavaScriptファイルであることを示します。

ブラウザでJavaScriptコードを実行したい場合は、HTMLファイルを作成する必要があります。

ここまで見てきた要領で新しいファイルを作成し、基本的なHTML構造を書きます。

例えば、以下のようなコードです。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Test</title>
</head>
<body>
<script src=”script.js”></script>
</body>
</html>

ここで、<script src=”script.js”></script>の部分が、先ほど作成したJavaScriptファイル(script.js)を読み込む部分です。

このHTMLファイルも保存した後、右クリックで「Open with LiveServer…」を選択してみましょう。

JavaScriptが動き、以下のダイアログが表示されることを確認できます。

これらの手順に従って、VS CodeでJavaScriptコードを書き、ブラウザで実行することができます。

VS Codeの扱いをひと通り確認したところで、改めてJavaScriptスクリプトの基本構造について説明します

\ 2週間無料でお試しできます! /
共用サーバーを使ってみる

スクリプトの基本構造

JavaScriptスクリプトは、一連の命令またはステートメントで構成されています。

例えば、以下は、先ほどの例で紹介したコードです。

window.alert(“Hello, World!”);

このコードをVS Codeに入力して実行すると、メッセージダイアログが表示されます。

変数と定数の宣言方法

JavaScriptでは、`let` キーワードを使用して変数を宣言し、`const` キーワードを使用して定数を宣言します。

変数は値が変更可能ですが、定数は一度設定すると変更できません。

let variableName = 5;
const CONSTANT_NAME = “Hello”;

上記の例では、variableName には値を後から変更できますが、CONSTANT_NAME には新しい値を割り当てることはできません。

関数とメソッドの使い方

関数は、特定のタスクを実行するコードのブロックです。

JavaScriptでは、`function` キーワードを使用して関数を定義します。

function greet(name) {
window.alert (“Hello, ” + name);
}
greet(“Alice”);

この例では、greet という関数が定義されており、名前を引数として受け取り、挨拶のメッセージをメッセージダイアログに表示します。

クラスとオブジェクトの理解

クラスはオブジェクトのテンプレートとして機能し、JavaScriptのES6以降のバージョンでサポートされています。

以下は、シンプルなクラスとそのインスタンスの作成例です。

class Car {
    constructor(brand) {
        this.brand = brand;
    }
    display() {
        window.alert (“This car is a ” + this.brand);
    }
}
let myCar = new Car(“Toyota”);
myCar.display();
class Car {
    constructor(brand) {
        this.brand = brand;
    }
    display() {
        window.alert (“This car is a ” + this.brand);
    }
}
let myCar = new Car(“Toyota”);
myCar.display();

この例では、Car クラスが定義されており、new キーワードを使用してそのインスタンスが作成されています。

インスタンスメソッド display は、クラスに属する特定の車のメーカーを表示します。

これらの基本的な概念を理解し、VS Codeで実際にコードを書いて試してみることで、JavaScriptの基本的な書き方を身につけることができます

VSSの基本的な使い方が理解できたら、もう少し複雑なプログラムにも挑戦しましょう

まず、HTMLファイルを作成します。

このファイルには名前を入力するテキストボックス、ボタン、そして結果を表示するための領域を含めます。

<!DOCTYPE html>
<html>
<head>
    <title>運勢チェッカー</title>
</head>
<body>
  <input type=”text” id=”nameInput” placeholder=”名前を入力”>
    <button onclick=”checkFortune()”>運勢をチェック</button>
    <p id=”fortuneResult”></p>
    <script src=”script.js”></script>
</body>
  </html>

次に、JavaScriptのコードを作成します。

このスクリプトでは、ボタンがクリックされたときに実行される関数checkFortuneを定義し、入力された名前を取得してランダムな運勢を生成します。

function checkFortune() {
var name = document.getElementById(“nameInput”).value;
var fortunes = [“大吉”, “中吉”, “小吉”, “吉”, “凶”];
var fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
var resultText = “今日の” + name + “さんの運勢は” + fortune + “です。”;
document.getElementById(“fortuneResult”).innerText = resultText;
}

このコードでは、まず入力された名前を取得し、次にfortunes配列からランダムな運勢を選び出します。

最後に、結果をfortuneResultというIDを持つHTML要素に表示します。

これらのコードをそれぞれsample.htmlとscript.jsの名前で保存し、右クリックメニューでLiveServerから起動すると、運勢チェッカーを使用できます。

名前を入力し、「運勢をチェック」ボタンをクリックすると、運勢が表示されます。

VS Codeを活用してJavaScriptの書き方に慣れよう

JavaScriptのコーディングには、HTMLファイル内に直接記述する方法と外部ファイルを利用する方法があります。

どちらにするかは、コードの管理や再利用性に応じて選択してください。また、VS Codeを利用することで、コードの編集、デバッグなどが簡単になり、開発効率が大幅に向上します

ぜひVS Codeを使用してJavaScriptの開発を始め、基本的な書き方に慣れましょう。

Windows Serverは「Winserver」にお任せ!

Winserverは、国内で20年以上の提供実績がある、Windows Server専門のホスティングサービスです。

Microsoft認定のホスティングパートナーで、シルバークラウドプラットフォームコンピテンシーを取得しております。

サーバー稼働率も99.99%と、安心感と安定性を求める方に最適です。

「最適なプランの選び方で迷う」「複数のサーバーの運用で困っている」などのお困りごとを、サーバー導入前から専門のスタッフがサポートするため、初心者の方でも安心して利用することができます。

法人・個人問わずに利用者が増えており、今もっとも注目すべきおすすめのホスティングサービスです。

 Winserverを使ってみる

Windows ServerはWinserver

  • Windows VPS(2週間無料トライアル実施中!)

小規模環境におすすめの仮想専用サーバーです。

Windows VPSを2週間無料で試す

  • 仮想デスクトップ(2週間無料トライアル実施中!)

テレワークやFXに最適な仮想デスクトップです。

Officeアプリケーションなどを搭載したMicrosoft365製品を利用することができます。

仮想デスクトップを2週間無料で試す

  • 共用サーバー(2週間無料トライアル実施中!)

Webサイトやブログを始めたい方には、共用サーバーがおすすめです。

WordPressやEC-CUBEなど人気のCMSを、コントロールパネル上から簡単にインストールすることができます。

共用サーバーを2週間無料で試す

専用サーバーやクラウドもWinserver

Winserverでは、お客様の要件に合わせたサーバーを構成する「専用サーバー」や、AWSなどの各種クラウドサービスの運用を代行する「クラウドマネージド」も提供しております。

  • Windows Serverの構成を自由にカスタマイズしたい
  • GPUを搭載したサーバーを利用したい
  • 初期構築や監視などのサーバー運用業務を外注したい
  • AWSなどの各種クラウドを利用したい

これらのお悩みをお持ちの方は、お気軽にWinserverまでお問い合わせください。

Winserverはサポートも充実!

Winserverでは、お客様一人ひとりにあわせて最適なサービスプランをご提案いたします。

電話やメールによるサポートが充実しており、VPSやクラウドを初めてご利用の方の疑問にも専門のスタッフが丁寧にお答えします

相見積もりも歓迎です。

「サーバーを使ってみたいけど、最適なプランがわからない…」

プランの選択にお困りの際は、ぜひ一度メールやお電話にてお気軽にご相談ください。

 お問い合わせフォーム

お電話でのお問い合わせ:0120‐951‐168
           【 平日 】9:00~12:00 / 13:00~17:00

共用サーバー紹介資料

共用サーバー紹介資料

ホームページやブログを公開するために最適な共用サーバーの概要、特徴、料金プランをまとめた資料です。
「WordPress専用プラン」についても紹介しています。

共用サーバー紹介資料

共用サーバー紹介資料

ホームページやブログを公開するために最適な共用サーバーの概要、特徴、料金プランをまとめた資料です。
「WordPress専用プラン」についても紹介しています。

資料をダウンロードする

NVIDIA製GPU搭載
高性能・高火力の専用サーバー!
「Tesla V100」「RTX-5000」「RTX-4000」

▶ プランを見る

関連記事

特集記事

キャンペーン実施中!

Windows VPSを利用するなら!

おすすめ動画 おすすめ記事
  1. 【YouTubeで解説!】ユーザー作成及びパスワード変更方法を最短で確認!

  2. 【YouTubeで解説!】リモートデスクトップ接続の方法を30秒で確認!

  3. 【YouTubeで解説!】共有フォルダの作成方法を確認!

  1. MariaDBとは?MySQLとの違いや、特徴・強みなどをご紹介

  2. Oracleとは。データベースの特徴や強みなど、人気の理由を解説

  3. VPSのセキュリティ対策とは?実施すべき内容や注意点など徹底解説

ランキング

  1. 1

    共有フォルダとは。初心者向けに画像付きで設定方法を解説!

  2. 2

    nslookupコマンドとは。名前解決の方法や、digとの違いを解説

  3. 3

    Hyper-Vとは。仮想化の仕組みやVMwareとの違いについて解説!

カテゴリー

キャンペーン実施中!

Windows VPSを利用するなら!

TOP