【JavaScript入門 #6】初心者がつまづきがちな「関数」を分かりやすく解説しました【ヤフー出身エンジニアの入門プログラミング講座】
Вставка
- Опубліковано 21 лип 2024
- 後編 → • 【JavaScript入門 #7】匿名関数、...
🐙 GitHub（使用したコード）
github.com/lightsound/javascr...
📙 もくじ
0:00 今回の流れを紹介
2:28 関数とは何か？
5:37 今までの講座との繋がりについて
6:51 メソッドの短縮記法を紹介
8:43 関数の一般的な構文を知る
13:34 関数の返り値 (return) がない場合の説明
15:23 Twitterを例に実践的な関数を作成 (return 有)
18:59 Twitterを例に実践的な関数を作成 (return 無)
🚀 今日のひとこと
今日は初心者の関門である「関数」を攻略！
例を多めにして分かりやすく解説しました。
撮影・編集が間に合わなかったので今回は前編だけです。
後編では匿名関数、高階関数、コールバック関数を解説予定。
入門・駆け出しエンジニアの方、
独学でプログラミング学習中の方にオススメです！
🔥 基礎から学ぶ JavaScript 入門
【第1回】フロントエンド開発でJavaScriptが必要な理由を解説
• 【基礎から学ぶ JavaScript 入門 ...
【第2回】Twitterを例にJavaScriptがどんな働きをするのか理解しよう
• 【基礎から学ぶ JavaScript 入門 ...
【第3回】オブジェクト・プロパティ・メソッドについて理解しよう
• 【JavaScript入門 #3】オブジェク...
【第4回】オブジェクトを実際にコードで書いてみよう
• 【JavaScript入門 #4】オブジェク...
【第5回】変数を理解しよう！var, let, constの使い分け！
• 【JavaScript入門 #5】変数を理解...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#JavaScript #JavaScript入門 #JavaScript講座 - Навчання та стиль
リップ塗ったら唇テカテカになりました。
前編・後編で分けたのは全部撮り終えていないからです。今回はとりあえずスピード優先で出しました。
後編では匿名関数、コールバック関数などに触れていきます。関数を攻略しましょう〜！！
めちゃわかりやすかったです！！
UA-cam頑張って下さい！
JavaScript解説系動画で一番親切でボリュームもちょうどいいと思います。これからも
「どんどんやれ」でお願いいたします
待ってましたー！いつもありがとうございます！
今日、数時間ぶっ続けでjavascript入門見てます！
エンジニアになりたくて勉強中ですが、非常に分かりやすくて助かっています👍
1週間くらい前に聞いた時は料理の例えが意味不明だったけど引数とか戻り値とか関数で沢山検索して勉強してこの動画に戻ってきたらものすごく分かりやすい説明をしてくれてる事に気付きました！
これからも頑張って勉強します😊
今回は楽しかったです〜（関数とか演算子を知っていたからかも……）
次回も楽しみです！
待ってました＾＾お疲れ様です‼︎
関数が出てくると頭がごちゃごちゃになってしまうのでこの動画をみて整理していこうと思います！後編も楽しみにしています！
今回もクオリティの高い動画をありがとうございます。
自分としては まだちょっとついていけてない感じですが、
頑張って吸収していきたいと思います。
申請されてたGoogleでの公開、おめでとうございます🎉
めちゃわかりやすかったです。ありがとうございます
最高にわかりやすくて助かります！！
ありがとうございますー😊
分かりやすい！
ありがとうございます！
見ていて内容が、とても分かり易いのと、動画に”しまぶーさん”が右下に映っているのが
正直とても新鮮です。親近感があります。これからも分かり易い動画宜しくお願いいたします。
ありがとうございます！親近感わくと言ってくださるのも嬉しいです🤣
プログラミング学習は結構たいへんなので少しでも助けになれればと思っております。これからも分かりやすい解説動画たくさん出していきますね✌️✨
学校で教わるよりも有意義です、
ありがとうございます！！
JavaScriptを今学んでいますが、結構頭の中がこんがらがっちゃってるので、こういった分かりやすい動画は助かります。
実例を交えた解説がわかりやすかったです！（twitter140文字を再現していたところ）
引数（仮）は関数の定義時に受け取っておく、呼び出し時に渡す（実）、という概念が演習を繰り返さないと初学者には難しいところですね。自分も先日まで理解が曖昧になっていて、仮引数には変数やメソッド同じく予約語を除く任意の文字列を指定でき、その関数内では好きなように扱えるということも、当初ググってもわからなかったのでドットインストールの質疑応答の中で初めて学びました。もちろん自分で演習をしないことには理解を深めるのは難しいですが、しまぶーさんの解説は最初から触れているのでめっちゃ親切だと思います！
本日もありがとうございました。
とても分かりやすいです。ありがとうございます。
いつも上質な講座を発信してくださり、ありがとうございます！！
関数を料理の役割分担と考えるの、めっちゃしっくりきました✨
確かに一人で全部処理する（コードに例えると、1から全部処理を書く）よりは、決まった役割の人が処理してくれた方が早いし効率もいいですね。
デザイナーの自分からすると関数とかクラスとかになってくるとマジで一気に難易度が上がる。
これをより便利なものに自作する人はマジですごいって思う。
料理の例分かりやすいですw
自分の言葉で言うと、何か材料(引数)を与えて作業(関数内の処理)をしてもらってできたもの(結果)をもらう(リターン)と言うことですよね…！
//いつも行ってる西友が税抜き価格表示なので、、
function getPriceWithTax(rate, price){
const num = 1 + (rate/100);
return Math.floor(price*num);
}
console.log(getPriceWithTax(8, 1980)); //軽減税率（2020/05/05現在）
console.log(getPriceWithTax(10, 1980)); //標準税率（2020/05/05現在）
今日の動画みてスッキリしたので、自分で書いてみました！
欲しい返り値が取得出来たので書き方も合ってるんじゃないかと思います... (多分)！
いつも分かりやすい解説ありがとうございます！！
勉強になりました。
他のUA-camrの方々のJavascript入門ビデオなども見ましたが、私にはしまぶーさんのこちらのシリーズが一番わかりやすかったです。きちんと基礎が理解できてないと感じでいたのでこのビデオはとても役に立ちました。ありがとうございます:‐)
オブジェクトのプロパティ=alert それに対する値としてメソッドfunction(){}を捉えてるんですかね。
（初心者なのでわからないですが...）
細かいことにつっかかってたら訳わかんなくなるので置いときます笑
毎度わかりやすく説明ありがとうございます。
しまぶー先生いつもありがとうございます！
超初心者ですが基礎学習中に使っていた.log()等が関数と知って、「これが関数だったのか！」と感動しました。
難しいです…けど、何度も見て理解したいです
すごぃわかりやすいです！！
JavaScriptがすっと、心の中に入ってくるようです😃
わかりやすすぎました！
いつもありがとうございます！！
java Scriptのきほんのきほんという本を一冊読んでみたのですがらちんぷんかんぷん？でしたが、しまぶーのさんのJavaScript動画と合わせて学ぶと、凄く理解できます。しまぶーのさんどうも、ありがとうございます^ ^
とてもわかりやすいので見させてもらってます
Rubyの解説をする予定はありますか？
Rubyは予定はないですねー😭
理由が2点あって1つが私がRubyのプロフェッショナルじゃないので内容が薄くなってしまうこと、2つ目が今後Rubyの需要が少なくなると予想しているからです。今はまだまだ日本では主流ですが・・・あくまで予想です。
やるとしてもReactやVue、TypeScriptが終わってからですね🙌
今回も素敵な動画ありがとうございます！めちゃ見てます。
前回の動画の内容になるのですが、変数の型(let,const等)をつけずに変数定義すると何型？になるのですかね？
スコープという話を理解する必要があって状況によって違いはあるんですが、基本的にはvarを宣言したときと同じ挙動をします。絶対に使ってはいけない構文なので気をつけてくださいませ！
varはスコープ無視で利用できると認識してるので、なんかそこで違いがある感じなんですかね？ちょっとそうゆう観点で調べてみます！
varを使用すると堅牢なシステムが出来ないということがよくわかりました！
ありがとうございます。しまぶーさん、ガチで応援してます📣
HTMLやCSSから順番に拝見しています。やはりjavascriptは今までに比べると、難しくなってきたなと思いました↓
すいません。見逃していたら申し訳ないのですが、17:09あたりに出てくる返り値についてtrue/falseは自分で指定（定義？）するのでしょうか？
料理の例えも、コードのセンスも良いのはジェラシー感じます。
何だろう・・・
初めてプログラムの勉強でワクワクしたw
おおーそう言ってくださると嬉しいです｡･ﾟ･(ﾉ∀`)･ﾟ･｡
シマぶーみてからドットインストールやればよかった。本当に理解という点で遠回りしてた。
MDN読むより、しまぶーさんの解説が分かりやすい。料理の例え、Goodです！腹落ちしました。ありがとうございます！
グッドアナロジーです！笑
関数の宣言はc言語触ってる身としても省略記法の方がありがたい...
returnの意味がわかりません・・・ returnを記載するのは再利用する場合で、記載しないのはそれ以降使わない処理ということですか？
しまぶーさん、いつも動画を見させて頂いています。
ところで質問なのですがしまぶーさんはブログを始める予定はないのでしょうか？というのも、時間がない時に文字で書かれたブログで有れば短時間で内容がわかると思ったからです。長文失礼しました。
ご提案ありがとうございます！ブログはめちゃくちゃやりたいんですけどね😭😭😭
ブログを作るのも記事を書くのもなんだかんだ時間がかかるので、まだ取り組めていない状態です。でもいつかはやる予定ですよ！
20:50～のif文の中身をtext.length
亀レスですが、自分も以前悩んだのでこれから見る人の参考になれば。
isTweetable(text)に書き換えるとif文は、function isTweetable(text){…を実行。
function isTweetable(text){…の中身は、text.length
コンソール画面と分割してコードの方が見にくいので最初は1画面で良くないでしょうか
たしかに・・・それは間違いなく仰るとおりですね。動画も見やすいように工夫していますが、まだまだ改善点はたくさんありますね😅有益なアドバイスをありがとうございます🙏
スクリーンショットした画像をwebに使う際どのような手順で使うことできますか？？
すみません、質問の意図が読み取れませんでした・・・HTMLの話でしたら画像をプロジェクト内においてimgタグでパスを指定して読み込むと使えますよ！
alertTweetable(text)の引数がalertTweetable(”foo”)から来ているのは分かるんですが、isTweetable(text)の引数は一体どこから来ているのでしょうか？
もう解決されているかもですが同じくalertTweetable(”foo”)からきています。
まずalertTweetable(text)に"foo"が代入されます。その次に、(text)の引数が同じなのでisTweetable(text)に"foo"が代入されisTweetable()を実行し値をreturnします。もちろんfooは140以内なのでalertが実行されます。
JavaScript難しいなぁ😩
引数を入力する時やしない時、JavaScriptの書方もよく分からんし何をやってるかは分かるんだけどなぁ。。
JavaScript（というかプログラミング言語全般ですが）難しいですよね💦
ぜひ#9までは見ていただきたいです。そこが１番今までの内容が繋がる部分だと思うので！！🙇♂️
@@shimabu_it
いつも動画ありがとうございます！
この動画も3回は見てるんですが、最後の関数の使い回しのところが、理解できなかったです(≧◇≦)
学習を進めていくことで、『あっ、そういうことか！』と気付いたり、理解できたらなと思ってます。
#9までとは言わず、引き続き視聴させて頂きます！
good!
質問失礼します。
関数を”自分で定義するメソッド”という意味に捉えて良いでしょうか？
クラスで定義されインスタンス経由で呼ばれるものですかね。
つまり関数はいつでもどこでも使えちゃうけどメソッドはクラスという抽象的なものに定義されるのでインスタンス(実体化)させないと使えないよーて感じですかね。
まだクラスを理解していないのであれば今はほぼ同じという認識でもいいかも知れないです。
難しい...
1から見てきましたがまずこの作業自体何の意味があってやっているのでしょうか
聞き逃していたりしたらすみません
console.log(isTweetable("foo"))ではconsole.logが必要なのに、 alertTweetable("foo");ではconsole.logが不要なのはなぜですか？
私もそこ、わかりません。でもやってみたらconsole.log(isTweetable("foo"))こっちでもconsole.logなしで動きました。。省略できるのかな？
かなり前のコメントなのでもう解決されているかもですがconsole.logとは名前の通りコンソール上に値を表示させているだけなのでconsole.logを書かなければプログラムが実行されないわけではないからです。
returnで返すのとconsole.logで出力するのってやってること同じじゃないんですか？
違いますよ！試しにisTweetable(text)のreturnをconsole.log(text.length
追記しますとconsole.logは単純にconsole上に値を表示させるだけのメソッドです。
一方returnは処理の結果を実行元に返しくれます。
つまりこの場合はalertTweetable()のif()に値を返してくれるのでif("foo".length
8:23 これはVScode君にはプロパティに関数を代入しているように見えてしまうようです…
Я ничего не понял, но это было очень интересно
いつも返り値が返り血で脳内変換されて困るw
ゲームのやりすぎでは！😂
"foo"と書く意味はあるのですか？？
fooは何か適当に名前をつけたいけど、特に意味は無いから何でも良いやってときによく使われています。説明のときに用いられることが多いです。プログラミング界隈の慣習ですね！
しまぶーのIT大学 fooが無くても正常に動くことはできるってことですか？
wheresu gituhibu?
🇯🇵🎌🇯🇵🎌工場の労働者として働いていたので自分としては工場がよかったです
意味わからん！
敢えて語句に対して詳しく説明しないのですか？たとえば引数です。何度聞き直しても一言で説明は終わります。もしかして、自分で調べることの重要性の観点から敢えて詳しく説明しないですか。