connecting...
Google translation for articles :
4 NEMBER donated to you!!

JavaScriptにおけるオブジェクト指向の基礎について

nem11.95xem (4) 335 0 2

 

NEMを使った開発をする際、オブジェクトについて理解しておくのは必須です。
なぜなら、NEMのAPIを使う時、オブジェクトを使うようです。
そこで、ここではJavaScriptにおけるオブジェクトの基礎について書きます。
なお、この記事は、以下の記事の内容を理解が求められますので、プログラミングの初歩を知らない人は、以下の記事をまず読んでください。

また、この記事を読むと、なぜ技術者は次世代NEMの名前がSymbolではダメなのかがわかるかと思います。

 

 

配列とオブジェクトについて

プログラミングコードを書く際、変数をいくつも定義すると、コードが複雑になることがあります。そのときに役に立つのが配列です。配列は、複数の値をまとめて保管できる変数です。ここで定義した変数を配列名といい、以下のように記述します。

 var 配列名 = [値1, 値2, …] ;

 

例文
  • var x = [1,2,3,4];

 

また、配列にはインデックス番号が割り振られていて、先頭より0、1、2と割り振られています。その定義した配列より値を表示したい場合は、以下のように記述します。
 配列名[インデックス番号];
さっきの例文で3を表示させたい場合は以下のようにします。
console.log(x[2]);

ここで、インデックス番号の代わりに文字を使った場合の配列をオブジェクトといい、その文字をプロパティ名と言います。ここでプロパティ名と値を合わせてをプロパティと言い、以下のようにして記述します。

プロパティ名1:値1

この時の配列名をオブジェクト名と言い、以下のように記述します。

 var オブジェクト名 = [プロパティ名1:値1, プロパティ2:値2,…];

 

例文
  •  var ob =[utopian:1,future:3];

 

ここで、その定義したオブジェクトに入っている値を表示させたい場合は、以下のようにします。
 オブジェクト名.プロパティ名 ; (ドット演算子による記法)

 

例文
  •  ob.utopinan  (→これだと、1と表示されます)
     ob.future (→これだと3と表示されます)

 

ここでオブジェクトにおいて、関数を値として代入することができ、この時のプロパティ名をメソッド名といいます。ここでメソッド名と関数のセットをメソッドをいい、以下のようにして記述します。

メソッド名:function (引数){処理内容}
そうすると、以下のようにオブジェクトを書きます。
var オブジェクト名 = [メソッド名1:function (引数){処理内容} , プロパティ名1:値1…];
また、メソッドはfunctionを省略できるので、以下のように書く事もできます。
メソッド名(引数){処理内容}
すると、オブジェクトは以下のようになり、よりシンプルに書けます。
var オブジェクト名 = [メソッド名1(引数){処理内容} , プロパティ名1:値1…];

 

例文
  •  var riji = [zemzem(){処理内容} , essan:5};

 

例文の場合、rijiがオブジェクト名であり、zemzemがメソッド名になります。
ここで、その定義したオブジェクトに入っている値(や関数)を表示させたい場合は、以下のようにします。
 オブジェクト名.メソッド名 ; 
なので、rijiオブジェクトの中のzemzemメソッドを使って表示させ、そのメソッドへの入力値として8を設定する場合、
console.log(rizi.zemzem(8));
と書く事になります。また入力値は数字でなく、テキストや関数を使っても構いません。

 

ここまでをまとめると、オブジェクトとは、プロパティとメソッドから構成されていると言えます。
プロパティとはモノの状態や特性を表す情報であり、メソッドとはモノを操作するための道具だといえます。
それらを使ってコードを書く手法をオブジェクト指向といいます。


引用:https://blog.codecamp.jp/javascript_object

 

 

インスタンスについて

 

オブジェクトは、コードで定義しても直接利用はできません。そのかわり、コードで定義されたオブジェクトを複製してオブジェクトを利用します。複製することをインスタンス化といい、そうしてできたオブジェクトをインスタンスといいます。そのインスタンスを作るには、以下のようにします。

 var 変数名 = new オブジェクト名(引数)
つまり、newを使います。

このインスタンスから、プロパティやメソッドを使いたい場合は以下のようにします。

変数名.プロパティ名
変数名.メソッド名(引数)

また、インスタンスを生成せずにプロパティやメソッドが使える場合は、以下のようにします。
オブジェクト名.プロパティ名 ;
オブジェクト名.メソッド名 ; 

つまり、前の章ではインスタンスを生成せずにプロパティやメソッドを使える場合を説明していたのです。

 

組み込みオブジェクトについて

 

組み込みオブジェクトとは、JavaScriptに初めから入っているオブジェクトの事をいいます。このオブジェクトは自分で定義せずに利用ができます。例として、以下のような物があり、どんなことができるのかは各自で調べる必要があります。
・Object
・Array
・Number
・Function
・Symbol
・Math
・Date

ここでSymbolが登場しました。次世代NEMの名前はSymbolですが、コードとして書く時、ブロックチェーン名前であるSymbolなのか、オブジェクトのSymbolなのか間違えることがあり得そうです。多分、これがSymbolという名前が技術者にとって嫌だという理由なのかもしれません・・・

 

 

コンストラクタ関数

 

コンストラクタとは、インスタンス(オブジェクト)を生成する時に、オブジェクトを初期化する処理を書いたメソッド(関数)を言います。コンストラクタ関数は基本として以下のように記述し、そのあとにインスタンスを生成します。

function 関数名 (引数) {
  this.プロパティ = 値;
  this.メソッド = function)(){処理内容}
}
var 変数 = new インスタンス(引数)

 

ここで使われる関数を、コンストラクタ関数といいます。
またtihsは自分自身を表すオブジェクト(インスタンス)を表し、インスタンスのプロパティやメソッドを以下のようにして設定できます。
this.プロパティ名 = 値 ;
this.メソッド名 = 関数 ;

ここで、コンストラクタ関数について、例文を用いて説明します。

 

例文
function obj(nem, sym) {
  this.xem = nem; 
  this.xym = function() {
    console.log(sym);
  }; 
}
var com = new obj('eco', 'mov');
console.log(com.xem); 
com.xym();  

 

この例文の実行結果は、ecoとmovとなります。
また、objがコンストラクタ関数になり、thisはインスタンスthisはobj('eco', 'mov');を表します。


 ここで、例文のプログラムの処理について説明します。
まず、コンストラクタ関数をつくり、その後
var com = new obj('eco', 'mov');
とすることより、コンストラクタ関数objは複製され、その複製関数はnew obj('eco', 'mov')としてインスタンスになることを意味します
インスタンスでの引数はecoとmovであることから、コンストラクタと比較すると、ecoがnemへ、movがsymへ入力されることになります。そうすることで
this.xem = nem;
の右辺にecoが入力されるので、xemはecoという値を持ったプロパティとなります。つまり、
this.xem = eco
という事になります。また、
this.xym = function() { console.log(sym); };
の右辺にmovが入力され、xymというconsole.log('mov')を実行させるメソッドとなります。つまり、
this.xym = function() { console.log(mov); };
という事になります。
そして、
console.log(com.xem);
において、xemというプロパティを使うことで、ecoという言葉が出力されます。また
com.xym();
で、xymというメソッドを使うことになるので、movという言葉が出力されます。
つまり、例文の最後の3行
var com = new obj('eco', 'mov');
console.log(com.xem);
com.xym();
というコードは

var com = obj('eco', 'mov');  {
  this.xem = 'eco';
  this.xym = function() {
  console.log('mov');
 };
}
 console.log(com.xem);
 com.xym();

という感じになるということです。

 

 

 

クラスについて

クラス(厳密にはプロトタイプ)とは、「あるオブジェクトの元になるオブジェクト」の事をいいます。
クラスを用意することで、コンストラクタ、プロパティ、メソッドを一つにまとめることができます。その構文は以下のようにして記述し、その後にインスタンスを作ります。

class クラス名{
コンストラクタの定義
プロパティの定義
メソッドの定義

}
var 変数 = new インスタンス名;

 

ここで、コンストラクタの定義は以下のようにし、クラス全体の初期化を行います。
 コンストラクタ名(引数){処理内容}
また、メソッドの定義もまた同様にします。
 メソッド名(引数){処理内容}

 

ここで、プロパティを定義するとき、getやsetを用いて定義することができます。
 get プロパティ名{ 値を取り出す処理} ;
 set プロパティ名(value) { 値を代入する処理} ;
これらをそれぞれゲッターセッターと言います。

ゲッターはプロパティとしてアクセスされた場合ゲッターで設定された関数を実行します。セッターはプロパティに値を代入された際に、セッターで設定された関数を実行します。

 

例文
class Test {
  constructor(x, y) {
    this.x = x; 
    this.y = y;
  }

  // ゲッター
  get distance() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }

  // セッター
  set coodinary(arr) {
    this.x = arr.x;
    this.y = arr.y;
  }
}

const test1 = new Test(3, 4);
console.log(test1.distance); 
test1.coodinary = {x: 6, y: 8};
console.log(test1.distance); 

この例文は( https://qiita.com/niisan-tokyo/items/83582bc0646239cf6cb8)からの引用です、

この処理について説明します。

const test1 = new Test(3, 4);
で、クラスを複製し、インスタンスを作り、同時にそのインスタンス内のコンストラクタのxに3、yに4を代入します。
そうすることで、

 constructor(x, y) {
  this.x = 3; // x座標を入れる
  this.y = 4; // y座標を入れる
 }
として考えます。次に
console.log(test1.distance);

でゲッターから値を習得することになります。そのとき、\begin{align*}
\sqrt{{3}^2 + {4}^{2}}
\end{align*}結果が出力される事になります。次に
test1.coodinary = {x: 6, y: 8};

とすることで、xに6、yに8を代入することになります。そうするとセッターにおいて
this.x = 6;
this.y = 8;
となります。そうすることで、クラス内の引数が変更になります。その状態で
console.log(test1.distance);
を実行すると、\begin{align*}
\sqrt{{6}^2 + {8}^{2}}
\end{align*}の結果が出力されます。

 

 

モジュールについて


 モジュールとは、機能単位、交換可能な構成部分という意味の英単語です。システムの一部を構成するひとまとまりの機能を持った部品で、システムや他の部品への接合部(インターフェース)の仕様が規格化・標準化されていて、容易に追加や交換ができるようなもののことを意味します。
 つまり、機能を拡張する部品だということです。その部品を利用するには、モジュールとして使うスクリプトではモジュールとして定義しなくてはいけません。ここでスクリプトとは、ソースコードを書き、それをファイルとして保存し、そのファイルを実行すると、プログラムを動かせるファイルのことをいいます。
ここで、そのスクリプト内にある機能を使うためには、以下のようにして定義します。

export 〇〇;
ここで、〇〇には関数やオブジェクト、クラスなどが入ります。こうする事で、exportで指定した機能が外部でも使えるようになります。
そして、その機能を使うには以下のようにして読み込みます。

import {読み込みたい機能} from 'ファイルのパス'

 これらを使った例文を見ていきます。

例文(モジュールとして使うスクリプト)

export function sayMessage(message) { alert(message); }

 

 このスクリプトのファイルパスを./sample-alert.jsとし、ファイル名をsample-alert.jsとします。ここで、ファイルパスとはファイルが現在のディレクトリからどのように進めていくと、目的のファイルへ到着するのかを表したものです。ここでは、.が現在のディレクトリを表し、lib、Utilとファイルをクリックすると、目的のファイルにたどり着きます。
 そうすると、読み込みたいファイルの中身は以下のような例文になります。
(また例文は、https://ics.media/entry/16511/ より引用しました)

 

例文

import { sayMessage } from "./sample-alert.js";
sayMessage("こんにちは世界");

 

 だが、この方法だと、モジュールとして使うスクリプトで使われる方(exportする方)で、どんなコンストラクタ関数の名前が用意されているのかを把握しなくては、読み込む(importする)ことができません。
 そこで、これらの例文をexport defaultを用いて書き直す事で、exportする方のコンストラクタ関数を知らなくても、読み込む事ができます。
 つまり「export default」とは、読み込まれた方(つまりimportする方)で名前をつけ、exportする方では名前を付けないという方法です。
そうすると、以上の例文は、このように変更されます、

 

例文(モジュールとして使うスクリプト)

export default function () { alert(message); }

 

例文
  • import  sayMessage  from "./sample-alert.js";
    sayMessage("こんにちは世界");

 

ここで、sayMessageはどんな名前でも構いません。zemzemでもessanでも好きな名前を使うことができます。

 

 

次に、HTMLをモジュールを適用する方法を紹介します。

このとき、HTMLファイルに
<script type="module">

と定義した上で、import文を書きます。つまり、以下のような例文になります。

 

例文

<html>
<head>
 <meta charset="UTF-8">
 <script type="module">
  import {sayMessage} from "./sample-alert.js";
  sayMessage("こんにちは世界");
 </script>
</head>
<body>
</body>
</html>

 

またこの例文は、HTMLファイルとJavaScriptファイルに分割することもできます。

 

例文(HTML)

<html> 

<head>
 <meta charset="UTF-8">
 <script type="module" src="index.js"></script>
</head>
<body>
</body>
</html>

 

例文(JavaScript)

import { sayMessage } from "./sample-alert.js";
sayMessage("こんにちは世界");

このJavaScriptが書かれたファイルの名前をindex.jsとします。

つまり、 

<script src="index.js">

というコードを書く事でHTML内において、index.jsというJavaScriptファイルを読み込みたい時に読み込めると言う事になります。

 

 

この記事を書いた感想

 

ここまでで、JavaScriptにおけるオブジェクトについて紹介し、ついでにモジュールについて説明しました。
これを読むと、NEM開発に必要な最低限のオブジェクト志向は学べるのかなと感じています。
聞いた話だろ、実際にプログラミングが上達するには、コピペでもソースを書き写す事ではなく、実際に開発してみることだそうです。
ここで培った技術を使って、NEMに対してどのように応用できるのかを考え、どのようにすれば開発できるのかを考えていきたいものです。
まだ開発を自分自身、したことがないので、NEMに関する技術本を読み、何ができるのかを考えていきたいです。

 

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register

NEMber who posted this article

NEMのユートピアを目指してるYUTOです!!
nemlogでは、イベント情報のまとめ記事や、記事の感想記事を中心に書いています。
nemlogがユートピアになるように、着々と計画中です!!
40597
0