【ISSUE】初学者がつまずくJavaScript
2024年12月23日 22:38
こんにちは。ばーんです
今回は前回行ったfizzbuzzゲームとズンドコキヨシを実践した感想を纏めていきます。
自身のJSレベルがProgateを終えたところなので、かなり苦戦しながら進めました;;
特に自身の経験でつまずいたところを解説していきたいと思います!
それではいってみましょー!^o^/
(fizzbuzzの記事はこちら。ズンドコキヨシの記事はこちら)
#はじめに
今回つまずいた6人衆はこちらっ!
「アロー関数、戻り値、引数、配列、オブジェクト指向、テストコード」
解説する(できる)のは前の4つです。あとの2つは概念程度しか理解できていないので、おいおい試して分かり次第記事にしたいと思います。
正直前の4つはProgateで学習してる時も「これやばそうだな…」という感じがむんむん出てたんですよね…
多分、これが理解できん!jQuery面白い^q^ っていう人は多いんじゃないかと。
大丈夫です。JSも面白いです(今のことろ…)
##アロー関数
わりと悪の現況だと思ってます(身勝手な恨み辛み)
アロー関数単品なら大丈夫なんなんですが、ここから派生する省略系がやばいです(語彙力も)
アロー関数の省略について分かり易い記事があったので**こちら**を是非読んでみてください!
アロー関数自体はよく見かけるので(というかネットに落ちてるやつでfunctionの方が余り見ない)、覚えていた方がいいかと。
省略しすぎは「コードゴルフ」などでよく見かけますが、これは「こういう表記でもできるのか」程度で良いと思います。
※コードゴルフ→プログラミングコンテストの1種。コードをどれだけ短く表記できるか?を競い可読性や保守性などは考慮しない
やっぱり一番いいのは慣れることかなぁと思います。コードを書いて。
自分が動かしたいコードを書きます。簡単で良いので。
そのfunctionを => に変えて実行してみましょう!
上も下も同じ意味ですね。
しかし、自分も書いていて疑問が湧いてきました。
なんでこんなめんどくさい表記すんの??
と思って調べて出てきたのがこちら
こういう歴史的な背景を知るのはいいことですね!
悩んだらfunctionに置き換えれば良いだけなので、ガンガン使っていきましょー。すぐ慣れます。
##戻り値
これが正直分かりませんでした。
そして、今もあやふやなので調べてきました;;
これはあれですね。関数と一緒にご説明した方がいいですね(調べてから気付いた)。
調べ方的には「JS 戻り値 とは」でMDNを読むと
**「関数を実行した際に返される値」**とありました。
ちなみに関数ってなんや?と思って調べたのですが、ネストが深すぎて惨敗してきました…
(純日本人の僕が、日本語の文を読んで理解できなかった。 な ぜ だ。 )
###関数と戻り値
ここのポイントは2つです。
①関数の定義と関数の実行は別物
②戻り値や返す がややこしい。出力するの方が日本語的にはリンクします
1つずつ説明していきます。
####①関数の定義と関数の実行は別物
これどういうことかと言うと…
これって実行すると「hello world」って実行される気しませんか?僕はむちゃくちゃしてました^^
ちなみに実行結果は…
※一応補足しておくと下から2行目の node zundoko~はこのプログラムを実行するものです。
僕の想像であれば実行結果が出ているはずなのですが…
それもそのはず。これは関数を定義しただけです。
(これが理解できてるようで中々理解できていなかった…)
関数の実行はこの場合
js
function firstComment(){
console.log("hello world");
}
firstComment();
js
const fruit = ["apple" , "banana" , "orange"];
console.log(fruit[0]);
js
// calculatorという関数を定義しています。randomという引数を返します
const calculator = (random) => {
return random;
}
// zundokoという変数に「ずん」「どこ」というデータを格納しています(配列)
const zundoko = ["ずん" , "どこ"];
// 0か1をランダムで出力します。この値はcalculatorに引き渡されます
var random = Math.floor( Math.random() * 2 );
// 0=ずん、1=どこなのでこれで「ずん」「どこ」のどちらかが出力されます
console.log(zundoko[random]);
といった形で使用しました!*(コメントいただき編集しました!ありがとうございます)*
他にも配列の中を追加したり、削除したり、比較したりと色々できます!
##さいごに
いかがでしたでしょうか?
今回は自分がつまずいて、挑戦して理解が深まった部分を記事にしました。
やはり何か目標を持って作ることは大事ですね。
少しでも初学者の方のお役に立てれば幸いです。
>自分で書いていても「違うかな?」「あってるかな?」と思いながら書いていきました。
違うよーというものがあれば遠慮なく教えていただけると助かりますm_ _m
ばーん。
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。