JavaScriptの関数を使いこなす

関数の引数と戻り値

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
関数に渡す引数と返される戻り値の定め方をご説明します。
講師:
07:02

字幕

このレッスンでは 関数に渡す値 引数と 逆に関数から返される戻り値について ご説明します 今 Dreamweaver で開いている HTML ドキュメントには script の要素が入れられているだけで まだコードが書かれていません ここに円の面積を求める関数を 定義したいと思います まず面積を求めるには半径が必要ですね 半径 radius という変数にします そしてここにまずは 1 を入れておきましょう そして面積 結果を入れる変数です result として まだ計算してませんので宣言だけです そして関数の定義 関数の定義はキーワード function でスタートします (キーを打つ音) 名前は円の面積を得ますので getCircle と― 面積ですから Area とつけましょう getCircleArea 丸括弧 丸括弧 中括弧始まり 中括弧閉じで とりあえず関数の外枠ができました ここに実際の計算を書いていきます 計算した面積を入れる変数― circleArea としましょう そして面積の計算は まず半径ですね 半径の二乗です 半径 radius コピーして持ってきます の二乗なんですが radius × radius というようにしてもいいですが 実際そのほうが ちょっと処理が速い面はありますが ここは定石通り Math.pow ― 累乗のメソッドですね pow は power の略なんですけど Math.pow ― で radius の と 第一引数の― 二乗 第二引数が何乗と― 指数になります そして今度は 3.14 ですけど パイですね Math.PI で得ることができます 面積が計算できました ではこれを結果を入れる変数に― コピーしまして こちらもコピーしましょう CircleArea の変数の値を 代入します これで処理ができるわけですね 定義ができました 今度は呼び出しです 呼び出しは後にしても 前にしても大丈夫です では getCircleArea の呼び出しを その前に持ってきて セミコロン 結果をブラウザで確認したいので― console.log という― 関数を使って ここで result を確認する という風にしましょう コピーして持ってきます ではいったん保存して― ブラウザでプレビューします 結果はこのウィンドウの中には出てきません でてくるようにするには 開発用のパネルを出します 「表示」>「開発/管理」の 「JavaScript コンソール」― 3.14 半径が一ですからね このように出てきました でもあまりこの関数の決め方は 使い勝手がよくないですね ここを変えてみたいと思います では Dreamweaver に戻りまして― どうしたいかというと 例えば Math.pow に― radius とか何乗 二乗と入れると その結果を計算してくれますよね 同じように 半径をいちいち変数に入れるのではなく 括弧の中に入れて計算してくれるといいな と できます その時には括弧に入れたものを― この括弧の中で やはり変数で受け取らなければいけません ここに変数を定義するんですね この括弧の中に この括弧の中に定義される変数を 引数といいます 引っ張る数ですね 引っ張る数と書いて引数 とするんですが ではこの radius という変数名を ここでも使ってしまいましょう コピーして持ってきます そうすると引数で受け取った値を使って― 変数名は同じですからね Math.pow で二乗が計算されて 円の面積が出て 結果が代入される と さっき 1 で計算したので 10 にしましょう 10 にして― 保存します そして Chrome のほうで確認しましょう JavaScript コンソールが 出た状態になっていますので リロードすればオッケーですね リロードします そうすると 10 の二乗は 100 ですから 3.14 が 314.15 という風になりましたので ちゃんと計算ができていますね もう一声何か欲しいですね ではコンソールは Clear Console でクリアします また この Math.pow という メソッドなんですが 引数を渡して 渡した結果を この関数の値になるわけですね ですから CircleArea に 代入できてしまうわけです Math.PI パイも掛けてますけど この関数自体が値に変わるわけです 値を返すといいます 値を返すようにはできないのだろうか と もしそれができれば こういう風にするのではなく― この var ― スペース result 変数の宣言をここに持ってきてしまって コピーを― こういう風にしてしまう ということですね できないだろうか と できます result に代入するのではなく 先程変数を返すといいました 返すというのは 英語で return といいます まさにそのまま― return と そして返す値をこの後に持ってくればいいので CircleArea; こうすると計算した結果が返されて この関数の値になるわけです 関数の値になるということは その値をこの result に― 代入してしまうことができます では保存して またChrome で 確認しましょう さて Chrome のウィンドウで またリロードします JavaScript コンソールを 見てましょう 314.15 ちゃんと計算されていますね このレッスンでは 関数に渡す引数と 関数から返される戻り値について ご説明しました 引数は関数定義の丸括弧の中に 変数として定めます それから値を返したいときは return というキーワードに― 返したい値の入っている変数を 定めればよいということです

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

2時間22分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。