さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 25 Jul. 2016

    フロント側のアレ

    CATEGORYBlog Web制作 TAG

    私は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 的なアレ

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

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

    「Riot.js」

    デモ

     

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

    index.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とcssとscriptを入れてあるので、ソースコードも見やすい。

    todo.tag

    <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>
    

     

    css.tag

    <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>
    

    jquery.tag

    <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>
    

     

     

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

     

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

     

    大和市のポテトフライダー、フライドポテトを揚げ続けて120年、変わらぬ味と進化し続ける味を提供しております!休みの日にはポテトダイナマイトを製作し、世界中にバラまいている!