JavaScript on YAGI BLOG

Next.js(React),Go kit(Golang)で「SENRYU」を個人開発した

Sun, 20 Sep 2020 22:04:18 +0900

今回はじめて個人開発でアプリを作りました！！今年の1月に個人開発をしようと考えてから、アプリ企画・技術選定をして、開発途中で作るアプリを変えたりと色々と迷走しましたが、なんとか一区切りつきました！！（8か月ぐらいかかるなんてチンタラやってたなあ（笑））

開発したアプリや今まで考えていたことなどをまとめます。

アプリ概要

川柳を共有することができるSNSアプリ「SENRYU」を開発しました。

機能

ログイン
ユーザー登録
ログアウト
川柳一覧表示
マイ川柳一覧表示
川柳投稿

フロントエンド

Next.js(React)

フロントエンドにはNext.jsを利用しました。TypeScriptを使ってみたくて、TypeScriptと相性がいいReactを選択して、最近話題のNext.jsにしようと決めました。
Next.jsはルーティング設定が楽だし、SSG, SSR, SPAをページごとに設定できて便利だしと使って良かったなと思っています。ただ、認証はFirebaseやNextAuth.jsを利用して他のSNSアカウントとかでログインする実装にするのが楽だと感じました。

Material-UI

ReactのUIコンポーネントライブラリであるMaterial-UIを利用してUIの基礎を作りました。簡単に見た目を整えることができるので、とても便利です。

styled-components

Material-UIの見た目を調整したい時にCCS in JSのstyled-componentsを利用しました。TypeScript内でCSSを書けるので普段CSSとかを書かない僕には使いやすかったです。

バックエンド

Go kit(Golang)

個人的にGolangを利用したかったのとマイクロサービス構成でアプリを作ってみたいという理由からGo kitを利用しました。使ってみた感想としてあまり日本語のドキュメントとかなく調べるのが大変でしたが、Golangにはホットリロードがあってコンパイルが速く言語に慣れれば開発スピードが上がりそうだなと思いました。

データベース

MongoDB

NoSQLを利用したことがなかったので今回利用しました。MongoDBの基礎的な知識を身につけることはできましたが、RDBMSよりもNoSQLを利用するメリットがあんまりわからなかったです。

開発環境

Docker

マイクロサービス構成でアプリ開発をしていたので、それぞれのサービス毎にコンテナを作成しました。ローカルでDockerコンテナを立てて開発するときはVSCodeのRemote Containerが非常に便利でした。ぜひ使ってみてほしいです。

対象リポジトリ

senryu-frontend
senryu-user
senryu-post

記事を書くまでの経緯

元々、今年の1月に他のサービス開発を考えていました。技術選定の時には

Next.js(React)
TypeScript
Go kit(Golang)
MongoDB
Docker
Github Actions
AWS
K8s
マイクロサービス

でアプリを開発してリリースをしようと思っていました。せっかくの個人開発だし勉強もかねて挑戦してやる！っていう気持ちで技術選定をしましたが、今思うとDocker以外はほぼ経験がなかったのでめちゃくちゃ無謀だったなと思います。（笑）
そんな感じで技術選定をしてから要件や仕様決めて開発を始めましたが、わからないことが多すぎで全然進捗がなかったです。。亀の足のような遅さでしたがなんとか進めていた 4月頃か5月頃に気づいてしまいました。
「クラウドでK8s使うと金けっこうかかるやんけ！」
今思うと当たり前だし、調査不足すぎだよ自分。。ということがあり、最初に作りたかったサービスは世にリリースするのが厳しいなと思いましたが、せっかくある程度までは勉強して作っていたので、違うサービスとして開発をしてGithubで公開してポートフォリオ的な感じにしようと決めました。
といった経緯で今に至ります。結果的には個人開発したアプリをリリースすることはできませんでしたが、Next.jsとGolangを学べたり個人開発の雰囲気を味わえたので良かったです。

最後に

個人開発はすべてを自分で考えないといけないので、とても大変ですが技術選定や作業の進め方など誰からも指図されずに好きなようにできるので、楽しいし学びが多いですね。

Next.jsのgetServerSidePropsでリダイレクトをする

Sun, 13 Sep 2020 00:24:52 +0900

勉強用にNext.jsで個人開発をしていて、cookieに値がない時トップ画面にリダイレクトする実装をしたかったのですが、参考にできる情報が少なかったので記事にしました。

リダイレクト方法

import { parseCookies } from "nookies";
import { GetServerSideProps } from "next";

// ...

export const getServerSideProps: GetServerSideProps = async (context) => {
  const cookies = parseCookies(context);
  const userId = typeof cookies.userId === "undefined" ? "" : cookies.userId;
  if (userId === "") {
    context.res.writeHead(302, { Location: "/" });
    context.res.end();
  }

  return {
    props: {},
  };
};

cookieにuserIdを仕込んでいて、userIdがなかったらログインしていないとみなしてトップ画面に戻す実装をしました。

最後に

RFC: Returning redirects from getServerSideProps / getStaticProps にもあるようにgetServerSidePropsでリダイレクトする方法が書かれていますが、うまく実装ができなかったのでレスポンスを書き換える感じの実装にしました。
Next.js関連は日本語の記事が少ないので、情報を探すのが大変ですね。

「Type '型' is not assignable to type 'never'」のエラーを解消した

Tue, 08 Sep 2020 21:11:11 +0900

仕事でVueを使っていて、追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振るの記事に書かれているオブジェクトの追加と削除を実装しようとして、 TypeScriptで書いている時にエラーが発生したので、その解消法について記載します。

発生したエラー

以下コードの3行目でType 'boolean' is not assignable to type 'never'.Vetur(2322)のエラーが発生しました。このエラーは解消しなくてもアプリが動きましたがエラー状態は気持ちが悪いので解消法を探しました。

        getNewId() {
            const usedIds = this.stats.reduce((accumulator, stat) => {
                accumulator[stat.id] = true;
                return accumulator;
            }, []);
            const nextid = usedIds.findIndex((exists) => !exists);
            return nextid < 0 ? usedIds.length : nextid;
        }

解消法

[] → [] as boolean[]のように記載することでエラーを解消できます。TypeScriptは、連結を使用して配列を削減するときに「never」型を推測するのはなぜですか？に記載されているようにboolean[]にキャストしてあげればOKです。

これは、[]の型がnever[]であると推論されているためだと思います。これは、空でなければならない配列の型です。型キャストを使用してこれに対処できます。

今回のコードは無理やり配列を作っているので、TypeScriptが値を持たないと判断してnever[]を返していたみたいです。

      const usedIds = this.sitePermmisons.reduce(
        (accumulator, sitePermmison) => {
          accumulator[sitePermmison.id] = true
          console.log(accumulator)
          return accumulator
        },
        [] as boolean[]
      )

最後に

今回のエラーはとても単純な内容でしたが、reduce, findIndexの使い方やVueでオブジェクトの追加、削除方法などをあまり理解していない状態だったので、色々と調べていたらかなり時間をかけてしまいました。なんとなくの実装で進めると大はまりすることがあるので、理解しつつ作業のスピードを落とさないようにバランスを考えないとなーと思いました。

Vuetifyで「Data Tables」を使って管理画面を作成する

Sat, 18 Jul 2020 17:24:13 +0900

今回は久しぶりに技術ネタの投稿です！最近会社でNuxt.js + TypeScriptを利用して開発をしていて、「Vuetify」でデザインをいい感じにしながら開発を進めています。こんな感じのテーブルを作成します。データのソート、表示数変更、新規作成、編集、削除、検索ができるにしています。

全体のコード

// pages/yagiblog-sample.vue

<template>
  <v-card>
    <v-card-title>
      <v-row>
        <v-col cols="6">
          テーブル作成のサンプル
        </v-col>
        <v-col cols="6">
          <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on, attrs }">
              <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
                新規作成
              </v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.name"
                        label="氏名"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.height"
                        label="身長(m)"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.weight"
                        label="体重(kg)"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.bodyFatPercentage"
                        label="体脂肪率(%)"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="close">
                  キャンセル
                </v-btn>
                <v-btn color="blue darken-1" text @click="save">
                  保存
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="検索"
            single-line
            hide-details
          ></v-text-field>
        </v-col>
      </v-row>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="persons"
      :items-per-page="5"
      :search="search"
      class="elevation-1"
    >
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deletePerson(item)">
          mdi-delete
        </v-icon>
      </template>
    </v-data-table>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue"

interface Persion {
  name: string
  height: number
  weight: number
  bodyFatPercentage: number
}

export default Vue.extend({
  data: () => ({
    dialog: false,
    search: "",
    editedIndex: -1,
    editedItem: {
      name: "",
      height: 0,
      weight: 0,
      bodyFatPercentage: 0
    },
    defaultItem: {
      name: "",
      height: 0,
      weight: 0,
      bodyFatPercentage: 0
    },

    headers: [
      {
        text: "氏名",
        value: "name",
        align: "start"
      },
      {
        text: "身長(m)",
        value: "height"
      },
      {
        text: "体重(kg)",
        value: "weight"
      },
      {
        text: "体脂肪率(%)",
        value: "bodyFatPercentage"
      },
      { text: "操作", value: "actions", sortable: false }
    ],
    persons: [
      {
        name: "naosuke.ii",
        height: 1.68,
        weight: 60,
        bodyFatPercentage: 15
      },
      {
        name: "iemochi.tokugawa",
        height: 1.7,
        weight: 61,
        bodyFatPercentage: 14
      },
      {
        name: "kaishu.katsu",
        height: 1.6,
        weight: 55,
        bodyFatPercentage: 12
      },
      {
        name: "eiichi.shibusawa",
        height: 1.63,
        weight: 65,
        bodyFatPercentage: 20
      },
      {
        name: "aritomo.yamagata",
        height: 1.75,
        weight: 63,
        bodyFatPercentage: 10
      },
      {
        name: "shigenobu.okuma",
        height: 1.8,
        weight: 68,
        bodyFatPercentage: 19
      },
      {
        name: "taro.okamoto",
        height: 1.72,
        weight: 63,
        bodyFatPercentage: 18
      },
      {
        name: "toshimichi.okubo",
        height: 1.82,
        weight: 70,
        bodyFatPercentage: 17.5
      },
      {
        name: "takamori.saigo",
        height: 1.9,
        weight: 80,
        bodyFatPercentage: 18
      },
      {
        name: "kaoru.inoe",
        height: 1.79,
        weight: 65.5,
        bodyFatPercentage: 12.3
      },
      {
        name: "yukichi.fukuzawa",
        height: 1.98,
        weight: 65,
        bodyFatPercentage: 10
      },
      {
        name: "yoshinobu.tokugawa",
        height: 1.75,
        weight: 58,
        bodyFatPercentage: 8
      },
      {
        name: "hideyo.noguchi",
        height: 1.56,
        weight: 50,
        bodyFatPercentage: 7
      },
      {
        name: "ichiyo.higuchi",
        height: 1.5,
        weight: 49,
        bodyFatPercentage: 20
      },
      {
        name: "soji.okita",
        height: 1.7,
        weight: 62,
        bodyFatPercentage: 13
      },
      {
        name: "isami.kondo",
        height: 1.75,
        weight: 68,
        bodyFatPercentage: 15
      }
    ]
  }),

  computed: {
    formTitle(): string {
      return this.editedIndex === -1 ? "新規作成" : "編集"
    }
  },

  methods: {
    deletePerson(item: Persion): void {
      const index = this.persons.indexOf(item)
      confirm(item.name + " を削除しますか？") && this.persons.splice(index, 1)
    },
    editItem(item: Persion) {
      this.editedIndex = this.persons.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },
    close() {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },
    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.persons[this.editedIndex], this.editedItem)
      } else {
        this.persons.push(this.editedItem)
      }
      this.close()
    }
  }
})
</script>

基本的な使い方

<v-data-table>にヘッダーやアイテムを渡せばいい感じにテーブルを作成してくれます。ここで書かれている"headers"や"persons"はscriptに記載されているdata: () => ({})内を参照しています。

「React Hook Form」でフォームを簡単に作る

Tue, 26 May 2020 09:00:24 +0900

Next.js(React)でログイン機能を実装していて、フォーム作成に苦戦していました。そもそも、Reactを全然理解していないので、フォームの値はどうやって取得すればいいのか？みたいなところからわかりませんでした。

今回はReact+TypeScriptでフォームを作成するのにReact Hook Formがとても便利だったので、紹介します。

React Hook Formとは

公式サイトを見ると「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」らしいです。
詳細は以下公式サイトを見てください。
React Hook Form

さっそく実装をする

まずはReact Hook Formをインストールします。以下コマンドをプロジェクト配下で実行します。

npm install react-hook-form

インストールしたら、importしてフォームの値をサポートするためのFormData型を作成します。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

今回はログイン用のフォームを作成するために、string型のusernameとpasswordを用意しました。次に、useFormを使ってフォーム作成に必要なメソッドを受け取ります。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

export default function Login() {
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
}

useForm<FormData>()のように書いてフォームで使う型を設定できます。 constで定義されているメソッドについては以下にまとめました。

register:　input/selectのRefとバリデーションルールをReact Hook Formに登録する
handleSubmit:　フォームバリデーションに成功するとフォームデータを渡す
watch:　指定されたinput/inputsを監視し、その値を返す
errors:　各inputのフォームのエラーまたはエラーメッセージを含む

これらのメソッドを使って、フォームを作成します。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

export default function Login() {
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
  const onSubmit = (data: FormData): void => console.log(data);

  console.log(watch("username"));
  console.log(watch("password"));

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="filed">
          <label className="label">username</label>
          <input
            name="username"
            placeholder="username"
            ref={register({ required: true })}
          />
          {errors.username && "usernameを入力してください。"}
        </div>
        <div className="filed">
          <label className="label">password</label>
          <input
            name="password"
            placeholder="password"
            ref={register({ required: true })}
          />
          {errors.password && "passwordを入力してください。"}
        </div>
        <div className="filed">
          <button>login</button>
        </div>
      </form>
  );
}

フォームの流れにそって解説します。
フォームのinputで作成したFormDataを使うためにはname属性に設定します。また、ref={register({ required: true })}のように書くことで、inputは入力必須にしています。 {errors.username && "usernameを入力してください。"}はusernameがバリデーションエラーになったら表示されます。最後に、フォームに入力をしてボタンを押してバリデーションエラーが発生していない場合、<form onSubmit={handleSubmit(onSubmit)}>が動いて、const onSubmit = (data: FormData): void => console.log(data);が実行されてコンソールに入力された値が表示されます。フォームに入力がない状態でボタンを押すと以下のような挙動をします。 console.log(watch("username"));はusernameに入力された値が変わるとその都度コンソールに表示します。

Go製APIから「fetch」するのにハマった

Tue, 19 May 2020 21:04:08 +0900

Next.js(React)+Goで個人開発をしていて、FetchAPIを利用してGoでローカル環境にたてたAPIをNext.jsで呼び出す際に、値が取れずにはまりました。今回はどうやって解消したのか記事にしました。

今回発生したエラー

Next.jsでfetchを使ってPOSTした際に、以下のようなエラーが発生。

Error serializing `.postData` returned from `getServerSideProps` in "/posts/get-api". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

ようわからんけど、APIから値が取れてないみたいでした。 Next.jsからfetchする際のコードは以下のようにしていました。

export const getServerSideProps: GetServerSideProps = async () => {
  const url = "http://localhost:8080/login";　←　APIはローカルの8080番ポートにたてていました。
  let postData = {};
  await fetch(url, {
    method: "POST",
    cache: "no-cache",
    headers: {
      "Content-Type": "application/json charset=utf-8",
    },
    body: JSON.stringify({ username: "yagiyu", password: "miran" }),
  }).then(function (response) {
    console.log(response);
    postData = response.json();
  });
  return {
    props: {
      postData,
    },
  };
};

また、上記を実行した時のレスポンスが以下で、APIと通信はできたが、値を取れませんでした。

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: true,
      _transformState: [Object],
      [Symbol(kCapture)]: false
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://localhost:8080/login',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

ターミナルからcurlを実行すると、以下のように成功していました。