気づいたら変なウェブアプリ作ってた

こんばんは。Advent Calendar 14日目の記事になります。ちょっとだけ遅れました！

今回はtodo appをクッキングしていくという内容でqiitaの記事を書いてたけど、気づいたら「ヒトモジ」という「自分の思ってる一文字」をツイッター形式でポストしていくウェブアプリを開発してました。議事録のような感じで書いていきます。

気づいたら開発していたもの

• 一文字をツイッターのように投稿できる
• 投稿されているやつにGood👍をつけられる

環境構築

Dockerで環境を作った

dockerは最高。docker-compose.ymlとDockerfileのテンプレ的なのを用意しとけば、何も気にせずに一瞬で環境構築終了。

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

docker-compose.yml

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に移行したのもあって、少し開発は苦労しました。

結局、モジュールはこいつらを使うことにしました。

package.json

  "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をつけれる機能ってこんな感じですよ？めんどいです。

api.js

// ...
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やったりって色々と試そうと思ってたんですけど、１日じゃ無理だって途中で気付いて、今じゃ不毛地帯みたいなサービスが完成しちゃいました。しかも２日かかるっていうね。アドベントカレンダーも少し遅刻しちゃったりで。

とはいっても、たまーに、数日間でかる～くウェブアプリを作るのって意外と大事だったりするんですよね。こういうときにやってみたかった技術に触れたり、色々と失敗して試行錯誤してっていうのをやっていくので学んだことも多いし。

とりあえず、最後に思ったことを幾つか。

• 機能を盛り込むと開発がめんどくなって、結局は終わらない
• とりあえず、ここまででいいやっていう妥協が大事
• アドベントカレンダーは大変
• webpackといいparcelといい、npmのエコシステムの中のモジュールにもエコシステムができてて、もう色々とやばいってのがnodejs界隈で、若干カオス感を感じつつもなんか楽しい。多様性が高くて成長も速い。めんどいところもあるけど、なんだかんだ言って好き。
• いや、本当は3分クッキングみたいな記事書きたかったんですけどね？めんどいなって思ってたら開発に集中してしまってたんですよね。
• 文章力皆無