JavaScriptをどのくらいできたらReactの勉強をはじめるべきか - YouTube
上の動画で述べられていることを少し学んでみます。
初歩の初歩からです。
まず、リロードというのは知っているでしょうか？恥ずかしながら２年前は知りませんでした。知ったきっかけはコロナワクチンの予約の際ですね。自分のPCでは予約空いているのに、実際は空いていないといわれるようなことはあり得たはずです。これは、画面が更新されたにもかかわらず、自分のパソコンのブラウザは、楽をして、以前開いた画面を開こうとするんですね。その際に、Windowsなら、Fn＋F5ですね。これでスーパーリロードできます。HTMLファイルやそれに紐づけたJavascriptを変更したのに、変更されていないということに悩まされないようにしましょう。
この手間をなくすには、ローカル環境を構築すればよいです。これを構築すれば、プログラムを変えたら自動的に、割合すぐに変更されます。
次は、console.log( )というものはご存じでしょうか？
Javascriptなどのプログラミング言語を学習するうえでは、初期には欠かせません。
文法やコードの書き方を学ぶ際によく使います。今回もこれを使いましょう。
Javascriptの場合、どこに出るかというと、Webブラウザの開発者オプションのコンソールのところですね。
Webブラウザの開発者オプションのほかの項目も見てみましょう。要素というのを見ると、今表示されているHTMLが表示されてます。
Javascriptの初心者の目線で書いてますのでお付き合いください（実際、Javascriptの初心者です）
・変数
JavaScriptの変数には、いろいろなものが代入されます。
リテラル値、文字列や、関数、オブジェクト、あるいはこれらの配列のいずれかが代入されます。
変数の場合、『宣言』と『代入』があります。
変数の型というのはあまりなく、現代では、基本constで、繰り返し処理ではletというのが主流なようです。（varはあまり使わなくなったようです）
・関数
プログラミングといえば、Basicに始まり、基本は関数型言語で、コードは上から下の順で読み込まれていくのが基本です。
代入の話にもどりますが、まずは、代入の『＝』というのは何なのかということですが、そこから数学とは異なります。プログラミング言語における『＝』はデータの参照先を表しているのです。参照先は最終的には、『変数』として表されます。
また、関数というと、数学を思い浮かべてしまう人もいるでしょうが、プログラミング言語での関数は基本的に異なります。
これまでの話から、Javascriptでは、
関数を定義する際は、基本は下記の方式になります。
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の醍醐味かもしれません。
配列を扱う関数はいろいろ存在するようです。
・コールバック関数
下記HPでイメージをつかみましょう
【JavaScript初心者】コールバックを分かりやすいイメージで説明！ - YouTube
