Firebase x TypeScript x Express で爆速でAPIを作ってDB(Firestore)にデータを保存する

やりたいこと

新人のReact研修用にアプリをつくってもらうのに、APIサーバとDBが必要になったので Firebase をつかって実装することにした。 別の案件もあってほとんど時間が取れないので爆速で実装する必要がある。

実装する

1. Firebase　でプロジェクトを作成する

2. Functions　の準備

3. Firestore の準備

4. ローカルに作成したプロジェクトと Firebase を連携させる

プロジェクト用のディレクトリを作成。

// package.json 作成
npm init
// firebase を扱うツールをインストール
npm i -D firebase-tools
firebase init

[操作] 矢印カーソルで移動、スペースで選択 Firestore と Functions を選択して Enter

? Which Firebase CLI features do you want to set up for this folder? Press Space to 
select features, then Enter to confirm your choices. 
 ◯ Database: Configure Firebase Realtime Database and deploy rules
 ◉ Firestore: Deploy rules and create indexes for Firestore
❯◉ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

Use an existing project を選択して Enter

? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

Firebase で作成したプロジェクトを選択して Enter

? Select a default Firebase project for this directory:
  hoge-app (hoge)
  hoge-app2 (hoge)
  hoge-app3 (hoge)
❯ xxxx-xxxxxxxxxx-app (xxxxx-xxxxxxxxx-app)
  hoge-app4 (hgoe)
  hoge-app5 (hgoe)
  hoge-app6 (hoge)

そのままEnter

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? (firestore.rules) 

そのままEnter

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

TypeScript を選んでEnter

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? (Use arrow keys)
  JavaScript 
❯ TypeScript 

そのまま Enter

? Do you want to use ESLint to catch probable bugs and enforce style? (Y/n)

そのまま Enter

✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.js
✔  Wrote functions/tsconfig.json
✔  Wrote functions/tsconfig.dev.json
✔  Wrote functions/src/index.ts
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? (Y/n) 

Firebase プロジェクトの初期化完了。

5. とりあえずデプロイしてAPIをテストする (エラーが出る)

functions/index.ts の一部のコメントアウトを外す

import * as functions from "firebase-functions";

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
// ここのコメントアウトを外す
export const helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

デプロイ(エラー出る)

# デプロイ(エラー出る)
$ firebase deploy --only functions

エラー内容

/Users/yanagi/dev/blog/test-functions/functions/.eslintrc.js
  13:44  error  Missing trailing comma  comma-dangle

functions/.eslintrc.js の13行目にカンマがないよと言われているので、カンマをつける。

カンマをつけたらもう一度デプロイ

# デプロイ
$ firebase deploy --only functions

今度はうまくいく。 デプロイが完了したらコンソールからAPIを叩いてみる。Hello from Firebase!が返ってくればOK。

URLはFirebaseのプロジェクトのFunctionsにで見れる。(他にも確認のしかたあるかもしれん)

# リクエスト
$ curl https://hgoehgoe.cloudfunctions.net/helloWorld
Hello from Firebase!

6. Express でAPIを作る

express で実装するAPIと functions.https.onRequest で実装されているいまのAPIを削除するAPIが混在するとなぜかcorsエラーが消えないという呪いにかかったので、とりあえず最初から書かれている functions.https.onRequest で実装されているAPIを削除しておく。

// functions/index.ts
import * as functions from "firebase-functions";

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
// ここ以下を削除しておく
export const helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

express を install

$ cd functions
$ npm i express
$ npm i -D @types/express

APIを実装

import * as functions from "firebase-functions";
import * as express from "express";

const app = express();

app.get("/hello", (req, res) => {
  res.send("hello express API");
});

const api = functions.https.onRequest(app);
module.exports = {api};

デプロイしてテスト (hello express API が返ってくればOK)

# リクエスト
$ curl curl https://hgoehgoe.cloudfunctions.net/api/hello
hello express API

とりあえずAPIは完成。

7. cors対応をしておく

基本的にブラウザからAPIを叩くことになると思うのでcors対応をしておく

現状のままブラウザからAPIを叩くと、下記のようなcorsエラーが返ってくる

Access to fetch at 'https://hogehoge.cloudfunctions.net/api/hello' from origin 'https://console.firebase.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

この cors エラーを回避する処理を実装する

cors をインストール

$ npm i cors

corsエラー回避処理を実装

import * as functions from "firebase-functions";
import * as express from "express";
import * as cors from "cors";

const app = express();
// cors対策
app.use(cors({origin: true}));

app.get("/hello", (req, res) => {
  res.send("hello express API");
});

const api = functions.https.onRequest(app);
module.exports = {api};

これでブラウザからAPIを叩いてもcorsエラーが起きなくなる。

8. Firestore をつかってCRUDを実装する

firebase-admin をインストール

$ npm i firebase-admin

まずはデータがなくては始まらないので、Firestoreにデータを登録できるようにする。

今回は Firebase の members というコレクションにデータを登録することにする。

import * as functions from "firebase-functions";
import * as express from "express";
import * as cors from "cors";
import * as admin from "firebase-admin";

const app = express();
// cors対策
app.use(cors({origin: true}));
// リクエストデータ取得のためのパーサ登録
app.use(express.json());
// firebase-admin初期化
admin.initializeApp();

app.post("/members", async (req, res) => {
  type RequestData = {
    name: string,
    message: string,
  };
  // リクエストのデータを取得
  const requestData: RequestData = req.body;
  // Firestoreのmembersコレクションにデータを保存
  await admin
    .firestore()
    .collection("members")
    .doc()
    .set(requestData);
  res.send({message: "success"});
});

const api = functions.https.onRequest(app);
module.exports = {api};

追加部分を説明していく

リクエストで送られてくるjsonデータをオブジェトにパースしてくれるパーサを登録している

// リクエストデータ取得のためのパーサ登録
app.use(express.json());

firebase-adminの初期化処理。これをやっておかないと Firestore に接続できない。

// firebase-admin初期化
admin.initializeApp();

リクエストされたデータの取得。 パーサを登録しているので、オブジェクトで取得できる。

// リクエストのデータを取得
const requestData: RequestData = req.body;

メインの Firestore にデータを登録する処理。 めちゃめちゃかんたんに書けるので Firestore 大好きである。

// Firestoreのmembersコレクションにデータを保存
  await admin
    .firestore()
    .collection("members")
    .doc()
    .set(requestData);
  res.send({message: "success"});

エラーのハンドリング処理は入れていないので、自分で入れて下さい！

デプロイしてテスト ({"message":"success"}がかえってくればOK)

# リクエスト
$ curl -X POST -H "Content-Type: application/json" -d '{"name":"ディオ", "message":"おまえは今まで食ったパンの枚数をおぼえ  ているのか？"}' https://hogehoge.cloudfunctions.net/api/members

# {"message":"success"}がかえってくればOK
{"message":"success"}

{"message":"success"}が返ってきたら Firebase のコンソールから Firestore のコンソールを開いてデータを確認する。 ちゃんとデータがはいっていればOK。

9. Firebase からデータを読み取る処理を書く

import * as functions from "firebase-functions";
import * as express from "express";
import * as cors from "cors";
import * as admin from "firebase-admin";

const app = express();
// cors対策
app.use(cors({origin: true}));
// リクエストデータ取得のためのパーサ登録
app.use(express.json());
// firebase-admin初期化
admin.initializeApp();

// members取得API
app.get("/members", async (req, res) => {
  // Firebaseからデータ取得
  const members = await admin
    .firestore()
    .collection("members")
    .get()
    .then(async (snapshot) => await snapshot.docs.map((v) => v.data()));
  res.send({members});
});

// members登録API
app.post("/members", async (req, res) => {
  type RequestData = {
    name: string,
    message: string,
  };
  // リクエストのデータを取得
  const requestData: RequestData = req.body;
  // Firestoreのmembersコレクションにデータを保存
  await admin
    .firestore()
    .collection("members")
    .doc()
    .set(requestData);
  res.send({message: "success"});
});

const api = functions.https.onRequest(app);
module.exports = {api};

追加部分の説明

membersデータ取得のAPI。Firestore からデータ取得する処理書いただけ。

// members取得API
app.get("/members", async (req, res) => {
  // Firebaseからデータ取得
  const members = await admin
    .firestore()
    .collection("members")
    .get()
    .then(async (snapshot) => await snapshot.docs.map((v) => v.data()));
  res.send({members});
});

デプロイしてテスト (さっき登録したデータが返ってきたらOK)

# リクエスト
curl https://hgoehgoe.cloudfunctions.net/api/members

# さっき登録したデータが返ってきたらOK
{"members":[{"message":"おまえは今まで食ったパンの枚数をおぼえているのか？","name":"ディオ"}]}     

PUT と　DELETE　はつかれたからまた今度

おまけ

[VSCode使ってるひとだけ] functions/index.ts の一行目の import で ESLint のエラーが出てると思うのでそれを解消する

この記事を読んでくれ。

flow-flow-flow.hatenablog.com

おわり

おれは転職がしたいんじゃない。退職がしたいんだ

転職したい。したすぎる。フロントエンドエンジニアになって 3 年がたったけどもう何もかもが嫌になっている。

今の会社に対する不満はもうとっくの昔に爆発して超新星になった。いまのおれは無だ。嘘だ。また新しい不満が溜まってそのうち爆発して、また超新星になるんだ。「はいはい。そんな不満を抱えてた時期もありましたね」みたいに。……何を言っているのかよくわからん。

ただ仕事がしんどくなるとおれはいつも求人サイトを徘徊する亡霊になる。green, findy, forkwell, paiza, geekjob, type, その他色々。自分のスキルを検索フォームに入力して、表示された会社をスクロールしながら眺めている。見つからない。行きたいと思える会社がどこにもない。そもそもおれは働きたくないのだ。行きたい会社なんかあるわけがねえ。

どうすればいいんだ。ふざけるな。働かないで生きていきたい。それだけで最高だ。

会社に管理されながら生きていても何も楽しくない。いまこうして求人情報サイトをぐるぐるしているのだって、lan scope とかいう監視ツールで会社に監視されている。意味がわからねえ。ディストピアか？　teams で上司の愚痴を同僚に送りたいが、そのメッセージさえも監視されている。なのでわざわざ slack 入れて slack で同僚と会話しなくちゃいけない。

いや、いい。話がそれた。転職だ。とりあえず転職の話がしたい。転職についての自分の考えを言語化していきたい。不安がなんども超新星になってもそれでも転職できない自分の脳みそを言語化していきたい。こんなに転職したいのにいまだに転職していないのはもはや洗脳されているか、何かしらの病気にかかっているとしか思えない。

だから言語化だ。自分を客観的に見て、イカれているかどうか判断するんだ。この文章を友達にみせて、イカれているかどうか判断してもらうのもいい。いや、友達いないんだった。

閑話休題だ。閑話休題って西尾維新の小説と、西尾維新を好きそうなやつが使っているのしか見たことないが、とりあえず閑話休題だ。転職の話がしたい。

転職の話をしようとすると何故か別の話を始めようとしてしまう。これは本当にやばい兆候なのかもしれない。さっきからなんども転職の話題に軌道修正しようとしてもすぐにそれてしまっている。やばい気がする。本能的な何かが俺を転職から遠ざけようとしているのかもしれない。

そんなわけない。

そんなわけないからここから数十行、俺は転職について書く。転職についてしか書かない。転職についての自分の感情を言語化して列挙して整理していく。そこから始まるんだと思う。ちゃんと向き合うんだ。

まず転職ってなんだろうか。ググる。「職業が変わること」。なるほど。おれが転職求めているものってそもそもなんだろうか。新しい職場か？　賃金のグレードアップか？　フルリモートワーク環境か？　それもあるかも知れないけど、いちばんの理由は「とにかく今の会社にこれ以上いたくない」だ。これがおれが転職にもとめているものだ。ん？　つまりおれは転職ではなく、退職したいだけなのでは？

…………。

…………。

…………。

転職という言葉は「今の会社からの退職」と「新しい会社への就職」、この2つの行動をぎゅぎゅっと詰め込んだ言葉なんだ。なんかそれを見落としていた気がする。デカルトも言っていた。「困難は分割して考えような」。マジでそれな。おれにとって退職はゲロ吐きそうなくらい難しい。他人の目とか評価ばかりを気にして生きているハイリー・センシティブ・パーソンな俺にとっては、退職を上司に伝えるのは命がけのイベントだ。それに合わせて就職も新しい環境でまたゼロから適応作業をしていかないといけないと考えるとゲロゲロだ。こんなゲロゲロゲロゲロゲロな 2 つの行動を 1 つの単語にまとめるからなかなか行動できないんじゃないか。困難すぎるんだ。デカルトも分解しろって言ってる。

二度と転職とかいう言葉を使うのはやめよう

退職/就職、ちゃんと分離させるんだ。

まあ分離したところでどうにかなるものでもないと思うけれども、ゴールというのは鮮明なほど達成しやすいみたいなワードをこれまで生きてきた中のどこかで耳にした気がする。「転職したい！」より、「退職したい！」「就職したい！」の方がシンプルだ。すこしだけ気が楽になった気がするような気がするような気がするような気がする。

分割した。ここでなんとなく退職 → 就職という時系列を思い浮かべるが、現実世界では就職 →退職という時系列であることが理想的な気がする。就職先を決めてから、退職を伝える。保険だ。思えばこの構造が俺に二の足を踏み続けされている気がする。

もう仕事なんてしたくないのに、退職をするためにはまず就職活動をしなければいけないなんて狂ってるとしか思えない。しかもそのハードルを超えなければ退職もできないなんて……ここは地獄か？

なので最近おれはフリーランスという路線について考えている。プログラマという仕事柄、そういう選択肢もあるにはある。ただフリーランスというのはなにかと不安だ。なぜ不安なのかといえばフリーランスは保険料や税金を自分で払わないといけないので、正社員の 2 倍稼いでトントンとか言われているのもあるし、マンションを借りたりローンを組んだりするのも難しくなるらしい。不安ばかりだ。なぜこんなにも不安なのかといえば、何も知らないからだ。税金についても、保険についても、ローンについても、何も知らん。正社員として飼いならされてきたので、そんなものに脳内メモリを割かなくても生きてこられた。

ただ、管理されたくないならやっぱりそのへんの勉強は必須だろう。退職したいだけなのに、保険や税金の勉強をはじめている自分の行動はおそらくとても自然だ。もう管理されたくないんだから、全てを自分で管理できるようにならなければいけない。ほぼ就職という選択肢は消えている。フリーランスがいい。管理されたくないし所属したくない。

社員旅行も、食事会も、飲み会も、規律もうんざりだ。

おれの時間をどれだけ奪えば気が済むんだ？　いいかげんにしろよ。おれの王様はおれで、他のだれでもない。おれ以外におれをコントロールなんてさせたくない。いちいちストレスなんだよ。おれの時間に干渉すんな、おれのプライベート触んな。なんかそんな歌を長瀬が歌ってた気がする。「お前のオールをまかせるなー」のやつ。

はい。

なんかいろいろ吐き出した。

求人情報サイトを見ている。残業なし、有給フル消化、フレックスタイム、フルリモートの会社を見つける。たぶん最高なんだろうけれど、こういう会社の社員はみんな優秀そうで、応募なんてできない。そうか。自分の実力もよくわかってないから怖いんだな。

以前、不満が爆発を起こしたとき、1 件だけカジュアル面談をしてもらったことがある。自分の環境が恥ずかしくなるくらい、モダンな環境の職場だった。スクラム開発、next.js, graphql, openAPI からのコード生成、カジュアル面談してくれた人はおれにとっては早口で、地頭の良さみたいなものをひしひしと感じで、ぜんぜんついていけなくて、それでも「いっしょに働いてもいい」ってくれて、でもおれはそれを断った。

少し手を伸ばせば、労働基準法にネグレクトかましているうんちみたいな今の会社をやめる世界線までいけたかもしれないのに行かなかった。

税金のことをしらない。保険のことをしらない。ローンのことをしらない。自分自身の実力をしらない。しらないことばかりだ。しらないから、いつまで立っても不安を振り切れない。youtube に上がっている自己啓発系の動画を見まくっていた時期もあったけれど、あんなもので変われるのなら、とっくのむかしに変われてた。

デカルトは言った。「困難は分割しろ」。ここまで不安を言語化して、自分の感情と向き合って、おれは今日からなにか変わるんだろうか。別に今日、上司に「会社辞めます」ということだってできるのに、おれはそうしない。まだ次の就職先が決まってないからだ。次の就職先っていつ決まるんだ。たぶん一生決まることはない。働きたいと思える会社なんてこの世に存在しないし、おれはそもそも働きたくないんだ。それでも働かないといけないなら、消去法でマシな会社を選んでそこに就職すればいいのかもしれない。完全に不満がなくなるなんてことは無いかも知れないけれど、少なくとも今の状況よりは良くなることを信じて、次の就職先を選ぶのも悪くない気はする。でも結局どこに行っても、誰かに雇用されるということは管理されるということだ。

どうやってもそこがきつい。

社会不適合すぎる自分の性質のせいだ。

それでもなんとか呼吸がしやすいように生きていきたい。いまのところその生き方にいちばん近そうなのがフリーランスのプログラマ。別にプログラマである必要はない。ただ 3 年くらいフロントエンドエンジニアをやってきたので、自分のスキルが活かせるならプログラマかなとは思う。プログラミングは嫌いじゃない。でも仕事でのプログラミングは、責任が伴うことも多くてしんどいときもある。いちばん楽しいのは個人開発で、お金が稼げそうなアプリをつくっているとき。じっさいできたアプリがお金を稼いでも数十円くらいだけど、それでもつくっているときは楽しい。

またしても何の話だ。

いい。わかった。とにかくおれはおれの人生をコントロールしたいので、税金やら保険やらローンやら、そういう人生において非常に大事だけど今までは自分でコントロールしてこなかった単元についてきちんとコントロールできるようになるところからはじめようと思う。

自分の人生のすべてをコントローラブルにしておきたい。

寝たいときに寝て、食べたいときに食べて、遊びたいときに遊んで、作りたいものをつくって、休みたいときに休んで、辞めたいときに辞めて、始めたいときに始める。

いまは会社にいろんなものを握られている。もちろん感謝すべきところもたくさんある。保険や税金の半分は会社が負担してくれているらしい。そのぶんサービス残業してるからチャラでは？　という気にならなくもない。ただそのいま会社にまかせている、アンコントローラブルな部分を自分でコントロールできようにもっていかなければいけない。

会社やめて～。

[MIDI キーボード] m1 mac が roland の MIDI キーボードを認識しない場合の対応

問題

久しぶりにキーボードを弾こうと思って roland の midi キーボード(A-49-BK)を m1 mac に接続したら認識してくれなかったので、対応策をしらべた。

対応

m1 mac で roland のキーボード(A-49-BK)を認識するためには、ドライバをインストールすればいい。

ドライバのインストーラのダウンロードページはここ → A-Series Keyboard Driver Ver.1.0.4 for macOS 11/12

ドライバのインストーラをダウンロード

ダウンロードページを開いたら、

1. 「同意する」のチェックボックスにチェックを入れる
2. ダウンロードボタンをクリックする

ダウンロードした asrs_mac11drv104 .tgz を解凍

• ダウンロードした asrs_mac11drv104 .tgz をダブルクリックで解凍する
• 解凍されたファイルの中に Readme.htm というファイルがあるので、ダブルクリックするとブラウザにインストールの手順から、midi キーボードの認識、設定までの手順が記述されているので、その通りに実行していく

以下引用

• インストール手順

インストールする
※ 起動中のアプリケーションは、あらかじめ終了しておいてください。ドライバのインストール途中で、コンピューターの再起動を行います。
すべての USB ケーブルをはずした状態でコンピューターを起動します。（キーボード、マウスを除く）
※ 指示があるまで、 A-Series Keyboard をコンピュータに接続しないでください。
「A-SeriesKeyboard_USBDriver11.pkg」をダブルクリックし、インストーラーを起動します。
画面の指示に従って、インストールを進めます。
※ インストール中に、「"インストーラ"から"ダウンロード"フォルダ内のファイルにアクセスしようとしています。」というメッセージが表示された場合は、[OK] をクリックします。
インストールが完了したら、［再起動］をクリックしてコンピューターを再起動します。
※ インストーラを削除するかどうかを確認する画面が表示された場合は、[残す] をクリックしてください。
※ コンピューターが再起動されるまでに時間がかかる場合があります。
コンピューターが再起動したら、A-Series Keyboard とコンピューターを USB ケーブルで接続します。

以上で A-Series Keyboard Driver のインストールは終了です。

※ アプリケーション － Roland － A-Series Keyboard DriverフォルダにReadmeファイルとドライバのアンインストーラーがインストールされます。

• midi キーボード設定手順

お使いになる前に
macOS の MIDI 入出力の設定
A-Series Keyboard とコンピューターを USB ケーブルで接続します。
アプリケーション － ユーティリティ・フォルダの中にある「Audio MIDI 設定」を、ダブルクリックして起動します。
ウインドウ メニューの「MIDIスタジオを表示」を選択して、MIDIスタジオ画面を開きます。
「MIDIスタジオ」ダイアログに、「A-Series Keyboard」が表示されていることを確認します。
※ 「A-Series Keyboard」が表示されていない、または淡色表示されている場合、A-Series Keyboard が正常に認識されていません。「MIDI を再スキャン」をクリックしてみてください。また、A-Series Keyboard の USB ケーブルを抜き、差し直してください。
※ バージョンの違うドライバをインストールした場合、以前の設定が残っている場合があります。その場合は、淡色表示されている「A-Series Keyboard」をクリックして選択し、「装置を取り除く」をクリックして、設定を削除してください。
MIDI の送受信が正常に行われていることを確認します。以下の手順を行ってください。
「設定をテスト」をクリックします。
A-Series Keyboard の鍵盤を弾いてみてください。「Audio MIDI 設定」ダイアログ内の対応するポートの矢印が点滅すれば、正しく設定ができています。
再度「設定をテスト」をクリックし、確認を終了します。
Audio MIDI 設定 メニューの「Audio MIDI設定を終了」を選択し、設定を終了します。

以上です。

詳しい手順はダウンロードした Readme.htm ファイルにすべて書いてあるので、そちらを参照しながら作業されるのが間違いないです。

お疲れ様でした🍵

【日報】2022/6/17 - 厚切りねぎ塩豚焼肉丼

コンディション

• 晴れ
• 在宅勤務日

9:45 起床

• 出勤メールを出す

10:00 業務開始

• 朝食。味噌汁、明太子、白米、キャベツ
• 業務を開始する
• もう本当にフルリモートでいいとおもうけれども、会社の体制的にフルリモートになることはない。会社をやめたり理由のひとつ。出勤時間って本当に無駄だよなと思う。
• mtg をやって、タスクをひとつ終わらせる。
• タスクも終わったし、今日はとくに急ぎのタスクもないので、適当に youtube をザッピングする。
• 昨日の日報をブログに投稿していなかったので、投稿する
• ちなみにこの日報は notion で書いて、ブログ投稿のさいは notion から md で export してから投稿するようにしている。

13:00 昼休憩

• 昼食。食パンにケチャップとマヨネーズとチーズをのせてトースタで焼いたピザトーストもどきを食べる
• そういえば今日は金曜日ということを思い出してテンションがあがる。
• パートナーは今日の夜、友達と外食するとのことなので、自分は心置きなく松屋に行くことができる。
• 自分は松屋のネギ塩豚カルビ丼が好きすぎて、以前は毎日のように食べていた。今はもう、ネギ塩豚カルビ丼ではなく、厚切りねぎ塩豚焼肉丼になってしまっているが、これはこれで美味しい。サラダと温玉のセットにして、終盤で温玉と醤油を追加して食べるともう最高である。

• プロテインとバナナジュースを飲んだけど、牛乳の過剰摂取のせいでとても具合が悪い。うげえ

14:00 業務開始 午後の部

• 残タスクを一気に消化
• 今日の分のタスクが終わったので適当に youtube ザッピング
• タスク終わったと思ってたら、追加のタスクきて、しかもけっこう面倒なタスクで精神的にきつい
• タスクは月曜日にやることにする

19:30 業務終 🎉

• 日報出す
• 松屋行く

• ゼロコーラと lady borden のアイスを買って帰宅
• ゼロコーラ飲みながら昨日買った『初心者からちゃんとしたプロになる　HTML+CSS標準入門』の続きでも読むかあ。
• ちなみに昨日 lesson 2 まで読んだ
• 実際に手を動かしながら『初心者からちゃんとしたプロになる　HTML+CSS標準入門』やってるけどかなり良いかんじだ

22:00

• 風呂
• 歯磨き
• 『STAND BY ME ドラえもん 2』を観た
• 寝た

なんか一言

• CSS の本買ったので CSS 力上げていきたい。
• いろいろ勉強したいことはあるけれど、いま自分にいちばん必要なのは CSS のスキル向上というか、CSS を書けるという自信だと思う。

⚡したいことリスト

• [ ] 『それで君の声はどこにあるんだ？――黒人神学から学んだこと』を読みたい
• [ ] 画像を販売できる pixta に登録して、写真を出品してお小遣いを稼ぎたい
• [ ] 砂浜でイカの骨を拾ったので、これでメルカリデビューしたい
• [ ] ケノン脱毛日記 2照射目の記事を書きたい
• [ ] フリーランスエンジニアとして手取り 30 万/月 稼ぐためには額面的にはどれくらい稼がなければ行けないのかを調べたい。
• [ ] ESP のギター買いたい

初心者からちゃんとしたプロになる　HTML+CSS標準入門

【日報】2022/6/15 - それをやって楽しいかどうか

08:45 起床

• 着替え
• トイレ

09:15 通勤

• 地下鉄
• 公園でキノコが生えているのを見つける
  • これなにキノコなのかあとで調べたい。食べられるのかしら

• キノコについて調べたけど、オニフスベっていうきのこっぽい。違うかもしれない
• オニフスベだとしたら、毒はないけど食べられないらしい。残念。
  • 参考資料
    • 雑草地・芝生・庭に生える キノコ（毒キノコ）
• あじさいも咲いてた。

10:30 業務中

• 今日から自分が実装したアプリのテストが行われる
• これから山のようなフィードバックがあって、それをさばいていかないといけない。うっ……
• 昨日の寝る前とか、通勤電車のなかで、昨日買った『そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか』を読んでたんだけど、わりといいことが書いてある
• 個人で会社を作ったとしても、企業相手に営業するといいとか、メインの商品ではなくてそれを取り巻くサブ商品で利益を得るサブグッズ型モデルとか。自分がはじめに想像していたのって、個人対個人のフロー型のモデルだけで、それ以外にもいろんな収益化のモデルがあるのだということを知れているので、とても良い。
• 自己啓発本じゃないのか？　みたいな不安もあったけれど、マインドよりも知識の方が書かれているので安心できる。
• 設計する時、頭で考えるだけじゃなくて、紙でも notion でもなんでもいいので思考と問題点を目に見える形でアウトプットしながらやるとスムーズだなっていつも思う
• 日報用に撮った画像を PIXTA で販売するようにしようかな。
• 売れたりしないとは思うけれど、商品(画像)自体は自分で撮影しているので原価無料なわけだし、やってみてその結果なんかをブログで報告するのもいい気がする。痛みなくはじめられるミニマムな副業ってかんじだ。

14:30 昼休み

• mtg が長引いたのでいつもより遅い昼休み
• 公園を歩いていたら足元に蛇がいて腰抜かしそうになった
• 写真を撮ろうと思って観察してたら、岩が重なっている壁の隙間に入り込んで行った
• 木陰で『そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか』の続きを読んだ
• 楽しく読めているので、自分はいま企業とか独立とかフリーランス関連の知識を欲しているんだなと自覚できた
• リードを外された犬が膝の上に飛び乗ってきて、飼い主さんにすいませーんと言われた
• 昨日雨だったこともあり、犬の足の裏の泥でズボンが汚れた

15:50 業務 午後の部

• フィードバック課題をこなす
• 課題整理してたら今日の分のタスクは完了したことに気付く
• 「エンジニア フリーランス」で検索して、レバテックというサイトが出てきたのでなんとなく登録してスキルシート書いた

19:00 退勤🎉🎉🎉

• 帰宅
• お腹が減っていたので、晩ごはん前にたまごパンと、チョコレートクリームを塗った食パンを食べる
• パートナーのつくってくれたごはんに「まずい！」と言ってちょっとした喧嘩になる
  • 「まずい！」ではなく「おいしくない！」というべきだったらしい

21:00 自由時間

• 風呂
• 歯磨きをしながらチャンネル登録している youtube の動画を消化
• パートナーが今日は早く寝るとのことなので、電気を消してベッドの中で ipad で『そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか』を最後まで読んだ。
  • 最後あたりは、雇用のことや人付きあのことが書いてあって、たぶん大事なことなんだろうけれど自分にはぜんぜん刺さらなくて斜め読みしてた。
  • 総評として、利益を上げるための型について考える余地を与えてくれたのはよかった。独立しようとしている人にとって必読の書かといわれれば別に読まなくてもいいかなという感じだ。目から鱗みたいなことはべつに書いてないし、この本を読んだからといって独立のモチベーションがあがるわけでもない。

24:00 就寝

なんか一言

• 書籍と言葉をアップロードしているインスタのアカウントを見つけた
  • https://www.instagram.com/p/CdQL9f6PZP1/
  • これ、自分がやりたいことに近いのかもしれないなと思ったけれど、どうなんだろうか。
  • 1回やってみて楽しかったら続けるとかにしてみようかな
  • それをやって楽しいかどうかを行動の軸として生きていきたい
• ブログに載せたい画像に署名する時ってブロガーの方はどうしてるんだろう。
  • wordpress ならプラグインで対応できるみたいだけど、web にそんなサービスないのかな？
  • ツール系のアプリをゼロからつくったことないのでつくってもいいな
• 画像販売サイトに登録するやつ、今週末にでもやりたい

そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか　最新改訂版 (メディアワークス文庫)

【日報】2022/6/14 - それで君の声はどこにあるんだ？

昨日なにをしたのかもおぼろげで、自分の生活が空っぽな気がしてたまらないので、記録を残すことにする。何もしてないわけではないことを自分自身に教えてあげるための日報。

8:45 起床

• 地下鉄で出勤
• 電車の車両故障かなにかのためいつも乗っている時間の電車が 4 min 遅延していた。

9:55 会社に到着

• mac を開いて今日やることをメールで送信する

10:00 業務開始

• ひとつミーティングをこなす
• ミーティングのあとすぐに formdata 周りの実装についての相談で通話がはじまる。 解決までいっしょにペアプログラミングをして対応完了。
• 別の質問が飛んでくる。先方がパスワードに絵文字を使いたいと言っているらしい。フロントエンドはどうとでも対応できるから、バックエンドの対応に合わせてくれとだけ言って、通話終了

11:15

• ようやく自分の作業に取り掛かれる
• 発生しているエラーの原因を突き止める
• 休憩して twitter を眺める。
• あたらしく作ったアカウントでまだ誰もフォローしていなかったので、神山健治、湯浅政明、女王蜂 アヴちゃん、坂上秋成、大童 澄瞳、佐藤友哉をフォローした。見るかどうかは別として、佐藤友哉の youtube チャンネルも登録した
• 坂上秋成の twitter のタイムラインにから『それで君の声はどこにあるんだ？――黒人神学から学んだこと』という面白そうな本があって、それを amazon で調べて購入するかどうか迷う。
• 迷っていると、amaozn のレコメンドで『そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか』という書籍が表示されている。
• 転職しようと思っている自分にとってはなかなかタイムリーな内容っぽいし、価格も 500 円くらいで kindle 版もあるのでポチることにした。
• 昼休みに公園で読もうと思って外をみると大雨なので、何もかもがだめになった。
• 梅雨ですねえ。

それで君の声はどこにあるんだ?――黒人神学から学んだこと

そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか　最新改訂版 (メディアワークス文庫)

12:13

• アプリのバグの対応
• ディレクトリの削除の監視したいので chokidar というライブラリを使用することにする。初めて使用するのであとで技術ブログに記事をだしたい。

13:00 昼休憩

• 雨がいいかんじに止んでいたので、公園で『そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか』を読んだ
• 10p くらいしか読めなかったけど、「やりたいことをやろう、やりたいことがないなら、誰かの役に立つことをやろう」みたいなことが書いてあった

14:00 仕事午後の部

• 結局 chockdar 使わずに実装した
• 昼に読んだ本に「誰かの役にたつことをやろう」と書いてあったので、ココナラでエンジニアってどんなことで役に立てるんだろうってのを調べてたら、フリーランスの方がいて、その方の技術ブログ読んで、その方の twitter に飛んで、タイムラインを眺めてたらいつのまにかデザインがかわいい 125 naroom というサイトに飛んでいた。
• デザイン勉強しないといけないよなあ、まずは自分の技術ブログのデザインをなんとかしないとなとか考える。
• デザインなあ……
• メフィスト賞の一覧サイトみたいなの作って、位置作品に位置デザインずつ勉強したこと詰め込んでいこうかな

16:00

• 以前報告していた不具合の修正ができたと連絡があったので確認
• API つなぎこみ部分を実装しようとしたらバックエンドの対応がまだで API ができていなかったので、ひたすらコンポネントのリファクタリング

19:30 退勤🎉🎉🎉

• パートナーに帰宅する旨を連絡すると、パートナーも外出しているらしく自分の方が先に家につきそうなので、晩御飯の材料などを買い物して帰宅
• 味噌汁とそぼろとサラダをつくった
• 風呂に入る

21:00 フリータイム

• 歯を磨きながら youtube をザッピング
• CODING IMPROV Episode 9 | Emoji Memory Matching Game
  • canvas じゃなくて DOM と CSS で実装するんだーって思った。時間があるときに写経したい。神経衰弱のカードに足が生えて動き回る神経衰弱とかあったら面白そうだなとおもったけどもうすでにありそうな気もする。
• ブログのアクセスなんかを google search console なんかで眺める
• css の勉強しないとなと思っている
• 寝る

なんか一言

今日買った『そろそろ会社辞めようかなと思っている人に、一人でも食べていける知識をシェアしようじゃないか』を早いとこ読んでしまおう。

あと css 勉強しないとなって1日中考えてるんだな。

日報には画像も添付したいので、明日からはなにかしら写真を取るようにしよう。

[フロントエンドエンジニアの転職活動記録] 転職したいけどなぜか行動に移せないので、行動できない理由を吐き出していく

プログラマになって 3 年目。 フロントエンドエンジニアとして働いているけれど、転職をしようと思っている。

転職をしたいと思うようになったのは、2022/4 のことだったとおもう。

すでに1人月分のタスクは振られているのに、さらに1人月分のタスクを振られることになった。 「できそう？」と訊かれても、「無理だと思います。すでにタスクを持っているので、やるとしても定時後になります」と言うと、「じゃあそれで。できるだけ負担かけないようにするから」とだけ言われて、タスクが倍になった。ふたり分働かさせるわけで、とうぜん月の残業時間は 100 h を超えた。そんなふうにプロジェクトを掛け持ちしているのは自分くらいで、ひとりデスマーチをしていた。こまかい案件も含めるとこのときは 6 つの案件を同時にこなしていた。

意味がわからなかったし、「さすがにタスク終わらないと思います」というと「じゃあ君以外のだれができるの？　できる人がいるならタスク振っていいよ」と返ってくる。あたりを見回してもタスクを触れそうな人はいなくて結局じぶんひとりでせっせとタスクを消化して終電で帰るか、会社に泊まる日々。

何のために生きているのかわからなくなって、すくなくとも仕事するために生きてるわけじゃないし、この会社のせいで人生を棒にふるいたくないという気持ちが溢れていた。

仕事ができるようになった結果、給料も少しは上がったけれど、それ以上にどんなタスクでも振られるようになった。

react のフロントエンド案件、electron でのデスクトップアプリ案件、express でのバックエンド案件、できることが増えたのはいいことだけれど、同時に案件をいくつも振られるのでどうやってもしんどい。このままじゃ会社にいいように使われて、殺されていくだけだなと思った。

転職しようと思ってやったこと

• findy に登録
• geechs job に登録

書き出してみるとたったこれだけしかやっていない。

転職活動をしようにも、いまの自分が他の会社でも通用するのかどうかが怖くてなかなか行動に移せないでいる

転職活動をサボっている理由

• 自分のスキルが他の会社で通用するのか怖い
• 求人の会社紹介の画像がキラキラしていて自分がその中に溶け込めるのか不安
• 求人をみても行きたいと思う会社がない
  • 求人内容に書いてあることが大仰で、自分にではできなさそう
  • そもそも仕事したくない
  • 作りたいものがない
• 給料が高いところに行くとなるとその責務が果たせるか不安
• 人間関係をまた新しく構築するのが大変そう
• いまの会社で自分の業務を引き継げそうな社員がいない
  • 全案件を CTO に引き継いでいいならいいけれど、それ以外の社員は electron を使ったことが無いはず
  • 弊社の悪しき伝統として、ドキュメントが保守されないので引き継ぎが憂鬱

書き出してみたけれど、どの項目もとりあえず面接受けてみないとわからんだろということばかりだな。

そう考えると転職サイトって情報少なすぎる気がするな。もちろん転職サイトでいい会社を探して、その会社のホームページに行って、その会社のプロダクト一覧から、プロダクトを見て、その会社の社員の sns が公開されていれば、発言や技術記事や github からあるていどのレベル感はわかるかもしれない。

いいや、とりあえず自分の抱えている不安は面接を受けてみないと拭えないということはわかった。

あと引き継ぎはもうなるようにしかならないだろ。引き継ぎできないから会社やめられないってこはないだろうし、誰かが electron 勉強してくれることを信じている。

自分の現在のスキル

• フロントエンドエンジニア 2019.9 -
  • javascript/typescript
  • react/next.js
  • electron
  • express

自分の理想とする働き方 (本当は働きたくないけど、働くとしたら)

• 給料 30万 / month
• フルリモートワーク
• あるていど整備された開発体制 (いまの会社より杜撰なところはないとおもうけど)
• 残業があんまりない (納期前とかはしかたないと思ってる)

とりあえず自分の理想とする働き方にあった会社に片っ端から連絡をとっていくのがいいかもしれない。

とりあえず転職するまでは、テキストとして転職の進捗をアウトプットすることで客観的に進捗具合を確認できるようにしていく。ほとんどが転職活動ができていない言い訳みたいになってしまうかもしれないけれども、アウトプットすることでその言い訳を客観視できれば、反省もできて、何かしら進展があるかもしれないと期待している。

しばらく日記みたいに転職活動記録をつけていくことにする

映画『犬王』オリジナル・サウンドトラック(通常盤)