自作Webアプリの棚卸しとリニューアル検討

モチベーション

いろいろ作り続けていると、知識も増えて技術力が上がった気がします。 特にフロントエンド界隈の進化は味方につけるとその恩恵は大きいです。

最近は React や Vue のようにコンポーネント指向で開発がしやすくなっているので、 その便利さを知ってからは悶々と過去作を作り変えたいと思っていました。あとサーバーレス。

最近つくったものや放置していたものを棚卸しして、いま何が不満なのかを述べ、 次期リニューアルに向けての方向性を考えます。

Chase

f:id:syonx:20160618182627p:plain

syonx.hatenablog.com

  • Heroku 無料枠で動いているので、スリープ復帰が遅い。
  • Material-UI が古い。0.16.6。でももうすぐ v1 がリリースされるので待ってる。
  • バックエンドが Sinatra なんだけど Ruby はあまり使わなくなってしまった。サーバーレス (AWS Lambda・Node.js) にしたいな。
  • 自作したものの中で一番よく使ってる。もうちょっと時間を投資して使い勝手をよくしたい。

RSS Feed Filter

f:id:syonx:20151014223719p:plain

syonx.hatenablog.com

  • Heroku 無料枠で動いているので、スリープ復帰が遅い。
  • サービスの主役が通信上のフィルタリングであり UI を使うことは最初以外ほぼない
  • こちらもバックエンドが Sinatra で、機能拡張しようにもあまり触る気が起きない。サーバーレスにしたい。
  • こちらも毎日使ってる。一部のコアなファンに人気のようだ。

音の園

f:id:syonx:20160813221504j:plainf:id:syonx:20160820190442j:plain

oto-no-sono.com

  • Material-UI が更に古い。0.15.0。でももうすぐ v1 がリリースされるので待ってる。
  • 曲の管理を、なんかこうマイクロサービスっぽく切り出してアプリと疎結合にしたい。

Installed Fonts

f:id:syonx:20170715140637p:plain

http://wordmark.it/ に似た何か。当初の目的は Atom などのエディタでフォントを変えたいとき、 font-family に指定するフォント名を具体的にどう記述すればよいかわからなくて、その名称を知るために作った。 ちなみに今も他の方法がわからないゾ。

  • 目的が達成されて放置された。フィルタリングできそうに見えるが何も動かない。願望が見えるだけである。
  • たまに使ってるのでそのたびに改善したいと思ってしまう。
  • 一応 React で動いている。速い。
  • プレゼンテーション方法にバリエーションを持たせたい。
  • サーバーサイドはないし、 Vue でコネコネするくらいがちょうどいいんじゃないかな。

IRKit GUI

f:id:syonx:20170108212053p:plain

syonx.hatenablog.com

  • 溢れ出る Bootstrap 感。
  • こちらも Sinatra で動作。 Node.js にしたい。
  • フロントはありモノでいいかな。 Vue の UI コンポーネントで。

Gaiyas

f:id:syonx:20170212001731p:plain

syonx.hatenablog.com

  • 頑張って React / Redux で作った。でも時間が経つといじりたくなくなる。
  • Vue / Vuex を知ってからはこっちのほうが手軽でいい感あり

syon/wiki

f:id:syonx:20170715141853p:plain

wiki と名前がついている、かつてそうであったもの。

  • Web上での検索に弱い、というかできないのが微妙。 Atom で検索してる
  • 毎日使ってるのでなんか便利にしたい

syon/refills

f:id:syonx:20170715142306p:plain

上記 wiki ほどに寄せ集めでもなく、かといって時系列に並べるブログでもないメンテし続けたい記事を残す場所として新設。

  • Jekyll でいいのでは?と毎回自問自答しているが、微妙なところ。
  • なんかこう、もうテンプレート部分を JS と分けて書きたくない。コンポーネントとして書きたいわけよ。
  • 記述したコンテンツを返す Web API と、それを表示するアプリに分けたらいいのかな?
  • それって Next.js とか Nuxt.js 的な SSR ってやつ?
  • だけど GitHub Pages に乗っかり続けるのならばサーバーサイドがいじれないので SSR はムリ

syon/pieces

f:id:syonx:20170318004035p:plain

このような Web 上で動くツールとかちょっとしたものを置いておくところ。

  • 新規機能をつくるときに UI に毎回悩む。
  • Vue ベースにして、UI以外の処理をサーバー側に寄せられないか。できればサーバーレス。(謎の言動)

まとめ

趣味プログラミングは、週末しか触らなかったりでその構造を思い出すのがツラい部分がある。 なのでできるだけ技術スタックは揃えたいし、1サービスを取ってもその中をうまいこと疎結合にして分断したい。小さければすぐに理解できるからね。

最近新しいアイデアアーキテクチャを考えるときは、 Web API とフロントフレームワーク選定っていう区切りで考えてる。 上で述べたやつの多くは Rails が流行していた時代に生まれたものも多く、この考え方がまだ自分の中でできていなかったんだね。

コンポーネント指向の今、 Vue・Vuex と サーバーレス (AWS Lambda) でとりあえず作り始めてみるのがいいのかなと思います。 で、方向性が定まってきてから React にするとか。うーん、 React は React Native だけでいいや。

おわり