【JavaScript】ドット(.)の意味とは？こう解釈したらコードが読みやすくなった

JavaScriptのコードでよく見かける「ドット(.)」についてコードを読むときにどういう意味なのか？どう解釈したら良いのか？と悩まれた方は多いと思います。

この記事では私の体験談をベースにコードを読む際のドットの解釈について書いていきます。

結論としてはドットを「〜の〜」や「〜が持っている〜」といった日本語に置き換えるとコードが読みやすくなったという話になります。

補足ですが、プログラミング言語の種類によってはドットを加算演算子、つまり足し算の記号として扱うものもあります。この記事ではあくまでJavaScriptのようなドットを加算演算子として扱わないプログラミング言語を想定しています。

• 「ドット(.)」の意味を日本語で解釈するとどうなるのか？
• 「ドット(.)」が出てくるタイミング
• まとめ

「ドット(.)」の意味を日本語で解釈するとどうなるのか？

この記事の冒頭でも述べた通り、ドットは「〜の中の〜」や「〜が持っている〜」といった日本語に置き換えて読むとコードが理解しやすくなります。

以下のコードを例に説明をしていきます。
ちなみに以下のコードの「’.class-name’」のドットについては文字列として扱っており、querySelector()を使うに当たってドット(.)はクラス名、シャープ(#)はID名を扱うといったquerySelector()に関する記述の決まりの話にな理ます。そのため、このドットについては解説を省略します。

let elemetn = document.querySelector('.class-name');

上記は変数elementにクラス名がclass-nameとなっているDOMを代入しているコードです。

このとき、「document」と「querySelector()」の間にドットが使われています。
なんとなくでDOMを取得しているコードだと解釈できるかもしれませんが、これを丁寧に日本語として解釈していきます。

まずdocument。これはHTMLのことを指しています。
次にquerySelector(‘.class-name’)。これはクラス名がclass-nameとなっているDOMを取得するという意味です。

つまり上記のコードは日本語で「HTMLの中のクラス名がclass-nameとなっているDOMを取得する」と解釈することができます。

ドット(.)が出てくるタイミング

ドットが出てくるコードには以下のようなものがあります。

console.log()
document.querySelector()

これらにはある共通点があります。ドットが出てくるタイミングはオブジェクトの中身にアクセスする時です。

例えばlogメソッドはconsoleオブジェクトが持っているメソッドになります。
querySelectorメソッドはdocumentオブジェクトが持っているメソッドになります。

このようにオブジェクトの中身にアクセスするときにドットを使います。

まとめ

今回はドットってどういう意味なのか、どういう解釈をしたらいいのかについて書いていきました。

ドットはオブジェクトの中身にアクセスするときに出てきます。
そのため、コードを読むときに「〜の中の〜」や「〜が持っている〜」と日本語に置き換えると理解しやすくなります。

最後まで読んでいただきありがとうございました！