こんばんは。Advent Calendar 14日目の記事になります。ちょっとだけ遅れました!
今回はtodo appをクッキングしていくという内容でqiitaの記事を書いてたけど、気づいたら「ヒトモジ」という「自分の思ってる一文字」をツイッター形式でポストしていくウェブアプリを開発してました。議事録のような感じで書いていきます。
気づいたら開発していたもの
- 一文字をツイッターのように投稿できる
- 投稿されているやつにGood👍をつけられる
環境構築
Dockerで環境を作った
dockerは最高。docker-compose.ymlとDockerfileのテンプレ的なのを用意しとけば、何も気にせずに一瞬で環境構築終了。
FROM node:8.9.3
RUN useradd -ms /bin/bash me
USER me
RUN npm config set save-exact true
WORKDIR /home/me/yhitomoji
version: '3'
services:
node:
build: .
command: bash
volumes:
- .:/home/me/yhitomoji:delegated
ports:
- 8080:8080
links:
- mongo
tty: true
depends_on:
- mongo
environment:
- PORT=8080
mongo:
image: mongo:3.4.8
ports:
- 27017:27017
必要なミドルウェアを揃えた
parcel
を使ってみたいと思い色々と試してみたんですけど、まだまだ未熟といった感想しか得られなかったので、webpackにしました。webpack.config.jsは書くのがめんどくさかったのでコピペ。残念なことに、元々parcel
ではじめていたため、負の遺産が残ったままにwebpack
に移行したのもあって、少し開発は苦労しました。
結局、モジュールはこいつらを使うことにしました。
"dependencies": {
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.1",
"babel-preset-stage-3": "6.24.1",
"css-loader": "0.28.7",
"fastify": "0.35.7",
"fastify-formbody": "1.0.1",
"fastify-helmet": "1.0.2",
"fastify-static": "0.4.1",
"file-loader": "1.1.6",
"forever": "0.15.3",
"html-webpack-plugin": "2.30.1",
"mongoose": "4.13.7",
"node-dev": "3.1.3",
"node-sass": "4.7.2",
"pug": "2.0.0-rc.4",
"sass-loader": "6.0.6",
"vue-loader": "13.6.0",
"vue-template-compiler": "2.5.11",
"webpack": "3.10.0",
"axios": "0.17.1",
"vue": "2.5.11",
"vue-router": "3.0.1"
}
開発
Vue
いつもVueを使っているので、Vueを使うことに。Parcelで躓いたのはここで、parcel-plugin-vueというparcelでvueをバンドルできるようにしたよ!っていうパッケージがあるんですけど、実はこれが曲者で上手くバンドルしてくれないんです。現在はunder active development
らしくまだまだという感じです。
結局はwebpackを使うことになるんだ。full configなほうが安心感はあるし、何かと便利。とはいうものの、かる~くアプリ作るかってなったときに面倒いと思う気持ちが生まれて、開発スタートする気になれないときがただあります。そう考えると、zero configって良いよね〜って思うし、そういうモチベーションでzero config系が開発されているのだと思った。
まあ、そんなこんなでVue, vue-router, axiosで開発。
Css
css frameworkなんですけどparcelが上手くいかなくて、結局フルスクラッチしました。cssを書いてていつも思うんですけど、グラフィックデザイン力が無いからcssに一番時間がかかります。趣味的な開発だとcss frameworkを極力使っていきたいです。
とはいうけど、正直、グラフィック系のデザイン力が欲しい。。。
Fastify
前々から気になってたExpress
に並ぶweb frameworkのFastify
!!!
パフォーマンスが良いんだかなんだかを売りにしてるっぽいです。
趣味程度でそこまでパフォーマンス気にする必要あるの?っていうか早すぎた最適化じゃね?って思いながら、ただただ興味があって使ってみました。こういうの多分大事。
optsっていうのかな?requestとresponceにschemaをつけれる機能です。jsって静的型付け言語じゃないので、objectの中身がよくわからん!ってなりがちだと思うんですけど、こういうschemaでobjectの中身固定してあげる機能意外と好きなんです。
まあ書いてて面倒いなって思ったし、上手く書かないとコードが肥大化しそうなんで、あんまり書きたくないんですけども。
requestとresponceにschemaをつけれる機能ってこんな感じですよ?めんどいです。
// ...
schema: {
params: {
letterId: { type: 'string' }
},
response: {
200: {
type: 'object',
properties: {
letter: {
type: 'object',
properties: {
_id: { type: 'string' },
letter: { type: 'string' },
desc: { type: 'string' },
author: { type: 'string' },
createdAt: { type: 'string' },
stars: { type: 'integer' }
}
}
}
},
400: {
type: 'object',
properties: {
message: { type: 'string' }
}
}
}
}
// ...
この変なアプリを途中まで開発してて思ったんですけど、これ、socket.io
使ったほうがtwitterっぽくできるじゃん!もう遅いけど!
Mongodb
mongodbのscalable感最高ですよね。エンジニアの怠惰を表現したような、この楽さ。最高です。え?Schema?自由にやってくれよな的な。結局はjsでschema書くんですけどね笑
Deploy
deployはherokuを使いました。無料で楽だし。
完成したゴミ
いつか永遠のメンテナンスに入ると思いますが、
- Github
- https://yhitomoji.herokuapp.com/
最後に
実は当初はアカウント機能入れたり、twitter連携したり、PWAやったりって色々と試そうと思ってたんですけど、1日じゃ無理だって途中で気付いて、今じゃ不毛地帯みたいなサービスが完成しちゃいました。しかも2日かかるっていうね。アドベントカレンダーも少し遅刻しちゃったりで。
とはいっても、たまーに、数日間でかる~くウェブアプリを作るのって意外と大事だったりするんですよね。こういうときにやってみたかった技術に触れたり、色々と失敗して試行錯誤してっていうのをやっていくので学んだことも多いし。
とりあえず、最後に思ったことを幾つか。
- 機能を盛り込むと開発がめんどくなって、結局は終わらない
- とりあえず、ここまででいいやっていう妥協が大事
- アドベントカレンダーは大変
- webpackといいparcelといい、npmのエコシステムの中のモジュールにもエコシステムができてて、もう色々とやばいってのがnodejs界隈で、若干カオス感を感じつつもなんか楽しい。多様性が高くて成長も速い。めんどいところもあるけど、なんだかんだ言って好き。
- いや、本当は3分クッキングみたいな記事書きたかったんですけどね?めんどいなって思ってたら開発に集中してしまってたんですよね。
- 文章力皆無