【JavaScript】JavaScriptの基本的な文法と書き方

JavaScript
この記事は約10分で読めます。

ホームページを作成するときにHTMLとCSS、この2つと同じくらい重要なものがあります。
それが「JavaScript」。Web開発において非常に重要なプログラミング言語です。
初心者の方でも、基本的な文法と書き方を理解すれば、簡単なスクリプトを作成できるようになります。この記事では、JavaScriptの基本的な文法と書き方について解説します。

JavaScriptはどんなことができる？

以下に、JavaScriptで具体的にどのようなことができるかを紹介します。

インタラクティブなWebページの作成

JavaScriptは、ユーザーの操作に応じてWebページの内容を動的に変更することができます。たとえば、ボタンをクリックしたときにテキストや画像を変更したり、フォームの入力内容をリアルタイムで検証することができます。

document.getElementById("myButton").onclick = function() {
    document.getElementById("myText").innerHTML = "ボタンがクリックされました!";
};

アニメーションの実装

JavaScriptを使用して、Webページ上の要素を動かしたり、アニメーションを作成することができます。これにより、ユーザーに視覚的な効果を与え、より魅力的なコンテンツを提供できます。

let pos = 0;
function move() {
    pos++;
    document.getElementById("myDiv").style.left = pos + "px";
    if (pos < 100) {
        requestAnimationFrame(move);
    }
}
move();

データの操作と処理

JavaScriptは、配列やオブジェクトといったデータ構造を扱うための豊富な機能を持っています。これにより、クライアントサイドでデータの処理やフィルタリング、並べ替えなどを行うことが可能です。

let numbers = [10, 5, 8, 1, 7];
let sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 5, 7, 8, 10]

非同期通信（AJAX）

JavaScriptを使用すると、Webページをリロードすることなく、サーバーと非同期にデータのやり取りができます。これにより、動的で応答性の高いWebアプリケーションを構築できます。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

DOMの操作

JavaScriptは、HTMLドキュメントの構造（DOM: Document Object Model）を操作するための豊富なAPIを提供しています。これにより、ページのコンテンツを動的に追加・削除・変更することができます。

let newElement = document.createElement("p");
newElement.textContent = "これは新しい文章です。";
document.body.appendChild(newElement);

フォームのバリデーション

フォームに入力されたデータが正しいかどうかをJavaScriptでチェックし、ユーザーにフィードバックを与えることができます。これにより、サーバーに送信される前にデータの正当性を確認できます。

function validateForm() {
    let name = document.forms["myForm"]["name"].value;
    if (name === "") {
        alert("名前を入力してください");
        return false;
    }
}

クライアントサイドのストレージ

JavaScriptを使用すると、ユーザーのブラウザにデータを保存し、後でそのデータを読み出すことができます。たとえば、localStorageやsessionStorageを使用して、ユーザーの設定やセッション情報を保存できます。

localStorage.setItem("username", "空欄");
let user = localStorage.getItem("username");
console.log(user); // "空欄"

フレームワークやライブラリの利用

JavaScriptには、React、Vue.js、Angularなど、多くのフレームワークやライブラリがあります。これらを使うことで、より効率的に複雑なWebアプリケーションを開発することが可能です。

ゲームの開発

JavaScriptを使って、シンプルな2Dゲームやインタラクティブなゲーム要素をWebブラウザ上で動作させることもできます。例えば、Canvas APIを使用して、ゲームグラフィックの描画やアニメーションを実現できます。

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 50, 50);

サーバーサイド開発

Node.jsを使用すると、JavaScriptをサーバーサイドでも使用できます。これにより、Webサーバーの構築やデータベースの操作、APIの作成などが可能です。

const http = require('http');

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
});

server.listen(3000, '127.0.0.1', () => {
    console.log('Server running at http://127.0.0.1:3000/');
});

実際にJavaScriptはどうやって書くか

JavaScriptはどのようにして書くのか、どういうものなのかを記載していきます。

半角英数字で大文字・小文字を区別

JavaScriptでは、半角英数字が使用され、大文字と小文字は区別されます。例えば、`myVariable`と`myvariable`は別の変数として扱われます。このため、変数名や関数名を付ける際には、大文字と小文字を意識することが重要です。

var myVariable = 10;
var myvariable = 20;

console.log(myVariable); // 10
console.log(myvariable); // 20

文末にはセミコロン（;）をつける

JavaScriptでは、文末にセミコロン（;）をつけるのが一般的です。セミコロンは、プログラムの命令の終わりを示す役割を果たします。セミコロンを忘れても多くの場合、JavaScriptエンジンが自動的に文の終わりを認識してくれますが、コードの可読性やエラー防止のために明示的にセミコロンを記述することが推奨されます。

var number = 5;
console.log(number);

インデント

コードの可読性を高めるために、インデント（字下げ）を適切に使用することが重要です。一般的には、スペース2つまたは4つをインデントに使用します。インデントを統一することで、コードが見やすくなり、他の開発者と共同作業を行う際にも混乱が避けられます。

function greet(name) {
    var greeting = "Hello, " + name + "!";
    console.log(greeting);
}

greet("World");

コメント

コードの説明やメモを記述するために、コメントを使用します。JavaScriptには、単一行コメントと複数行コメントの2種類があります。

  • 単一行コメント: // の後にコメントを記述します。
  • 複数行コメント: /* と */ で囲まれた部分がコメントになります。
// これは単一行コメントです
var number = 10;

/*
  これは複数行コメントです。
  複数行にわたってコメントを記述できます。
*/
var anotherNumber = 20;

スタイルガイド

JavaScriptを書く際には、スタイルガイドに従うことが推奨されます。スタイルガイドは、コードの書き方やフォーマットに関するルールや推奨事項をまとめたものです。これにより、コードが一貫性を持ち、チームでの開発が円滑に進むようになります。GoogleやAirbnbなどの大手企業が提供するJavaScriptスタイルガイドが参考になります。

コードを書く場所

JavaScriptのコードは、いくつかの方法でWebページに組み込むことができます。

外部ファイル: JavaScriptのコードを外部ファイル（.jsファイル）に保存し、それをHTMLファイルから読み込む方法です。この方法は、コードの再利用やメンテナンスが容易になるため、推奨されます。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

内部スクリプト: HTMLファイルの<head>または<body>タグ内に直接JavaScriptのコードを記述する方法です。小規模なスクリプトの場合には便利です。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <script>
        console.log("Hello World!");
    </script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

<script>タグを書く場所

JavaScriptをHTMLファイルに組み込む際、<script>タグをどこに書くかが重要です。

  • <head>タグ内: ページの読み込み時にスクリプトを実行したい場合に使用します。ただし、ページの表示が遅くなることがあるため、必要最小限のスクリプトに留めることが推奨されます。
  • <body>タグ内の終わり: ページ全体が読み込まれてからスクリプトを実行したい場合に使用します。これにより、ページの表示速度が向上することがあります。
<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script>
        console.log("スクリプトは、ページが読み込まれた後に実行されます。");
    </script>
</body>
</html>

以上が、JavaScriptの基本的な文法と書き方についての解説です。
これらの基本を押さえれば、簡単なスクリプトを作成し、Webページに組み込むことができるようになります。ぜひ、実際にコードを書いてみて、JavaScriptに慣れていってください。

タイトルとURLをコピーしました