Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@smtrdev

Next.jsでサウナで整いたいお気持ち度合い記録アプリを3時間で作る

はじめに

今日は私の誕生日です。記事をご覧いただきありがとうございます。
せっかくなので、記念に自分にアプリをプレゼントすることにしました。

ガバガバ設計なのでこのまま真似はおすすめしませんが、この程度のクオリティであれば3時間で作れます。
慣れてる方は秒で作れると思います。

概要

定期的にサウナに行きたくなる私ですが、正直そこまで行きたくないかなという気分の日が多いです。

なので、その日のサ○ナイキタイ度合いを可視化できたら最高だなと思い、作ることにしました。

行きたい度が100%を連続するようであれば、早急に整いに行く必要があり、それをひと目で把握することができます。

その名も、サウナ気分

URL

誰でも書けるので、ぜひ荒らしてみて記録してみてください。
できれば本当に「行きたい度合い」を書いてくれると嬉しいですが・・。

使用技術

トップページ

それっぽいカレンダーと、日毎に行きたい度をドーナツグラフで表示。
カレンダーは、ハッタリです。
ただのカレンダーです。いずれ、その人のその日のお気持ち%を色別で表示するようにします。

Screen Shot 2020-12-19 at 1.03.06.png

お気持ち入力画面

手抜き度が垣間見えます。New。CREATE。
行きたい度合いを表明します。

Screen Shot 2020-12-19 at 1.09.36.png

入力後

お気持ちとともに、アメリカンスタイルな日付が、いつの投稿か教えてくれます(直せ)。

Screen Shot 2020-12-19 at 1.17.32.png

ハマりどころ

NextApiHandler

デフォルトだと、typeof parseInt(id) !== 'number' という条件で、idがstring|string[]型の場合怒られます。
雰囲気でtsを書いているのでもっと良い書き方あるとは思いますが、無理やりstringnewIdを定義して、idが配列だった場合の最初の値をぶちこむことで対応しました。

変更前(デフォルトのget-entry.ts)

get-entry.ts
import { NextApiHandler } from 'next'
import { query } from '../../lib/db'

const handler: NextApiHandler = async (req, res) => {
  const { id } = req.query
  try {
    if (!id) {
      return res.status(400).json({ message: '`id` required' })
    }
    if (typeof parseInt(id) !== 'number') {
      return res.status(400).json({ message: '`id` must be a number' })
    }
    const results = await query(
      `
      SELECT id, title, content
      FROM entries
      WHERE id = ?
    `,
      id
    )

    return res.json(results[0])
  } catch (e) {
    res.status(500).json({ message: e.message })
  }
}

export default handler

変更後

import { NextApiHandler } from 'next'
import { query } from '../../lib/db'

const handler: NextApiHandler = async (req, res) => {
-  const { id } = req.query
+  let { id } = req.query
+  let newId:string
  try {
    if (!id) {
      return res.status(400).json({ message: '`id` required' })
    }
+    if (Array.isArray(id)) {
+       newId = id[0]
+    }
-    if (typeof parseInt(id) !== 'number') {
+    if (typeof parseInt(newId) !== 'number') {
      return res.status(400).json({ message: '`id` must be a number' })
    }
    const results = await query(
      `
      SELECT id, title, content
      FROM entries
      WHERE id = ?
    `,
      id
    )

    return res.json(results[0])
  } catch (e) {
    res.status(500).json({ message: e.message })
  }
}

export default handler

Next.jsの with-mysql テンプレート

yarn migrate しても絶対コケるので手動でSQL流しました。

Error: Cannot read property '0' of null

https://www.npmjs.com/package/bad-words
filter()への渡し方に問題があったようなので、一度無効にしました。

handler
import Filter from 'bad-words'
import { query } from '../../lib/db'
    // 省略
    const filter = new Filter(
    const { foo, bar } = req.body
    const results = await query(
      `
      INSERT INTO entries (foo, baa)
      VALUES (?, ?, ?)
      `,
      // [filter.clean(foo), filter.clean(bar)]
      [foo, bar]
    )

まとめ

  • with-mysqlテンプレートで生成すれば、環境変数だけでDBに接続できる。デフォルトでCRUD周りも自動で生成してくれて楽。
  • カレンダーは見せかけなので、今後色を反映して、より賢く可視化する
  • 誰でも無限に書き込めます(認証周りまでやる元気なかった)
  • 整いたい気持ちは3時間で作れる

今後もう少しきちんとお手入れしようと思いました。アプリでもサウナでも、更に整える境地を目指せそうです。
ぜひ皆さんも、整いたい気分を書き残してみてください!

参考

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
gaogao-asia
バンコク/ホーチミン/東京/シンガポール拠点のスタートアップ・スタジオです! 起業家・起業家候補エンジニアメンバーが在籍し、0→1開発特化のプロフェッショナルが集まっています。他にも、海外プログラミング修行GAOGAOゲートやGAOGAOハウスの運営も行なっています! 絶賛メンバー募集中!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?