2016年11月27日日曜日

一人でWebサービスを作った手順をまとめてみた・再(2)

前のエントリからすっかり日が空いてしまいましたが、「写真で一言」的な画像付きネタツイートジェネレータ「Postter」というのを作ったので振り返りをやっていこうと思います。今回は、技術的なお話。

今回のアプリは私が初めて一人で作ったWebアプリ、SeekGeeksを元にして開発したので同じ部分がけっこうあるんですが、せっかくなのでいくつか新しいことに挑戦しています。

Vue.js 1.0

SeekGeeksVue.jsを使っているんですが、バージョンが0.11と大分古かったので、この機会に1.0に挑戦してみました。すでに2.0も出てますが、それは次回以降に挑戦する予定。
ちなみに使い勝手はあまり変わりませんでした。v-classの代わりにv-bind:classになったり、v-repeatがv-forになったりと細かい変更はありましたが前回同様サクサク開発できました。多分今後も個人開発ではVue.jsを使い続けると思います。

Foundation 6

こちらも、SeekGeeksではFoundation 5を使ってたんですがSeekGeeksの開発中にFoundation 6がリリースされてたので使ってみました。こちらは何か使い勝手が良くなったとか見た目が良くなったとかそんなこともなく、むしろ何かドキュメント見ながらでもうまいこと使えなかったので(どのプラグインが必要かとかがわかりづらかった…)、あんまり面白くありませんでした。最終的には面倒になってググりながら独自CSSで実装したりした部分もあるし。次回以降は違うライブラリを探してみようと思ってます。

Redis

RDBも使ってるんですが、今回はキャッシュ用にRedisを取り入れてみようかなと思って試行錯誤してました。おかげでインストール方法や使い方とかはわかったんですが、最終的にアプリが小さくなりすぎて、あんまりキャッシュ機能とかなくてもいいかなって思うレベルになってしまったので一旦外してます。便利だなとは思うので、そのうちそっとまた付けるかも。

lodash

SeekGeeksunderscore.jsを使ってたんですが、lodashの方がよく聞くようになってきた気がするので切り替えてみました。こちらも使い勝手があまり変わらず、とても便利に使えました。正直どっち使ってもいいんじゃないかと思います。

gulp-html-extend(2016/11/30追記)

SeekGeeksではSPAにしたことでいろいろ苦労したので、今回はgulp-html-extendっていうnpmのモジュールを使ってみました。
これはばらばらに作ったHTML(ヘッダーとかフッターとか)をgulpが自動でくっつけてくれるというものなのですが、使い方も難しくなく、そこそこ柔軟に使えたので気に入りました。使い勝手はサーバーサイドのテンプレートエンジンみたいな感じ。小さいWebアプリを作るときは今後も使っていけたらなと思います。
-----

と、振り返ってはみたんですが、これ全然新しいチャレンジしてないなって自分でも思いました。せめてRedisをちゃんと使ってれば良かった…。
まぁ、メインの挑戦は開発期間の短縮だったのでこれで良しとします。
また何か作ることがあれば、Vue.js 2.0+新しいCSSフレームワーク+Redis+lodashで何か作っていければなぁと。
あ、ちなみにバックエンドは相変わらずPythonです。

技術的なお話、と書いたのにキーワード以外は全然技術的じゃなかったのが心残りです。
次回も振り返り的なお話を書きたいと思います。