33653


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

[code]

    const inputElement = document.createElement("input");
    
    // 正:
    inputElement.className = "alert-time";
    
    // 誤: TypeError: inputElement.className is not a function
    inputElement.className('alert-time');
    
[/code]


CC BY-SA 3.0
2017-03-30T07:29:43.803
33649
2017-04-01T06:14:21.480
2017-04-01T06:14:21.480
3054
20834
question
javascript
メソッドなのかプロパティなのかすべて覚えるのは非常に困難だと思います。 何か区別する方法はないのでしょうか？


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

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

* * *

また、プログラム上で判断する必要がある場合は、[typeof演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof)を利用することができます。

[code]

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

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


CC BY-SA 3.0
2017-03-30T08:13:26.743
33651
2017-03-30T08:13:26.743
20272
33649
answer


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

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


CC BY-SA 3.0
2017-03-30T08:18:22.987
33652
2017-03-30T08:18:22.987
19716
33649
answer


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

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

追記：  
SublimeText3であれば、[Tern for
Sublime](https://github.com/ternjs/tern_for_sublime)を使えばコード補完できます。  
Package Controlに未対応なので、手動で導入してください。


CC BY-SA 3.0
2017-03-30T08:26:37.913
33653
2017-03-30T17:40:58.787
2017-03-30T17:40:58.787
19925
19925
33649
answer


JavaScriptにおいてメソッドは「関数であるプロパティ」の事です([参考](https://www.ecma-
international.org/ecma-262/7.0/index.html#sec-
method))。メソッドはプロパティの一種であり、プロパティとして扱えます。メソッドで **も**
あるプロパティとメソッドではないプロパティをコードで区別するには関数であるかどうか(`typeof`で`"function"`を返すか、つまり、呼び出し(Call)できるか)を見るしかありません。

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

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

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

[code]

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

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

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

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

[![Visual Studio
Codeで補完される様子](https://i.stack.imgur.com/KhuXW.gif)](https://i.stack.imgur.com/KhuXW.gif)

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

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


CC BY-SA 3.0
2017-03-31T22:51:20.660
33683
2017-04-01T01:33:32.713
2017-04-01T01:33:32.713
7347
7347
33649
answer