JavaScriptのメソッドとプロパティを完全解説!初心者も安心ガイド

こんにちは!


プログラミングを始めたばかりで「メソッドって何?」とか「プロパティってどう使うの?」と思っている方、大丈夫!

今回は JavaScriptのメソッドとプロパティ について、初心者にも分かりやすく丁寧に解説していきますよ!


メソッドとプロパティとは?

プロパティって何?

プロパティは オブジェクトの「情報」 を表します。たとえば、オブジェクトが持つ名前や値のようなものです。

メソッドって何?

メソッドは オブジェクトが「できること」 を表します。つまり、オブジェクトに対して何か処理をさせたいときに使います!

簡単に言うと…

  • プロパティ → モノの性質
  • メソッド → モノができること

では、これを実際の例で見てみましょう!


オブジェクトのプロパティとメソッドを使う基本例

サンプルコード

// オブジェクトを作成
const dog = {
  name: "Pochi", // プロパティ: 犬の名前
  age: 3,        // プロパティ: 犬の年齢
  bark: function() { // メソッド: 犬が吠える
    console.log("ワンワン!");
  }
};

// プロパティを使う
console.log(dog.name); // "Pochi"
console.log(dog.age);  // 3

// メソッドを使う
dog.bark(); // "ワンワン!"

ポイント

  • nameageプロパティ。犬の名前や年齢を教えてくれます。
  • barkメソッド。犬に「吠えて!」と言うと、「ワンワン!」と応えてくれます。

JavaScriptの組み込みメソッドとプロパティを知ろう!

JavaScriptには、最初から使える便利なメソッドやプロパティがたくさん用意されています。いくつかの代表例を見てみましょう。


配列 (Array) のメソッドとプロパティ

例: 配列の長さを調べる (length)

const fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits.length); // 3
  • length プロパティ: 配列の要素の数を教えてくれます。

例: 配列に要素を追加する (push)

fruits.push("ぶどう");
console.log(fruits); // ["りんご", "みかん", "バナナ", "ぶどう"]
  • push メソッド: 配列の最後に新しい要素を追加します。

文字列 (String) のメソッドとプロパティ

例: 文字列を大文字に変換する (toUpperCase)

const greeting = "hello, world!";
console.log(greeting.toUpperCase()); // "HELLO, WORLD!"
  • toUpperCase メソッド: 文字列をすべて大文字に変えます。

例: 文字列の長さを調べる (length)

console.log(greeting.length); // 13
  • length プロパティ: 文字列の文字数を教えてくれます。

日付 (Date) のメソッドとプロパティ

例: 現在の日付を取得する

const today = new Date();
console.log(today); // 例: "2025-01-13T10:00:00.000Z"
  • new Date(): 現在の日付と時間を取得します。

メソッドとプロパティの注意点と活用法

  1. プロパティは読み書きができる
    • dog.name = "Shiro"; のように、値を変更できます!
  2. メソッドは実行が必要
    • dog.bark(); のように () を付けて実行 します。

実践問題にチャレンジ!🎉

問題 1: 自分の好きなオブジェクトを作ってみよう

以下のコードを参考に、自分が好きな動物やキャラクターのオブジェクトを作ってみてください!

const myObject = {
  // 好きなプロパティとメソッドをここに書こう!
};

問題 2: 配列を操作してみよう

以下のコードのコメント部分を埋めて、配列を操作してみましょう!

const hobbies = ["読書", "ゲーム", "料理"];

// 配列に新しい趣味を追加
// ここにコードを書く

// 配列の長さを表示
// ここにコードを書く

まとめ

  • プロパティ はオブジェクトの「情報」!
  • メソッド はオブジェクトの「動き」!

これらを使いこなすことで、JavaScriptをもっと楽しく、自由自在に操れるようになりますよ!

ぜひ、自分でいろいろ試してみてくださいね!👍


コメント

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