4

.classNameはメソッドではなく、プロパティなので下記のように引数ではなく代入をするというのはわかったのですが、メソッドなのかプロパティなのかすべて覚えるのは非常に困難だと思います。
何か区別する方法はないのでしょうか?
無限にあるメソッド、プロパティを毎度調べて今回はメソッドだったので()か、プロパティだったので=で代入かと判断するしかないのでしょうか?

const inputElement = document.createElement("input");

// 正:
inputElement.className = "alert-time";

// 誤: TypeError: inputElement.className is not a function
inputElement.className('alert-time');
0

4 件の回答 4

6

JavaScriptにおいてメソッドは「関数であるプロパティ」の事です(参考)。メソッドはプロパティの一種であり、プロパティとして扱えます。メソッドであるプロパティとメソッドではないプロパティをコードで区別するには関数であるかどうか(typeof"function"を返すか、つまり、呼び出し(Call)できるか)を見るしかありません。

基本的にはあるオブジェクトにどんなプロパティやメソッドがあるかを見るには、APIリファレンスを眺めるしかありません。じゃあ、みんなリファレンスの内容を覚えているとか、ということではありません。色々工夫して、APIリファレンスを素早く引けるようにしているだけです。リファレンスを見ないと選択肢は存在しません。

といっても、エディタやIDEで補完してくれたり、説明が出たり、時にはリファレンスへのリンクまで表示されたら便利です。そういう機能は無いのかと言われると、各エディタやIDEであると言えばあるのですが、完璧にはできません。なぜなら、JavaScriptは動的型付き言語であり、変数の型が不明だからです。

下記のような関数を作ろうとしたとします。

function f(e) {
    if (!e.hasAttribute('lang')) {
        e.setAttribute('lang', 'ja');
    }
    e.classList.add('has-lang');
    return e.className;
}

仮引数であるeElementであることを期待していますが、この関数からそれを完全に予測することはできません。f()を呼び出している全てから推測すれば良いと言っても、呼び出し側が未実装だったり、別ファイルだったりした場合があるため、現実的ではありません。そのため、eに対してsetAttribute()というメソッドがあるとか、classNameというプロパティがあるとかを常に完全に補完してくれるようなものは存在しません(前後からある程度予測はしてくれる場合はありますが)。これは、動的型付き言語の欠点の一つでもあります。

では、どうすれば良いのかというと静的型付けにしてしまえば良いのです。有名なのはTypeScriptとFlowでしょう。少なくともTypeScriptの場合、Visual Stuido CodeとAtomで補完候補が出て、プロパティかメソッドかがわかるようになっています(Sublime Textは持っていないのでわかりません)。

TypeScriptをVisual Studio Codeでコーディングしたときの様子

Visual Studio Codeで補完される様子

function f(e: Element) {...eがElementであることを指定しているため、完全な予測が可能であり、補完でもメソッドなのかプロパティなのかがわかるようになっています。

もし、補完を楽にしたい、補完時にメソッドなのかメソッドではないのかをはっきりさせたいというのであれば、JavaScriptではなくTypeScript等の静的型付き言語を検討してください。

6
  • tern_for_sublime-masterがその補完をしてくれるものなのですよね。 ただそれでもある程度しか保管はできないので、 Commented 2017年4月1日 0:58
  • tern_for_sublime-masterがその補完をしてくれるものなのですよね。 ただそれでもある程度しか保管はできないので、 すぐにリファレンスを見れるような方法があり、それで毎度確認するのですね。 ちなみにその方法はどうやるのが、ありますか? リファレンス見れるサブライムのプラグインでも使っているんですかね? Commented 2017年4月1日 1:04
  • Sublime Textは持っていないのでわかりません。
    – raccy
    Commented 2017年4月1日 1:31
  • 「関数であるプロパティ」という観点は重要ですね。prototypeを経由すれば、Hoge.prototype.someMethod = function(){ ...} といったメソッド定義や、Hoge.prototype.someMethod.call(...) といった利用方法にもつながりますし。
    – unarist
    Commented 2017年4月1日 1:39
  • 2
    別画面にブラウザでMDNとかを表示しておく、リファレンスを検索できるツールを使う、リファレンス的な内容の本を手元に置く、など色々ありますが、どれがベストであるというのはありません。何がやりやすいかは人によって異なるからです。主観的な意見しか集まらないと言われるかも知れませんが、どんな方法があるかは別途質問したほうがいいです。
    – raccy
    Commented 2017年4月1日 2:17
3

定義されているClass/method/propertyは確かに膨大な量がありますが、
プログラマがコーディングする分の使用Classはプログラマが意識している分だけですので
各APIの使用方法に関しては都度API Referenceを見るべきかと思います。

が、APIの大体の使用方法が把握済みで型の細かい所だけうろ覚えということであるならば
IDEツールにて補完してもらうのが良いと思います。
VisualStudio/Eclipse/WebStorm...等
色々ありますので
javascript IDE 補完
なんかでググって頂くとよいかと思います。

1
  • 皆さん大変ありがとうございます。 英単語として動詞ならメソッドで() 名詞ならプロパティで= というのは非常に面白い考えですね。 また入力保管を 使う手も確かにあるのですが、 少なくても私のサブライムテキスト3では()や=まで保管してくれません。よって入力保管では判断できないのですが、プラグインでも入れれば可能になりますか?それとも他のエディターに変えるしかないのでしょうか? Commented 2017年3月30日 13:48
2

一般的にメソッド名は動詞か、動詞から始まる命令文になります。対してプロパティは名詞であることが多いです。極端なこと言えば get, set, has, add, remove, create, insert で始まる名前は大体メソッドです。(他に request, send, close など…)
ただし例外もありますし、外部ライブラリの場合はそうでない命名規則であることが多々ありますので、それについては個々に判断が必要です。こればっかりはリファレンスを見るなどの習慣で慣れてください。

また、そういったメソッドやプロパティを正確に覚えなくても良い方法として、静的解析付きコード補完というものがあります。これに対応した開発環境であれば入力時にメソッドやプロパティの仕様情報などの支援を受けられます。
詳細は「JavaScript コード補完」で検索してみてください。

追記:
SublimeText3であれば、Tern for Sublimeを使えばコード補完できます。
Package Controlに未対応なので、手動で導入してください。

5
  • 皆さん大変ありがとうございます。 英単語として動詞ならメソッドで() 名詞ならプロパティで= というのは非常に面白い考えですね。 また入力保管を 使う手も確かにあるのですが、 少なくても私のサブライムテキスト3では()や=まで保管してくれません。よって入力保管では判断できないのですが、プラグインでも入れれば可能になりますか?それとも他のエディターに変えるしかないのでしょうか? Commented 2017年3月30日 13:43
  • 最後の質問文は、あなたの質問を編集して書き加えるようにしてください。その回答については追記しましたので確認してみてください。
    – SabaMotto
    Commented 2017年3月30日 17:53
  • 共通した返信は自分のコメント欄に行えば回答者全員に通知されるのですね Commented 2017年3月31日 2:47
  • MACの情報しか見つからないのですが、windows10だと下記のパスにtern_for_sublime-masterフォルダを入れてインストールをnpmで行うのでしょうか? liginc.co.jp/312755 C:\Users\user\AppData\Roaming\Sublime Text 3\package gulpを使っているのでnode自体は入っていますが、 windows10だと C:\Users\user\AppData\Roaming\Sublime Text 3\package\tern_for_sublime-master をカレントディレクトリとしてどんなコマンドを打てばよいのでしょうか? Commented 2017年3月31日 2:47
  • 1
    ST3のコード補完を導入する件は質問の趣旨が変わっていますので新しく質問を立てたほうが良いかと思います。ちなみに私はWin環境がありませんので、導入に関しては回答できません…。
    – SabaMotto
    Commented 2017年3月31日 13:59
1

JavaScriptに限らず、扱う対象がどういったものなのかは常に考える必要があります。

例えばcreateElement()で生成されるものはMDNのドキュメントを見るとElementオブジェクトであることがわかると思います。
Elementオブジェクトのプロパティに何があるかはドキュメントに記載されていますし、メソッドも記載されています。
これらのドキュメントを確認する癖をつけておいたほうが良いでしょう。
慣れてくればよく利用するものは自然に覚えますし、わからないものはドキュメントを確認すれば良いのです。


また、プログラム上で判断する必要がある場合は、typeof演算子を利用することができます。

if (typeof Math.sin === 'function') {
    // Math.sinはfunctionオブジェクトです
}

jQueryやUnderscore(lodash)などのライブラリを使用されているのであればjQuery.isFunction()_.isFunctionのように判定用のメソッドが用意されています。

1
  • 皆さん大変ありがとうございます。 英単語として動詞ならメソッドで() 名詞ならプロパティで= というのは非常に面白い考えですね。 また入力保管を 使う手も確かにあるのですが、 少なくても私のサブライムテキスト3では()や=まで保管してくれません。よって入力保管では判断できないのですが、プラグインでも入れれば可能になりますか?それとも他のエディターに変えるしかないのでしょうか? Commented 2017年3月30日 13:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。