質問: 生のJSのDOM操作がしんどいです。 下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか? 基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、関数文法がほぼ生と同じな非常に癖のないバーチャルdomのフレームワークなどご存じないでしょうか? 下記のページで例えると `{{t.name}}` などかなり独特な書き方ですよね。 ``` {{t.name}} ``` 上記のようなvue独特の文法をつかわず、普通の生のJavaScriptの書き方で書けるのですか? 追記 タグをそのまま記載できるのは、確かにcreateElementやaddChildを毎度打つ大変さを考えると魅力的なので取り入れたいと思います。 ただ、HTMLタグをそのまま書く部分だけ生のJSに取り入れることができれば理想と考えています。
回答: ### JSX JSX は JavaScript や TypeScript の構文を拡張する物です。 基本的には、トランスコンパイラなどと呼ばれるツールで、(仮想)DOMを構築する関数の呼び出しに変換されます。 JSX を使用せず、直接これらの関数を呼び出すコードを書いてもかまいません。 ``` // JSX class Hello extends React.Component { render() { return Hello {this.props.toWhat}; } } // JSX 不使用 class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ``` `React.createElement` が長すぎると思えば、`react-hyperscript` のような短い関数を使ってもよいです。 また、トランスコンパイルした結果、どのような関数の呼び出しに変換されるかはコントロール出来ますから、React 以外のライブラリの DOM 構築に使う事もできます。 ### Vue のテンプレート Vue のテンプレートは JavaScript の構文を拡張しているものではありませんが、JSX と同じく 仮想 DOM の構築用の関数の呼び出しに変換される物です。 構築用の関数を直接呼び出すコードを書くならば、これを使用せずに Vue を使う事もできます。 ### JavaScirpt の構文拡張もテンプレートも使わないフレームワーク 上で説明した通り、たいていのフレームワークはテンプレートによらず JavaScript の関数呼び出しで(仮想)DOM を構築する方法も用意しているはずです。 また、小さめのフレームワークでは、こういった方法が標準という事が多いと思います。 例えば Mithril は HyperScript 系の関数 `m` を用意しています。