ywork2020.com

Title

オブジェクト (Object)を学べば、独学でインタラクティブなWebページ作成出来る

オブジェクトの意味

物、物体などの意味を持つ言葉ですが、プログラムで言うオブジェクトも特に変わりはありません。

オブジェクトの説明

昨今のプログラミング言語のほとんどは、オブジェクトというものを利用しながら処理を行ってゆきます。
ここでは、プログラミングが全くの初めてだという方に向けて少し例え話を交えながら オブジェクトについてのお話しをさせていただこうと思います。
あくまでも例え話ですので、オブジェクトという物の雰囲気を掴んで頂ければと思います。

まず初めに実際のプログラミングには関係ない実生活のオブジェクトを一つ題材にしようと思います。
名前は[鍋(ナベ)オブジェクト]です。

鍋は料理や調理に利用するものですよね。
プログラミングにおける各オブジェクトも、ある特定のことに関しての専門性を持っています。

オブジェクトには実行命令を行える[メソッド]と、設定などを変更できる[プロパティ]という機能がついています。

では、この鍋オブジェクトのメソッドを一つ使ってみます。
メソッドの名前は、茹でる(ユデル)と言います。
実際にコードに書いてみたいと思います。
書き方は[ オブジェクト名.メソッド名(何を); ] となります。
オブジェクトとメソッドの間に . =ドット演算子があることを見落とさないで下さい。

メソッドを使ったコードイメージ

鍋.茹でる(たまご);
鍋.茹でる(タコ);

早速実行してみると[ゆでたまご]と[ゆでダコ]が調理出来ました(出力されました)。

もう一つサンプルを紹介します。
サンプルオブジェクトは「オートマチック車」です。
サンプルメソッドに「ドライブ」と「リバース」でサンプルコードを書いてみます。

オートマチック車.ドライブ(50km);
オートマチック車.リバース(5km);

実行すると、オートマチック車は50kmの速度で前進したり、5kmの速度で後退したりしました。
なんとなく、イメージできたでしょうか?

オブジェクトのプロパティを使ったコードイメージ

では次にプロパティを2つ設定してみます。
サンプルオブジェクトは前述している鍋(ナベ)です。
1つ目のサンプルプロパティは蓋(フタ)プロパティ、2つ目は深さ(フカサ)プロパティです。

鍋.蓋 = true;
鍋.深さ = "30cm";

実行してみると蓋付きで深さ30cmの鍋が出来ました。
が、しかし蓋無しで深さ20cmの鍋が必要になったので設定変更します。

鍋.蓋 = false;
鍋.深さ = "20cm";

ざっくりではありますが、以上の雰囲気でオブジェクトを指定して(.)ドッド演算子からメソッドで命令を出す、又はプロパティで設定値を取得したり変更したりしながらブラウザをコントロールして行く感じになります。

文法でいうと命令文であるメソッドは実行するのに[何々を]とか「何々で」を指する「引数」というものが必要になる為、「メソッド(引数)」の形式で記述することになります。
またプロパティは設定を指定する対象物みたいなものですので、「プロパティ名 = 任意の代入値」という形で記述します。
他の人が書いたコードを見るときは、その辺りを見ていくと、より理解が早まると思います。

ポイントとしては他人の書いたコードを勉強の対象とする場合に注意する点として、メソッド(引数)と同じ書き方をするものがあり、「new クラス名(引数)」の形式で記述されています。
実際には、これもメソッドなのですが、理解できない時は気にせず無視しておいて下さい。
この場合、「new」という演算子が使用してあると思いますので覚えておいて下さい。
new演算子やクラスからオブジェクトのインスタンス生成の話は別ページで触れたいと思いますので、ここでは省略します。

それでは実際の javascript のコードで記述したボタンを下に配置しておきますので、クリックしてトップページにお戻り下さい。