テクノロジーに心も仕事も奪われそうな日々を綴ります。

Riot.js のシングルページアプリケーションではない使いみち

»

9月になりましたね。

ええ、それだけです。

最近、ウェブページの構成を PHP から JavaScript に変えるというのをやりました。

自前のサーバーではなく、クラウドサービスの持っているページ作成機能を使うことになって、PHP を使えなくなるということなので。

実際には、そのクラウドサービスが良く出来ているので出番は無くなりそうですが、サーバーサイドが使えない場合には JavaScript フレームワークはいい選択肢というか、それしか無いっていうか。

そこで僕が選んだのが Riot.js です。

Angular とか Backbone だとちょっと大きすぎるし、学習コストかかりすぎだと思ったので、軽量でシンプルな Riot を選びました。

まあ、そういう合理的な理由は実は後付で、本当の理由はまだ使っている人が少なさそうっていうだけなんですけどね。

Riot.js って?

JavaScript のフレームワークです

JavaScript でウェブページを構成するのに便利なフレームワーク。

React.js と同様、仮想 DOM によってページを構成する。

ただ、テンプレートの書き方はだいぶ違うらしい。

React は使ったことないですが、サンプルコードを見比べて Riot のほうが簡単そうだったので。

あと、React よりも利用者が少なさそうだったので。

仮想 DOM でページを構成する

仮想 DOM というのは、超ざっくりいうと JavaScript 常に書かれた DOM で、HTML 上には存在しないっていう感じ?

説明が難しいので興味がある方はこちらを http://qiita.com/mizchi/items/4d25bc26def1719d52e6

ゲームみたいにしょっちゅうページの内容が書きかわるようなものに最適みたいです。

作ろうとしているもの

ペライチのランディングページ

ランディングページっていうのは広告や検索のリンクを踏んだら最初に訪問するページ、というのが一般的な定義のようです。

僕が作っているのは広告から来た訪問者にイベントの申し込みをさせるページです。

そんなページでわざわざなんでフレームワークを使うのか。

表示を動的に変える必要性

動的にページを構成する必要性は、今回の場合、訪問者ではなく管理側にとってのものです。

例えば、イベントの日程が複数あって、それをラジオボタンで選択させるといった場合、日程が変更されたり、過去の日程を自動的に非表示にしたいという要求が発生します。

その時にいちいち HTML を書き換えていたのでは時間がかかる上に記述ミスが起きやすいんですね。

なので、例えば Google スプレッドシートあたりで日程管理をしつつ、その情報をサーバーに記録すると、ページの内容が変わるという仕組みを作りたくなるわけです。

なぜ PHP ではなく JavaScript ?

PHP を使えない環境は結構ある

こういった状況の場合、PHP のフレームワークを使えば、日程情報を受け取るところからページに反映させるまでを一括で管理できます。

実際に今までやっててものすごく便利でした。

ただ、冒頭に書いたような事情により PHP というか、サーバーサイドの言語を使えない状況になってしまうことがあります。

この場合、使える武器は HTML, CSS, JavaScript のみになるんですね。

そこで、JavaScript フレームワークが金メダル級の活躍をするわけです。

無理やりオリンピックの空気感を出してみましたが、全く見てなかったりします。

サーバーを用意しなくても使える

僕は他にも PHP で作ってあるサイトがあるので、Mac にサーバーを構築してますが、フロントエンド専門の方だとサーバーがない人もいるかもしれません。

いや、今時さすがにサーバー側を使わないってのはないか?

その辺の事情は知りませんが、サーバー側のプログラムを作れない、作りたくないという場合には JavaScript で作るということになりそうですね。

PHP にはない悩み

ページの表示に時間差がある

これは、API などからデータを取得してそれを元にページを作る時に顕著です。

日程表を API から取得して、それをリストにして表示するみたいなときに、ページのデータをダウンロードした後で API にリクエストを送って、受け取った結果を元に描画します。

そうすると、どうしてもページの表示に比べて、Riot で書いた部分が遅れてしまったりします。

ランディングページなどで使う場合には、ページのトップに工夫をこらす、例えば大きめの画像で目を引いて、その下にメリットを記述して読む時間を作ったり。

まあ、何秒も遅れるわけではないのでそこまで気にする必要があるかどうかはわかりませんが。

クロスブラウザの対応

JavaScript っていまだにブラウザによって挙動が違ったりするんですよね。

IE とか IE とか IE とか。

IE 死ね。

とまあ、恨み節を並べてもいいことなんて無いので IE は対応範囲からさっくり除外しちゃいます。

これからどう使っていくか

んで、せっかく新しいツールを手に入れたので他にもいろいろと使ってみたいなと思っています。

Chrome 拡張機能を作りたい

Chrome 拡張機能、いろいろなものをインストールして使っているんですが、やっぱり自分で作ると楽しいんですね。

今までも jQuery で作ってたんですが、今後は Riot も活用していきたいものです。

サーバーサイドも JavaScript で

Riot.js は Node.js でも使えるようで、ページの描画を結構楽にできるかも。そんなわけで、一通り JavaScript で作ってみるのも面白いかなぁっていう。

そんなわけで、俺者の PHP 離れが加速している2016年です。

Comment(0)

コメント

コメントを投稿する