2016.07.25

フロント側のアレ

フロント側のアレ

私はJavaScriptが嫌いでございます。

最近のフロント側は混沌としている感じがします。
なんとなく流れは見ているのですが手を出す気ならなくて(JavaScript嫌いだし)

流れとして
・SPA(シングルページアプリーケーション)
・MVW→Flux(構造の変化)
・コンポーネント指向
・サーバレスもしくはREST APIだけ

乱立するフレームワーク達

React.js+Redux,Angular.js,Backbone.js,Knockout.js,Vue.js,Riot.jsとか

その他フロント側の色々

□テンプレート系
JSX,jade,Handlebars.js,Mustache.js,Underscore.jsとか

□CSS拡張系
sass,scss,lessとか

□CSS設計系
BEM,SMACSS,MCSS,OOCSS,FLOCSSとか

□タスクランナー系
grunt,gulp,他コンパイル系

□サーバレスアーキテクチャ
[AWS] S3 + API Gateway + Lambda

あー、フロントエンジニア様は本当に大変でございますね。(他人事)

とりあいずやってみよう。

reactの場合

hello world 的なアレ

[js]
import React from ‘react’;
import ReactDOM from ‘react-dom’;

class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {items: [], text: ”};
    }ukeireru

    render() {
        const {items, text} = this.state;
        return (
            <div>
                <h3>TODO</h3>
                <ul>
                    <li>{items.map((item, i)=> <li key={i}>{item}</li>)}</li>
                </ul>
                <form onSubmit={this._onSubmit}>
                    <input onChange={this._onChange} value={text}/>
                    <button>Add #{items.length + 1}</button>
                </form>
            </div>
        );
    }

    _onChange(e) {
        this.setState({text: e.target.value});
    }

    _onSubmit(e) {
        e.preventDefault();
        const {items, text} = this.state;
        this.setState({
            items: items.concat(text),
            text: ”
        });
    }
}

ReactDOM.render(<Todo/>, mountNode);
[/js]

あーうん…なんだろうこのjs感
コンポーネントが増えてきたら混乱しそう(ほぼ確実)
今のところ多くの機能は必要としていない、学習コストがかかるのは避けたい(勉強したくない)
出来るだけシンプルに記述したい(見やすく楽したい)

そんなJavaScriptが嫌いな私でも受け入れできそうなもの

「Riot.js」

デモ

 

とりあいずルーティングと各ページコンテンツ別のtagファイルを作ってテスト

index.html

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riot.js</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/riot/2.5.0/riot+compiler.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="container">

<h1 class="title">Riot.js</h1>
<p class="lead">SPA(ルーティング+TODO+CSS+jQuery)</p>
<ul class="menu">
    <li><a href="#home">HOME</a></li>
    <li><a href="#todo">TO DO</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#jquery">JQuery</a></li>
</ul>

<!– 各ページ要素を読み込む場所 –>
<page></page>

<!– 各パーツ読み込み –>
<script src="tag/todo.tag" type="riot/tag"></script>
<script src="tag/css.tag" type="riot/tag"></script>
<script src="tag/jquery.tag" type="riot/tag"></script>

<!– ルーティング設定 –>
<script type="text/javascript">
  riot.route.start(true);
  riot.route(function(page) {
    page = page || ‘home’;
    riot.mount(‘page’, page);
  });
</script>

</div>

</body>
</html>
[/html]

 

 

 

それぞれのタグファイル

htmlとcssとscriptを入れてあるので、ソースコードも見やすい。

todo.tag

[html]
<todo>

  <h1>TODO</h1>
  <p>Hello World!</p>
  <ul>
    <li each={items}>
      {title}
      <form onsubmit={delete}>
        <button class="delete">削除</button>
      </form>
    </li>
  </ul>
  <form onsubmit={add}>
    <input onkeyup={edit}>
    <button disabled={!text}>追加</button>
  </form>

  <style scoped>
    :scope ul {
      list-style-type:none;
      padding-left:0;
      margin-bottom:60px;
    }
    :scope li{
      animation: fadeIn 2s ease 0s 1 normal;
      -webkit-animation: fadeIn 2s ease 0s 1 normal;
      margin-bottom:20px;
    }
    @keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
    }

    @-webkit-keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
    }
    :scope form {
      display:inline-block;
    }
    :scope input {
      width:100%;
      margin-bottom:10px;
      display:inline-block;
    }
    :scope button {
      background:#fc0e49;
      border:none;
      color:#fff;
      padding:8px 20px;
    }
    :scope button.delete {
      background:#fff;
      border:1px solid #fc0e49;
      color:#fc0e49;
      padding:8px 8spx;
    }
    :scope button[disabled]{
    opacity:0.3;
    }
  </style>

  <script>
    this.items = []
    edit(e) {
      this.text = e.target.value
    }
    add(e) {
      var input = e.target[0]
      this.items.push({title: input.value})
      this.text = ”
      input.value = ”
    }
    delete(e) {
      this.items.splice(this.items.indexOf(e.item), 1)
    }
  </script>

</todo>
[/html]

 

css.tag

[html]
<css>

  <h1>CSS</h1>
  <p>styleにscopedをつけてCSSを記述</p>
  <p>h1のCSSにcolor:#666;をかけているがh1のRiot.jsには影響しない。</p>

  <style scoped>
    :scope h1 {
    color:#666;
    }
  </style>

  <script>
  </script>

</css>
[/html]

jquery.tag

[html]
<jquery>

<h1>jQuery</h1>
<p>jQueryのフェードイン</p>
<p>jQueryを使ったアニメーションは明確に止めたりしないと前のアニメーションがそのまま動く場合があったり、うまく動作しない場合がある、jQueryを使う場合はある程度調整が必要だと思う。(rootにかけた場合、IOSだとfadeしない等)</p>

<style scoped>
:scope h1{
opacity:0;
}
</style>

<script>
this.on( ‘updated’,function(){
$(‘h1’, this.root).animate({‘opacity’: ‘1’},3500);
})
</script>

</jquery>
[/html]

 

 

□ざっくり感想
・多くのフレームワークがJSの中にhtmlみたいな何かを書くってスタイルが多いけど、Riot.jsはどちらかというとhtmlの中にJSを書いていくスタイル
・CSSをタグごとのスコープで使うことが出来るので、グッバイCSS設計(そのかわり書くコードの量は増えると思う)
・jQueryとの併用可能だが、アニメーションとか使う場合は注意が必要
・コンポーネントにhtml,css,jsを書くことが出来る。MVC的な何かをまとめられる
・オブザーバ機能
・コンパイラ(lessとか)
・簡単なルーティング
・RESTはjQueryとかでやる

 

□考えること
・コンポーネントの複雑化(このコンポーネントどうなってんだだろう…細分化しすぎてよくわかんね)設計やルールが必要
・パラメータの複雑化(柔軟性や再利用できるものを重視して…パラメータ多すぎて訳がわかんね)書き換えが必要な箇所を明確にする、コンポーネントの拡張性をコントロールする

 

Marvericks

SHORT MOVIES

株式会社マーベリックス
TEL:0466-66-8445
【4月23日まで工事中のためお電話が繋がりません】
〒251-0035
神奈川県藤沢市片瀬海岸3丁目20-15

  • Instagram

マーベリックスは神奈川県藤沢、茅ヶ崎をベースに活動するホームページ制作会社です。

© Mavericks Inc.