初めての JavaScript

JavaScript って何だ?

JavaScript はウェブサイトを作る上では欠かせないプログラミング言語なんだ。 このサイトでは、JavaScript の書き方を学ぶことができるよ 😊

Hello, World!

まずは右のコードエディタに下の文字列を入力して、「実行」のボタンを押してみて!

console.log("Hello, World!");

出力画面にHello, World!と表示されたかな 👀 おめでとう、初めて JavaScript でプログラムを書いたね!

console.log()は渡したものを表示するので、このコードはHello, World!と表示したんだね。 他の文字列を渡すと、その文字列を表示してくれるよ。試してみて 🥳

後ろについてる;は行の最後に付くおまじないみたいなもの。機械がコードを読むときに使うだけだから、深い意味はないよ。

コメント

//と書くと、その後に続くコードは全部無視されるんだ。/**/と書くと、/*と*/に囲まれたコードは全部無視される。

これは「コメント」と言って、人間にとって便利なことをコメントとして残しておけるんだ。

// この文字列は実行されないし
/*
この文字列も実行されない。
この書き方だと、複数行にわたるコメントも書けるね👍
*/
console.log("Hello, World!"); // コードの後ろに書くこともできるよ!

コメントには何を書いてもプログラムに影響されないので、安心だね ☺️

文字列

二つ以上の文字列をくっつけることもできるよ。`${}`を使う方法と、+を使う方法があるんだ。

console.log(`Hello, ${"World"}!`); // Hello, World!
console.log("Hello, " + "World!"); // Hello, World!

二行ともHello, World!と表示されたはず。

${}を使う場合、"じゃなくて`で文字列を囲まなきゃいけないから注意してね! 「何でこんなことするんだ?」と思うかもしれないけど、後で変数とか勉強するときに役に立つよ 😄

数値

数値を使って計算もできるよ!

console.log(3 + 2); // 5
console.log(3 - 2); // 1
console.log(3 * 2); // 6
console.log(3 / 2); // 1.5
// %は割り算の余りを計算するよ
console.log(3 % 2); // 1

()を使って優先的に計算する場所を指定することもできるよ。

console.log(1 + 2 * 3); // 7
console.log((1 + 2) * 3); // 9

ブール値

「はい」と「いいえ」しかない場合は、ブール値を使うことができるよ。ブール値はtrueかfalseしかないんだ 🙂

console.log(true);
console.log(false);

ブール値は「論理値」や「真偽値」、trueとfalseは「真」や「偽」と言われることもあるよ 😄

&&(アンド)を使うと、二つともtrueな場合だけtrueになるよ。

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

||(オア)を使うと、どちらかがtrueな場合にtrueになるよ。

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

組み合わせることもできるよ!

console.log(true && true && true); // true
console.log(false || false || true); // true
// ()で囲まれた処理は優先的に実行される
console.log((true || false) && true); // true

!をつけると反転するよ。

console.log(!true); // false
console.log(!false); // true
console.log(!(true && true)); // false
console.log(!false && !false); // true

二つの値を比較してブール値を作ることもできるんだ。

// === を使うと、値が同じ場合にtrueになるよ
console.log(1 === 1); // true
console.log(1 === 2); // false
console.log("abc" === "abc"); // true
console.log("abc" === "ABC"); // false
// !== を使うと、値が違う場合にtrueになるよ
console.log(1 !== 1); // false
console.log(1 !== 2); // true
console.log("abc" !== "abc"); // false
console.log("abc" !== "ABC"); // true
// > を使うと、左辺の方が右辺より大きい場合にtrueになるよ
console.log(1 > 1); // false
console.log(2 > 1); // true
// < を使うと、左辺の方が右辺より小さい場合にtrueになるよ
console.log(1 < 1); // false
console.log(1 < 2); // true
// >= を使うと、左辺の方が右辺より大きいか同じな場合にtrueになるよ
console.log(1 >= 1); // true
console.log(2 >= 1); // true
console.log(1 >= 2); // false
// <= を使うと、左辺の方が右辺より小さいか同じな場合にtrueになるよ
console.log(1 <= 1); // true
console.log(2 <= 1); // false
console.log(1 <= 2); // true

変数

値は「変数」と呼ばれる物に覚えておいてもらうこともできるんだ。

下の例で出てくるconstは変数を宣言するときに使うおまじないのようなものだから、覚えてね ✨

const text = "Hello, World!"; // textという変数をconstで宣言
console.log(text);

上のコードではtextという変数に、Hello, World!という文字列を覚えてもらってるね。実行するとHello, World!と表示される。

他にもletで変数を宣言する場合もあるよ。 constで宣言された変数は値を変えらえないのに対して、letで宣言された変数は値を変えられるよ。

例えば、下のコードはconstでtextを宣言しているので、その値を変えようとしたらエラーになる。 エラーと言っても大したことじゃないから、試してみて!

const text = "変わらないものもある";
text = "これ、エラーになる!";

TypeError: Assignment to constant variable.という感じのエラーメッセージを見れたかな? 細かい言い回しはブラウザによって変わるんだけど、このエラーはconstで宣言された変数の値を変えようとすると出るんだ。

「エラーメッセージって何だか怖い!よく分からない!」と思った?安心して! 今後エラーメッセージが出たら、インターネットでエラーメッセージを直接検索してみるといいよ 🔎 何年もプログラミングをやっていても、みんなエラーメッセージが出るたびに検索して原因を探るものなんだ ☺️

この場合、エラーを避ける方法は2つある。もう一つ変数を宣言する方法と、letで変数を宣言する方法。

もう一つ変数を宣言すると、下のようなコードになる。

const text = "変わらないものもある";
console.log(text); // 変わらないものもある
const text2 = "これだとエラーにならない!";
console.log(text2); // これだとエラーにならない!

constの代わりにletでtextを宣言すると、値を変えることができる。

let text = "変わらないものもある";
console.log(text); // 変わらないものもある
text = "あ、変わっちゃった!";
console.log(text); // あ、変わっちゃった!

オブジェクト

いくつかの値を一つの「オブジェクト」と呼ばれるものにまとめて覚えてもらうこともできるよ。

// {}を使ってオブジェクトを作ろう!
const person = {
  name: "つばさ",
  age: 35,
};
// .を使ってオブジェクトが持っている値を取りだそう!
console.log(`${person.name}は${person.age}才です!`); // つばさは35才です!

ここでのnameやageは、オブジェクトのプロパティと呼ばれるよ。

関数

関数を使うと、一度書いたコードを何度も使うことができるよ。 関数は() => {}で作ることができるんだ。{}の中はコードを書けるよ。 文字列や数値と同じように、作った関数は変数に覚えておいてもらうことができる 👍

const introduce = () => {
  const person = {
    name: "つばさ",
    age: 35,
  };
  console.log(`${person.name}は${person.age}才です!`); // つばさは35才です!
};

introduce(); // ()を使って関数を呼ぼう!
introduce(); // もう一度呼ぼう!同じコードを何度も使いまわせるよ。

関数は変数を受け取ることもできるよ。受け取った変数は「パラメータ」と呼ばれるんだ。下の例ではpersonというパラメータを受け取っているね。

const introduce = (person) => {
  console.log(`${person.name}は${person.age}才です!`);
};

const personA = {
  name: "つばさ",
  age: 35,
};
const personB = {
  name: "けい",
  age: 27,
};
introduce(personA); // つばさは35才です!
introduce(personB); // けいは27才です!

パラメータは何個でも受け取れるよ。下の例ではnameとageの二つのパラメータを受け取っているね。

const introduce = (name, age) => {
  console.log(`${name}は${age}才です!`);
};

const person = {
  name: "つばさ",
  age: 35,
};
introduce(person.name, person.age); // つばさは35才です!

returnを使うと、一つだけ値を返すこともできるんだ。

const createIntroduction = (person) => {
  // console.logを使わずに、returnを使って文字列を返してるよ!
  return `${person.name}は${person.age}才です!`;
};

const person = {
  name: "つばさ",
  age: 35,
};
// 返された文字列をconsole.logを使って表示しよう!
console.log(createIntroduction(person)); // つばさは35才です!

もし関数の中身が一行しかない場合は、{}を省略することができるよ。 その場合returnは書けなくなるんだけど、代わりに絶対その一行の結果が返されるんだ 😄

// これはできない({} がないから return 書いちゃダメ)
// const createIntroduction =
//   (person) => return `${person.name}は${person.age}才です!`;

// これじゃ結果が返されない({} があるから return が必要)
// const createIntroduction =
//   (person) => { `${person.name}は${person.age}才です!` };

const createIntroduction = (person) => `${person.name}は${person.age}才です!`;

const person = {
  name: "つばさ",
  age: 35,
};
// 返された文字列をconsole.logを使って表示しよう!
console.log(createIntroduction(person)); // つばさは35才です!

配列

配列を使うと、いくつかの値を列にして覚えてもらうことができるよ。配列に覚えてもらっている値は、「要素」と呼ばれることがあるよ。

const introduce = (person) => {
  console.log(`${person.name}は${person.age}才です!`);
};
// []を使って配列を作ろう!
// 各要素は,を使って区切ってね。
const people = [
  { name: "つばさ", age: 35 },
  { name: "けい", age: 27 },
];
// []を使って要素を取りだそう!
// 0を使うと最初の要素、1を使うと二つ目の要素を取り出せるよ。
introduce(people[0]); // つばさは35才です!
introduce(people[1]); // けいは27才です!

クラス

クラスを使うと、同じ機能を持ったオブジェクトを何度も作ることができるよ。

class Person {
  // constructorという特別な関数を使って、クラスを初期化できるよ
  constructor(name, age) {
    // thisを使ってクラスが持っている値にアクセスしよう
    this.name = name;
    this.age = age;
  }

  introduce() {
    // JavaScriptのthisはややこしい仕様になってるんだけど、
    // 今のところは「thisを使ってこのクラスが持っている値や関数にアクセス」と覚えておけばOK👍
    console.log(`${this.name}は${this.age}才です!`);
  }
}

// classはnewで宣言
// newで渡した値は、そのclassのconstructorに渡されるよ
const personA = new Person("つばさ", 35);
const personB = new Person("けい", 27);
personA.introduce(); // つばさは35才です!
personB.introduce(); // けいは27才です!
次は JavaScript の条件分岐 👉
目次
コードエディタ