0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの関数の定義の仕方

Last updated at Posted at 2021-03-17

##はじめに

今回はjavascript関数の定義の方法について書いてみました。
大前提でこの記事はRubyonRailsをある程度理解の上で書いてます。
でも初めての投稿なので参考になるかどうかわかりませんがよろしくお願いします。

##1.javascriptとは?

まずjavascriptの関数の定義の仕方が今回の記事の目的ですが
その前にjavascriptとは何かを簡単に説明していこうと思います。

javascriptはプログラミング言語の一つで
Webアプリ開発現場では、ほとんど使われている人気の言語です。
javascriptを使うことで例をあげると
画面を移動することなく画面の表示を切り替えることができる。
(例:フリマアプリなどでトップページで欲しい商品のカテゴリを選択できる。)
このようにjavascriptを使うと、とても便利な機能がついたアプリケーションを開発できます。

ここではjavascriptの簡単な説明は以上です。

##2.javascriptの関数とは?

javascriptの関数の定義の仕方を理解するにはまず、JavaScriptの関数について知らなければなりません。

さっそくですがjavascriptの関数とはRubyでいうところのメソッドのことを****javascriptでは関数と言います
Rubyでメソッドを定義するときは

 def メソッド名
  
 end

と記述しましたがjavascriptでは

function 関数名(引数){
  
}

というふうにfunctionを使います。

##3.javascriptでの関数の定義

先ほども記述したとうりjavascriptで関数を定義するときはfunctionを使い、functionを使うことでその後の関数を定義することができます。

ちなみにデベロッパーツールという検証ツールを使うことで誰でも簡単にjavascriptのコードを
実行できます。

例:

function fruits(){
  console.log("りんご")
} 
 
fruits()

とコンソールに記述するとこのように

function fruits(){
  console.log("りんご")
}

fruits()

りんご

というふうにりんごと表示されます。


ここからは一つ一つ説明していきます

まずfunctionという関数を定義するために必要なものを記述して
その後に関数fruitsを定義しています。

そしてここで一つ重要なのが関数の隣の**()**この中には引数を定義するのですが
引数を定義していなくても()は記述しなくてはいけません。
記述していないとこのように

function fruits {
  console.log("りんご")
}

fruits()

✖️Uncaught SyntaxError: Unexpected token '{'  VM⚪️⚪️:1

というふうにUncaught SyntaxError: Unexpected token '{' VM136:1のようなエラーが出ます。
このエラーは予期せないトークンが入っていますよというものです。
もうちょっと簡単にいうと変な記号が入っているよーということになります。

〜tokenの後ろに記述されているのが変な記号の部分です
つまり今回は '{' が変な記号となります。

ですが { } はこの中に処理を書くので必要不可欠です。なので
'{'の後ろのVM⚪️⚪️:1という記述をクリックするとエラーが起こっている行(今回は :1となっているので一行目)を教えてくれます。

そして今回は引数を記述する ( ) がないのでこれを記述するとエラーが発生せずりんごが表記されます。

次は { } のなかに書いてある

function fruits(){
  console.log("りんご")
}

fruits()

console.log ですがこれはコンソールにメッセージを出力できる関数です。
自分はRubyでいうところのputsだと思っています。

最後に関数( )と記述することでメッセージを出力できます。
(今回はfruits( )
)

##4.あとがき

今回はjavascriptの関数定義の仕方の一部を紹介させていただきました
まだjavascriptの関数定義には

関数名なしで関数を定義できる無名関数
関数を定義するとすぐに実行される即時関数
より省略した記述にできるアロー関数
があります。これはまた他にて説明したいと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?