キノコの自省録

日々適当クリエイト

自サイトをAngularJSで書き直し

WebページのライブラリにAngularJS + Bootstrap3を導入して、全面的に差し替えました。ずっと変えたかったのですが、なかなか作業が捗らず、ずるずると来てしまいましたが、漸く終わりました。

kinokorori softworks

AngularJS入れたので、コピペコードを大幅に削ることが出来ました。もう少し削れそうなんですが、一旦はこれでいいや、といったところ。画面上部のNavbarと、左ペインのソフトウェア一覧を部品化して、各ページでそれらの部品をロードする構成になっています。

5年くらい前までは、こういったテンプレート部品的なコードをJavaScript上で実装すると問題が多いため、大抵の人はサーバの助けを借りて実現していました。ただ、サーバを使うとなるとランニングコストが跳ね上がるわけで、それはやだなーと思ってやってませんでした。月600円でも年間にすると7200円ですからね。貧乏人としては馬鹿にできない金額です。

という貧乏性を発揮したことで、ナビゲーションバーとソフトウェアリストを含んだhtmlを、全ページにわたってコピペして作っていました。当然、どれが選択されているかを示すハイライトなども全部手修正です。馬鹿みたいです。レイアウトを変更すると、全ページやり直しです。コピペということはバグも混入します。最悪です。

jQueryAjaxを使って動的ロードという方法もやろうと思えばできましたが、これをやると、クローラーからは真っ白なページ扱いされてしまい、検索に引っかからなくなります。それはイヤだったので、全部手書きしました。

同じような悩みを抱えていた人は、この機にAngularJSに乗り換えてみてはいかがでしょうか。AngularJSはかなりとっつきにくい上に更新が異様に速く、2年前のコードがすぐに陳腐化するという辛さもありますが、コピペよりはマシです。似たようなライブラリにReact.jsがありますが、今の流行り具合を見ると、Angularを覚えていた方が、メインストリームに乗れると思います。

※ちなみに、AngularJSと書くとAngular1.x系、ただのAngularと書くと、Angular2.x~を指します。AngularはコードがJavaScriptに限らないためです。

※Angular1.xを使うのであれば、Angular1.5以降に適合するようにしましょう。1.4以前はAngular2/4との整合性が低く、後々苦労することが予想されます。