Jamstackホームページ制作屋
  1. TOP
  2. ホームページ開発
  3. Javascriptの基礎的な書き方をマスターする
ホームページ開発

Javascriptの基礎的な書き方をマスターする

JavaScriptを使用するための環境の構築方法から、変数とデータ型、演算子、条件分岐と繰り返し処理、関数、オブジェクトなどの基礎を理解しましょう。
ogp

JavaScriptの基礎を学ぶ:

  • JavaScriptを使用するための環境の構築
  • 変数とデータ型
  • 演算子
  • 条件分岐と繰り返し処理
  • 関数
  • オブジェクト

使用するための環境の構築

JavaScriptは、ブラウザ上で動作するスクリプト言語です。ブラウザ上でJavaScriptを実行するためには、HTML文書内にJavaScriptコードを埋め込む必要があります。

JavaScriptを使用するための環境は、以下の2つの方法があります。

  • ブラウザ上でJavaScriptを実行する
  • ローカルマシンにJavaScript開発環境を構築する

ブラウザ上でJavaScriptを実行するには、HTML文書にJavaScriptコードを記述し、ブラウザでHTML文書を開くことで実行することができます。

ローカルマシンにJavaScript開発環境を構築するには、JavaScriptを実行するためのソフトウェアをダウンロードしてインストールする必要があります。これらのソフトウェアには、Visual Studio Codeなどがあります。

vscodeのインストール

Visual Studio Code（VSCode）のインストール方法は次のとおりです：

  • VSCodeのオフィシャルサイト（https://code.visualstudio.com/）にアクセスします。
  • 「Download」ボタンをクリックします。
  • ご使用のOSに合ったインストーラーをダウンロードします。
  • ダウンロードしたインストーラーを実行します。
  • インストーラーの指示に従って、VSCodeをインストールします。

インストールが完了すると、VSCodeを起動して使用することができます。

注意：VSCodeはWindows、macOS、LinuxのいずれのOSにも対応していますが、インストール方法はOSによって異なります。

変数とデータ型

JavaScriptは動的型付言語であり、変数には様々なデータ型を格納することができます。以下は主要なデータ型です。

  • 数値型 (Number) - 整数や小数などの数値を表します。
  • 文字列型 (String) - 1つまたは複数の文字を表します。文字列は '' または "" で囲みます。
  • 論理型 (Boolean) - true または false の値を持ちます。
  • null 型 - 値が存在しないことを示す特別な値です。
  • undefined 型 - 値が定義されていないことを示す特別な値です。
  • オブジェクト型 (Object) - 複数のデータをまとめたものを表します。
  • 配列型 (Array) - 複数のデータを格納するためのオブジェクト型です。

変数は let を使って宣言します。変数に値を代入すると、その変数はその型を持ちます。変数は後で再代入することができますが、再代入時には異なるデータ型を代入することもできます。

[サンプルコード]

// 数値型の変数
let num = 10;
console.log(num); // 10

// 文字列型の変数
let str = 'Hello World';
console.log(str); // Hello World

// 論理型の変数
let isTrue = true;
console.log(isTrue); // true

// null 型の変数
let nothing = null;
console.log(nothing); // null

// undefined 型の変数
let undef;
console.log(undef); // undefined

// オブジェクト型の変数
let person = { name: 'John', age: 30 };
console.log(person); // { name: 'John', age: 30 }

// 配列型の変数
let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // [1, 2, 3, 4, 5]

JavaScriptは動的型付言語なので、変数の型はコードの実行時に決まります。また、変数は宣言されていない場合には自動的にグローバル変数として扱われます。

var, let, const について

  • var: JavaScript の最も古い変数宣言方法です。var を使用して宣言された変数は関数スコープ内で有効ですが、ブロックスコープ内では有効ではありません。また、同じ名前の変数を再宣言することもできます。

  • let: let は、新しい変数宣言方法です。let を使用して宣言された変数はブロックスコープ内で有効です。同じ名前の変数を再宣言することはできません。

  • const: const は変数の再代入を禁止することを意味します。const を使用して宣言された変数は、ブロックスコープ内で有効です。同じ名前の変数を再宣言することはできません。

現在は、let および const の使用が推奨されており、今後は var の使用は減っていく可能性があります。

演算子

JavaScriptには様々な演算子が存在します。演算子は値を操作するための記号であり、計算や比較などを行います。

算術演算子

加算(+)、減算(-)、乗算(*)、除算(/)、剰余(%)などの演算子

let num1 = 10;
let num2 = 20;
console.log(num1 + num2); // 30
console.log(num1 - num2); // -10
console.log(num1 * num2); // 200
console.log(num1 / num2); // 0.5
console.log(num1 % num2); // 10

論理演算子

AND(&&)、OR(||)、NOT(!)などの演算子

let flag1 = true;
let flag2 = false;
console.log(flag1 && flag2); // false
console.log(flag1 || flag2); // true
console.log(!flag1); // false

比較演算子

等しい(==)、等しくない(!=)、大なり(>)、小なり(<)、以上(>=)、以下(<=)などの演算子

let val1 = 10;
let val2 = 10;
console.log(val1 == val2); // true
console.log(val1 != val2); // false
console.log(val1 > val2); // false
console.log(val1 < val2); // false
console.log(val1 >= val2); // true
console.log(val1 <= val2); // true

代入演算子

等しい(=)、加算代入(+=)、減算代入(-=)、乗算代入(*=)、除算代入(/=)などの演算子

let number = 10;
number += 10;
console.log(number); // 20
number -= 5;
console.log(number); // 15
number *= 2;
console.log(number); // 30
number /= 3;
console.log(number); // 10

条件演算子 (三項演算子)

(条件式) ? (trueの時の値) : (falseの時の値)

let score = 75;
let result = (score >= 60) ? "合格" : "不合格";
console.log(result); // 合格

これらはJavaScriptの代表的な演算子ですが、他にも特殊な演算子やビット演算子などがあります。このように、JavaScriptの演算子を使うことで、より効率的な計算や判定などを行うことができます。

条件分岐と繰り返し処理

条件分岐は、特定の条件が満たされた場合に特定の処理を実行することを行うための機能です。JavaScriptでは、if文やswitch文などを使用して条件分岐を行います。

繰り返し処理は、同じ処理を複数回繰り返すための機能です。JavaScriptでは、for文やwhile文などを使用して繰り返し処理を行います。

条件分岐

JavaScriptには、if文とswitch文があります。if文は特定の条件が真であるかどうかを判断することができます。次のような形式になります。

if (条件) {
  条件が真の場合の処理
} else {
  条件が偽の場合の処理
}

switch文は、複数の条件のいずれかが真であるかどうかを判断することができます。次のような形式になります。

switch (式) {
  case 値1:
    値1が一致する場合の処理
    break;
  case 値2:
    値2が一致する場合の処理
    break;
  ...
  default:
    どのcaseも一致しない場合の処理
}

繰り返し処理

JavaScriptには、for文とwhile文があります。for文は特定の回数だけ処理を繰り返すことができます。次のような形式になります。

for (初期化式; 条件式; 更新式) {
  繰り返す処理
}

while文は特定の条件が真である間だけ処理を繰り返すことができます。次のような形式になります。

while (条件) {
  繰り返す処理
}

また、forEachメソッドやmapメソッドなどの配列に対するメソッドも繰り返し処理に利用することができます。

関数

JavaScriptの関数は、特定の処理をまとめたものです。関数は、名前を付けて定義し、任意の場所から呼び出すことができます。関数は、以下のように定義することができます。

function functionName(arguments) {
  // code to be executed
}

引数（arguments）は任意です。関数が呼び出されたときに、これらの引数には実際の値が代入されます。関数内で、返り値（return value）として値を返すこともできます。このような場合、呼び出し元から関数の返り値が受け取られます。

function addNumbers(a, b) {
  return a + b;
}

let result = addNumbers(1, 2);
console.log(result); // Output: 3

関数は、変数に代入することもできます。このような場合、関数は「無名関数」と呼ばれます。

let add = function(a, b) {
  return a + b;
};

let result = add(1, 2);
console.log(result); // Output: 3

JavaScriptでは、組み込み関数（例えば、Math.max()やArray.sort()など）も利用することができます。また、自分自身の関数を作成し、独自のタスクを実行することもできます。

アロー関数について

JavaScriptのアロー関数は、関数の定義を短く書くための省略形の表記方法です。アロー関数は、以下のように記述します。

let functionName = (arguments) => {
  // code to be executed
};

引数が1つだけの場合は、括弧を省略することができます。

let square = x => x * x;

let result = square(2);
console.log(result); // Output: 4

アロー関数は、関数内のコードが1行のみの場合は、{}とreturnを省略することができます。

let add = (a, b) => a + b;

let result = add(1, 2);
console.log(result); // Output: 3

アロー関数は、thisが文脈に基づいて決定されるため、関数内でthisを使用する場合に便利です。

オブジェクト

JavaScriptは動的なオブジェクト指向言語です。この言語では、データを保持するためにオブジェクトを使用することができます。

オブジェクトは、キーと値の組み合わせからなるデータの集まりです。これらのキーと値をプロパティと呼びます。

オブジェクトは大括弧({})を使って作成されます。例えば、次のようなオブジェクトを作成することができます。

let person = {
  name: 'John Doe',
  age: 30,
  occupation: 'developer'
};

オブジェクトのプロパティにアクセスするには、ドット記法 (.) もしくはブラケット記法 ([]) を使います。例えば、上記の例で、personオブジェクトのnameプロパティにアクセスするには次のようにします。

console.log(person.name); // 'John Doe'
console.log(person['name']); // 'John Doe'

また、オブジェクトには、関数を含むこともできます。これらの関数をメソッドと呼びます。

let person = {
  name: 'John Doe',
  age: 30,
  occupation: 'developer',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // 'Hello, my name is John Doe'

JavaScriptでは、オブジェクトは継承をすることができます。これは、継承元となるオブジェクトを拡張して新しいオブジェクトを作成することを意味します。

以上が、JavaScriptの基礎についての簡単な説明です。これらをマスターすることで、JavaScriptを使用して、WebページやWebアプリケーションを開発することができます。

2024 © Jamstackホームページ制作屋 All Right Reserved.