質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

次のようなメソッドの記述方法について xxxx: function(){xxxx};

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 908

qaz3330

score 105

javascriptでメソッドを定義するとき、私はいつも以下のurlにあるような形式で記述しております。
https://codezine.jp/article/detail/221

function myFunc(arg)
{
    alert(arg);
}

myFunc("hoge");    // hoge と表示される。

しかし、最近、以下のような記述の仕方で、メソッドを定義しているソースを見かけます。
こちらの方が綺麗だなと思ったのですが、こういう記述っていつごろからこうなったのでしょうか?

xxxx: function(){
  xxxxxx;
};

こういう記述の仕方について言及されているwebページを探していたのですが、見当たらず質問させて頂きました。

バージョンやフレームワークによって使えない場合があるのかどうかを調べたく、
そのために、こういう記法の検索キーワードを抑えないとと思いした。

「javascript メソッド」とかでは、前者の記述の仕方の記事ばかりで困っております。

宜しくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

JavaScript の関数は、関数オブジェクトです。

function myFunc(arg) {
  ...
}


とやると、この関数を宣言しているスコープに myFunc という名前でこの関数オブジェクトにアクセスできるようになります。

一方で、関数式というものがあり、次のようにすることで関数オブジェクトを生成できます。

function(arg) {
  ...
}

このままでは(即時実行の場合やコールバック関数として登録する場合を除き)使えないので、変数に代入したりします。

var myFunc2 = function(arg) {
  ...
}
myFunc2(hoge); // のように呼び出せる

関数オブジェクトは他のオブジェクトと同様、配列の要素にしたり、ハッシュの要素にしたりすることもできます。

var myFuncList = [ function(arg) { console.log(arg); }, function(arg) { console.log(arg + '!!'); } ];
var myFuncHash = {
  first: function(arg) { console.log('FIRST:' + arg); },
  second: function(arg) { console.log('SECOND:' + arg); } 

};

myFuncList[1]('hoge'); // として実行できる
myFuncHash.first('hoge'); // として実行できる

qaz3330 さんが目にした、というのはこの最後のような使い方をしているところでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

ちょっと補足的に…

メソッドは「オブジェクトに関連付けられた関数」です。

例題として提示されているコード

function myFunc(arg)
{
    alert(arg);
}

myFunc("hoge");    // hoge と表示される。


1つ目のこれは「関数」であり、メソッドではありません。

そして、二つ目

xxxx: function(){
  xxxxxx;
};


は、本来

var foo = {
   bar: function(){
     xxxxxx;
  },
  baz: function(parm){
    //別の処理
  }
};

foo.bar();
foo.baz(parm);


となっているはずではないでしょうか?
このfooというオブジェクトの中で、プロパティとして宣言されている関数bar,bazが「メソッド」です。
(※オブジェクトリテラルのプロパティとして関連付けられた関数)

メソッドの定義
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods

記述法、使い分けというよりは

関数型でコードを記述すると前者、
オブジェクト指向でコードを記述すると後者になる

といった感じです。
どちらの記述にもメリット、デメリットがあり、そのプロジェクトの規模や環境によって
どちらが適しているかも変わってきます。

「関数型プログラミング オブジェクト指向プログラミング」で検索してみると、もう少し詳しく分かるかもしれません(ただ、他の言語のものが多々見つかるかもですが)

バージョンやフレームワークによって使えない場合があるのかどうか

特にありません。
ただ、オブジェクト指向でのコーディングは慣れるまで、ちょっと難しいと感じるかも…というのが個人的な感覚です。


追記
自分で書いておきながら、逆に混乱を招く回答だったかも…と思い、ところどころ変えました。。

「関数」と「オブジェクト」という言葉も混乱を招きやすいので、
ちょっと簡単に注釈を加えておきます。

unauさんがおっしゃっている通り「JavaScript の関数は、関数オブジェクトです」これは正しいことで
JavaScriptのデータは数値、文字列、論理値、null、undefined(+ES6からのSymbol)以外すべて
オブジェクトなのですが、その中で

  • 「オブジェクト」は値を収める名前付きコンテナ
  • 「関数」はアプリケーションを実行可能にする手続き
  • メソッドは「オブジェクトに関連付けられた関数」

として考えるのが妥当かと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

メソッド形式のコードが部分的で合っているか自信がないのですが、デザインパターンの質問なのでしょうか。
違っている場合はコードの全体像を教えてください。
出されたコードからはオブジェクトのプロパティに関数を定義している事は読み取れますが、それ以上の事が読み取れませんでした。

 モジュールパターン(Module Pattern)

var animal = (function () {
  function catCry () { return 'nya'; }
  var type = 'cat';

  return {
    name: 'mike',
    type: type,
    cry: function () {
      switch (this.type) {
        case 'cat':
          return catCry();
        case 'dog':
          return 'bow-wow';
      }
      return 'unknown';
    }
  };
}());

console.log(animal.cry()); // "nya"
animal.type = 'dog';
console.log(animal.cry()); // "bow-wow"

 コンストラクタパターン(Constructor Pattern)

function Animal (type, name) {
  this.type = arguments.length > 0 ? String(type) : 'cat';
  this.name = arguments.length > 1 ? String(name) : 'mike';
}

Animal.prototype = {
  cry: function cry () {
    switch (this.type) {
      case 'cat':
        return 'nya';
      case 'dog':
        return 'bow-wow';
    }
    return 'unknown';
  },
  className: 'Animal'
};

/**
 * Object.defineProperties() を使えば descriptor も指定できます。
 */
/*
Object.defineProperties(Animal.prototype, {
  cry: {value: function cry () {
    switch (this.type) {
      case 'cat':
        return 'nya';
      case 'dog':
        return 'bow-wow';
    }
    return 'unknown';
  }},
  className: {value: 'Animal'}
});
*/

var cat = new Animal;
console.log(cat);           // {type: "cat", name: "mike"}
console.log(cat.className); // "Animal"
console.log(cat.cry());     // "nya"

var dog = new Animal('dog', 'taro');
console.log(dog);           // {type: "dog", name: "taro"}
console.log(dog.className); // "Animal"
console.log(dog.cry());     // "bow-wow"

 用途

どちらのパターンもオブジェクト指向的にプロトタイプ(いわゆるクラス)を宣言する場合に用います。
質問文中の function myFunc () {} は静的関数を宣言していますね。
クラス的な概念の中に含めて設計できるならコンストラクタパターンを使い、単機能であれば静的関数を使う、という使い分けになると思います。
モジュールパターンはインスタンスが一つだけなので汎用性は落ちます。

Re: qaz3330 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。