React.js 入門の入門②~React.jsを自分で作っていける状態になるまでにJavaScript知識はどれくらい必要か?~

・React.jsを自分で作っていける状態になるまでにJavaScript知識はどれくらい必要か?

 JavaScriptといっても範囲が広すぎますので、やみくもに勉強しても、終わりが見えません。

 コツとしては、まず、JavaScriptを、型無し関数型言語と捉えることです(途中でクラスの概念が追加されましたが、これは必要なときのみに限定すべきです。)

 React.jsは以前は、クラス型コンポーネントで書かれるのが主流でしたが、現在は、関数型コンポーネントが主流となっているからです。

 モダンJavaScriptという言葉があるようですので、いわばクラシックJavaScriptだけの理解で全然行けます。知識はそれほど必要ないですが、コーディング技術(何かしらのプログラミング言語のトレーニング実績)は必要です。

[ただし、var ⇒ 通常、constを使用し、繰り返し処理のときのみ、letを使うようにしよう。]

・変数

 JavaScriptの変数には、いろいろなものが代入されます。

 リテラル値、文字列や、関数、オブジェクト、あるいはこれらの配列のいずれかが代入されます。

 変数の場合、『宣言』と『代入』があります。

 変数の型というのはあまりなく、現代では、基本constで、繰り返し処理ではletというのが主流なようです。(varはあまり使わなくなったようです)

 『代入』の話にもどりますが、まずは、代入の『=』というのは何なのかということですが、そこから数学とは異なります。プログラミング言語における『=』はデータの参照先を表しているのです。参照先は最終的には、『変数』として表されます。

 また、関数というと、数学を思い浮かべてしまう人もいるでしょうが、プログラミング言語での関数は基本的に異なります。

 変数はどういう型なのか、文字列なのか、数字なのかを、考えなくてもいいのが、メリットでもあり、デメリットでもあります。『考えなくてもなんとなく動くのだが、複雑になると動かなくなる』のです。

・関数

プログラミングといえば、基本は関数型言語で、コードは上から下の順で読み込まれていくのが基本です。

関数の定義の仕方がいくつかあることは理解しておく必要があります。

関数を定義する際は、基本は下記の方式になります。

ex)

const  getName = function( ){

    document.getElementById("text_name").getText( );  ・・・・①

}

と定義されていれば、

ほかのところで、getName() と出てくれば、

①という処理をするということを意味しているということです。

(getNameとだけの場合は、①を参照にするだけということです)

これは、下記のように書き換えることができます。

function getName( ){

   document.getElementById("text_name").getText( );

}

 

あとは、アロー関数なる書き方もあります。

const  getName = ( )=>{

    document.getElementById("text_name").getText( ); 

}

関数の戻り値を考えなくても最初はいいが、考えないとのちのち困ります。

 

・配列

 配列といえば、順序がきまっている、ひとまとまりのデータ群です。Javaでは、配列では要素を追加はできませんが、JavaScriptでは要素追加できるようです。

 

let array = ['apple','banana','orange'];

 

配列を駆使するのがJavascriptの醍醐味かもしれません。

配列を扱う関数はいろいろ存在するようです。

 

・コールバック関数

 コールバックとは何かから考えてみます。AがBにコール(電話)し、Bに仕事を依頼し、終わったら知らせてくれるように伝えます。これがコールバックです。コールバックするのはBです。Aはこのようにすることで、構うことなく、それ以外の仕事ができます。

 4+5×2を計算する関数Aがあるとします。演算法則では、まず5×2から計算します。これを行うのが関数Bだとします。

関数A(4+関数B)ということです。関数Aは、関数Bの結果を待ってから計算します。関数Bがコールバックするので、これがコールバック関数です。関数Aの引数で、4が0なら、関数Aは、関数Bに丸投げし、終わった結果だけ受けます。

・DOM

 JavaScriptではDOMを知らないと話にならないような雰囲気なようですが、React.jsでは知らなくてもできます。