あかつきのお宿

僕がエンジニアになりたての頃はちょうどjQueryが盛り上がり始めた頃で、ある意味僕のエンジニアとして歴史は、javascriptに関してだけ言えばjQueryと共に歩んできたと言っても過言ではない。

実際のところ今でもjQueryは自分の中でまだまだ現役なんですが、しかしがっつりjavascriptに動きを頼らなきゃいけないようなサイトでもない限り、何でもかんでもjQueryに頼る必要はなくなってきたなというのも正直な印象です。最近はネイティブなjavascriptでもわりと簡単にいろんな動きを実装できるし、HTML5とCSS3がだいぶ進化したおかげでそもそもjavascriptを使わなくてもそれなりの動きがつけられるようになってきました。

あかつきのお宿もずっとjQuery頼りでサイトを動かしてきたんですけど、実のところ、javascript的な動きがあるところなんてほとんどないんですよね。数年前はいろんな動きをいろんなところにいろんな形でつけてたんですけど、段々とこれいらねーやって思って削ってるうちにほとんどエフェクトがないサイトになってしまいました。

現在のお宿でjQueryでの動きが必要なのは以下の部分だけです。

・トップページのタブの切り替え
・スマホで表示した時のサイドバーの表示・非表示（CSSのアニメーションと併用）
・小説のタイトルをクリックした時に本文を非同期で読み込んで表示（Ajax）
・音楽の再生（jPlayer）
・FAQやブログの記事一覧をタイル状に並べる（Masonry）

たった五ヶ所。そのほとんどはたいした動きじゃありません。でもそのたいしたことない動きのために今まではこれだけのコードを読み込んでいました（ちょびっとだけjQueryを使ってないコードもあります）

今までのjs

膨大ですね……と言ってもほとんどはjQueryの本体とそのプラグインであるjPlayerとMasonryのコードで、僕自身が書いたのは最後のほんのちょっとの部分だけですけど。もちろんプラグインを使っているからこそ自分で書く部分は少なくて済んでいるというのもありますがね。

まあとにかくですね、今までこのjavascriptを読み込んでお宿の中の動きを実装していたわけです。

でもつい先日、このスクリプトが何かもったいなく見えちゃいましてね。たかがこの程度のコードのためにこれだけのファイルを読み込んでるのかと。これくらいだったらjQuery使うの止めて軽量化の方を優先させても良いんじゃないかと。

ってなことで実際に書き直してみたところ、こうなりました。



・トップページのタブの切り替え
→　ネイティブのjavascriptで十分

・スマホで表示した時のサイドバーの表示・非表示
→　ネイティブのjavascriptで十分

・小説のタイトルをクリックした時に本文を非同期で読み込んで表示
→　XMLHttpRequestとCSSのアニメーションで十分

・音楽の再生（jPlayer）
→　ネイティブのjavascriptで十分

・FAQやブログの記事一覧をタイル状に並べる（Masonry）
→　CSSのcolumnsで十分



うん、マジでjQueryに頼らなくても大丈夫だったわ。

そしてjQueryを止めて書き直したもの（現在お宿で実際に動いているjavascript）がこちらになります。

現在のjs

だいたい1/80くらいにコードを減らすことができました。これはひどい（良い意味で）。今までやっていなかった画像の遅延読み込みを追加してもなおこの程度です。何で遅延読み込みをしていなかったかは前回の記事を読んでくだせえ。

1/80に削減って結構な数字ですよね。仮に一ヶ月の出費を1/80に抑えることができたら……月の支出合計が10万円だった場合、8万円が浮くことになりますからね。毎月のように温泉宿に泊まりに行けるレベルのコスト削減ですよ、こいつは。

ちなみに遅延読み込みも、wordpressのプラグインに頼らずともネイティブなjavascriptだけで、しかもそれほど大量のコードを書かずに実装可能です。また今度その辺も紹介したいと思います。

いやあ……これを見たらなおさら今までもったいないことしてたなーって思っちゃいますね。いえ、もちろんjQueryがダメってわけじゃないんです。便利なのは確かだし使った方が開発が楽になる面はおおいにある。でもお宿みたいにちょっとしかjavascriptを使ってないようなサイトだったらわざわざ使う必要はないなっていうお話です。

そんなわけであかつきのお宿はjQueryの支配から卒業しましたとさ。