前書き
この投稿は筆者がJavaScript学習時に、よく出てくるがいまいちしっかりと理解できていないワードをまとめたメモです。
ついでに同じような問題にぶつかっている人の助けになったら幸いと思いアップしています。
初心者のため間違う可能性や表現が悪い場合があります。ご注意ください。
また、間違った表現などがあった際は指摘してくださると幸いです。
よろしくお願いいたします。
よく出てくるワード
ここではプログラミング学習でよく出てくるワードについて解説していきます。
ものすごく簡易的に説明を書いています。ご了承下さい。
オブジェクト指向
オブジェクト指向とは「もの」に注目した考え方。
どんなものでどう動くのかに注目した考え方のこと。
ものに相当するものがオブジェクト。
オブジェクト
オブジェクト指向の概念の一つ。
全てのものや事柄のことを言います。
コンピュータ上で操作や処理の対象となる何らかの実体のことなど。
まとめると、さまざまな実態の総称のこと。
クラス
設計図のこと。
それがどんなものなのかが書いてある。
クラスはプロパティとメソッドを持っている。
これらは次項で解説する。
プロパティ
データや値のこと。
クラスが持っている初期値や、最初から決まっているものなど。
メソッド
これは関数の一つ。インスタンスが持てるアクションや機能のこと。
インスタンス
設計図を元にして、実際に作ったもの。（クラスを元に作り出したオブジェクトのこと。）
new演算子を使ってインスタンスを作成します。インスタンスの生成と呼ばれたりもする。
new演算子で作成を行うことで、元の設計図をコピーして新しいものとして作成するイメージ。
※オブジェクトとインスタンスは同じ意味で使われることがある。インスタンスを生成することをオブジェクトを生成すると表現されることもある。
クラスに関する参考：https://freesworder.net/class-instance-object/
クラス・インスタンス・オブジェクトの違いがわかりやすく書かれています。
ありがとうございます。
プリミティブ型
変数の型の分類のことです。
使用するプログラミング言語の、最初から用意されている「基本的な」変数の型のこと。
全ての型ではなく、基本的な型であることに注意。
ex)
- int型
- char型
- float型
- double型
など
オーバーフロー
保存可能領域から溢れてしまうこと。
計算処理などを保存する際に、型の保存可能領域よりもオーバーしているときなどに使われる。
ラップアラウンド
処理可能な範囲を超えた際に、最初に戻ること。
8ビットの場合であれば、255の次が0になる仕様のこと。
ラッパーオブジェクト
本来オブジェクトでない値を、オブジェクトで包んで（ラップして）オブジェクトとしての振る舞いを持たせるもの。
let str = "name";
let big = str.toUpperCase();
console.log(big);
// NAME
本来、strはプリミティブ型であるため関数を呼べないが、JavaScriptにおいては関数を呼ぶことができる。
これは、JavaScriptの「ラッパーオブジェクトの自動変換」という機能によるもの。
String型データに対して、オブジェクトといての振る舞いを要求されたため、ラッパーオブジェクトで自動的に包んで、実行されている。
(new String(str)).toUpperCase();
上記のように、string型に対応するオブジェクトであるStringからインスタンスが作成され、関数を呼び出しているということ。
参考：https://qiita.com/sho_U/items/38460b6e9bcd1dae1387
とてもわかりやすかったです。ありがとうございます。
DOM
DOMとは、Document Object Modelの略。
DOMを介して変更を加えたものは、HTMLの内容も変更される。
簡単に言うと、WebページとJavaScriptを繋ぐ架け橋で、この仕組みによりJavaScriptからWebページを操作することができる。
JavaScriptは、HTMLで書かれたものをdocumentオブジェクトとして捉えて処理を行う。
例えば、ID指定されたものを取得したい場合は、以下のようなコードになる。
※returnは全て配列で返ってくることに注意。
また、変数の頭に$がついているのは、これはDOMを使っている変数ですよと示したい時によく使われる方法。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="title">JavaScriptを学ぶ</h1>
<div id="today">
<h2 class="subtitle">本日の授業</h2>
</div>
<script src="./main.js"></script>
</body>
</html>
const $title = document.getElementById("title");
console.log($title);
// <h1 id="title">JavaScriptを学ぶ</h1>
同期処理
書いたプログラムが上から順番に一つずつ処理されるもの。
非同期処理
一つの処理が終わるのを待たずに次の処理を行おうとするもの。
この処理は後に回そうなどといった処理も行う。
console.log(1);
setTimeout(0)(() => {
console.log(2);
}, 0);
console.log(3)
// 1
// 3
// 2
setTimeoutの部分は全ての処理を一度処理してから動かすという仕様になっているためい起こる現象。
要するに、setTimeoutの後の処理が重ければ重いほど、実際に指定したミリ秒よりも遅れて実行されてしまう。超正確には動かないと言うこと。
また、重いかどうかはユーザーの環境に依存するため、コードが重い軽いのとユーザー側の処理が重い軽いと言うのは必ずしも一致するとは限らない。
※豆知識。setTimeoutに10分などの指定をすることもよくない。理由は、ユーザーがスリープ状態になるとタイマーが止まってしまうから。また、for文などの中で使うときは、for文が先に処理されてしまうため、注意が必要。
Ajax通信
Asynchronous JavaScript + XML の略。
ユーザーが何かしらのアクションをしたときに、非同期通信を行いながらHTMLの必要な箇所だけをサーバーから取得して既存のHTMLを書き換える手法。
GoogleMapに使われている技術。
API
Application Programming Interface の略。
ソフトウェア同士を繋ぐ仕様や、機能のこと。
例）
GoogleMapでは、地図をドラッグした時に「この地域の画像をください」とサーバー側にお願いする。それに対しサーバー側は対応する画像をブラウザに返す。
この時の、どのような形で返すのかや、こう言う形でくださいという仕様を決めることをAPIと言う。具体的には、URLに対して何かしらのパラメータをつけて送ると、それに従った値が返ってくるもの。
JavaScriptでは、基本的に「ウェブブラウザ・サーバー間」で使われるAPIがほとんど。
then()とcatch※余談
APIを使う時によく利用される。
APIは認証が必要であったり、相手側のサーバーが落ちていたりするとエラーが発生してしまう。その時、処理が止まらないようにthen()とcatch()が使われる。
then()
処理が正常に終わった時に行う処理。
catch()
処理が正常に終わらなかった時にする処理。
Babel
簡単に言うと、JavaScriptのコードを新しい書き方から古い書き方に変換するツール。
例えば、JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。
SPA
Single Page Applicationの略。
ページ推移なしにHTMLを書き換えることに特化し、JavaScriptの処理を活用してほとんどページ推移せずに済むように作られたWebページのこと。Webページでありながら、アプリのような体験が得られることがメリット。Ajax通信の技術を使うことで実現可能。
例）Web版のTwitter
TypeScript
静的な型付けができるメリットを考え、JavaScriptでも静的に型付けをできるようにしようという思想で生まれたもの。
JavaScriptとは違う言語として定義されているが、ほぼJavaScriptと同じ書き方が可能。
Babelなどの変換ツールを使うことで、作成したものをJavaScriptに変換して使用することができる。
開発現場によってはTypeScriptしか使っていないところもあるほど重宝されている。おかしな挙動を無くすためにも、TypeScriptが採用されることの方が多い。
Vue.js
SPAサイトを構築しやすくするパケージの一つ。
DOM操作が自動化されており、より効率よくフロントエンドの開発が行えるよう考慮されている。
Vue.jsを活用することで、イベント操作時のHTML変更なども、Vueの記述でまとめて書くことができ、JavaScriptよりもより効率的に開発を進めることができる。
テンプレートリテラル
文字列に変数などを組み込む際に使われる。
${}で組み込むことが可能。
var foo = 'ート';
var bar = `テンプレ${foo}リテラル`;
console.log(bar); // テンプレートリテラル
#最後に
今後もわからなかったり、曖昧な言葉があるたび随時更新をしていく予定です。
少しでも参考になれば幸いです。
何かあればTwitterからどうぞ！