More than 3 years have passed since last update.

ちょっとしたサイトならインクルーシブにSPAで

Last updated at 2020-07-04Posted at 2018-10-29

みなさんこんにちは。フロントエンドで頑張ってますか。私はほとんど頑張っていません。なぜって、この界隈、何が何やら分からないです。
ちょっとしたサイトを作りたいだけなのにものすごくめんどくさいことになっています。

トランスパイルが分からない

まずもってトランスパイルが分かりません。最新の開発環境は最新仕様のJS書いてBabelで任意のバージョンのJSにする、いわゆるトランスパイルをするのが普通らしいですが、何言ってるのか分からないです。何ですかトランスパイルって。なんでフロントエンドはそんな概念があるんですか。
Babel?Grunt?Gulp?Webpack?何それおいしいの?全然分からないです。
ES6(正式にはES2015らしいですがES6と書きます)以降のJavaScriptを書こうとすると途端にビルドがどうとかトランスパイルがどうとかの話になってしまいます。
なぜこんな状況になってしまったのでしょうか?
原因は分かり切っています。そう、やつです。IEです。この難敵が存在し続ける以上ES6以降のJavaScriptはなかなか役に立ってくれません。
でも、こんな愚痴をこぼしていてもしょうがないので、じゃあどうすればいいのかという答えを出します。

ES5+jQuery2.x+Vue.js2.x

これです。これでIEを倒せます。ただし、ここで言うIEはIE9以降を指します。IE8以前は…さすがにもうあきらめましょう。
とにかくこの組み合わせは大いに力を発揮してくれます。IEが完全に滅びるまで大火力を放射し続けてくれます。
なぜこれで行けるのか?順を追ってお話します。

なぜ、ES5なのか?

まず、どうしてES5を使うのでしょうか。ほとんどの方はすでに勘付いていることと思いますが、理由は単純です。
トランスパイルが要りません。この恩恵は莫大です。とにかく学習コストが大幅に少なくなります。
ES6以降を知る必要もないしトランスパイルも知る必要がありません。

なぜ、jQuery2なのか?

次になぜ今更jQueryなのか？これも大した疑問は生じないでしょう。単に、純粋にES5だけ、というのがつらいからです。
そしてjQuery2系統はIE9以降という古いブラウザにも対応しています。ただそれだけです。
ちなみにES6以降ならjQueryはもうお役御免でしょう。もしES6以降のJavaScriptで何か開発するならjQueryはもうすっぱり切りましょう。

そして、なぜ、Vue.js2なのか?

これも答えは簡単でES5とjQueryのみの組み合わせはつらいからです。しかし、そのつらさを大幅に激減させてくれるのです。
少し使うだけならCDNから読み込むような古き良き使い方でも十分なのもポイント高いですし、学習コストも低いらしいです。らしい、というのは私はReactやAngularといった他のJavaScriptフレームワークを知らないからです。
しかもVue.js2はjQuery2と同じくIE9以降に対応しています。ES6以降がさっぱりな方にもJavaScriptフレームワークの恩恵を授けてくれるでしょう。

そしてインクルーシブにSPAで

そしてこの組み合わせでインクルーシブにSPAでいきましょう。サイト作りが格段に楽になります。
インクルーシブやSPAが分からないという方もいらっしゃると思いますが、説明し始めるときりがないのでこの記事では説明しません。
で、それを証明するために次に実際の例を見ていきます。

おーぷんでノベルゲー作ろうぜ

私は今「おーぷんでノベルゲー作ろうぜ」というOSSのプロジェクトに関わっています。詳細は省きますが、名前の通りオープンなノベルゲームを作るものです。
詳しくはWikiがあるのでそこを見てもらうとして、私はここのホームページ作製に携わっています。

最適解サイト

ここではインクルーシブを意識しながらSPAなサイトにしています。
動作としてはフロントのHTMLからAJAXによってデータを引っ張ってきてVue.jsで描画しているだけです。ここでXMLパーサで整形式XMLとして解析可能なHTML5ファイルをxHTMLと名付けておきましょう。このホームページはGitHub Pagesで見るようにしているのですべてのデータは静的なものです。そして引っ張てくるデータは以下のようなxHTMLです。

赤坂由奈.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>赤坂由奈</title>
</head>
<body>
<ul id="images">
<li>制服2.jpg</li>
<li>由奈1.jpg</li>
<li>由奈2.jpg</li>
<li>由奈3.jpg</li>
<li>由奈4.jpg</li>
<li>由奈5.png</li>
<li>oihr48Z.jpg</li>
</ul>
<p id="ruby">あかさか・ゆな</p>
<p id="reference"></p>
<main id="description">
<p>メインヒロイン。主人公の幼馴染で世話焼きキャラ。ツンデレ。<br/>
主人公と関係が深くなってデレ始めると嫉妬ややきもちを妬き始めてヤンデレに進化する。<br/>
（※他ヒロインのルートに入らなかった場合の救済キャラ）</p>
<p>料理の腕はメシマズ、もしくはそこそこ（すごい美味しいという訳ではないレベル）かで意見が分かれる。<br/>
どのみち、あまり上手くは無い。</p>
<p>ヤンデレ化すると支配欲が強くなるタイプ。狂気と正気のギャップが持ち味。</p>
</main>
</body>
</html>

注目点は空要素がXML式の空要素になっていることです。このxHTMLはAJAXでXMLとして呼び出されます。こうすることでHTMLとしてもXMLデータとしても柔軟に対応させておくことで、ブラウザからも読め、jQueryからも扱いやすいものになります。そういえばAJAXは今ではJSONを呼び出すことがほとんどですが、ちょっと工夫することで本来のAsynchronous JavaScript + XMLとしてその本来の使命を果たさせることができます。
そして、JavaScriptを書くときはjQueryとVue.jsが協調するように書きます。これら2つは下手をすると競合してしまうことがあるため注意が必要なのですが、Vue.jsを中心にしてjQueryはあくまでも補助的な役割を担ってもらうようにするとトラブルなく進みます。

ただ、もしかしたらこれはインクルーシブではないしSPAではないという方もいるかもしれません。もちろん完全なインクルーシブであるか、SPAかと言われれば否でしょう。
しかし、インクルーシブ、SPAという言葉を知っていて意識するのと知らないが故に全く意識することがないのとでは大きく違ってくると私は考えます。

また、なかには、いや、最新のJavaScript知っていればそれでいいという方もいると思います。ちょっと話題からずれますがそのことについても補足しておきましょう。

終わりに

いかがだったでしょうか。本当にちょっとしたサイトなら本来なら苦労せずに済むはずです。
しかし、色々あって現在のフロントエンドは混迷を極めている状況です。ですが、この記事でその混迷を打破する助けになると私は確信しています。
で、まあ、要するに何が言いたいかというと、みんな、おーぷんでノベルゲー作ろうぜ!!!

まとめ

最近のフロントエンドはトランスパイルとかあって分からない
ES5+jQuery2.x+Vue.js2.xの最適解なららくちん
おーぷんでノベルゲー作ろうぜなら最適解サイトも最新JavaScriptも学べるよ
おーぷんでノベルゲー作ろうぜ!!!

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up