LoginSignup
11

More than 5 years have passed since last update.

そろそろbodyタグの中に文字列を突っ込んでバックエンドから送信するのをやめにしないか?

Posted at

1.SPAの神髄

 SinglePageApplication(SPA)を推進するため活動している最中なのだが、残念ながらなかなか広がりを見せない。SPAっぽいシステムはあるにはあるのだが、実はかなり中途半端な代物なのだ。なにをもって真のSPAと判断するのか、それは初期状態でのbodyタグの中身が空っぽかどうかである。

2. なぜbodyタグの中が空でなければならないのか?

 簡単な話、SPAの初期状態でbodyタグの中に何か置いておく必要性が全く無いからである。中途半端なSPAは、おおよそのUIをbodyタグの中に記述し、それをJavaScriptで書き換える方式をとっている。しかしそのやり方では、まったく違うUIが必要となったとき、結局ページ切り替えをすることになるのだ。

 真のSPAを実現するのであれば、通常画面や編集画面、システム設定画面だろうと、一切のページ切り替えを行わずにやり遂げる必要があるのだ。

3. 開発の難易度が上がりすぎてしまうという誤解

 SPAを作るに当たって問題になるのは、UIを動的に更新していく部分にあるだろう。これを逐次記述していったら、とんでもなく手間がかかる。間違いなくその通りだ。だが考えてみて欲しい。WindowsやAndroidのネイティブアプリだって、同じことをしているはずなのだ。なぜWebアプリだけ難易度が高いと敬遠されてしまうのだろうか?それはbodyの呪縛のせいなのだ。

4.ネイティブアプリの開発手法

 例えばWindowsアプリを作るとする。クラシックなアプリなら、そのレイアウトの単位はウインドウという枠組みを使う。その上に標準コントロールという子ウインドウを貼り付けていく。Windowsでは目に見えるコントロールはウインドウハンドルを持っており、全て立派なウインドウなのだ。そしてカスタムコントロールが必要となれば、ウインドウハンドルとそこでやりとりされるイベントを駆使して作っていくことになる。実質、ウインドウ機能の継承と派生を行っているような形だ。画面の切り替えは新しいウインドウをポップアップするか、ビューと呼ばれる単位で生成したウインドウを親ウインドウに貼り付ける。WPFやUWPというものがMicrosoftから提供された後になると、レイアウトの切り替えはもっと簡単にできるようになった。

 Androidの場合はアクティビティという、やはりウインドウに似た単位を持っている。しかしモバイルを意図したAndroidで複数アクティビティを切り替えていく手法は、使い勝手がすこぶる悪い。そのため最初の時代は画面の切り替えのためにアクティビティの中を書き換える形をとったアプリが多かった。ただしそれをまともにやると、表示画面が増えてきたときに、アクティビティ上のコードが破裂することになる。そこでアクティビティ上にフラグメントという単位を用意して、画面ごとの機能を複数の分散して記述できるようにしたのだ。

5.ネイティブと同じように作れば良い

 フロントエンドで効率的に開発する肝は、画面ごとに処理を切り分けて記述する部分にある。Web開発においてこの画面単位というのが、htmlのファイル単位になってしまっている部分が問題を大きくしている。htmlのファイルを単位とするからこそ、ページを切り替えなければいけなくなってしまうのだ。その諸悪の根源はbodyタグの中の初期データなのである。

 ではどうやって開発すれば良いのか。答えはネイティブアプリと同じように作っていくことだ。ビューやフラグメントとよばれるものをJavaScriptで記述できるようにし、作ったものを目的の場所に自由に差し込めるようにすれば良い。

 私の場合は表示単位を仮想ウインドウとした。仮想ウインドウは位置解決能力を持ち、特定のノードの子として貼り付けることも出来るし、タイトルバーやフレームを持ったポップアップウインドウとしても動作させることも出来る。

 新たな画面が必要となったら、この仮想ウインドウの機能を継承する。そこでアプリ専用の新しい画面を作ることも出来るし、リストビューやツリービューなど、後から使い回す為の汎用機能を作っておくことも出来る。これをJavaScriptで全て行えるようにするのだ。

 そしてウインドウ単位で画面を切り替えたり、すでにある画面上に重ねてポップアップ表示させて使うのだ。ユーザの入力画面ならポップアップの方が扱いやすいことが多い。

6. 実装例

 夢みたいなことを言っていても、実際に作れなければ意味は無い。ということで実装例は以下のような形だ。サンプルの切り分けのため、各サンプルは単独のページとして実装している。

動作サンプル
https://javascript-windowframework.github.io/JSW/

image.png

image.png

ソースコード
https://github.com/JavaScript-WindowFramework/JSW

 ちなみにTypeDocの吐き出したJSONデータをSPAで単純に表示させるためのサンプルは一時間程度で作ることが出来た。表示の体裁をきちんと整えたり、検索機能などを追加していくともっと時間がかかるだろうが、一から作るより圧倒的に早く開発することが出来る。

 別記事でGoogleDriveの操作をJSWでウインドウ化する内容も紹介した。もちろん使い回せるのでHTMLファイル中で呼び出して、jsの中でインスタンスを作るだけであっという間にアプリに組み込むことが出来る。

 最終的にAPI提供者がViewも一緒に配るようになれば、開発者の苦労の多くを取り払うことが出来るようになる。

7.今後のWeb開発に必要なもの

 Web開発システムに対するユーザの体験を向上させ、開発を加速させる方法、それは作成した資産を蓄積し再利用する部分にある。今回のウインドウシステムは一例にしか過ぎないが、こういった形で使い回せるコンポーネントの単位が規格化されていけば、ユーザも開発者も幸せになれるのだ。そんな未来を夢見て活動を続けていきたい。

 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11