JavaScriptを勉強しているけどなかなか思うようにコードが書けない…そんな状況が続いていませんか？
まさに今そのとおりになっているフロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。
すごろくに使いそうなループのwhile文とfor文についてまとめましたが制御文は書くことができても中身の
- オブジェクト
- 関数
などが理解できていないので手が止まってしまいました…
そこで手を動かせるようになるためにもオブジェクトについてまとめていきたいます。
初学者なのでレベルがこれより高い方はこの記事は参考にならないかと思われます。
目次
ビルトインオブジェクトとは
ビルトインオブジェクトはJavaScriptであらかじめ使うことができるオブジェクトのこと。
ECMAScriptで標準仕様として規定されているもののようです。
ビルトインオブジェクトの種類
| オブジェクト名 | 内容 |
| Array | 配列を操作 |
| Boolean | 真偽値（論理値）を操作 |
| Date | 日付を操作 |
| Error | エラー処理 |
| Function | 関数操作 |
| JSON | JSONフォーマット |
| Math | 数値演算や定数 |
| Global | プログラム内のどこからでも参照できる |
| Number | 数値 |
| Object | オブジェクトの雛形 |
| RegExp | 正規表現 |
| String | 文字列操作 |
DateやMath、Functionは時計やじゃんけんで写経したときにお世話になりました！
そのほかのオブジェクト名はまだ見たことがないのでいろんなコードを見て何に使われいてるのかを知る必要がありそう…！
だから人のコードを読むのは良いのかな？
話は戻ってビルトインオブジェクトはオブジェクトだからプロパティとメソッドも関与してくると思うので、まとめていきます。
余談：JSONだけ大文字の意味は？
なんでJSONだけ大文字が連なっているのでしょう…？
大文字と小文字の扱いについて意味があるJavaScriptだったので気になります…
JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマット
引用：JSONデータの操作
フォーマットとして大文字で決められているものだから、ルールなのかな。
ビルトインオブジェクトで使うプロパティとメソッド（グローバルオブジェクト）
特殊なオブジェクトの定義でグローバルオブジェクトがありビルトインインプロパティとビルトインメソッドがあるようです。
それぞれまとめていきます。
グローバルオブジェクトについて
JavaScriptのプログラム内のどこからでも参照できる特殊なオブジェクトのこと。
ビルトインプロパティについて
JavaScriptであらかじめ組み込まれているプロパティのこと。
| プロパティ名 | 内容 |
| Infinity | 無限大を示す定数 |
| Nan | 非数を示す定数 |
| undefined | 未定義である定数 |
これらがあるようです。
プロパティは属性で人に例えると名前や性別が当てはまるものなのになるけど、このビルトインプロパティは定数を表している。これも何に使うかコードをみるとわかりそう。
ビルトインメソッドについて
ビルトイン関数と呼ばれるもの。
| 関数名/構文 | |
| decodeURI(str) | 逆変換 |
| decodeURIComponent(str) | 逆変換 |
| encodeURI(str) | URIで特殊な意味を持つ文字をエンコードしない |
| encodeURIComponent(str) | URIで特殊な意味を持つ文字をエンコードする |
| eval(codeStr) | 数式や文字列をJavaScriptの命令で実行 |
| isFinite(num) | 値がeval()で評価できる有限値ならtureでそれ以外がfalse |
| isNaN(value) | 値が数値の場合はfalseでそれ以外がtrue |
| parseFloat(str) | 浮動小数点数に変換 |
| parselnt(str, [radix]) | 指定の進数から整数に変換 |
ん〜イマイチ分からない…
メモ
URI：リソースの所在などを示す識別子のこと。
リソース：パソコンやサーバーそのもの、CPU・メモリの性能、容量、人的資源や予算
decode：逆変換
encode：符号化、記号化、暗号化など
eval：悪意のある第三者に影響を受ける可能性のある文字列
isFinite：最上位関数
isNaN：非数
parseFloat：最上位関数であり、どのオブジェクトのメソッドでもありません
parselnt：MDNになし
他にもサイトを調べたけどよくわからない部分だったので分からないリストで挙げるところだなぁ。
JavaScriptで扱えるビルトインオブジェクト以外のオブジェクトの種類
JavaScriptで扱うことのできるオブジェクトの種類は以下のものがあるようです。
- Webブラウザのオブジェクト
- DOM（ドキュメントオブジェクトモデル）
- ユーザ定義オブジェクト
それでは、まとめていきます。
Webブラウザのオブジェクト
Webブラウザのオブジェクトは各種Webブラウザが提供しているオブジェクトのこと。
メモ
WebブラウザはGoogleChrome、safari、Operaなどのこと
Webブラウザなのでクライアントサイドで私たちがよく見ている画面の部分だから、よく利用しそうなオブジェクトな気がします…！（あくまで私の推測…）
Webブラウザオブジェクトには何があるか調べてみると
- onclick：クリックしたらイベントが発生
- document
などがあったのでこれまで写経してきたものの中にWebブラウザオブジェクトがあったことがわかります！
DOM（ドキュメントオブジェクトモデル）
マークアップ言語のXMLやHTMLなどのツリー構造を操作するための機能のこと。
このDOMを使うことでWeb上のJavaScriptにあるHTMLのすべての要素にアクセスし変更できるようです。
ん〜つまりWebページのコンテンツにアクセス・変更したい場合に必要なものがDOMというAPIだということかな？
メモ
XMLとは拡張可能なマークアップ言語でデータの意味がわかりやすいことや、汎用性が高いこと、共有がしやすいなどの特徴があるようです。
APIは起動しているアプリケーション同士を繋いで機能をシェアすることで便利になる機能のことのようです。
APIはシェアして便利になると一旦は思っておこう。（もっと理解深めた方が良いものな気がするけど一旦…一旦）
DOMって言葉はこれでもかってくらい記事で見るので何度も見たことあるものを使った事があると思います。（知らないだけで…）
- getElementById(value)
- write
これは写経でやっているとよくでてくるものでした！
HTMLからIDを呼び出してJavaScriptに入れて、表示させるなどで使っていたと思われます…！
ユーザ定義オブジェクト
ユーザーが定義するオブジェクト。
おわりに
本を読んでいることと実際にコードで書くところの共通項が見いだせたら先々進めそうな気がするけど、今回のビルトインオブジェクトはよくわからなかったな＞＜
コード例をみると記号がやたら多かったりとしたので、また違う本やサイト、漫画、英語の文献など調べてみたほうが良いかな。
それとも実際にやってぶちあたったところがたまたまビルトインオブジェクトのときの方が必要性高まっているから頭に入るかな？
悩ましい。。。
感想
PDCAサイクルを回すことが現場では必要だったのですがWeb業界ではDDDCAPな気がします。
やって(D)やって(D)それでもやって分からなかったら(D)何が分からないのかチェックして(C)改善して(A)計画して(P)の方が「何をやっているのか」「何が分からないのか」がでてくる。
それでDoしたらまた壁にぶつかって…となるので自分なりにやり方を探していくことが混乱せずに進んでいくのか…だから自走なのか…ふむふむ。
やりながらまた方法を探してさまよいつつ答えを探していこ。（とおいめ）
主に参考文献で使ったものは独学JavaScriptです。いつもお世話になっています。
もりけん塾（@terrace_tech）
Thanks：もりけんさん