ざまのエンジニア勉強日記#22

エンジニア採用をしている私が、
エンジニアと話ができるようになるために色々勉強する話。

エンジニア勉強日記っておかしくない？プログラミング勉強日記じゃない？とか思い始めた今日この頃。でも今更変えるのもなあと思う今日この頃。

イベントを中断する方法
前々回の日記でもう一回引くボタンを作ったから上の画像は1度だけしかクリックできないようにしたいと思ってた。
とはいえ、おみくじをこれ以上引きずるのは飽きるからあまり大きく変えず且つちょっと違うことが試せるものとして考えた結果…

じゃーん！さいころー！！笑

box.addEventListener('click' , () => {
       const n = 1 + Math.floor(Math.random() * 6);

       switch (n){
           case 1:
               document.getElementById('result').src ="image/dice1.png";
               p.textContent = `${n}でした！`;
               break;

           case 2:
               document.getElementById('result').src ="image/dice2.png";
               p.textContent = `${n}でした！`;
               break;

           case 3:　以下略～
   

前回はif文で書いたから、今回は確率一定のさいころをswitch文で書いてみた。(無駄にテンプレートリテラルをつかってるのが初心者っぽいと自分で思った。でもちゃんと覚えてたのは偉いと思った←)

さて、これをどうしたら1度しかクリックできないようにできるのか。
うーん…？？

eventListenerを外せばいいのでは？
eventListenerでクリック後の動作をこうしてねーて書いてるんだから、
それぞれの結果からremoveEventListenerすればいいのかも？

switch (n){
           case 1:
               document.getElementById('result').src ="image/dice1.png";
               p.textContent = `${n}でした！`;
               box.removeEventListener()
               break;

待って、box.removeEventListener()この後何に書けばいいの？え？？
結果、書き方がわからず失敗。
そもそもこのチョイス正しいのか不明。間違ってる気がする。

何か、サイコロの目以外のcaseを作る
サイコロの目が6通りだから、そのケース以外の時だけクリックできるみたいな状態にすればいいんだよね…?if文でいったらelseの場合的な？？

・・・？
ダメだ分かんないやｗ

2日間くらい考えた末分からず、心が折れかけたところで教えてもらったreturn文という構文。

「return」を使うと、関数内で処理をした結果を「戻り値」として返すことができます。

ほう。戻り値ね。Progateで引数と一緒に出てきた記憶はある。けど、いまいち理解できてないのよね。笑

ということで、ちょっと調べた結果、JavaScriptの関数、引数と戻り値をわかりやすく解説！超入門編！のイラストが個人的には分かりやすく感じた。

戻り値って諸々の処理がされて出てきたものってことなのか。戻るっていう動作といまいち紐づかない私はまだまだエンジニア脳にはなれないらしい。

さて、return文を書いてみようか。ってあれ、return文は関数内のどこに書けばいいの？一番最後？？

caseの中に入れるとなんか色が薄くなっちゃうからここじゃないんだろうな。

関数の最後に入れたら入れたで、今度53行目のbreakが薄くなってるから、これも違う気がする。(結果的にエラーは出ないけど動作もしなかった)

えー分かんない＼(^o^)／

結局、エンジニアさんにヘルプを出すｗ

「GitHub使ってるなら見えるようにしてもらえればー」と言われ、新しくリポジトリ作成して渡したらなんと、Pull Requestで返してくれて、もうふるえる。GitHubの使い方までセットで教えてもらって、なにこれこんなに至れり尽くせりな環境ある？
世の中には独学でプログラミング勉強して、苦労している人もいるのになんだか申し訳なくなっちゃう。
聞ける、教えてもらえる環境ってとても貴重。うちのエンジニアさんみんな優しくて涙でる。

私みたいなひよっこのリポジトリにForkのマークついてるだけでテンション上がる。笑

  //サイコロの目が0以上だったらその場で終了
 if(dice_value > 0){
   return false;
 }
 dice_value = 1 + Math.floor(Math.random() * 6);

足してもらったコードがコチラ。ふむ、こうやって書くとクリックは1回しか出来なくなるんだなあ。returnの使い方はもう少し勉強しないとダメだね。頑張ろう。

今日のポイント
・関数の処理を中断するにはreturn falseを使う
・引数は元の値、戻り値は関数で処理された結果の値
・GitHub難しいけど、ちょっと楽しくなってきた