JavaScriptの関数を使いこなす

複数の値を返すには

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
関数から複数の値を返すには、戻り値を配列やオブジェクトに納めます。
講師:
07:05

字幕

このレッスンでは 関数から1つだけではなく― 複数の値を返す方法についてご説明をします どんな場合でしょうか 例えば 座標を扱うような時ですね 座標は 二次元であれば x y 三次元であれば 更に z が加わります ではここで 練習用の関数を考えましょう こんな関数です polar という名前はもう決めましたが― 原点から― 距離 そして 角度を渡して― x y 座標に直してください と 距離と角度で座標を示す というのは レーダーと同じですね 北東の位置何キロメートルみたいな 感じですけども キロメートルが先に来て 距離 角度なんですが― それで x y 座標を返してくれる― x y 座標ということは 値が二つあるので― ここが このレッスンのポイントになりますが まずは 関数を書き始めましょう 名前はもう決めましたので polar ですね そして 渡されるのが― 距離 と角度 距離と角度から どうやって座標を計算したいのか と そこはちょっと 数学なんですが 簡単に確認しておきましょう ブラウザで開いたのは― 私のサイト fumiononaka.com です このサイト内検索で― sin cos というと 多分― 一番最初に sin と cos は 何する関数 と― sin と cos についての説明をしている ページですので 興味がある方は― ずらずらと そんなに 長いノートではありませんので― 見ていただくといいと思います ここで知りたいのは この図の部分です これはもう三角関数の定理から 決まっていますが 原点から距離が r ― 角度が θ ― 座標は というと x 座標が r × cos θ y 座標は r × sin θ である と これはもう 定義だと思って頂いて構いません ですからこのまま座標計算をしてあげれば― 距離と角度から x y 座標が求まる ということになります ということで 関数の続きを書きますけれども― 引数は 距離とありますけれども― 三角関数では 半径という風に受け取られるので― radius としましょう 角度は angle ですね そして― x 座標と y 座標を求めよう ということなんですが その前に 角度の部分を 気にしなければいけません ここで角度を どういう風に渡したいかというと― 45 度 とかですね 度数だと 扱いが 渡すほうがしやすいですね ところが Math.sin Math.cos Math クラスの三角関数というのは― 角度を radian という単位で 扱うことになっています ですから radian で渡す という風にしてもいいですが 使い勝手の便利さで 今回は度数で渡すことにしましょう そうすると― radian ― に変換する必要があります といっても もうこれは 比率は決まっているので 調べればわかりますし 覚えてしまうことも簡単なんですけれども まず 円周率 π を掛けます そして割ることの 180 と この比率で― 角度に掛けあわせてあげれば― 度数にかけあわせてあげれば radian の単位になります こうなればもう x y 座標は さっき見たとおりですね radius と radian ― ごっちゃにしがちなので コピーを持ってきます radius 半径掛けることの― Math. ― x は cos です そして radian を入れます コピーしました 後 ここもコピー使っちゃいましょう コピーして y に持ってって― 変わるのは cos が sin になります これで x y 座標が出ましたから 返しましょう return これが問題ですね このレッスンの x y とは書けません どういう風にしたらいいか というと return の後には 構文的には 文法的には値は1つしか渡せません けれども 1つの値として扱われるけども― 複数の 例えば数値を持つことのできる物 というのはあります よく使われるのは 配列です 角括弧で囲んでしまえばいいですね この場合も配列にすることも可能です 但し配列ですと― x 座標といいたい場合には 配列の0番― y が1番ということで 0 と 1 x と y なんかピンと来ないですね どうせなら x と y という風に 渡したい と x が何で y が何 という風にしたい という場合には― オブジェクトで渡せばいいです オブジェクトには プロパティが設定できますので プロパティの x プロパティの y に― それぞれの数値を設定すれば いいことになります x に x ここ注意してくださいね こちら左側は プロパティ名の x です こちらの x は変数ですので 実際にはこの x の中に入っている数値が 設定されます y も同様 これで 1つの値なんですけれども x プロパティと y プロパティを持った オブジェクトが返されます では返された結果を ここで― オブジェクトを入れる変数に 代入しましょう 距離どうしましょうか 45度― 1 度だとしますと 無理数になってしまいますね 2分のルートになってしまいますので 逆にここで― ちょっと複雑な感じするかもしれませんが ルート 2 を渡せば― 距離がルート 2 角度が 45 度というのは x y 座標 1 になるはずです 三角定規の二等辺三角形の あの比率になりますので では 本当にそうなるか コンソールで確認しましょう console.log で― ポイントの x ポイントの y とすると x y 座標が― 1 1 と表示される筈です ファイルを保存して― ブラウザでプレビューです そして― JavaScript コンソールを出しましょう ちょっと三角関数の 恐らく誤差が出ていますけど 1 1 ということで 正しい計算ができました このレッスンは 関数から複数の値を返す という方法についてご説明しました 配列やオブジェクトがあるわけですけれども― 今回の場合にはプロパティを設定できる オブジェクトの形で 値を返しています

JavaScriptの関数を使いこなす

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

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

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

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

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