#【JavaScript】【初学者向け学習法】関数、無名関数、即時関数の違い、書き方を覚えるために実施したこと
私と同じようにこれからJavaScriptを学習する/している方向けの記事です。
タイトルの通り、関数、無名関数、即時関数を理解するために実施した学習方法です。
もし同じレベル感でお悩みの方の参考になれば幸いです。
背景：
プログラミング学習には、手を動かすのが大切と言われます。
動画を見ながらエディタで手を動かすのですが、動画の速度に追いつかず、タイピングもどきで終わることがありました。タイピングに終始していると理解が追いつきません。
そんな自分の学習効率を改善するために考えた方法です。
やったこと：
事前準備：
・事前に解説動画を見る
・一緒に画面の処理をタイピングするが、追いつかない場合は解説の理解に集中する
・正解を複写し、コメントアウトで控えておく
①模写した正解を見ながらエディタに式を書く
②Google Chromeのデベロッパーツールで表示させる
③なぜ表示されたのかを自分に説明する。できないうちは①②の複写を繰り返す
④①の内容を変えて書き、以降繰り返し
①は手を動かすことで記憶する
③は自分への説明で記憶を定着させる
④は変化を与えることで学習効果を高める
ということをしています。
具体例です。
function hello(name){
var Hello = "hello " + name;
return Hello;
}
var result = hello("Tom");
console.log(result);
ここで①②を実行し、結果を確かめたうえで、③で自分に説明します。
模写で精いっぱいだと説明できないので①②を繰り返します。
模写を見ないでできるようになると、処理内容を考える余裕が生まれます。
そうすると③の自分への説明に進めます。
この場合だと3つに分けて説明しました。
・hello関数は関数内でローカル変数Hello変数の処理内容を作り、returnで内容を出力する
・result変数はhello関数から処理のバトンを受けとった
・console.logでresult変数を表示した
※声に出した場合は、音声情報として記憶の定着効果が高まります
次に④である変化として無名関数で処理してみました。
var hello = function(name){
var Hello = "hello " + name;
return Hello;
}
var result = hello("rachel cook");
console.log(result);
①②で模写ができるようになっているので、改変する余裕があります。
こちらも自分に説明できたら、次は変化の幅を変えて、別の処理内容を書きます。
文字列の表示から四則演算に変えました。
function add(a,b){
var Add = a + b;
return Add;
}
var result = add(1,2);
console.log(result);
次の変化は引数の数を増やした無名関数Ver.
ローカル変数名に計算を意味するcalcutlationと命名し、英語学習も兼ねました。
var add = function(x,y,z){
var calculation = x + y + z;
return calculation;
}
var result = add(10,11,12);
console.log(result);
次は関数と即時関数の変化を書きました。
function hello(){
console.log("hello");
};
hello();
(function hello(){
console.log("hello there.");
})();
ここに至るまでに関数の形を手が覚えているので、()で括る箇所も理解して使うことができました。
そして学習フローをこのように記事にすることで、自分の理解度を確認。
関数以外の学習にも応用できるようにと考えた次第です。
こうした方が効率が良い、という知恵がありましたら、コメントをお寄せ頂けますと幸いです。