Javascriptについて
JavaScriptについての学習したことの記述。
学習メモみたいなものです。
Rubyをメインに学習していたので比較しながらの記述もあります。
Javascriptとは
元々は「Webブラウザで複雑な動きを表現するものだった
JavaScriptについて(型やオブジェクトについて)
プリミティブ型とオブジェクトに分けられる。
Rubyのオブジェクトとは定義が異なる。
オベジェクトは「プロパティ」と「メソッド」を持つ箱というイメージ。
JavaSscriptの世界
| プリミティブ型 | オブジェクト |
|---|---|
| 基本の7つの型 | それ以下外の全て |
| String Number Boolean Symbol BigInt Null Undefined |
配列、連想配列、関数など |
| Ruby | JS |
|---|---|
| オブジェクトが持つメソッドはどのクラスに属しているかで決まる | 全てがオブジェクトというわけでなく、オブジェクトの設計図となるclassの概念も昔はなかった |
| クラスがわかるとどんなメソッドが使えるかわかる!! | 型がわかっても使えるメソッドはさまざま!! |
| snake-case | camelCase |
文字列展開"#{}"
|
文字列展開` ${} `バッククォートなので注意 |
| 関数の実行はメソッド名だけでok | 最後に()必要 |
※関数は特別で、それ自体がオブジェクト。
Rubyではメソッドはオブジェクトが持つ性質の一つだったが、JSの世界ではメソッド自体がオブジェクトになる。
=>JSでは関数もオブジェクトなので、変数にそのまま代入できる!!
ここは結構違う特徴??
関数自体を代入しているのか、関数の結果を代入しているのか。
ここをしっかり抑えないと混乱してしまう。
ブロックとスコープについて
ブロック-{}で囲まれたもの
スコープ{}で囲まれたものはその中でしか参照できない
const a = 1;
{
const b = 2;
console.log(b);
console.log(a);
}
// ここからbは参照できなくてエラーになる
console.log(b);
console.log(a);
WebAPIsについて
ブラウザのみで使える。
windowオブジェクト-ブラウザを操作する上でのさまざまな関数やオブジェクトを持っている。
普通はwindowを省略して書かれる。
モダンJavaScriptとは
・仮想DOMを用いるライブラリやフレームワークの使用
・ES6以降の記載の仕方で実装
ECMAscripts-JavaScriptsのコアの仕様。
2015年に大幅アップデートされた。
・npm/yarnなどのパッケージマネジャー
かつてのJSは一つのファイルに全てを書いていた。
改善されると、、、
他のJSファイルを読み込んで使用した。
それによりコードの再利用、共通化ができるようになった。
依然として問題は、読み込み順でエラーが起きる、何がどこから読み込まれたのかもわからない。
次にパッケージマネジャー
内部ではNode.jsが動いている
依存先を勝手に解決してくれる
どこからインストールしたかが明示されている
世界中で公開されているパッケージなどをコマンド一つで使えたり、
チーム内の共有を簡単にしてくれる
・webpackなどのモジュールハンドラーの使用
jsファイルやimageファイル、CSSなどを一つのファイルにまとめてくれる
・Babelなどのトランスパイラの使用
ES6などの記法がブラウザによっては使えない。
古い記法に変換してくれるもの。
※webpackもBabelなども基本的に「開発は効率良く書こう。本番時はうまく変換したいなぁ。」という感じから生まれた??
・SPA(Single Page Application)
ページ遷移ごとのチラつきがなくなり、表示速度も上がるためユーザー体験自体も良くなる。
Discussion