javaScript 使い方

　javaScript を実施に使う前に javaScript の実行環境を準備する必要があります。もちろんブラウザがあれば実行することができますが、ここでは、node.js を利用した実行環境を構築します。

１．nvm のインストール
　異なるバージョンの node.js を使い分けるために、バージョンの切り替えができるツールを使用します。ツールはいくつかありますが、ここでは nvm を使用します。

　javaScript は昔は webページに動きをつけるための言語などと説明されたこともありましたが，今では，サーバサイドの実装やアプリの開発などにも使用されるため，汎用的な開発言語のひとつといえそうです。

　javaScript のコードは実行環境とよばれるプログラムで動かすことができます。代表的な実行環境としては Chrome や Safari などのインターネットブラウザや node.js などです。

　ここでは javaScript の特徴的な文法や機能などを紹介します。

１．変数
　javaScript の変数は「動的な型付け ( Dynamic Typing ) 」であり，変数の型は実行時に動的に決まります。つまり，同じ変数が状況に応じて異なる型の値を持つことができます。

２．アロー関数式
　非常に多用される記法です。簡潔に関数を定義できます。

// 「引数を３乗した結果を返す関数」を定義します。
function fn1( number ) {
  return number ** 3; // ** : べき乗
}
console.log( 'run fn1( 3 ) : ' + fn1( 3 ) );

// 変数に関数を代入することができます。
const fnvar1 = fn1;
console.log( 'run fnvar1( 3 ) : ' + fnvar1( 3 ) );

// 変数 fnvar2 に「引数を３乗した結果を返す関数」を代入します。
// この関数は 変数名 で使用できるため，関数名を定めていません。
// このように 名前のない関数 ( 名前をつける必要がない関数 ) を特に無名関数と呼びます。
const fnvar2 = function( number ) {
  return number ** 3;
}
console.log( 'run fnvar2( 3 ) : ' + fnvar2( 3 ) );

// function というキーワードを使用せず => ( アロー ) で関数を記述することもできます。
// => を使用する記法を特に アロー ( arrow ) 関数式 と呼びます。
const fnvar3 = ( number ) => {
  return number ** 3;
}
console.log( 'run fnvar3( 3 ) : ' + fnvar3( 3 ) );

// アロー関数式 では引数が１つのみ ( ０はダメ ) の場合，引数を囲む括弧()を省略できます。
// また，関数の内容が１行で記述する戻り値のみの場合は，関数を囲む括弧{}も省略できます。
const fnvar4 = number => number ** 3;
console.log( 'run fnvar4( 3 ) : ' + fnvar4( 3 ) );

// 引数を持たない関数を記述する場合は () のみ記載します。
const fnvar5 = () => 3 ** 3;
console.log( 'run fnvar5( 3 ) : ' + fnvar5() );

３．日付型の注意点
　javaScript での日付型の注意点です。

　python では配列はリスト，タプル，辞書の３つがあります。
タプルは値の削除・変更が原則認めれていないことが，リストとの大きな違いとなります。

addEventListener の使い方

addEventListener で関数に引数をわたすときに，間違えやすい点についてのメモです。「EventListener にイベントを登録したらイベントが発生していないのに勝手に実行された」のような現象が起きると，間違えている可能性が高いと思います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">テスト</button>
        <script>
            const target = document.getElementById( 'btn' );

            function func( user ){
                console.log( 'Hello,' + user );
            };

            target1.addEventListener( 'click' , func( 'kura' ) );
        </script>
    </body>
</html>

id が ‘btn’ の button のクリックイベントに func という関数をひもづけ ‘kura’ という文字列を引数としてわたそうとしています。
console を確認すると click する前にすでに表示がされている一方，click しても何も表示されません。

これは，こちらの意図である関数の紐づけができておらず，実行された関数の戻り値がクリックイベントに紐づけられています（戻り値は関数ではないので当然，うまくいきません）

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">テスト</button>
        <script>
            const target = document.getElementById( 'btn' );

            function func( e ){
                console.log( e.currentTarget );
                console.log( 'Hello,' + this.name );
            };

            target.addEventListener( 'click' , { name: 'kura' , handleEvent: func } );
        </script>
    </body>
</html>

このようにして addEventListener に関数と引数をわたしています。

連想配列の取り扱い
　連想配列 ( associative array ) は、添え字に数値以外のデータ型が使用できる配列のことを指します。つまり、’ 配列名[添え字] ‘ではなく、’ 配列名.キー ‘として値を指定できます。連想リスト、連想コンテナ、辞書、ハッシュ、マップなど使用するプログラム言語によって呼び方は異なります。

( javaScript - test01.js )
const ar = {
    fruit: 'orange' ,
    price: 100 ,
    tstamp: new Date( '2012-10-10' )
  };
  
console.log( ar.fruit );
console.log( ar.price );
console.log( ar.tstamp );
console.log( ' ----- ' );
console.log( typeof( ar.fruit ) );
console.log( typeof( ar.price ) );
console.log( typeof( ar.tstamp ) );
console.log( ' ----- ' );
console.log( typeof( ar ) );


( output )
orange
100
2012-10-10T00:00:00.000Z
 ----- 
string
number
object
 ----- 
object

　プログラムにある通り、配列の値の指定は ar[0] , ar[1] ではなく ar.fruit , ar.price などと数字を使わず値を指定しています。これを連想配列と呼びます。
chat GPT先生によると、In Ruby, a hash is a collection of key-value pairs. It is similar to dictionaries in Python, associative arrays in PHP, or objects in JavaScript
とのこと。つまり、いわゆる連想配列のこと。

ホイスティングについて
　ホイスティングとは、変数や関数の宣言をコードの実行前に先頭に配置することです。これによって、コード上では変数や関数の定義より前に変数や関数を使用することができるようになります。ただし、宣言の方法によって次のとおり動作に違いがあります。

　変数
　・var ( 非推奨 )　変数のメモリを確保し undefined で初期化します
　・let　変数のメモリを確保しますが、初期化は行われません ( 実行時にエラーとなります )
　・const　変数のメモリを確保しますが、初期化は行われません ( 実行時にエラーとなります )
　関数
　・関数宣言　初期化されます
　・関数式　初期化されません。

ruby における hash と配列の違い
　Hash も配列も複数の要素を格納するために使用します。
　配列が要素を指定するのに「0」から始まるインデックスを使用するのに対し、Hashはインデックスに「キー」と呼ばれる任意の文字列を指定して「バリュー」と呼ばれる要素を指定します。