この動画では、JavaScriptの関数について説明します。文字の書き起こし、ソースコードも完全無料です。サイトでの登録なども一切不要です。概要欄の下部にサイトURLあります。
▼目次
0:26 関数とは
1:17 関数の定義と実行
2:55 引数なしの関数
4:16 引数ありの関数
6:22 戻り値のある関数
6:45 複数の引数がある関数
8:03 確認問題
▼関連動画
【JavaScript超入門コース】01.コース紹介( • 【JavaScript超入門コース】01.コース紹介|初心者にわかりやすい... )
【JavaScript超入門コース】02.JavaScriptとは ( • 【JavaScript超入門コース】02.JavaScriptとは?|Ja... )
【JavaScript超入門コース】03.環境構築(for Mac) ( • 【JavaScript超入門コース】03.環境構築 for Mac|プログ... )
【JavaScript超入門コース】03.環境構築(for Windows) ( • 【JavaScript超入門コース】03.環境構築 for Windows... )
【JavaScript超入門コース】04.プログラムの基本構造 ( • 【JavaScript超入門コース】04.プログラムの3つの基本構造|プロ... )
【JavaScript超入門コース】05.実行 ( • 【JavaScript超入門コース】05.プログラム実行方法 |プログラム... )
【JavaScript超入門コース】06.変数 ( • 【JavaScript超入門コース】06.変数 |変数は、例えるなら「箱」... )
【JavaScript超入門コース】07.データ型 ( • 【JavaScript超入門コース】07.データ型 |変数に入れるデータの... )
【JavaScript超入門コース】08.配列 ( • 【JavaScript超入門コース】08.配列|変数を箱。配列をロッカーに... )
【JavaScript超入門コース】09.演算子 ( • 【JavaScript 超入門コース】09.演算子|足し算や引き算、2つの... )
【JavaScript超入門コース】10.条件分岐 ( • 【JavaScript超入門コース】10.条件分岐|条件にあてはまればAと... )
【JavaScript超入門コース】11.繰り返し ( • 【JavaScript超入門コース】11.繰り返し|同じ処理を何度も実行で... )
【JavaScript超入門コース】12.関数 ( • 【JavaScript超入門コース】12.関数 |関数を料理ロボットに例え... )
【JavaScript超入門コース】13.クラス ( • 【JavaScript超入門コース】13.クラス|クラスとは、「データ」と... )
【JavaScript超入門コース】14.実践 ( • 【JavaScript超入門コース】14.実践|すべて理解できればJava... )
【JavaScript超入門コース】15.総集編( • JavaScript超入門コース 合併版【JavaScriptの超基本的な... )
▼各超入門コース 合併版(約1時間)
【Python超入門コース】( • Python超入門コース 合併版|Pythonの超基本的な部分をたった1時... )
【JavaScript超入門コース】( • JavaScript超入門コース 合併版【JavaScriptの超基本的な... )
【Java超入門コース】( • Java超入門コース 合併版【Javaの超基本的な部分をたった1時間で学べ... )
【PHP超入門コース】( • PHPのプログラミング初心者向けの超入門講座|たった1時間で学べる【文字書... )
【Go超入門コース】( • 【たった1時間で学べる】Go言語のプログラミング初心者向けの超入門講座【文... )
【Ruby超入門コース】( • 【たった1時間で学べる】Rubyのプログラミング初心者向けの超入門講座【文... )
【Kotlin超入門コース】( • 【たった1時間で学べる】Kotlinのプログラミング初心者向けの超入門講座... )
▼自己紹介
現在:フリーランス(マーケティング関連の人工知能開発、データ分析や業務自動化など)
前職:リクルート
▼SNS
Twitter : https://twitter.com/kino_code/likes
Facebook : https://www.facebook.com/%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%BC%E3%83%89-105693727500005/
Website : https://kino-code.com/
▼文字書き起こし
関数とは?
まず、関数について説明します。
関数とは、いろいろな「処理」をまとめて1つにしたものです。
なぜ関数があるのでしょうか?
料理で例えてみます。
例えば、いつも作るカレーがあるとします。
そのレシピを料理ロボットに記憶してもらいます。
またカレーが食べたくなったときに、
ボタン1つで作れる。
しかも、その料理ロボットは、自分も使えるし、家族も使える。
その料理ロボットが関数なのです。
関数の便利なところは色々あるのですが、3つあげてみます。
同じものを2回書く必要がない
同じものを他の場面で使える
関数の中のコードを理解していなくても他の人も使うことができる
といった便利な点です。
関数を作ることを「関数を定義する」といいます。
JavaScriptでの関数の定義方法についてみていきましょう。
関数の定義方法
func 関数名( ) {
実行する処理
}
JavaScriptでは関数の定義にfunctionを使います。
functionの後に関数につける名前を書き、丸括弧を書きます。
関数に引数を渡したい場合は、丸括弧のなかに引数名を書きます。
引数は、何個でも渡すことができるので、必要な分だけカンマで区切って入れることができます。
最後に{ }波括弧を書いて、波括弧のなかに実行する処理を書きます。
関数の宣言と実行
それでは、実際に、コードを書いてみましょう。
function say_hello() {
console.log("Hello World");
}
say_hello();
文字列の「Hello World」を表示する関数を作成していきましょう。
まずは function、そのあとに関数名を書きましょう。
関数名はメッセージを表示する意味を持つ「say_hello」を書きます。
今回、引数はないので丸括弧のみを書きます。
波括弧を書いて、実行する処理を書きます。
これで関数を定義することができました。
関数を実行するには、関数名、丸括弧を記述することができます。
関数名の「say_hello」に引数なしの丸括弧。これで「Hello World」が表示されるはずです。
実行してみましょう。
「Hello World」を表示することができました。
function say_hello() {
console.log("Hello World");
}
say_hello();
say_hello();
say_hello();
定義した関数は何度でも呼び出すことができます。
3回、say_helloを記述しましょう。
「Hello World」は3回表示されるはずです。
実行してみましょう。
「Hello World」を3回表示することができました。
関数式
関数式では変数名、イコール、function、そのあとに関数名を書きます。
そのあとに、丸括弧を書き、波括弧。波括弧の中に、実行する処理を書きます。
波括弧の後に「;」(セミコロン)が必要なので、注意しましょう。
あいさつを表示する関数式を、コードを書いて作ってみましょう。
var hello= function say_hello() {
console.log("Good Morning");
};
hello();
変数名はあいさつという意味の「hello」とします。
関数名は「say_hello」としましょう。
functionのあとに関数名、丸括弧。丸括弧の中には引数を書くことができます。
波括弧を書いて、実行する処理を書きます。表示させる文字列は「Good Morning」としましょう。
波括弧の後に「;」(セミコロン)を書きます。
関数式を実行するときは、変数名、丸括弧を書きます。
変数名の「hello」に丸括弧を書きます。
実行してみましょう。「Good Morning」が表示されました。
var hello = function() {
console.log("Good Morning");
};
hello();
関数式は関数名を省略することができます。
関数名の「say_hello」を省略しましょう。
実行してみましょう。
関数名を省略してもエラーにならず表示することができました。
※続きは、文字書き起こしブログで
▼文字書き起こし&ソースコードは下記ブログ
https://kino-code.com/course-javascript12-function/
▼タグ
#JavaScript初心者 #プログラミング入門 #関数