1この記事を三行にまとめるとたいしたことない動きのためにこれだけのコードを読み込んでいましただいたい1/80くらいにコードを減らすことができました。これはひどい(良い意味で)jQueryの支配から卒業しましたとさ僕がエンジニアになりたての頃はちょうど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使うの止めて軽量化の方を優先させても良いんじゃないかと。ことで実際に書き直してみたところ、こうなりました。CSSのcolumnsで十分うん、マジでjQueryに頼らなくても大丈夫だったわ。jQueryを止めて書き直したもの(現在お宿で実際に動いているjavascript)がこちらになります。現在のjsだいたい1/80くらいにコードを減らすことができました。これはひどい(良い意味で)。今までやっていなかった画像の遅延読み込みを追加してもなおこの程度です。何で遅延読み込みをしていなかったかは前回の記事を読んでくだせえ。1/80に削減って結構な数字ですよね。仮に一ヶ月の出費を1/80に抑えることができたら......月の支出合計が10万円だった場合、8万円が浮くことになりますからね。毎月のように温泉宿に泊まりに行けるレベルのコスト削減ですよ、こいつは。ちなみに遅延読み込みも、wordpressのプラグインに頼らずともネイティブなjavascriptだけで、しかもそれほど大量のコードを書かずに実装可能です。今度その辺も紹介したいと思います。いやあ......これを見たらなおさら今までもったいないことしてたなーって思っちゃいますね。いえ、もちろんjQueryがダメってわけじゃないんです。便利なのは確かだし使った方が開発が楽になる面はおおいにある。お宿みたいにちょっとしかjavascriptを使ってないようなサイトだったらわざわざ使う必要はないなっていうお話です。そんなわけであかつきのお宿はjQueryの支配から卒業しましたとさ。2※この記事の内容で動かすことが赦されるのは、小学生までだよね~......じゃなくって、ここに書いてあることは、jqueryのバージョンが1.7以下の場合に有効なようです。与太話phpMyAdminMySQLLinuxブラウザ旅行その他プロット作成をお助け小説出版しましたYouTubeはじめましたTwitterやってます。