2

生の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に取り入れることができれば理想と考えています。

15
  • リンク先にちらっと jquery が言及されていますが、これは?
    – Yosh
    Commented 2017年5月22日 3:29
  • jqueryは確かに文法的には生に近いと思いますがバーチャルdom出ないのであまり変わらなくないですか?
    – user23132
    Commented 2017年5月22日 3:43
  • あーすみません,「生の」というのを狭く解釈しすぎてたようです(vanilla js だけで,ということかと思ってました).
    – Yosh
    Commented 2017年5月22日 4:17
  • 7
    Reactというかjsxの文法が好きでないというのは理解できますが、Vue.jsは普通のJavaScript(ECMAScript)ですから、何を指して「文法の癖が激しい」と言っているのかわかりません。同様に、あなたが「生のJS」のどんな点を気に入っているのかもわかりません。生のJSやReact/Vue.jsのこの書き方が嫌、こう書きたい、といった感じに具体的なコードで示してもらえませんか? / ES7で解消されているかどうか、についても何が問題なのかわからないので答えようがないと思います。
    – unarist
    Commented 2017年5月22日 5:46
  • 1
    追記部分を拝見しました。HTML側は確かにVue.js独自のものですが、JS側は「普通のJavaScriptの文法」でVue.jsに渡すオブジェクトを構築しています。そのオブジェクトの構造は見慣れないかもしれませんが、どの要素を起点に仮想DOMの中身を表示するか(el)と、HTMLのようなテンプレートにはめ込むデータ(data)をまとめた、シンプルなオブジェクトです。/ ただやはりあなたの理想とする形が見えてこないので、どんな書き方をしたいのか、動作しない想像上のもので構いませんから、書いてみていただけませんか?ちなみに、「仮想DOM」が解決するのは「既存のDOM構造を効率よく変更する」という点なので、それ以外の面倒くささが問題なら仮想DOMにこだわる意味はないかと。
    – unarist
    Commented 2017年5月22日 14:43

1 件の回答 1

2

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 のような短い関数を使ってもよいです。

また、トランスコンパイルした結果、どのような関数の呼び出しに変換されるかはコントロール出来ますから、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 を構築する方法も用意しているはずです。
また、小さめのフレームワークでは、こういった方法が標準という事が多いと思います。
例えば MithrilHyperScript 系の関数 m を用意しています。

この質問に回答するには、ログインする必要があります。