gs js 03 03
Summary
TLDRこのビデオスクリプトは、関数の定義方法と活用法について解説しています。関数を使うことでコードの再利用性が高まり、メンテナンス性や信頼性も向上します。引数と戻り値の概念や、関数を使った実例も紹介されていて、関数の重要性がわかります。
Takeaways
- 😀 関数とは、再利用可能な処理をまとめたもので、関数名を呼ぶだけでその処理を実行できる。
- 📚 関数を使うことで、コードの重複を減らし、全体的なコードの短縮と信頼性の向上が期待できる。
- 🔧 基本的な関数の定義方法として、functionキーワードを用いて関数名と処理を定義する。
- 🚀 関数は定義しただけでは実行されず、関数名を呼び出すことで初めて実行される。
- 🎯 引数と戻り値を使うことで、関数の汎用性を高め、より複雑な処理を簡潔に記述できる。
- ✨ 関数を利用することで、特定の処理を一箇所で変更するだけで、複数の場所にその変更が適用されるため、メンテナンスが容易になる。
- 🛠 関数を使う上での基本的なパターンは、処理を関数に包み込み、必要な時にその関数を呼び出すこと。
- 📈 関数を活用することで、コードの再利用性と読みやすさが向上し、開発効率が高まる。
- 👥 引数を使った関数では、関数呼び出し時に指定された値を関数内の処理で利用できる。
- 💡 戻り値を用いることで、関数の処理結果を呼び出し元に返し、その結果を利用することができる。
Q & A
関数とはどのようなものか?
-関数とは、再利用可能な処理をまとめたもので、関数名を呼び出すことでその処理を実行できる。よく使う処理をパッケージ化している。
関数を定義する時のルールは?
-関数を定義する時は必ずfunctionと書き、次に関数名をつけます。その後に括弧を付けることで関数の定義が完成します。中かっこ内に関数の処理を記述します。
関数を呼び出すにはどうするか?
-関数を呼び出すには、定義した関数名と括弧を記述するだけです。そうすることで関数内の処理が実行されます。
関数の引数とは?
-関数に値を渡したい場合、関数の括弧内に変数を置くことができます。これを引数と呼びます。関数呼び出し時に値を渡すことができる。
関数の戻り値とは?
-関数内での処理結果を外部に返す値のこと。returnで値を返すことができる。呼び出し元でその値を受け取ることができる。
なぜ関数を使うのか?
-コードの再利用性が上がる。可読性が高まる。メンテナンスがしやすくなる。などの利点がある。
関数内の変数は関数外で参照できるか?
-いいえ、関数内で宣言した変数は関数外からは参照できない。関数から値を返すことで関数外で受け取ることができる。
関数呼び出し数と引数の数は合わせる必要があるか?
-はい。関数定義時と呼び出し時で引数の数を合わせる必要があります。数が合っていないとエラーになります。
関数に型チェックはできるか?
-はい。TypeScriptを使えば引数と戻り値に型を指定できます。JavaScriptの関数にも型チェックを加えられます。
関数名の命名規則はあるか?
-関数名はできる限りその機能を表す名前にすることが好ましいです。例えばadd、createElementなど動詞を使うことが多いです。
Outlines
😃関数の概要
関数とは再利用可能な処理をまとめたもので、関数名を呼ぶことでその処理を実行できるということです。
😃関数の定義
functionキーワード、関数名、波括弧で囲むというルールがあることがわかります。
😃引数と戻り値
引数を使うことで関数を汎用的に使えるようになること、戻り値を使うことで関数内での計算結果を受け取れるようになることがわかります。
😃引数と戻り値の例
計算処理を関数化し、引数で値を渡し、戻り値で結果を受け取るという流れが理解できました。
😃関数の利点
関数化することで必要な場所で簡単に呼び出して使えるようになるという利点がわかりました。
Mindmap
Keywords
💡関数
💡処理
💡引数
💡戻り値
💡変数
💡定義
💡実行
💡再利用
💡コンソールログ
💡パッケージ化
Highlights
最初の重要なハイライトのテキスト
2番目の注目すべきハイライトのテキスト
Transcripts
はいえー今度はですね function っていうものを覚えて行きたいと思います
ファンク昭和ですね関数っていうものですね
はい
で以上関数経営気というものをですね
覚えていきますけどもまぁ関数とは一つの処理ですね
再び庵可能な処理などをまとめたもので
関数名を呼ぶだけで館せないんですね記述さ処理を実行することができますよという風
に書いています
簡単に言うとよく使うものの処理ですねを
パッケージ化してえっと例えば
そうですねー
まあいくつかの処理をちょっと行くってあげるんですね
一箱で
でそれに名前を付けて例えば a という関数目つけていただきとしたらええという
関数呼ぶだけで中の処理も全部
いうベルトそれをいろんなところで a だけで呼べるようになるのですごいなんです
ね全体的なコードが短くかけたりですね
共通で使える8を処理が増えるので
信頼性が高くなるんですね処理としてのなので関数定義っていうものですねすごい実は
プログラミングで重要な部分を占めてますのでしっかり覚えていきたいとおもいます
まずですね簡単な処理をちょっとこちらに書いておきました
れって str =関数を知らないって言うんですね
まあ今か
ス知らないと思うので一応そういう文章を作って
str に入れますでアラートでは str を受けているので
ピコーンてでて乾燥しのないて出てくるって処理ですねこれを書きます
ではですねこれちょっと練習でやってみましょうか
じゃあ
8このクイズフォルダーの中でですかねここに新しいファイルってやってですね
ファーン空ショーン. html っていうのを作りますでまたですね別にクイズ
フォルダーでなくても結構ですのでこの上の部分ですねとかでもいいので声でえっと何
か新しく
新しいファイルとかで作っていただいても結構です自分が分かっていれば大丈夫です
管理している場所
えっと僕はですねこのクイズホルダー中にこれを作りました
ではですねあと a メイトでまたえっと遺書ビックリマーク
タブで html をつくってですね
ですークリープとを打ってちょっとカニューレましょうか
はいでまずですねコーンすと
で str 1個感想を知らないですよね
音数をシラーないっていう文章を作りますだとう所
でえっとアラートで
str を入力している手法ですね
たった2行ですけどもこれでもアラートでピコーンって出るのはみなさんわかりますよ
ね
じゃあ一応コレですねプラウザで確認してみましょうか
で僕は前と同じバー省のフォルダにますので
ファーン空しょんでしょ大観荘知らないというのが出てきましたでしょ
ちゃんと動いていることが分かりましたでこちらをですね
実は
このように関数にすることができます
でえっと変数定義する時にはレッドとかコーンストって頭に付けますよね
関数は必ず頭にファンクションというものをつけますでこのファンクションって頭に
付けてあるといいですね
ここでくくったものは実行されません一番さ
でしょぜいつ実行されるのかというと例えば来ればですねこれファンクションだよとっ
て次にファンクション名自分の好きなように付けますテスト
括弧括弧としこれがもう関数の意味ですねカコカコと者のでテスト括弧括弧当時って
いうのは自分でつけた名前なんですがこいつ及ばないと実行されませんので
function
音定義しますよと
名前はテイストカッコ角を閉じて名前ですと
でその中の処理はこれですよという風に書きます
でこの状態では実行されませんので下の方を見てください
別なところで読んであげることで初めて実行されるようになるということですね
なのでこれ書かないと実行されませんのでそれもですね
知っておきましょうで
はこれ実際に書いてみましょうね
で越冬を関数作る時はですね
基本的には処理を8慣れないうちはですねえと設計とかするの難しいのでこれよく使う
ねみたいがあったとしたらですよ
ちょっと今は仮想の話架空のハウスなんですがあこれよく使うから関数かしようと思っ
たらこの処理をまず
くくってしまいますこの場で
function でテイスト
この玉約今適当につけてますけどこういうふうに打ちます
で後ろのですねこの
9分
それをちょっと切り取ってこっちに付けます一番薄いですね
なので高校選択して食べてちょっとインゲンと言ってもらってですねここも
ちょっとインデントでこれで
はいでここにカー空をせると声のセットはココであってこの白い箱みたいになっている
のでこれエディターによってちょっと色とかぜみー形になりますけれどもこのように
教えてくれます
ちゃんとお尻があるよという風に教えてくれてますねなんて格好もそうですこういう
ふうに
セットがわかりやすいのでこのようにですねたまに確認すると良いと思いますはい
ってこれで関数ができましたでまずここで確認したいのは本当に実行されないかという
ことですね
じゃあリロードしますはい
はい動きませんねアラートでできてませんので ok です
ではですね選んであげましょう
ペーストと
保存で入っ
でこのようにすると本当に呼ばれましたねなので関数はですね
8自分で作っといて本当に使いたい場所で名前をただ読んであげるたった1行で読める
ようになるのでとても便利です
例えばですが補助
この2行の処理をですねま1回たくさん作ってたら毒教
例えばこれを3回やりたいってなったら毒魚一人ですよね
乾燥知らないっていうのとアラートとなんかまた違う名前と違う名前ってやるとえっと
結構行数かかると思うんでそれが面倒な時には例えば
一つ関数作っていくとたたこれをいろんな場所で選んであげるだけで3回実行できる
ような女と
はい感想を知らない完走者のないです完走者へ3回実行されましたよね
このように一つ吐くとことでいろんなとこで関数名呼ぶだけで簡単にあの処理をですね
できるようになりパスので
例えば自分が作ってなんかこれ前も書いたなと他のページでも作ったのはとかこれ別
などこの処理でも書いたなってなったらもう絶対関数がしたほうがいいですあの圧倒的
にあの使いやすくなりますしメンテナンスもしやすくなります
だってもしこの3つを変えたいとこれ関数だけにしたいんだよねって例えばない
いましたとそしたらここだけ変えてあげれば
声酔う ever これ毎回ここが呼ばれるじゃないですか
これ呼ばれればここは呼ばれますよねなので一箇所直すだけで全部の処理が治るという
ことなんですのでこの共通性というのは非常に大事ですのでファンクションできるもの
はできるだけファンクション定義してあと1秒で呼べるようにしてあげるというのは
非常にいいこと
です
はい
ではですねその簡単な関数をやりました
者ですねちょっともう一個だけやっておきましょうかねえっとじゃあこれを1回とって
もう一個ですね関数作ってちょっと練習しておきましょう
関数作る時はファン空所んと言います
でえっと例えばさああとにしましたアド
で足し算をする関数をちょっと作ってみます
例えばですが
コーンストえっと s s じゃないな
ln ナンバーの縁ますで例えば a クラス b
[音楽]
ですね
でしょ
ちょっとこれまだ早いだ
ってちょっとこれ固定にしマンするとはい
で例えばですねギターギターん
return されなぁと
l としましょうと
でこうやると必ずあーどってやると決まった言葉が表示されるようになります
例えばこれはメインの処理はここなんですよね例えば10+10ハ20でするただ
アラートで表示させようというだけなんですね
じゃあそれを関数かしようとした場合に何が大事かというとタータンにこれで
ラッピングしてあげるだけなんですのでファンクション好きな名前つけて波過去かな
未華子までっていうこの
ラップするだけ
これだけ分かっていれば自分で好きな関数どんどん作れますので
8作ってですね練習していただければと思います
そうすればあと1行で呼べるようになるのでじゃあちょっとやってみましょうねむしょ
まあ2回ちょっと立ち上がると思うんですがカーン数というのと20
あれっ
こだわったの
よいしょ
と
だろうと
低すとてすとあードアど
もう1回しますえっ関数は
しましてきました保存できているんですね20ときました
まーたたにラップするだけですよね書き方だけ覚えてください function
ファンクション名
波括弧から波括弧の間に記述すると処理を
後は処理したい時には1行関数目だけ読んであげるこれだけのルールです
でそれが一番簡単なやり方なんですがもっと汎用性をも
たせて
東本当に何ですかね色んな作り方ができるようにするためにはもう少し知識が必要なん
ですね
それがこちらです墓所
引数と戻り値っていうものを覚えるともうかなり上達というか何ですか中級くらいの
レベルになるんじゃないかと思うんですねこれそんなに難しくないので少し練習して
覚えてほしいんですね
例えばですがこのような書き方 function
アディションという関数見つけましたでそこにあれなんか過去格好と耳の中に入るなと
思いますよねこれは受け取り用の変数を用意しています
1個目カンマで区切って二つ目と用意しています
なので2つ受け取る準備ができているんですねこの関数点入れば
なので関数アディション呼ぶ
時には必ず2つの値を渡すという約束の設計になっているわけです
でこの a と b はどうなっているかと言うと実は中でレッドトータルっていう
変数に対して a + b のたした答え
アコですね a + b ここで受け取ってます例えば a 20が入ったら10 b
20が入ったら銃が入ってきて10+時は20でトータルに20が入ります
2
ここまでが引数のところですねこれが関数に値を渡したい時こういうふうに可変で渡し
たい時にこういうふうに渡すことができますなので呼ぶ時にはこうですね
あディションって呼んだらそこにこうちゃんと2つ私上げますなぜこれが a に入っ
てもう一つが
気に入ります
この時なんですが注意して欲しいのはファンクションアディションで定義してる ap
2つありますよね
これが一つでも二つも三つも四つでもいいんですよただし呼ぶときは全く同じ数ないと
エラーになるということを覚えておいてください
つまりこの場合ここがこれがなかったら
つまり中しかなかったらこっち2つ用意してあるので違いますよね
エラーが起きます今日付けて下さい必ず同じか
そう私上げるということですはいこれは引数の考え方
関数の中にこの実行する時に値を渡して計算させるという方法ですねでもう一つは
リターンというのがあります
これは何かというと関数の中で作った変数は外に持ち出せないんですね
つまりファンクションの中でここで実行しました20入りました
もしこれがなければそのまま消えます
関数は関数の中だけの世界なのでそこでできた変数というのはそのまま消えちゃうん
です
意味ないじゃんと思いますよねそこで出るのが戻り値というリターンというものです
リターンを項で書いてあげるとリターンスペーストータル
ってやるとこの関数を呼び出している所に投げてあげるよっていうものです
return してあげるよと結果を
つまりここに今井8今回のか
聞かた後アディション二重と二重わたっているので10+20中30か三者入ってい
ます
でその30を関数を外に投げるよという書き方がこれですディターンスペース変数
そうするとですねここではたしたものの結果がこっちに戻ってくるようになるので
ここで変数で受け取ってあげるんですにターンを必ず受け取ってあげないといけません
じゃないとあの
関数の中の変数は消えちゃいますから計算結果なくなっちゃうんですね
なのでディターンで外に出してあげたのここで受けるっていう仕組みになります
でそれを後はですね十両自するかはえっと皆さんの処理 if 文に渡すのか何するの
かというのはその作り方なんですが今回は練習なのでそのはコンソールログに渡して
表示までいきたいとおもいます
入ってはですねちょっとここらへんまでやっていきたいと思いますのでさっきの簡単な
ですねファンクションがあったと思います
これをですねもうコヴェントアウトしていただいてコントロールスラッシュまたは
コマンド
スラッシュですねでできますのでやりますっ
あとはちょっとこうしたにちょっと長くいきますけども生き
まして
じゃあファンクション実際に作ってみましょうまずですね関数を定義します
ファーン
悟空ションたい関数定義しますあぁでぃしょん
うんと同じ名前にしました
でここにですねえっと2つ与えを渡したいですなぜなら a に入っているものと b
に入ってものを計算させたいからですね
なのでええまあ別に遭いでも n でも例えば x でも何でも受け取りの変数はここ
で好きなのをつけていいので付けて下さい
今回ね
あのとりあえず何も考えず a と b で受け取るようにします
で操作波括弧ですね波かっこいいでます
でこれも
関数の定義完成ですがと中で何の処理をさせるかですね考えなきゃいけないのでコーデ
へと const にしましょうか
const エーヌ
aaa クラス p としますってこの結果をですね
関数の外に出したいので n
この結果持ってるへの関数を外に投げるようっていう書き方です
これだけ
でもこの回方はこれしかないので引数もらって中でどういうふうに計算またどういう風
に使うか決めてあとはそう結果外に出したければでぃターンで戻してあげるだけこの
考え方だけですねえっねあとああああディ
ションを実行したいんですがこの時には設計でも ab 必要にな
ってますので例えば100トンざー300で計算させようかなと
エディターが来るので戻り値を受け取ってあげなきゃいけないですね
const
えっとんじゃー
ラムという名前で受け取りましょうと
そのこっから関数が呼ばれて100がここに入って300がここに入って百竜300で
400がここに入りますと次の処理で400お外に投げます
ピューンって戻ってきてここに400が入るという仕組みですね
であとはここに console . log
ナームと表示して完成ですと
入ってはですねこれをそのまま chrome でもう一回見ていきましょうどんどん
はい400通ってましたねとこのようにですね
関数を作ってことができますまぁコレですね実はいろんな使い方が出来ましてこの引数
をうまく使うが実は重要なんですね
例えばこれ今回数字にしていますがたとえばここに山崎と文字を打って
第五スケートをしますとそうすると a には山崎 b には大輔が入りますので
文字と文字を足すとくっつくっていうなってますよね
そうそういうところに山崎大介が入って今度山崎大輔がここに入ってきます戻ってき
ますので
山崎大輔が表示されるとじゃあちょっとこれも見てみましょうトントン
はいなりますよねこのように文字をくっつけるための関数としても実はえええ
はい用センサーの使い方してはできたりもします
なので関数がですね作れるようになるといろんな使い方ができるのでめちゃめちゃ便利
にはなってきます
でこれだけだとですね8ちょっとまだ不安なんか使い方が今中国がアランとなると思う
のでえっと
芳文のところですね繰り返し処理のところでえっと方セレクトっていうのを作ったのを
作っています
でそこのえっと講座の所ってへとたといえば兎所
反復処理ですね方セレクトありますか
精霊区とですねえっとアタタタタ
そう select 文で
8ねに作ってましたね2000何年か何年みたいなを作ってたと思うんですがこいつの
このオプションを作るところですね
これを関数にするとめちゃめちゃ使えるようになります
でこれをちょっと
関数で定義しますねどういうことかというとこの関数ほほう文をこの数値
開始のところを変数にするです a
こっちを b にするんですそうすると私た時にスタート地と終了家を自分で決めれる
ので
このセレクトボックスのオプションを自分で作るナチュラル実行する時にね
決め打ちできるわけですねちょっとやってみましょうか
ちょっと意味がちょっとまだわからないと思うのでまずですねこれでえっと
えレイクと
ボックスあ
クーリー8みたいなちょっと長い間数になっちゃいますけれどもこれで有所
でえっとちょっと更新マン数と
でこの時にですねここスタート地の
まず変数目をスタートにしますで end ですね end
あれ
エンドと2つの変数用意しておきますこっちをエンドにしてあげれば
よいしょ
でこれをですね8ギター
りぃたーーー
んですねであとは椅子 tr を元に戻してあげると
でそうすればですねこれが4羽出るところで例えばですが
よいしょ
例えば1970年から3000年まで
では誰箱2970から3000円で実行でいいますよね
でさらにこれをもう一個部署
で今度は12月1月からえっと13にすればいいですかね
そそ順位なのでって月もできてでさらに日数ですね市が続い1日から31日まで1すく
なるので30地まですると
年月日というふうにセレクトボックスが作れるようになりますと
なのでちょっとここでですねセレクトボックスをちょっと増やします
よいしょ
レビューもいちにさんとちょっと用意しましてそこにですね作っていきたいとおもい
ます
まずですね
ここにでしょ str
ちょっとますよねこれ str が
米してあるんですねでしょ
このファンクションの中に用意してあげる必要があるので
で用意しまーすと
str 2
最初の政府とボックスの選挙理由ナチュラルでベアーで作って最後戻ってきますので
ここいいですね
コーンすと
干支そうですねいやーかなこれ年なので念と
て例えば次に行こう
うーんするとまぁウンス=
って後はコーンすとデートか
日付なんですねこういう風にしますと
であとはこっちのほうですね表示する場所1
日の2と3を割き作ってみましたのでこちらにですねちょっとこれ変更になりましたの
でこうですね
マンス
デートと
急にやりますちょっともう一回見直しますねはい
セレクトボックス数をまず3つ今用意していますビューとビューにビューさんという風
にしました
あとは関数化しましたファンクション政府とボックスクリエイトというのにして一キス
start と end てのこの方分のここに入れました
でデッドの str ですね
らの中で越冬外や鉄中に持ってきますね
あとは最後にギターんでコレですね政府とボックス呼ばれたら
中で勝利したものを外に出して受け取るってまた呼ばれたら中で作ったものを外に出し
たのを受け取るというような仕組みにしてますと
じゃあここまで行ったらですねもう1回 a 棟
方 select . ec メールをちょっと見てみたいと思います
なので鳳凰聖霊区と問い詰めどーんと
床の良いですね
1970とか a
1日か1月から12月とか
1日から31までとかですね
このように一つの関数を共有して使うことができるようになりますのでとても便利に
なりますはい
でちょっと最後のほうですねわかりづらかったと思うで何回かちょっとこう
戻しながらですね見ていた
開ければと思いますちょっとこれ系しちゃいますね
はいっ
なのでここらへんですねちょっと何回か繰り返し見ないと分からないと思うんで
ちょっとこれ
應用系ですねここまできたらできるようになるともう完璧かなというところではあり
ますたらすぐにですねそんな
あーだこーだってすぐ考えて作れるようにはならないので少しずつ自分で考えた関数を
作れるようになる練習をですねすればいいと思う
そうすると今のようにですねあー変えればこんななって助けバーって打てるようになり
ますのでそういう練習もですね
していただければと思いますはいえーそれはですね関数の説明は以上になります次の
動画に進んでください
Weitere ähnliche Videos ansehen
5.0 / 5 (0 votes)