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

NEM開発に必要なJavaScriptの基礎

nem124xem (6) 505 4 4

「ブロックチェーンアプリケーション開発 NEM」の画像検索結果

NEM(Symbol)を使ったアプリケーション開発をする際、プログラミング言語としてJavaScriptの知識は必須になります。

以上の本は、NEMを使ったアプリケーション開発について書かれた本であり、この本を読んでSymbolの技術的な側面を学ぶ事になります。(Boothで販売中です)

この本を読むにあたって、プログラミング言語を理解しておくことが記され、この本ではJavascriptでプログラミングがされています。Typescriptを学ぶ際も、Javascriptの初歩的な理解がないと学ぶ事はできないと思います。
そこで、今回、Javasrriptの基礎を書いていきます。
この記事でJavascriptの全てを理解できるわけではありませんが、この本を読める気になれるのかなと感じています。

 

 

値について

値とは、数値や文章のことを言います。
(例) 123、0.32、あうい、thie is nemlog

 

 

変数について

変数とは、いわゆる値を保管しておくための入れ物です。
その際、変数であることをvarやletを使って宣言します。

 var 変数;、let 変数;
また値を変数に保管する際、以下のように記述します。

var 変数 = 値;
ここで、=(イコールと呼ぶ)の意味は右辺を左辺に代入するということです。
つまり、Aを変数、Bを値とすると、A=B は「BをAに代入する」という意味になります。
数学でのイコールとは意味が違いますので、注意してください。

 

例文
  • var x = 1;
    var y = 3;

 

 

定数について

一度値を宣言したら、二度と代入できない入れ物を定数といい、以下のように宣言します。
const 定数 = 値;

 

例文
  • const z = 5;

 

 

 

四則演算について

プログラミングは本来、計算するためにあるものです。なので、四則演算を行う事ができます。これは、数字同士だけでなく、テキストと演算することもできます。

 

例文
  • var x = 1 + 4 - 2 × 3;
    var y = 'abc' + 123;

 

 

関数について

関数とは、ある処理をひとまとめにして書いたものであり、入力された値と出力された値のパイプ役となるものです。

それは、以下の3つの記述の仕方があります。
  function 関数名(引数){処理内容};
  var 変数 = function (引数){処理内容} ;
  var 変数 = (引数)=>{処理内容};

このとき、使う変数は関数名となります。また、引数とは、関数に入れたい入力値の事をいいます。

 

例文
  • function nem(){alert('hello! NEMber)};
    let nem = function {alert('hello! NEMber)};
    var nem = ()=> {alert('hello! NEMber)};
    ※ここで、alertとは、javascriptに組み込まれている関数で、引数の値を画面に表示するものです。

 

 また処理内容には、戻り値を設定することがあります。戻り値とは関数内で処理された結果として得られた値です。つまり、出力値です。
 戻り値を設定することで、処理内容に書かれた処理を終わらせ、そして呼び出し先の関数が出力値として値となります。
 ここでごはんに例えると、ごはんを炊く前の米が引数、炊飯器が関数、炊いた米が戻り値になります。
これはreturn文で書かれ、記述の仕方としては以下のようになります。
 return 値(もしくは式)  ;

例文を用いて説明します。

 

例文
  • function nem(name) {
     return 'Hello!!' + name ;
    }
    console.log(nem('YUTO'));

これは、Hello! YUTOと出力されます。
なぜならnem('YUTO')と関数を呼び出すことで、YUTOが引数(入力値)として関数内で処理され、nem('YUTO')は「'Hello!!' + YUTO」として値(出力値)になるからです。
 ここで、console.log()とは、出力して欲しい値を画面に表示してくれるコードであり、以下のようにして書きます。
console.log(値);

 console.log()の詳しい説明については、この後の「配列とオブジェクトについて」で説明するので、ここでは出力値を画面に表示してくれるコードを考えていいです。

 

 

 

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

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

 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];

 

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

 

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

 

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

メソッド名:function (引数){処理内容}

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

 

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

 

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

 

 この考え方を使って、画面にプログラミングの結果を表示させるコマンドであるconsole.log(値);について考えます。

 comsole.log(値)について、consoleはオブジェクト名で、logはメソッド名です。()の中身に表示させたい値(出力値)を書く事で、画面に値を表示するというものです。ここでconsoleオブジェクトは、ブラウザに標準でついているので、コードを書く際はオブジェクトを定義する必要はありません。

 

 

制御文について

制御文とは、プログラムを実際に流すための文章を言います。ここでは、代表的なものであるif文とfor文について紹介します。


(1) if文
if文は条件分岐をする際の構文であり、条件に応じて実行する処理を変更します。
この文は、以下のように記述します。
if(条件式){
条件式を満たしているときに、この処理を実行する
} else{
条件式を満たしていないとき、この処理を実行する}

 

例文
  • var x = 15;
    if(x>=10){
    console.log('変数xは10以上です');
    } else{
    console.log('変数xは10未満です');
    }

 

この例文は、変数xが10以上だと、画面に「変数xは10以上です」と表示され、そうではない場合は「変数xは10未満です」と表示されます。

ここで、条件式を満たしていない処理を実行しない場合は、else以下の文を省略することができます。
ここで、比較演算子について説明します。ここではAとBを値として考えます。

A==B AとBは等しい
A != B AとBは等しくない
A < B AはB未満である
A <= B AはB以下である
A > B AはBより大きい
A >= B AはB以上である

これらの比較演算子をif文の条件式に書きます。

(2) for文
for文は繰り返し処理をする際に用いられる構文であり、以下のようにして記述されます。
for(初期値;繰り返し処理をする条件;処理した後の処理){
繰り返し処理をする内容
}
説明すると、まず初期値の所で変数と繰り返し処理をする際の一番最初の値を設定します。それから「繰り返し処理をする条件」に当てはめ、条件式を満たした場合に「繰り返し処理をする内容」を実行し、その次に「処理した後の処理」に入ります。それから「繰り返し処理する条件」にあてはめ、その条件を満たしたら、また「繰り返し処理をする内容」を実行し、その次に「処理した後の処理」に入ります。それを繰り返し条件をする条件を満たさなくなるまで継続します。
つまり、
初期値→繰り返し処理をする条件→繰り返し処理をする内容→処理した後の処理→繰り返し処理をする条件→繰り返し処理をする内容→処理した後の処理・・・
とループをしていくということです。

 

例文
  • for(var 8;x<10;x++)
     console.log('xの値は' + x);
    }

 

この例文の処理結果は8と9が出力されます。
初期値として8を設定し、x<10を満たしているので、 console.log('xの値は' + x)を実行します。それから、xを1つ足します。するとxは9になり、x<10を満たしているのかをチェックします。この時は満たしているので、console.log('xの値は' + x)を実行します。それから、xを1つ足します。するとxは10になり、x<10を満たしているのかをチェックします。このとき、満たしていないので、処理は終了となるということです。
ここで、x++とはx=x+1を表し、x=x+1はx++として書きます。

 

 

編集後記

ここまでで、Javascriptを学ぶにあたって、基本的な事を書きました。
実際は、この記事に書いている事だけでは本格的な開発はできませんし、他にもDOMやfor...in文、コンストラクタ関数、クラス、継承、jQuerryなど学ぶべき事がたくさんあります。
自分もまだ学習し始めたばかりだし、わからない事も多いです。
ぜひ、この記事をきっかけにJavascriptの学習をしていただけたらいいなと思っています。

 

最後に図書に関する話をします。

私は、この本の巻末にあるJavascriptに関する説明を読み、一通りの基礎がわかるように努めました。

Node.js 超入門[第2版] 掌田津耶乃  (著)

また、以下の本を読んで、知識の不足分を補っていけるようにしています。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

 

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
Comments from NEMber
YUTO
2020-03-17 21:40:11ID:179937

>>ZIM::さん
シリーズ記事だなんて💦
待ってくれてありがとう☺︎

ZIM
2020-03-17 21:24:07ID:179932

このシリーズ記事を………………
待ってましたッ‼️

YUTO
2020-03-17 18:58:32ID:179919

>>やってみよう::さん
コメントありがとう!!
頑張ってこの記事を書きました!!(記事を書くのに数時間も掛かりました)

やってみよう
2020-03-17 18:51:37ID:179918

きれいにまとまっていて、自分のようにプログラミングに疎い人間からすると
とてもありがたいです。

NEMber who posted this article

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