関数とメソッドの基本概念
コンピュータープログラミングにおいて、関数およびメソッドは非常に重要な役割を果たします。これらの概念を理解することで、効率的で再利用可能なコードを書けるようになります。関数やメソッドは一種の「箱」として捉えることができ、中に特定の処理方法が書かれ、その処理結果が出力されます。
関数とは？
関数は、特定の入力（引数）を受け取り、それに基づいて何らかの処理を行う計算の「箱」です。例えば、簡単な足し算の関数を考えてみましょう。2つの数字を入れると、その合計が出力される関数です。
関数のイメージ:
+------------+
| 足し算の箱 |
| 入力: 2, 3 |
| 出力: 5 |
+------------+
関数の具体的な記述方法
関数をコードで書くと以下のようになります。
function 足し算(num1, num2) {
return num1 + num2;
}
この関数足し算は、2つの引数を受け取り、その合計を返すというシンプルな処理を行います。
関数の呼び出し
関数を定義しただけでは何も起こりません。関数を実行するには、関数を「呼び出す」必要があります。以下は関数を呼び出す例です。
var 合計 = 足し算(2, 3);
console.log(合計); // 5が表示される
このコードでは、関数足し算が呼び出され、結果として5が合計に格納され、それがコンソールに表示されます。
コードの各部の名称と役割
ここで、関数の構成要素を詳しく見ていきましょう。
- 関数名:
足し算 - 引数:
num1: 最初の数値num2: 2つ目の数値
- 戻り値:
return num1 + num2
以下は、関数の各部分を示すアスキーアート図です。
function 足し算(num1, num2) {
↑ ↑ ↑ ↑
| | | |
関数名 引数 引数 戻り値
}
関数の実行例
次に、具体的な実行例を示します。以下のコードは関数を呼び出して結果を表示するものです。
function 足し算(num1, num2) {
return num1 + num2;
}
var 合計 = 足し算(2, 3);
document.write(合計); // 次の行に5が表示される
このコードでは、ページに5が表示されることになります。関数足し算が呼び出され、2と3が引数として渡され、その合計がdocument.writeによって表示されます。
おわりに
関数を理解することは、プログラミングの基本です。関数を正しく使用することによって、コードの再利用性が高まり、保守性も向上します。これからも様々な関数を作成し、どのように活用するかを学んでいきましょう。
関数の主要ポイント:
+--------------------------------------------+
| 1. 関数は再利用可能なコードの「箱」です。 |
| 2. 引数を受け取り、処理を行い、結果を返します。 |
| 3. 関数を呼び出すことで初めて実行されます。 |
+--------------------------------------------+
このように、関数の基本概念から実際の実行までを理解することが重要です。これが分かれば、さらに複雑なプログラムも理解しやすくなります。
タイムスタンプ
1 00:00:01,310 --> 00:00:12,200 [音楽]
2 00:00:09,400 --> 00:00:15,980 じゃあバウンス行ってみませんか
3 00:00:12,199 --> 00:00:19,849 関数というのがただメソッドとかね
4 00:00:15,980 --> 00:00:22,429 いいますけれどもあのイメージとしては昨日
5 00:00:19,849 --> 00:00:27,839 箱のことです
6 00:00:22,429 --> 00:00:30,969 8文字や数字を入れると成形されて出力されます
7 00:00:27,839 --> 00:00:35,679 どういうことでしょっかこれは
8 00:00:30,969 --> 00:00:40,238 例えば出し山という箱ねまぁ関数を作ります
9 00:00:35,679 --> 00:00:41,679 で2と3というこの数字を入れるところ子が出てくる
10 00:00:40,238 --> 00:00:46,349 っていうね
11 00:00:41,679 --> 00:00:46,350 これこれがまあ関数のイメージです
12 00:00:46,609 --> 00:00:56,070 箱の中身はどうなっているかと言うと実はまあその景山方法が書かれているだけで中に
13 00:00:51,799 --> 00:01:00,169 変数があってその変数同士を達しているみたいなね
14 00:00:56,070 --> 00:01:00,170 そんな作りになっています
15 00:01:00,229 --> 00:01:04,599 それを高度で書くとこんな感じに
16 00:01:05,088 --> 00:01:13,289 23という端っこに入れるって言うのが
17 00:01:09,030 --> 00:01:17,450 まあこの足し算って有効関数がこれがあるんですね
18 00:01:13,290 --> 00:01:19,930 ここがこの足し算っていう名前がついてこの
19 00:01:17,450 --> 00:01:19,930 箱根ん
20 00:01:20,120 --> 00:01:28,260 そうたシーザちょっと書きづらいですけども
21 00:01:24,200 --> 00:01:34,650 でその中に2と3を
22 00:01:28,260 --> 00:01:36,790 入れるということでこれは同コードで表現するかというとこの足し算て箱
23 00:01:34,650 --> 00:01:41,880 名前を子
24 00:01:36,790 --> 00:01:45,520 表記してですね駄目を変えて格好で
25 00:01:41,879 --> 00:01:53,019 ニートさんこんかいてあげるよね
26 00:01:45,519 --> 00:01:55,280 そうこれが関数名ここが関数名でこの格好がで引数とか言います
27 00:01:53,019 --> 00:01:56,859 引数
28 00:01:55,280 --> 00:01:59,030 引数
29 00:01:56,859 --> 00:02:01,090 5数字のスネアとはね
30 00:01:59,030 --> 00:02:03,689 そう
31 00:02:01,090 --> 00:02:04,969 こういう風に書いてあげると
32 00:02:03,689 --> 00:02:07,009 この
33 00:02:04,969 --> 00:02:14,509 ファンクションが
34 00:02:07,010 --> 00:02:15,590 呼び出されるとファンクション足し算っていう心音が呼び出されてこのカッコ内が計算
35 00:02:14,509 --> 00:02:18,219 される
36 00:02:15,590 --> 00:02:18,219 t 理由
37 00:02:19,289 --> 00:02:22,759 関数実行部分がここ
38 00:02:22,818 --> 00:02:27,289 で
39 00:02:23,759 --> 00:02:32,139 関数分さっき言ったような関数部分がここ
40 00:02:27,289 --> 00:02:32,139 本体この箱本体にがここ
41 00:02:32,378 --> 00:02:43,530 でへとドキュメント出力しなさいよ document .ライトでリザルト
42 00:02:38,109 --> 00:02:43,530 リザルツっていうのはここはリザれてっていう変数に入ってますよねこれね
43 00:02:44,289 --> 00:02:58,139 このナム一度ナムに達したないこれをここで受け取って足し算して変数に入れていて
44 00:02:51,158 --> 00:02:58,139 それを document .ライトしなさいと書き出しなさい
45 00:03:00,180 --> 00:03:09,049 各部の名称をちょっとお伝えしたことですね関数名っていうのがバンク者を出したって
46 00:03:06,269 --> 00:03:09,049 いうところであります
47 00:03:09,289 --> 00:03:21,239 でここね引数と言いますここに入る何が入るかは分からないので変数になっています
48 00:03:15,709 --> 00:03:22,430 num 1ナムにっていうのはこの引数を受け取る
49 00:03:21,240 --> 00:03:27,270 変数
50 00:03:22,430 --> 00:03:32,120 ここにはナム12はこのにが入ります
51 00:03:27,270 --> 00:03:34,030 ナムににはアナムニにはこの3 t いう数字が
52 00:03:32,120 --> 00:03:37,719 入ります
53 00:03:34,030 --> 00:03:43,959 でまぁ兵数に入れられているっていう事ね
54 00:03:37,719 --> 00:03:44,800 num 1っていう変数ににが代入されてナムに j ずにさんっていう数値が代入さ
55 00:03:43,959 --> 00:03:50,319 れて
56 00:03:44,800 --> 00:03:53,640 でこの関数の中で使えるようになると
57 00:03:50,318 --> 00:03:53,639 これとこれね
58 00:03:55,139 --> 00:04:02,659 先生なんて今回の事故部分にあたらセットすることで遠征ぞ
59 00:03:59,360 --> 00:04:05,870 編成の値が設置されます
60 00:04:02,659 --> 00:04:07,650 という理由を分かりいただけたでしょうか
61 00:04:05,870 --> 00:04:09,670 ちょっとじゃあ
62 00:04:07,650 --> 00:04:13,740 ねえ
63 00:04:09,669 --> 00:04:13,739 ちょっとじゃあデモンストレーションしてみましょうか
64 00:04:14,750 --> 00:04:19,899 足し算関数をですね作ってみましょうか
65 00:04:18,529 --> 00:04:23,198 えっど
66 00:04:19,899 --> 00:04:26,500 関数を書くとファンクションでね書きます
67 00:04:23,199 --> 00:04:31,980 でその次に名前た c 山
68 00:04:26,500 --> 00:04:34,470 って括弧括弧があって中過去があります
69 00:04:31,980 --> 00:04:39,330 でこの括弧括弧の中には
70 00:04:34,470 --> 00:04:43,680 引数をとるんですけれどもない場合も ok なわけ
71 00:04:39,329 --> 00:04:44,599 例えば document .ライト
72 00:04:43,680 --> 00:04:48,879 で
73 00:04:44,600 --> 00:04:48,879 えーとこれはじゃあ貼ろうよね
74 00:04:48,968 --> 00:04:56,579 変えてみましょうか
75 00:04:50,810 --> 00:05:00,470 ってその時ここに何が消費され何も表示されないですよね
76 00:04:56,579 --> 00:05:05,319 そうなんです8 document .ライトハロー
77 00:05:00,470 --> 00:05:08,820 足し算関数の中にあるので何も表示されないんですね
78 00:05:05,319 --> 00:05:10,699 普通はこれまあ外にある場合は
79 00:05:08,819 --> 00:05:13,339 連ここ
80 00:05:10,699 --> 00:05:16,360 5消費されるじゃないですか
81 00:05:13,339 --> 00:05:18,439 でもお腹にある場合は
82 00:05:16,360 --> 00:05:24,470 表示されないと
83 00:05:18,439 --> 00:05:27,290 っていうことでじゃどうやってこの中を表示させるのかって言うとこの関数をね
84 00:05:24,470 --> 00:05:32,330 呼び出す必要があるんです
85 00:05:27,290 --> 00:05:35,720 でどうやって呼び出すかっていうとここには単純にですねたし the
86 00:05:32,329 --> 00:05:39,408 関数名を書いてで各国学校
87 00:05:35,720 --> 00:05:41,230 最後セミ頃をつけてあげれば
88 00:05:39,408 --> 00:05:43,670 そうすると
89 00:05:41,230 --> 00:05:48,520 ハロー閉じましたね
90 00:05:43,670 --> 00:05:56,110 ここ実行部分自由んですけれども呼び出す部分ね
91 00:05:48,519 --> 00:05:58,459 呼び出す部分をを掻いてあげるとこのファンクションがパンク所足し算が実行されて
92 00:05:56,110 --> 00:06:00,600 その中身が
93 00:05:58,459 --> 00:06:02,389 まあ実行されると
94 00:06:00,600 --> 00:06:05,449 いうわけです
95 00:06:02,389 --> 00:06:09,990 そこで覚えていただきたいのは
96 00:06:05,449 --> 00:06:14,569 呼び出す方と呼び出される方
97 00:06:09,990 --> 00:06:17,910 っていうのがあるということねそうこれが関数です
98 00:06:14,569 --> 00:06:22,689 で引数を取るばいいねっ
99 00:06:17,910 --> 00:06:26,040 がありますね今回2と3という引数を
100 00:06:22,689 --> 00:06:33,189 取ったとしましょうで
101 00:06:26,040 --> 00:06:35,240 ここのカッコの中で受け取るわけでなる位置っていう変数
102 00:06:33,189 --> 00:06:38,980 トナム
103 00:06:35,240 --> 00:06:42,528 ニッチ変数で受け取る
104 00:06:38,980 --> 00:06:45,780 それはを呼び出しの時に
105 00:06:42,528 --> 00:06:52,379 この2と3を渡すって言うんですよね
106 00:06:45,779 --> 00:06:59,779 この呼び出す刺し山関数を呼び出す時にとさんお渡します
107 00:06:52,379 --> 00:07:01,959 にを渡すのはナム11変数に渡してさんはナムにって変数に渡すと
108 00:06:59,779 --> 00:07:03,019 いうわけですね
109 00:07:01,959 --> 00:07:09,909 はい
110 00:07:03,019 --> 00:07:13,209 じゃあこれでえっとをやってみるとこの変数が使えるようになっています
111 00:07:09,910 --> 00:07:15,670 このドキュメントラットとライドねちょうどありますので
112 00:07:13,209 --> 00:07:22,750 num 1と
113 00:07:15,670 --> 00:07:24,639 この変数を使ってみましょうかでじゃあ足し算で水戸さんわたしでこのナム一応
114 00:07:22,750 --> 00:07:26,199 ドキュメントライズ
115 00:07:24,639 --> 00:07:32,288 個人
116 00:07:26,199 --> 00:07:34,780 になりましたねちゃんとにが渡ってきていてこのドキュメントライトで使っていると
117 00:07:32,288 --> 00:07:42,370 いうわけですね
118 00:07:34,779 --> 00:07:49,619 でその中で例えば8足し算をするとナム市とナムにを足し算してあげてドキュメントを
119 00:07:42,370 --> 00:07:50,319 トライするととなるかっていうと孫になってくれるわけですね
120 00:07:49,620 --> 00:07:53,968 で
121 00:07:50,319 --> 00:07:58,019 あのさっきのスライドの例でいうとこの
122 00:07:53,968 --> 00:08:01,168 ここで書かないでさらにここもう一つ
123 00:07:58,019 --> 00:08:08,329 変数をつくってますねバーのリザルト
124 00:08:01,168 --> 00:08:12,029 リザルトで変数を使ってこのリザルトにはこの1+
125 00:08:08,329 --> 00:08:16,949 これが使われていてこの結果を
126 00:08:12,029 --> 00:08:19,979 5人なんですこれリーダーとに関してあげてねここの変数に入れてあげて
127 00:08:16,949 --> 00:08:22,629 で最後のドキュメント.ライトではリザれって
128 00:08:19,980 --> 00:08:24,520 を出力してあげていると
129 00:08:22,629 --> 00:08:27,110 結果としては
130 00:08:24,519 --> 00:08:31,039 同じになるはずね
131 00:08:27,110 --> 00:08:36,350 ここになって同じになるまあこういう書き方
132 00:08:31,040 --> 00:08:41,029 まあどっちでもいいですねこれはね時と場合によるんでえっと
133 00:08:36,350 --> 00:08:44,950 このように変数をいくつか組み合わせて使うこともできる
134 00:08:41,029 --> 00:08:44,949 これも覚えておくといいですね