生のJSのDOM操作がしんどいです。

下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか？  
<http://qiita.com/kouh/items/dfc14d25ccb4e50afe89>

基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、関数文法がほぼ生と同じな非常に癖のないバーチャルdomのフレームワークなどご存じないでしょうか？

下記のページで例えると `{{t.name}}` などかなり独特な書き方ですよね。  
<http://qiita.com/icoxfog417/items/49f7301be502bc2ad897>

```

    <div v-for="t in todos" 
             v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']"
             v-on:click="begin($index)">
          {{t.name}}
    </div>
    
```

上記のようなvue独特の文法をつかわず、普通の生のJavaScriptの書き方で書けるのですか？

追記  
タグをそのまま記載できるのは、確かにcreateElementやaddChildを毎度打つ大変さを考えると魅力的なので取り入れたいと思います。  
ただ、HTMLタグをそのまま書く部分だけ生のJSに取り入れることができれば理想と考えています。
CC BY-SA 3.0
2017-05-22T01:33:43.003
34915
2017-05-26T13:46:14.270
2017-05-26T13:46:14.270
3054
question
javascript reactjs vue.js react-jsx
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか？
### JSX

JSX は JavaScript や TypeScript の構文を拡張する物です。  
基本的には、トランスコンパイラなどと呼ばれるツールで、（仮想）DOMを構築する関数の呼び出しに変換されます。  
JSX を使用せず、直接これらの関数を呼び出すコードを書いてもかまいません。  
<https://facebook.github.io/react/docs/react-without-jsx.html>

```

    // JSX
    class Hello extends React.Component {
      render() {
        return <div>Hello {this.props.toWhat}</div>;
      }
    }
    
    // JSX 不使用
    class Hello extends React.Component {
      render() {
        return React.createElement('div', null, `Hello ${this.props.toWhat}`);
      }
    }
    
```

`React.createElement` が長すぎると思えば、[`react-
hyperscript`](https://github.com/mlmorg/react-hyperscript) のような短い関数を使ってもよいです。

また、トランスコンパイルした結果、どのような関数の呼び出しに変換されるかはコントロール出来ますから、React 以外のライブラリの DOM
構築に使う事もできます。  
<https://jp.vuejs.org/v2/guide/render-function.html#JSX>  
<http://mithril-ja.js.org/jsx.html>

### Vue のテンプレート

Vue のテンプレートは JavaScript の構文を拡張しているものではありませんが、JSX と同じく 仮想 DOM
の構築用の関数の呼び出しに変換される物です。  
構築用の関数を直接呼び出すコードを書くならば、これを使用せずに Vue を使う事もできます。  
<https://jp.vuejs.org/v2/guide/render-function.html>

### JavaScirpt の構文拡張もテンプレートも使わないフレームワーク

上で説明した通り、たいていのフレームワークはテンプレートによらず JavaScript の関数呼び出しで（仮想）DOM
を構築する方法も用意しているはずです。  
また、小さめのフレームワークでは、こういった方法が標準という事が多いと思います。  
例えば [Mithril](http://mithril-ja.js.org/hyperscript.html) は
[HyperScript](https://github.com/hyperhype/hyperscript) 系の関数 `m` を用意しています。
CC BY-SA 3.0
2017-05-26T13:41:18.720
35045
2017-05-26T13:41:18.720
3054
34915
answer