読者です 読者をやめる 読者になる 読者になる

背筋を伸ばして深呼吸

折角なので専門知識を活かしたい

riot.js の衝撃

riot.js スマホアプリ

WEBの現代史(雑談)

僕は新しいWEB技術が好きだ。

特にここ数年のJavaScriptを中心とした、Webの発展は見ていて気持ちのいいものでした。

最初に思いつくのブラウザ競争です。

各社がブラウザでシェア争いをしており、IE, FireFox, Chromeのどれが首位になるのだろうかと目を見張っておりました。ブラウザはHTMLというマークアップ言語を解釈するエンジンを備えていて、CSS, JavaScriptを駆使するサイトが出てきた昨今、いかに解釈速度を上げるかということが、ブラウザを選ぶ一つの争点だったように思います。

 

当時の広告も過去のブラウザより、あのブラウザより何倍高速かということが必ず書かれていたものです。これは今もそうかもそれませんが、一体、どのブラウザが一番高速なのでしょうか。

 

 

 

ブラウザの速度が上がるとどうなるか

node.jsが生まれました。これも衝撃でしたね。

 

技術の進歩により、JavaScriptの実行速度も向上し、JavaScriptをサーバーサイドアプリケーションで使用できるようになったのです。

それまでJavaScriptは、クライアントのブラウザで動作していたものですが、これからはサーバーサイドとしての言語にもなりました。

socket.ioの技術が出てきて、リアルタイム通信が簡単にできたり。MongoDBなどNoSQLと呼ばれるデータベースが出てきて、Jsonで簡単にデータを取得できたり。Ajaxとの親和性も高いですしね。

新しい未来を見ているような感じでしたね。

 

フレームワークの台頭

サーバーサイドで、JavaScriptが使われるようになったかと思うと、今度はクライアントサイドでフレームワークが作られ始めました。

今人気が出てきているのは、Google製のAnglar.js, React.js, Vue.js などでしょうか。

残念ながら私は業務で使いこそしませんが、どれをとっても非常に便利なものです。

フレームワークとは、とある規則に則ってコードを書いていくだけで、あら不思議と、通常に書くよりも断然早くプログラミングでき、セキュアなサイトを作れるというそういうものです。(この認識が正しいかは定かではありませんが。)

 

riot.js の暴動

そのような流れで、でてきたのが「riot.js」という技術です。

辞書を引くと

1 (集団による公的な場所での)〔…に反対する〕暴動, 騒動, 一揆(いっき);[法]騒乱(罪)〔against〕;大混乱.

明鏡国語辞典

 

などと出てきます。

なんだか、穏やかではないですね。

 

これを作った方は、HTMLだのCSSだのJavaScriptだのと、複雑に絡み合ったWEB技術に暴動を起こそうと思ったのでしょうか。

荒々しい名前に反して、riot.jsの設計思想はものすごくわかりやすく、またWEBアプリケーションがとてもシンプルなものになります。

 

WEB技術の複雑さとは、

今まで私が業務で携わってきたものが、ネイティブといいますか、リッチクライアントといいますか、要はWindowsで実行できる画面系の.exeアプリケーションですね。

未だに、WEB系の仕事は畑が違うものと感じており、なかなかHTMLそのものが自分にとって受け入れにくい部分でもあります。

これはおそらく、私自身がWEBデザイナーではないからなのもしれませんが、それは、フロントエンドの開発では、

と、3つのファイルを触らなければならないことです。言語的にはそれぞれ、全くの別物です。ボタン一つ配置しただけで、あらゆるファイルを行ったり来たりする必要があります。慣れない人にほど、ややこしいのではないでしょうか。

 

コンポーネント指向

riot.js では、HTML, CSS, JavaScriptの作成を1ファイルで行います。

それをコンポーネントとして扱い、必要なときに、Riotタグを呼び出すだけなのです。

これを見たとき、画面系の製造に近いなと思いました。VisualStudioでの開発になれていると、ボタンだのテキストだのは、画面にペタペタ貼って開発しています。

それと似たようなことができるということです。

なおかつ、データ構造とデザインと処理系が、1ファイルにまとめられるのは、オブジェクト指向っぽいなとも思ったのです。

 

試しに

「押したら『おめでとう!』とメッセージが表示される赤い色のボタン」を作ってみます。

 

従来の書き方

いままでの書き方だとこんな感じです。

 

・HTMLファイル

<body>
    <button id="show_alert" class="btn-red" >ボタン</button>
</body>

CSSファイル

.btn-red {
    background: red;
}

・JSファイル

$(function(){
    $("#show_alert").click(function(e){
        alert("おめでとう!");
    });
}

 

riot.js の書き方

これが、riot.jsだとこうなります。

 

・HTMLファイル

<body>
    <show-alert></show-alert>
</body>

・RIOTファイル

<show-alert>
    <button onClick={ showAlert } >ボタン</button>

<script>
showAlert()
{
    alert('おめでとう!')
}
</script>

<style>
button {
    background: red;
}
</style>

</show-alert>

 

「show-alert」タグをまとめて部品化して、本体から呼び出しています。

 

riot.js では、スクリプト内に「" (ダブルクオテーション)」や「; セミコロン」は使いたくないようですね。

あと、<script></script> は省略できるようですので、2行節約できます。

今までは複数のファイルを、それぞれ記述する必要があったが、riot.jsのおかげで、それらを1箇所にまとめることができた!

 

最後に

まだできることが多そうなので、これから使ってみたいですね。

ではでは。