JavaScriptは、多くのプログラミング言語と同様、実際に書いて動かしてを繰り返すことで身につけられます。
本記事では、初心者向けに、無料で利用できるツール、VS Codeを使ったプログラミングの始め方について解説します。
VS Codeは多くの開発者が使用している統合開発環境で、プログラミングをサポートする機能が揃っているので、ぜひこの機会に使ってみてください。
JavaScriptの基本については、こちらの記事で詳しく解説しているのでご参照ください。
2024.01.18
JavaScriptとは。特徴や基本的構造、学習方法を解説【初心者向け】
JavaScriptは、多くのWebサイトで使用されているプログラミング言語です。本記事では、JavaScriptの成り立ちやJav...
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%と、安心感と安定性を求める方に最適です。
「最適なプランの選び方で迷う」「複数のサーバーの運用で困っている」などのお困りごとを、サーバー導入前から専門のスタッフがサポートするため、初心者の方でも安心して利用することができます。
法人・個人問わずに利用者が増えており、今もっとも注目すべきおすすめのホスティングサービスです。
Windows ServerはWinserver
- Windows VPS（2週間無料トライアル実施中！）
小規模環境におすすめの仮想専用サーバーです。
- 仮想デスクトップ（2週間無料トライアル実施中！）
テレワークやFXに最適な仮想デスクトップです。
Officeアプリケーションなどを搭載したMicrosoft365製品を利用することができます。
- 共用サーバー（2週間無料トライアル実施中！）
Webサイトやブログを始めたい方には、共用サーバーがおすすめです。
WordPressやEC-CUBEなど人気のCMSを、コントロールパネル上から簡単にインストールすることができます。
専用サーバーやクラウドもWinserver
Winserverでは、お客様の要件に合わせたサーバーを構成する「専用サーバー」や、AWSなどの各種クラウドサービスの運用を代行する「クラウドマネージド」も提供しております。
- Windows Serverの構成を自由にカスタマイズしたい
- GPUを搭載したサーバーを利用したい
- 初期構築や監視などのサーバー運用業務を外注したい
- AWSなどの各種クラウドを利用したい
これらのお悩みをお持ちの方は、お気軽にWinserverまでお問い合わせください。
Winserverはサポートも充実！
Winserverでは、お客様一人ひとりにあわせて最適なサービスプランをご提案いたします。
電話やメールによるサポートが充実しており、VPSやクラウドを初めてご利用の方の疑問にも専門のスタッフが丁寧にお答えします。
相見積もりも歓迎です。
「サーバーを使ってみたいけど、最適なプランがわからない…」
プランの選択にお困りの際は、ぜひ一度メールやお電話にてお気軽にご相談ください。
お電話でのお問い合わせ：0120‐951‐168
【 平日 】9:00～12:00 / 13:00～17:00
VPSとは、「Virtual Private Server」の略称で、仮想的な専用サーバーのことを指します。つまり、1つの物理的なサ...
共用サーバー紹介資料
ホームページやブログを公開するために最適な共用サーバーの概要、特徴、料金プランをまとめた資料です。
「WordPress専用プラン」についても紹介しています。
共用サーバー紹介資料
ホームページやブログを公開するために最適な共用サーバーの概要、特徴、料金プランをまとめた資料です。
「WordPress専用プラン」についても紹介しています。
