1. JavaScriptの概要
- どこにJavaScriptを書くのか
  - まとめ
2.文法の基礎
3.制御フロー
4.関数
5.文字列
6.配列
7.日時オブジェクト（Date）
8数学オブジェクト（Math）
最後に
- 本記事の重要ポイント

[TOC] Foot.

UiPath TypeScript SDK を使って実際に開発を行うには、JavaScript の基礎知識が欠かせません。

「TypeScript を使うのに、なぜ JavaScript？」と思うかもしれませんが、TypeScript は JavaScript をベースにした言語です。最終的に実行されるのは JavaScript であり、エラーの内容や挙動を理解するためにも、JavaScript の基本を知っておくことが重要です。

本記事では、UiPath TypeScript SDK を使ううえで特に重要となる JavaScript の基礎（変数、関数、非同期処理、モジュールなど） を整理します。これから本格的な実装に進む前の準備として、一緒に基礎を確認していきましょう。

本書を学びながらまとめました。今後自分の復習メモとしてこちらの記事に書きます。

:::note info すべての知識を覚える必要はありません。 よく使うものを覚えるだけでも、十分先へ進めます。知識は実は2種類に分けられます。1つは「記憶すべき知識」、もう1つは「参照できる知識」です。「参照できる知識」は無理に暗記せず、必要なときに調べれば十分です。そうすることで、学習効率を大きく高められます。 :::

1. JavaScriptの概要

どこにJavaScriptを書くのか

HTMLでJavaScriptを読み込む方法は、一般的に次の3つです。 外部JavaScript、内部JavaScript、要素イベントJavaScript。

外部JavaScript：

外部JavaScriptとは、HTMLコードとJavaScriptコードを別々のファイルに分けて保存し、HTML文書内でscriptタグを使ってJavaScriptコードを読み込む方法を指します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>外部JavaScriptの例</title>
</head>
<body>
  <h1 id="title">こんにちは</h1>
  <button id="btn">クリック</button>

  <!-- 外部JSを読み込む -->
  <script src="app.js"></script>
</body>
</html>

const title = document.getElementById("title");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  title.textContent = "ボタンがクリックされました";
});

👇

内部JavaScript：

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>内部JavaScriptの例</title>
</head>
<body>
  <h1 id="title">こんにちは</h1>
  <button id="btn">クリック</button>

  <script>
    const title = document.getElementById("title");
    const btn = document.getElementById("btn");

    btn.addEventListener("click", () => {
      title.textContent = "ボタンがクリックされました";
    });
  </script>
</body>
</html>

画面は外部Javascriptと同様です。

要素属性JavaScript:

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>要素属性JavaScriptの例</title>
  <script>
    function showMessage() {
      document.getElementById("result").textContent = "クリックされました";
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">クリック</button>
  <p id="result">ここに結果を表示</p>
</body>
</html>

👇

まとめ

方法	書き方	メリット	デメリット	主な用途
外部JavaScript	HTMLとJavaScriptを別ファイルに分け、`<script src="app.js"></script>`で読み込む	保守しやすい、再利用しやすい、実務向き	ファイル管理が必要	本番開発、複数ページでの運用
内部JavaScript	HTML内に`<script>...</script>`を直接書く	1ファイルで完結し、すぐ試せる	コードが増えると読みにくくなる	小規模ページ、学習、動作確認
要素属性JavaScript	要素のイベント属性（例：`onclick`）に直接書く／関数を呼ぶ	最小構成で手軽	HTMLとロジックが混在し、保守性が低い	超小規模サンプル、初学者の概念理解

備考：node app.jsで単独なjsファイルを実行可能です

2.文法の基礎

変数と定数

変数: 値をあとで変更できる入れ物
定数: 一度代入したら再代入できない入れ物

JavaScriptでは主に次を使います。

let age = 20;      // 変数（変更できる）
age = 21;          // OK

const pi = 3.14;   // 定数（再代入できない）
// pi = 3.14159;   // エラー

補足:

let は「値が変わる可能性がある」ときに使います。
const は「再代入しない」値に使います（実務では const を基本にし、必要なときだけ let）。

データ型

JavaScriptのデータ型は、大きく2種類に分けられます。 1つは「基本データ型（プリミティブ型）」、もう1つは「参照データ型」です。
基本データ型は1つの値だけを持ち、参照データ型は複数の値を含むことができます。

JavaScriptの基本データ型は、主に5種類として説明されます。 数値、文字列、真偽値、未定義値、null値です。
よく使われる参照データ型は「オブジェクト」です（配列もオブジェクトの一種です）。

補足解説:

現在のJavaScript仕様では、プリミティブ型は number string boolean undefined null に加えて symbol と bigint もあります。
参照型の代表は object（オブジェクト、配列、関数など）です。

例:

// 基本データ型（プリミティブ）
const n = 100;           // number
const s = "hello";       // string
const b = true;          // boolean
let u;                   // undefined
const x = null;          // null

// 追加のプリミティブ（現行仕様）
const id = Symbol("id"); // symbol
const big = 123n;        // bigint

// 参照データ型
const user = { name: "Taro", age: 20 }; // object
const colors = ["red", "blue"];         // array（objectの一種）

理解ポイント:

プリミティブは「値そのもの」を扱う。
参照型は「データの場所（参照）」を扱う。
そのため、オブジェクトや配列は代入時の挙動がプリミティブと異なります。

演算子

主な演算子と例をまとめます。

種類	演算子	例	説明
算術演算子	`+ - * / % **`	`5 + 2` → `7`	足し算、引き算など
代入演算子	`= += -= *= /=`	`x += 3`	変数への代入・更新
比較演算子	`== === != !== > < >= <=`	`a === b`	値の比較（真偽値を返す）
論理演算子	`&& \\|\\| !`	`a > 0 && b > 0`	条件を組み合わせる
インクリメント/デクリメント	`++ --`	`i++`	1増やす / 1減らす
三項演算子	`条件 ? A : B`	`age >= 18 ? "成人" : "未成年"`	if文の短縮形

実用例:

const price = 1200;
const taxRate = 0.1;

const total = price + price * taxRate; // 算術
let count = 1;
count += 2; // 代入（countは3）

const isAdult = 20 >= 18; // 比較 => true
const canBuy = isAdult && total < 2000; // 論理 => true

const message = canBuy ? "購入できます" : "購入できません"; // 三項
console.log(message);

学習時の重要ポイント:

比較は基本的に === と !== を使う（型変換による誤判定を避けるため）。
条件式では「何を真にしたいか」を先に言語化してから書くとミスが減ります。

型変換

JavaScriptの型変換には、主に次の2種類があります。

明示的な型変換（自分で変換する）
暗黙的な型変換（JavaScriptが自動で変換する）

種類	例	説明
数値へ変換	`Number("123")` → `123`	文字列を数値にする
文字列へ変換	`String(100)` → `"100"`	値を文字列にする
真偽値へ変換	`Boolean(0)` → `false`	値を `true/false` にする

// 明示的な型変換
const a = "123";
const n = Number(a);     // 123（number）

const b = 456;
const s = String(b);     // "456"（string）

const c = 0;
const flag = Boolean(c); // false

暗黙的な型変換の例:

console.log("10" + 5);   // "105"（文字列連結）
console.log("10" - 5);   // 5（数値計算）
console.log(1 == "1");   // true（型変換して比較）
console.log(1 === "1");  // false（型も比較）

ポイント:

予期しないバグを減らすため、必要なときは Number(), String(), Boolean() で明示的に変換する。
比較は基本 === / !== を使う。

エスケープ文字

エスケープ文字は、文字列の中で特別な意味を持つ文字（改行や引用符など）を表すために使います。
JavaScriptでは、\（バックスラッシュ）を使って表現します。

エスケープ文字	意味
`\'`	シングルクォート
`\"`	ダブルクォート
`\\`	バックスラッシュ
`\n`	改行
`\t`	タブ

const s1 = 'I\'m Taro.';
const s2 = "He said, \"Hello\".";
const s3 = "C:\\Users\\jun.li";
const s4 = "1行目\n2行目";
const s5 = "名前\t年齢";

console.log(s1);
console.log(s2);
console.log(s3);
console.log(s4);
console.log(s5);

出力:

I'm Taro.
He said, "Hello".
C:\Users\jun.li
1行目
2行目
名前    年齢

ポイント:

文字列内で同じ種類のクォートを使いたいときに便利です。
Windowsパスのように \ を含む文字列では \\ が必要です。
改行やタブを使うと、表示を見やすく整えられます。

JavaScriptのコメントは主に2種類です。

種類	書き方	用途
1行コメント	`// ...`	短い補足説明
複数行コメント	`/* ... */`	長めの説明、一時メモ

// 1行コメント: ユーザー名を表示する
const userName = "Taro";

/*
  複数行コメント:
  あいさつ文を作成して出力する
*/
const message = `こんにちは、${userName}さん`;
console.log(message);

使い方のコツ:

「何をしているか」より「なぜそうするか」を書くと有用です。
明らかな処理にコメントを付けすぎると、逆に読みにくくなります。

3.制御フロー

代表的なものとして、if / switch / while / do...while / for があります。

// if
const score = 75;
if (score >= 80) {
  console.log("A");
} else if (score >= 60) {
  console.log("B");
} else {
  console.log("C");
}

// switch
const day = 2;
switch (day) {
  case 1:
    console.log("月曜日");
    break;
  case 2:
    console.log("火曜日");
    break;
  default:
    console.log("その他");
    break;
}

// while
let i = 1;
while (i <= 3) {
  console.log("while:", i);
  i++;
}

// do...while
let j = 1;
do {
  console.log("do...while:", j);
  j++;
} while (j <= 3);

// for
for (let k = 1; k <= 3; k++) {
  console.log("for:", k);
}

補足:

if: 条件分岐
switch: 値ごとの分岐
while: 条件が真の間くり返す
do...while: 最低1回は実行してから判定
for: 回数が決まったくり返しに向く

4.関数

関数の定義

関数 は、処理をひとまとまりにして再利用できる仕組みです。
同じ処理を何度も書かずに済み、コードが読みやすくなります。

主なポイント:

入力: 引数
出力: 戻り値（return）
定義してから呼び出す: 関数名()

// 関数宣言
function add(a, b) {
  return a + b;
}

const result = add(2, 3);
console.log(result); // 5

// 関数式
const greet = function (name) {
  return `こんにちは、${name}さん`;
};

console.log(greet("太郎"));

// アロー関数
const multiply = (x, y) => x * y;
console.log(multiply(4, 5)); // 20

実用例:

function calculateTotal(price, taxRate = 0.1) {
  return price + price * taxRate; // デフォルト引数
}

console.log(calculateTotal(1000));    // 1100
console.log(calculateTotal(1000, 0.2)); // 1200

使い分けの目安:

基本は function でも const fn = () => でもOK
this を使う処理では、アロー関数より通常の関数が適することがあります

関数の呼び出し

関数の呼び出しには、直接呼び出し、式の中での呼び出し、ハイパーリンクでの呼び出し、イベントでの呼び出しがある。

function hello(name) {
  return `こんにちは、${name}さん`;
}

1. 直接呼び出し

const msg = hello("太郎");
console.log(msg);

2. 式の中で呼び出し

const length = hello("花子").length;   // 関数の戻り値をそのまま式で使う
const total = Math.max(10, 20) + 5;    // 25

3. ハイパーリンクで呼び出し

<a href="javascript:hello('次郎')">実行</a>

補足: javascript: を href に書く方法は、現在は保守性・安全性の面で非推奨です。

4. イベントで呼び出し

<button id="btn">クリック</button>
<script>
  function handleClick() {
    alert(hello("ユーザー"));
  }

  document.getElementById("btn").addEventListener("click", handleClick);
</script>

<button id="btn" onclick="showMessage()">クリック</button>

実務では、addEventListener を使うイベント呼び出しが最も推奨されます。

組み込み関数

JavaScriptに最初から用意されている関数のことです。
よく使う例:

関数	例	説明
`Number()`	`Number("123")`	数値に変換
`String()`	`String(123)`	文字列に変換
`Boolean()`	`Boolean(1)`	真偽値に変換
`parseInt()`	`parseInt("42px", 10)`	整数を取り出す
`parseFloat()`	`parseFloat("3.14m")`	小数を取り出す
`isNaN()`	`isNaN("abc")`	数値でないか判定
`alert()`	`alert("こんにちは")`	ダイアログ表示

console.log(Number("100"));       // 100
console.log(String(200));         // "200"
console.log(parseInt("12px", 10)); // 12
console.log(parseFloat("3.5kg"));  // 3.5
console.log(isNaN("abc"));         // true

補足:

isNaN() は挙動が分かりにくい場合があるため、実務では Number.isNaN() もよく使います。

字符串 の日本語は 文字列 です。
画像の構成に合わせて、記事用に整理します。

5.文字列

組み込みオブジェクトの概要

JavaScriptのオブジェクトは次の2種類です。

自作オブジェクト: 自分で定義して使う
組み込みオブジェクト: すでに用意されていて、そのまま使える

まず組み込みオブジェクトから始めるのがおすすめです。よく使う組み込みオブジェクトは String、Array、Date、Math です。

文字列は String 型です。JavaScriptでは、文字列リテラル（"..."）でも String の機能（メソッド）を使えます。

const msg = "Hello";
console.log(typeof msg); // "string"

文字列の長さを取得

length を使います。

const text = "JavaScript";
console.log(text.length); // 10

大文字・小文字変換

toUpperCase() / toLowerCase() を使います。

const word = "JaVaScRiPt";
console.log(word.toUpperCase()); // "JAVASCRIPT"
console.log(word.toLowerCase()); // "javascript"

1文字取得

charAt() や at() を使います（先頭は0番目）。

const s = "Tokyo";
console.log(s.charAt(0)); // "T"
console.log(s.at(1));     // "o"
console.log(s.at(-1));    // "o"（末尾）

文字列の切り出し

slice() や substring() がよく使われます。

const s = "JavaScript";
console.log(s.slice(0, 4));      // "Java"
console.log(s.substring(4, 10)); // "Script"

文字列の置換

replace() は最初の一致を置換、replaceAll() はすべて置換します。

const s = "apple orange apple";
console.log(s.replace("apple", "banana"));     // "banana orange apple"
console.log(s.replaceAll("apple", "banana"));  // "banana orange banana"

文字列の分割

split() で配列に分割します。

const csv = "red,green,blue";
const arr = csv.split(",");
console.log(arr); // ["red", "green", "blue"]

文字列の位置検索

indexOf() / lastIndexOf() / includes() を使います。

const s = "hello world";
console.log(s.indexOf("o"));     // 4
console.log(s.lastIndexOf("o")); // 7
console.log(s.includes("world")); // true

文字列の正規表現

JavaScriptでは文字列に対して正規表現を使い、パターン検索・置換・検証などができる。

正規表現リテラル/コンストラクタ

const re = /abc/i;               // リテラル（iで大文字小文字無視）
const re2 = new RegExp("abc");   // コンストラクタ

test() でマッチ確認

const valid = /\d+/.test("ID123"); // true（数字を含むか）

match() で一致部分を取得

const parts = "apple,banana".match(/[^,]+/g); // ["apple","banana"]

:結果 apple banana 　

replace() で置換

const result = "foo123".replace(/\d+/g, "#"); // "foo#"

search() でインデックス取得、split() の第1引数に正規表現も可
フラグ
- g：全体検索
- i：大文字小文字の区別なし
- m：複数行モード

使いどころ

ユーザー入力に数字・メール形式などをバリデーション
CSVやログのような定型文字列を分割/抽出
文字列置換でテンプレート加工（例：電話番号の書式整形）

6.配列

配列は、複数の値を順番付きで管理するためのデータ型です。
「同じ種類のデータをまとめて扱いたい」ときに使います。たとえば、点数一覧、商品一覧、ユーザー名一覧などです。
JavaScriptでは配列はオブジェクトの一種で、length や push() のような便利な機能を使えます。

配列とは何か

配列は「インデックス（添字）」で要素を管理します。
インデックスは 0 から始まります。

const colors = ["red", "green", "blue"];
console.log(colors[0]); // red
console.log(colors[1]); // green

配列の作成

配列の作成方法は主に2つあります。実務ではリテラル記法が一般的です。

const a = ["A", "B", "C"];          // 推奨
const b = new Array("X", "Y", "Z"); // 使えるが通常はあまり使わない

配列の取得

配列名[インデックス] で要素を取得します。
存在しない位置を読むと undefined になります。

const fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits[1]); // バナナ
console.log(fruits[10]); // undefined

配列の代入

特定位置の値を上書きできます。

const fruits = ["りんご", "バナナ", "みかん"];
fruits[1] = "ぶどう";
console.log(fruits); // ["りんご", "ぶどう", "みかん"]

配列の長さを取得

length で要素数を取得します。

const nums = [10, 20, 30, 40];
console.log(nums.length); // 4

配列の一部を切り出す

slice(start, end) を使います。end は含まれません。
元の配列は変更されません。

const arr = ["a", "b", "c", "d", "e"];
const part = arr.slice(1, 4);
console.log(part); // ["b", "c", "d"]
console.log(arr);  // ["a", "b", "c", "d", "e"]

配列要素を追加

末尾追加は push()、先頭追加は unshift() を使います。

const arr = ["b", "c"];
arr.push("d");      // 末尾
arr.unshift("a");   // 先頭
console.log(arr);   // ["a", "b", "c", "d"]

配列要素を削除

末尾削除は pop()、先頭削除は shift()、任意位置は splice() です。

const arr = ["a", "b", "c", "d"];

arr.pop();          // "d" を削除
arr.shift();        // "a" を削除
arr.splice(1, 1);   // index 1 から1個削除

console.log(arr);   // ["b"]

配列の比較（重要）

配列同士を === で比較すると「中身」ではなく「参照先」を比較します。
そのため、同じ要素でも別の配列は false です。

const x = [1, 2, 3];
const y = [1, 2, 3];
const z = x;

console.log(x === y); // false
console.log(x === z); // true

中身比較をしたい場合（初級向け簡易法）:

console.log(JSON.stringify(x) === JSON.stringify(y)); // true

配列の順序を逆にする

reverse() は元の配列自体を変更します（破壊的操作）。

const arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // [4, 3, 2, 1]

配列を文字列に連結

join(区切り文字) で配列を文字列にします。

const words = ["JavaScript", "は", "楽しい"];
console.log(words.join(" "));  // JavaScript は 楽しい
console.log(words.join(""));   // JavaScriptは楽しい

まとめ

配列学習の基本は次の3点です。

取得・代入（[]）
増減（push/pop/shift/unshift/splice）
変換（slice/reverse/join）

以下は、画像の構成（7.1〜7.4）に合わせた「時間オブジェクト（Date）」の学習用まとめです。
日本語記事としてそのまま使える形にしています。

7.日時オブジェクト（Date）

日時オブジェクトの概要

JavaScriptでは、日付と時刻を扱うために Date オブジェクトを使います。
「現在日時の取得」「年・月・日の取り出し」「時・分・秒の取得」「曜日の判定」などができます。

const now = new Date();
console.log(now); // 現在の日時 2026-03-12T01:29:26.061Z

年・月・日の操作

getFullYear()、getMonth()、getDate() を使います。
注意点として、getMonth() は 0〜11（0が1月）です。

const now = new Date();

const year = now.getFullYear();   // 年
const month = now.getMonth() + 1; // 月（+1が必要）
const day = now.getDate();        // 日

console.log(`${year}年${month}月${day}日`); // 2026年3月12日

値を変更したい場合は setFullYear()、setMonth()、setDate() を使います。

const d = new Date();
d.setFullYear(2030);
d.setMonth(0);   // 1月
d.setDate(15);   // 15日
console.log(d); // 2030-01-15T01:30:14.405Z

時・分・秒の操作

getHours()、getMinutes()、getSeconds() を使います。

const now = new Date();

const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();

console.log(`${h}時${m}分${s}秒`); // 10時30分32秒

2桁表示したい場合は padStart() が便利です。

const now = new Date();
const hh = String(now.getHours()).padStart(2, "0");
const mm = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");

console.log(`${hh}:${mm}:${ss}`); //10:31:01

曜日の取得

getDay() は曜日を 0〜6 で返します。
0: 日曜日, 1: 月曜日, ... 6: 土曜日

const now = new Date();
const weekNames = ["日", "月", "火", "水", "木", "金", "土"];

const w = now.getDay();
console.log(`今日は${weekNames[w]}曜日です`); //今日は木曜日です

総合サンプル

const now = new Date();

// 年・月・日
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();

// 時・分・秒
const hh = String(now.getHours()).padStart(2, "0");
const mm = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");

// 曜日
const weekNames = ["日", "月", "火", "水", "木", "金", "土"];
const week = weekNames[now.getDay()];

console.log(`日付: ${year}年${month}月${day}日 (${week})`); // 日付: 2026年3月12日 (木)
console.log(`時刻: ${hh}:${mm}:${ss}`); //時刻: 10:31:33

8数学オブジェクト（Math）

数学オブジェクトの概要

Math は計算用の組み込みオブジェクトです。
Date と違って new Math() は使いません。Math.メソッド名 で直接使います。

console.log(Math.sqrt(16)); // 4

Mathオブジェクトの主な属性

よく使う定数（属性）は次のとおりです。

console.log(Math.PI); // 円周率 3.14159...
console.log(Math.E);  // 自然対数の底 2.71828...

Mathオブジェクトの主なメソッド

基本的な計算メソッドです。

console.log(Math.abs(-7));    // 7（絶対値）
console.log(Math.sqrt(25));   // 5（平方根）
console.log(Math.pow(2, 3));  // 8（2の3乗）
console.log(Math.floor(3.9)); // 3（切り捨て）
console.log(Math.ceil(3.1));  // 4（切り上げ）
console.log(Math.round(3.5)); // 4（四捨五入）

最大値と最小値

Math.max() と Math.min() を使います。

console.log(Math.max(3, 10, 7)); // 10
console.log(Math.min(3, 10, 7)); // 3

const nums = [8, 2, 15, 4];
console.log(Math.max(...nums));  // 15（配列はスプレッドで展開）

整数処理（切り上げ・切り捨て・四捨五入）

用途に応じて使い分けます。

const n = 12.67;
console.log(Math.floor(n)); // 12
console.log(Math.ceil(n));  // 13
console.log(Math.round(n)); // 13
console.log(Math.trunc(n)); // 12（小数点以下を単純に捨てる）

三角関数

角度ではなく ラジアン を使う点が重要です。

const deg = 30;
const rad = deg * (Math.PI / 180);

console.log(Math.sin(rad)); // 0.5
console.log(Math.cos(rad)); // 約0.866
console.log(Math.tan(rad)); // 約0.577

乱数の生成

Math.random() は 0以上1未満 の乱数を返します。

console.log(Math.random()); // 例: 0.372...

// 0〜9 の整数
const n1 = Math.floor(Math.random() * 10);

// 1〜6 の整数（サイコロ）
const dice = Math.floor(Math.random() * 6) + 1;

// min〜max の整数（両端含む）
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(randomInt(5, 10)); // 5〜10

総合サンプル

const nums = [12, 5, 27, 9];

console.log("PI:", Math.PI);
console.log("最大値:", Math.max(...nums));
console.log("最小値:", Math.min(...nums));
console.log("四捨五入:", Math.round(3.6));
console.log("平方根:", Math.sqrt(49));

const deg = 45;
const rad = deg * Math.PI / 180;
console.log("sin45:", Math.sin(rad));

const lucky = Math.floor(Math.random() * 100) + 1;
console.log("ラッキーナンバー(1-100):", lucky);

最後に

本記事では、UiPath TypeScript SDK を学ぶ前提として、JavaScript の基礎を整理しました。
重要なのは、文法をすべて暗記することではなく、よく使う基礎を理解して実際に使えることです。

次の学習では、コア技術（DOM、イベント、非同期処理、モジュール） を中心に進める予定です。
特に SDK 開発では、「画面やデータの状態がどう変わるか」「イベントをどう扱うか」「非同期処理をどう安全に書くか」が実装品質に直結します。
基礎文法を土台に、ここから実践的な内容へ進んでいきます。

本記事の重要ポイント

項目	重要ポイント	実務での意味
学習方針	すべてを暗記せず、頻出項目を優先する	学習効率が上がり、実装に早く入れる
JavaScriptとTypeScript	TypeScriptはJavaScriptを基盤にしている	エラー原因や実行時挙動の理解がしやすくなる
文法基礎	変数・型・演算子・制御フロー・関数を押さえる	どの機能開発でも必要な共通土台になる
文字列/配列	`String` と `Array` の操作に慣れる	データ整形・一覧処理・入力処理で頻繁に使う
日時/数値	`Date` と `Math` の基本を理解する	日付処理・計算処理・乱数処理を正しく書ける
実践方法	小さなサンプルを実行して確認する	「分かった」から「書ける」へ移行できる
次のステップ	DOM・イベント・非同期・モジュールを重点学習	SDK を使った実装の中核スキルにつながる

Haste makes waste

目录

1. JavaScriptの概要

どこにJavaScriptを書くのか

まとめ

2.文法の基礎

変数と定数

データ型

演算子

型変換

エスケープ文字

コメント

3.制御フロー

4.関数

関数の定義

関数の呼び出し

組み込み関数

5.文字列

組み込みオブジェクトの概要

文字列の長さを取得

大文字・小文字変換

1文字取得

文字列の切り出し

文字列の置換

文字列の分割

文字列の位置検索

文字列の正規表現

6.配列

配列とは何か

配列の作成

配列の取得

配列の代入

配列の長さを取得

配列の一部を切り出す

配列要素を追加

配列要素を削除

配列の比較（重要）

配列の順序を逆にする

配列を文字列に連結

まとめ

7.日時オブジェクト（Date）

日時オブジェクトの概要

年・月・日の操作

時・分・秒の操作

曜日の取得

総合サンプル

8数学オブジェクト（Math）

数学オブジェクトの概要

Mathオブジェクトの主な属性

Mathオブジェクトの主なメソッド

最大値と最小値

整数処理（切り上げ・切り捨て・四捨五入）

三角関数

乱数の生成

総合サンプル

最後に

本記事の重要ポイント