トップページに戻る

Javascript文法

このページでは、特にWebで使われる フロントサイド Javascript の文法を説明します。
クライアントアプリに使える Node.js については、 Electronアプリで 少し説明しています。

参考Web: https://www.tohoho-web.com/js/basic.htm

HTMLへの読み込み

  1. HTML内でのJavascriptファイル script.js の読み込み:
      <script src="script.js"></script> (<head>でも<body>でもよい)
    script.jsで定義されている変数や関数にアクセスできる
    　
  2. HTML内での Javascript の記述:
    <script>
      // ここに Javascript文
    </script>

文の単位

コメント文

予約語

await, break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for, function, if, import, implements, in, instanceof, interface, let, new, null, package, private, protected, public, return, static, super, switch, this, throw, true, try, typeof, var, void, while, with, yield

変数の型

型のチェック: typeof
　例: if (typeof myVar === "string") { }

配列かどうかのチェック: 
　例: Array.isArray(myVar)
　例: myVar instanceof Array

オブジェクト

ブロック

変数宣言

配列

配列の代入

let x = 5, y = 10;
[x, y] = [y, x]; // x と y を交換

スライス
const numbers = [10, 20, 30, 40, 50];
const sliced = numbers.slice(1, 3);  // 1から2までの要素を配列として取得。負のインデックスは最後から数える

ネストされた配列の代入
const matrix = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = matrix

分割代入

const numbers = [10, 20, 30];
const [a, b, c] = numbers;

const numbers = [10, 20, 30, 40];
// 1つ目と3つ目の要素を取得（2つ目はスキップ）
const [first, , third] = numbers;

const numbers = [10, 20, 30, 40, 50];
// 最初の要素を `first` に、残りを `rest` に
const [first, ...rest] = numbers;
// 最後の要素を `last` に、残りを `rest` に
const numbersReversed = [...numbers].reverse();
const [last, ...restReversed] = numbersReversed;

オブジェクトの代入

オブジェクトの場合、分割代入 (デストラクチャリング）が使えます。

const user = { name: "Alice", age: 25, country: "Japan" };
const { name, age, country } = user;

分割代入による初期値の設定

const { userName = "none" } = user;
とすることで、変数 userName には user.userName が 代入されますが、user.userName が未定義の場合、"none" が代入されます。

変数名を属性名と変える場合は
const { name: userName = "none" } = user;
とします。

プロパティ名の変更

// `name` を `userName` という変数名に変更
const { name: userName, age: userAge } = user;

デフォルト値の変更

// `age` は存在しないのでデフォルト値 `20` が適用される
const { name, age = 20, country = "Unknown" } = user;

ネストされたオブジェクトの分割代入

const person = {
  name: "David",
  address: {
    city: "Tokyo",
    zip: "100-0001"
  }
};
// ネストされたオブジェクトを分割代入
const { name, address: { city, zip } } = person;

スプレッド構文 (...)

const user = { name: "George", age: 28, country: "USA", job: "Engineer" };

// `name` と `age` を取得し、残りを `rest` にまとめる
const { name, age, ...rest } = user;

関数宣言

function func_name(引数) {
}

アロー関数
const greet = (message) => {
  console.log(message);
};

const multiply = (a, b) => a * b;

const square = n => n * n;         // 引数が１つの場合は () を省略できる

デフォルト引数:

　引数に undefined が渡された場合に、デフォルト引数が使われます (未定義値を渡したい場合は null を渡すこと)。
pythonと異なり、先に出てきた引数をデフォルト引数として使うことができます。

function func_name(var1,var2 = "abc", var3 = `${var2}_def` {
}

キーワード引数:

　Jaascriptではキーワード引数は使えません。オブジェクトを使うことで類似のことが実現できます。
オブジェクトの分割代入を使うと便利です。

function configureSettings(options = {}) {
  const { theme = "light", fontSize = 16, language = "en" } = options;
  console.log(`Theme: ${theme}, Font Size: ${fontSize}, Language: ${language}`);
}

function printUser({ name, age = 18 }) {
  console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: "Emma", age: 22 };
printUser(user); // "Name: Emma, Age: 22"

スプレッド構文の利用

function printDetails({ name, ...details }) {
  console.log(`Name: ${name}`);
  console.log("Other details:", details);
}
printDetails({ name: "Charlie", age: 28, city: "Tokyo" });

即時実行関数

関数定義を () でくくると、即時実行される

(function() {
  console.log("この関数は即時に実行されます！");
})();

(() => {
console.log("This function runs immediately!");
})();

数学関数

基本構文

オブジェクト参照

例外処理

イベントハンドラ

Javascriptでは、HTMLの要素でイベントハンドラを結びつける (bind) ことができます。

例: <input type=”button”value=”push”onclick="count()"" />

で、"push"と書いてあるボタンをクリックすると count() 関数を呼び出します。

モジュール

デバッグ支援

算術演算子:

比較演算子:

論理演算子・ビット演算子:

複合演算子

その他演算子

よく使う関数

  1. 開発者モードのコンソールにmessageを出力:
      console.log(message); 
     
  2. Javascriptのプログラム string を実行:
      eval(string);

文字列

複数行

文字列関係

HTMLタグ

JSON

Unicode

Promize

Web制御