JavaScript概念

JavaScriptの概念的な用語を簡単にまとめてみました。

DOM

• DOMとは「Document Object Model」の略で、HTMLを解釈してツリー構造で表したもの。
• JavaScriptはDOMを操作することでHTMLの見た目を変えている。
• DOMはディベロッパーツールから見ることができる。
• 素のJavaScriptやjQueryではDOMを直接操作している。

仮想DOM

• JavaScriptのオブジェクトで仮想的に作られたDOMのこと。
• DOMを直接操作するとレンダリングコストやコードが複雑化してしまうが仮想DOMはそれを解決してくれる。
• 仮想DOMはいきなりDOMを操作せずにJS上で仮想DOMを操作し、差分を出してからDOMに反映している。

npm/yarn

• 従来のパッケージマネージャーでは、1つのJSファイルに全ての処理を記述していたり、他のJSファイルを読み込んで使っていたが、これだとコードがカオスかしたり、読み込み順を意識しないとエラー、どこから読み込まれているか分からないとう問題点があった。
• この問題を解決するためにnpm/yarnが誕生。
• npm/yarnは依存関係勝手に解決してくれたり、import先が明示的で読み込み先が分かりやすく、世界中に公開されているパッケージをボタン一つで利用できる。

ECMAScript

• 通称えくますくりぷと
• JSの標準規格（JSの書き方のルール）
• ES6(ES2015)の大幅アップデートで機能追加が多くありJSの転換期と言われているらしい。
  • letやconstを用いた変数宣言
  • アローファンクション
  • 分割代入
  • スプレッド構文
  • etc...

などが様々な機能が追加された。

モジュールバンドラー

• 複数のJS(css/image)ファイルを1つにまとめるためのものでwebpackが代表的。
• 分けて開発していたファイルを本番環境では1つにまとめてくれる。

トランスパイラ

• 新しいJavaScriptの記法を古い記法に変換してくれるもの。BABELが代表的。
• JSはブラウザ上で動くものだが、新しいJSの記法に対応していないブラウザもある。トランスパイラを使用すると、新しい記法で開発し、実行するときにトランスパイラが変換してくれるのでどのブラウザでも実行ができる。

SPA

• シングルページアプリケーションの略。HTMLは1つでJSで画面を書き換える技術。
• 従来のwebシステムはリクエストに応じた画面(HTML)を都度返却する。
• SPAは最初は同じようにHTMLを返却するが、2回目以降は画面表示に必要なデータだけを返却し、JSでHTMLを書き換えることで画面が変わったように見える。

SPAのメリットは、

• ページ遷移ごとのチラつきがなくなる。
• 表示速度のアップによりユーザー体験の向上。
• コンポーネント分割による開発効率のアップ。

などがある。

参考