gs js 03 03

Summary

このビデオスクリプトは、関数の定義方法と活用法について解説しています。関数を使うことでコードの再利用性が高まり、メンテナンス性や信頼性も向上します。引数と戻り値の概念や、関数を使った実例も紹介されていて、関数の重要性がわかります。

Takeaways

• 😀 関数とは、再利用可能な処理をまとめたもので、関数名を呼ぶだけでその処理を実行できる。
• 📚 関数を使うことで、コードの重複を減らし、全体的なコードの短縮と信頼性の向上が期待できる。
• 🔧 基本的な関数の定義方法として、functionキーワードを用いて関数名と処理を定義する。
• 🚀 関数は定義しただけでは実行されず、関数名を呼び出すことで初めて実行される。
• 🎯 引数と戻り値を使うことで、関数の汎用性を高め、より複雑な処理を簡潔に記述できる。
• ✨ 関数を利用することで、特定の処理を一箇所で変更するだけで、複数の場所にその変更が適用されるため、メンテナンスが容易になる。
• 🛠 関数を使う上での基本的なパターンは、処理を関数に包み込み、必要な時にその関数を呼び出すこと。
• 📈 関数を活用することで、コードの再利用性と読みやすさが向上し、開発効率が高まる。
• 👥 引数を使った関数では、関数呼び出し時に指定された値を関数内の処理で利用できる。
• 💡 戻り値を用いることで、関数の処理結果を呼び出し元に返し、その結果を利用することができる。

Q & A

関数とはどのようなものか?

関数とは、再利用可能な処理をまとめたもので、関数名を呼び出すことでその処理を実行できる。よく使う処理をパッケージ化している。

関数を定義する時のルールは?

関数を定義する時は必ずfunctionと書き、次に関数名をつけます。その後に括弧を付けることで関数の定義が完成します。中かっこ内に関数の処理を記述します。

関数を呼び出すにはどうするか?

関数を呼び出すには、定義した関数名と括弧を記述するだけです。そうすることで関数内の処理が実行されます。

関数の引数とは?

関数に値を渡したい場合、関数の括弧内に変数を置くことができます。これを引数と呼びます。関数呼び出し時に値を渡すことができる。

関数の戻り値とは?

関数内での処理結果を外部に返す値のこと。returnで値を返すことができる。呼び出し元でその値を受け取ることができる。

なぜ関数を使うのか?

コードの再利用性が上がる。可読性が高まる。メンテナンスがしやすくなる。などの利点がある。

関数内の変数は関数外で参照できるか?

いいえ、関数内で宣言した変数は関数外からは参照できない。関数から値を返すことで関数外で受け取ることができる。

関数呼び出し数と引数の数は合わせる必要があるか?

はい。関数定義時と呼び出し時で引数の数を合わせる必要があります。数が合っていないとエラーになります。

関数に型チェックはできるか?

はい。TypeScriptを使えば引数と戻り値に型を指定できます。JavaScriptの関数にも型チェックを加えられます。

関数名の命名規則はあるか?

関数名はできる限りその機能を表す名前にすることが好ましいです。例えばadd、createElementなど動詞を使うことが多いです。

Outlines

00:00

😃関数の概要

関数とは再利用可能な処理をまとめたもので、関数名を呼ぶことでその処理を実行できるということです。

05:02

😃関数の定義

functionキーワード、関数名、波括弧で囲むというルールがあることがわかります。

10:06

😃引数と戻り値

引数を使うことで関数を汎用的に使えるようになること、戻り値を使うことで関数内での計算結果を受け取れるようになることがわかります。

15:07

😃引数と戻り値の例

計算処理を関数化し、引数で値を渡し、戻り値で結果を受け取るという流れが理解できました。

20:15

😃関数の利点

関数化することで必要な場所で簡単に呼び出して使えるようになるという利点がわかりました。

Keywords

💡関数

関数とは、一連の処理をひとまとめにして名前を付けたもので、その名前を呼び出すことで処理を実行できるプログラミングの基本概念です。このビデオでは、関数の基本から、引数や戻り値を使ったより複雑な関数の定義方法までを解説しています。例えば、簡単なアラート表示から始めて、数値の加算処理を行う関数の作成に至るまでのプロセスを通じて、関数の使い方を実践的に説明しています。

💡処理

処理とは、プログラムが特定のタスクを実行するための一連の操作や命令のことを指します。このビデオスクリプトでは、関数内で行われる様々な処理（例えば、文字列の表示、数値の計算など）を例に挙げながら、処理の概念を解説しています。これにより、関数がどのようにして特定の処理をカプセル化し、再利用可能にするかが示されています。

💡引数

引数とは、関数に渡される値やデータのことで、関数の内部処理に影響を与えるために使用されます。ビデオでは、引数を使って関数の振る舞いを柔軟に変更する方法を説明しており、例として加算関数における引数の使い方が紹介されています。これは、関数の再利用性と柔軟性を高める重要な概念です。

💡戻り値

戻り値とは、関数が処理を行った後に呼び出し元に返す結果のことです。ビデオでは、関数から計算結果を戻り値として返し、それを別の変数で受け取る方法を解説しています。これにより、関数の処理結果をプログラムの他の部分で再利用することができます。

💡変数

変数とは、データに名前を付けて保持するための容器です。このビデオでは、関数内外で変数を定義し、関数の引数や戻り値として変数を使う方法を示しています。変数を通じてデータを操作し、関数間でデータを受け渡すプロセスが説明されています。

💡定義

定義とは、関数や変数などのプログラム要素を宣言し、それらの振る舞いや特性を指定するプロセスです。ビデオでは、関数の定義方法とその構文（functionキーワードの使用など）について解説しており、関数をどのようにしてプログラムに組み込むかを説明しています。

💡実行

実行とは、プログラムや関数などのコードをコンピューター上で動かすことを指します。ビデオでは、関数を定義した後にそれを呼び出して実行する方法、および引数を渡して関数を実行するプロセスが示されています。これにより、プログラムがどのように動作するかを理解できます。

💡再利用

再利用とは、一度定義したコード（特に関数）を異なる場所や目的で再び使うことを意味します。ビデオでは、関数を使ってコードの再利用性を高める方法を強調しており、これによりプログラムの効率性が向上し、コードの重複が減少することが説明されています。

💡コンソールログ

コンソールログとは、ブラウザの開発者ツールなどのコンソールにメッセージや変数の内容を出力する手法です。ビデオでは、関数の戻り値をコンソールログを使って表示することで、関数が期待通りに動作しているかを確認する方法を示しています。

💡パッケージ化

パッケージ化とは、プログラムの一部分をモジュール化し、再利用しやすくするプロセスです。ビデオでは、複数の処理を一つの関数にまとめることで、その機能をパッケージ化し、必要な場所で簡単に呼び出せるようにする方法を説明しています。これにより、コードの管理が容易になり、再利用性が高まります。

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までとかですね

このように一つの関数を共有して使うことができるようになりますのでとても便利に

なりますはい

でちょっと最後のほうですねわかりづらかったと思うで何回かちょっとこう

戻しながらですね見ていた

開ければと思いますちょっとこれ系しちゃいますね

はいっ

なのでここらへんですねちょっと何回か繰り返し見ないと分からないと思うんで

ちょっとこれ

應用系ですねここまできたらできるようになるともう完璧かなというところではあり

ますたらすぐにですねそんな

あーだこーだってすぐ考えて作れるようにはならないので少しずつ自分で考えた関数を

作れるようになる練習をですねすればいいと思う

そうすると今のようにですねあー変えればこんななって助けバーって打てるようになり

ますのでそういう練習もですね

していただければと思いますはいえーそれはですね関数の説明は以上になります次の

動画に進んでください