歴史/何が辛かったか

前提

HTML

Webページを表示できるように

CSS

ページの体裁やデザインを表現できるように

JavaScript

イベントの登録と発火

DOMの操作

本題

JavaScriptソースコード長くなりがち

辛い理由

code:js

document.getElementById("title").innerHTML = "テスト";

解決方法

jQuery のコンセプトである「Write Less, Do More」を実現するための関数などを提供

code:js

$("#title").html("テスト");

他にも jQuery は様々な機能を提供している

プラグイン、ライブラリ管理機能

現在は npm や webpack で管理

非同期通信の簡易化 (Ajax)

ブラウザ間の API の違いの吸収

現在は Polyfill で

名前空間の汚染

辛い理由

変数名がかぶってしまったときに意図しない動作が起こる

解決方法

ライブラリの依存関係がぐちゃぐちゃ

辛い理由

どのライブラリのどのバージョンで開発を進めなければならないかが複雑になる

環境構築に手間がかかる

解決方法

新しいバージョンのJSをサポートしてないブラウザへの対応

辛い理由

JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると，古いブラウザでは動作しない

解決方法

命令的UIが辛い

辛い理由

DOM 操作処理と HTML/CSS との対応がわかりずらい

解決方法

コンポーネント指向

具体例

code:React

const Example = () => {

const test = "テスト"

return (

<p>{test}</p>

);

}

動的型付け辛い

辛い理由

実行時に型が決まるとデバッグ作業が大変

解決方法

TypeScript コードをビルド時にトランスパイルしてJavaScriptコードに変換する

参考