2017年9月20日シェアツイートシェアブックマークJavaScriptの学習を始めたばかりの方は、関数という言葉が出てきて、数学の勉強と混乱してしまい、困ってしまうことも多いです。今回は、JavaScriptの関数について、書き方、使い方をやさしく解説してみようと思います!今日から使ってみてくださいね。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。関数の作り方(処理を行う関数)関数の作り方(戻り値のある関数)組み込み関数JavaScriptの変数とは?関数を学ぶ前に、まず、計算処理や文字列処理によく使われる変数についても、理解しておきましょう。xやaのように、仮で置いてある入れもののことです。JavaScriptの変数は、数値だけでなく文字も入れることができます。これは変数ですよ!ということをプログラムに理解させるために、宣言という準備が必要になります。書くと、次に書くのは変数の名前ですよ!という意味になります。これを宣言といいます。(セミコロン)*を忘れずに書きましょう。2行目のように、入れておきたい値を最初にセットしておくこともできます。変数を使うと、計算や処理をわかりやすく便利に書くことができますよ。--></script>HTMLファイルに貼り付けて、実行してみましょう。中学や高校で習う関数を思い出しますね。xの値が決まれば、yの値が決まるという式です。出力される値が決まるところは同じですが、functionという名前でひとまとめにされる命令や計算の処理のカタマリのことを、JavaScriptの関数と呼びます。処理をひとまとめにするとは、どういうことでしょうか?例えるならマク◯ナルド。あなたはカウンターで注文をします。すると、厨房でなんやかんややってくれて、カウンターからハンバーガーを受け取ることができます。関数にあてはめると、注文が引数(引数)、マク◯ナルドが関数(Function)、ハンバーガーが戻り値にあたります。関数を一度作れば、レジ打ち・調理・包装など色々やる(=計算などの処理をする)ところを意識せずに、簡単に利用できるという利点があります。調理方法がかわったり材料が変わったり(=計算方法が変わったり)しても、厨房でのオペレーション(=関数の中身の計算など)だけを変更すればよいので、何回も別の箇所で利用している場合にも、コードのメンテナンスが楽になります。そんな便利な関数を使いこなすことはJavaScriptをマスターする上で重要な第一歩です!さっそく次の章で、サンプルを書いてみましょう。CodeCamp提供のWebマスターコース当メディアを運営しているCodeCampではWebマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。実際にWebサービスをを開発するのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。関数の呼び出し方はこちら。関数名(引数);引数というのは、関数に渡してあげる文字や数字のことです。サンプルburgershop(600);こちら、burgershopという関数に、引数600を渡してみました。次は、呼び出される関数を作ってみましょう。関数の作り方(処理を行う関数)関数の書き方はこちら。{処理;}引数がない関数の場合もあります。先ほど呼び出した関数burgershopの中身を見てみましょう。--></script>500円以上渡されたら、ダブルチーズバーガーが貰える関数burgershopを作りました。引数で判別をするために、ifという条件分岐の構文を使っています。関数を作った後、関数を呼び出す文を書いています。引数が600のときは500円以上、400円のときは500円未満のため、実行結果はこのようになります。戻り値;}呼び出した元に何らかの値を返したいときは、returnのあとに戻したい値を書きます。これを、戻り値(もどりち)や返り値(かえりち)と呼びます。--></script>実行結果さきほどの関数に修正を加えて、お釣りを戻り値にする関数を作りました。500円以上の金額を渡すとお釣りが計算され、500円未満だとおつりが0円と表示されます。組み込み関数JavaScriptでは、一般的によく使われる機能があらかじめ関数として用意されています。覚えておくと、とても便利ですよ。指定した文字を探す変数.indexOf(文字列)戻り値:探す文字列が最初に見つかった位置。見つからない場合は-1を返す。文字列変数の中に、探す文字列が何文字目に含まれているかを調べます。ちなみに、文字は先頭から0,1,2・・・と数えますので注意してくださいね。表示するDate().toString();Dateは日付と時間を扱うことのできる命令のあつまりです。toString関数を使うと、日付を文字列として取り出すことができます。確認ダイアログを表示するconfirm("表示文字列");戻り値:true/falseOKとキャンセルのボダンが表示される、確認のダイアログを出すことができます。他にもたくさんの関数や処理が用意されています。読んで欲しいJavaScript書籍。家事も仕事もプログラミングも。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。