2023-03-05

2023年の2月

生活

筋トレ
2月後半は外出だったり、個人開発だったりで、筋トレの時間が削れていった。
3月は少しずつ復活したい。
Nextで開発始めた
実家のフォトスタジオのサイトを4年ぶりくらいにリプレイスを始めた。
機能実装は楽しいのだが、どうしても広告LP的な感じなので
UIに割く時間の方が多くて正直しんどい。
追い風とstyled-component、chakuraUIを入れており、気色悪い感じになっているが
あくまで勉強目的もあるので一旦このままにしてる。
最近は機能単位でディレクトリを分ける風潮があるのでそれに乗っかってみている。
publicなので、辛口コメントお待ちしてます。
https://github.com/kamabokochan/natura_2023
ブラッシュアップライフ
バカリズム脚本、安藤さくら主演の日曜ドラマ。
ハマってみている。
安藤さくらはNHKのまんぷく以来見ていなかったけど、やっぱり面白い。
雪が降った
すごく雪が降った日が1日だけあった。
絶好調〜真冬の恋〜〜〜
焼肉屋に3回も行った
1回目は1年ほどお世話になった業務委託さんとランチ。
2回目は最近退職したメンバーと現役メンバーでのディナー。
3回目は中学時代の友達とのディナー。

普段外出することすらない自分が３回も人とご飯なんて珍しいのに
その上全て焼肉だったのは今でも不思議である。
牛に恨みでもあったのだろうか。

人脈は大切にしていこう、細くても繋がっておこうと
最近はよく考えるようになっている。
人と会うようにすると自然と身だしなみにも気を配るしね。
SUZURIを始めた
無料で物販が可能なSUZURI。
父の写真を使ってテキトーに出品してみている。
特に期待はしていない。
https://suzuri.jp/natura_iwate
2月の料理

仕事

CMS
なぜだか急にCMS製造マシンと化している。
おかげでバリデーションやフォーム周りのライブラリを少し経験できた。
そして大型案件を経て、案件の初動ムーブがとにかく重要だとより一層強く感じるようになり
不安要素を先んじて潰す、確認する、エビデンスに残すことにリソースを割くよう意識する感覚が強まった気がする。

2023-02-07

2023年の1月

生活

実家の引越しの手伝いをした冬の山のゴミ処理場に200キロぐらいのゴミを捨てに5、６回ほど往復。そのほか荷物を新居に氷の道の上をわっせわっせと運んだ。もちろん親孝行という名のボランティアなのだが、相当給料が出ておかしくない労働だった。
notionを始めた人生の路頭に迷って数年、最近は本当に「失意のどん底」だったのでやりたいこと、食べたいもの、行きたいところなどをメモしてまとめるためにnotionを利用し始めてみた。職場で利用しているだけあってとっつきやすいし、使用感もよし。
ポケモン福袋が届いた 3年連続当選はしているのだが、年々クオリティが下がっている。今年はかなりハズレだった。
体組織計を購入した Anchorのを購入した。毎朝起床後にのるだけで、データが蓄積されてアプリに勝手にグラフ化してくれて便利。起床後に測るのがルーティンなのだが、寝起きは心拍数が高いので少し落ち着いてから乗る。
筋トレを再開した体組織計を購入したので、せっかくだからと思い筋トレを再開した。久しぶり、youtuberのインストラクターさん。無理ない筋トレを長く持続したい。ちなみにアブローラーとプッシュアップバーも買ってみた。なお、気が向いたらやるつもりである。
スキンケアを試行錯誤冬の乾燥に伴い、顔や体の肌荒れが気になってきたので色々と試行錯誤した。まず一番簡単な方法として洗顔をやめて、優しい人肌くらいのお湯で顔を洗うようにした。またシャンプーやボディソープもかなり薄めたり、気になるところにだけ使い、あとはお湯で流すだけにしてみた。そもそも家から出ていなかったり、冬で汗をかかなかったりするので体の必要な脂まで落としているのでは？というところから始めた。今のところ、調子は悪くないのでこのまま続けようと思う。あとはヒートテックは乾燥するので着ないようにしてみたり。
料理をSNSにアップ気が向いた時にSNSに上げている。人に見られても恥ずかしくない食事を心がけるための習慣にしようと思っているが最近はとても人様に見せられるようなご飯じゃないので上げていない。料理のレパートリーをとにかく増やしたい。
デリシャスパーティプリキュアを見始めたプリキュアは実は全く見てこなかったのだが、最近履修し始めた。デリシャスパーティーは本当にいいので見てほしい。みんなでデリシャスマイルになろう。
LINE オープンチャットを始めた筋トレ・薄毛治療・APEXなど色々情報が入ってきて良かったりする。さらに自分の街のオープンチャットでは、どこの店が良いだのイベントがどうのこうのなど意外とキャッチアップしにくい情報が入ってくるし、質問できたりするのでよい。 Apex部屋の野良の人とボイチャで2~3回ほど一緒にプレイしてみたりもした。全く初対面のネットの人と交流するのって新鮮で、自分のトークとかコミュ力の鍛錬になって良い。特にApexは連携しないと勝てないゲームなのでその辺も絡んで相性良い。
0年0組を見始めた女王蜂のアブちゃんがプロデュースするアイドルのオーディション番組。なんとなく見始めたのだが、割と面白い。他の子とどことなく空気感が違う不思議ボーイのItaruくんと、同郷の、、何くんだか忘れたけどすごく真面目で苦労している子、この二人を今のところは応援している。

仕事

大型PJが終わったここ1年ほど携わっていたPJが終わった。
社内LTに参加した社内のLTイベントに参加した。 LTは普段からインプットとアウトプットをうまくしていれば、多分慣れて楽しいんだろうなと思った。

そんな2月だった。

2023-01-01

振り返り[2022 → 2023]

適当に2022を振り返ってみる。

1月

指を病気した

人生で初めて蜂窩織炎という病気に感染した。

突然の出来事だった。ある夜中、寝ているところを左手の親指に異常な痒みが襲った。

最初は痒くなるだけだったので、無視していたのだが、少しずつ気泡？のように斑点ができ、腫れてくる親指に異常を感じて皮膚科に行った。

最初に来院した皮膚科が、失敗だった。まるで専門性のない、頼りない雰囲気の老人の男性医師に処置してもらった。

どうしてもそこでの処置に違和感を感じていたため別の皮膚科に行き、若い男性医師に見てもらった。

こちらは医学的観点で専門性のある意見をもらえるし、何より言葉のキャッチボールをスムーズにできることで前の医者より信頼できた。

「すぐに今使っている薬は捨ててください。それは悪化させる薬です」

と言われて、まさかそこまで医療ミスを受けていたとは思わず、驚きと共にセカンドオピニオンの大切さを感じた。

蜂窩織炎は、雑菌などのウイルスが皮膚から内部に侵入していく病気だった。

おそらく一定以上の免疫があれば、発症しないのだが自分の場合は、リモートワークによる運動不足や生活リズムの崩れ等もあり免疫が下がっており、発症したと思われる。

症状が重い場合は、最悪患部を除去しなければ、全身に回ってしまう場合もある。実際自分の場合は、左手の親指から血管を伝い左腕、脇の下まで赤くなっていた。

処置方法としては、抗生物質を飲んだり塗ったりするのだが、いずれも自分の場合は効果が現れず最終的には大学病院で点滴を打つことでなんとか治療できた。

毎朝7時ごろに大学病院に通って1時間ほど点滴を受ける日々が2週間ほど続いた。また親指の患部は皮膚がほぼ腐り、皮膚の下の肉組織が剥き出し状態だったため皮膚を再生させる臭い塗り薬を塗り、ガーゼ、包帯で過ごす日々だった。

全治約1ヶ月ほどだった。

患部の写真は、いくつか残っているがいずれもグロいのでここでは伏せておく。

強制的に健康的な生活リズムになっただけで体調を崩したり、肌荒れがまるでなくなったので人間らしい生活の大切さを身をもって感じた。

appleとバトった話.

Macbookproが急に壊れ始め死んだ話 - ふなまる水産業務作業日報

2月

3月

4月

5月

6月

7月

8月

報復性夜ふかしに苦しむ

人間らしい生活の大切さを身をもって感じた。

と1~2月に学んだはずなのに、報復性夜ふかしに苦しんでいた。人生の路頭に迷っていたり、生きる理由が見つからなかったり重く捉えられてしまうかもしれないけど、割とライトに普段から思っていたりする。人間の生活・地球に飽きてしまったのかもしれない。

9月

スプラ3を始める

スプラ2はXまでやっていたので、3を始めた。

10月

内見する

一人暮らしを始めるにあたり、内見をした。そんなに外出しない方だったので、都会の中心から外れた田舎に住んだ。同じクオリティの家に都内で住もうと思ったらとても手が出せないであろう、と思った。

人と久々に遊ぶ

普段リモートでゲームをする仲間と久々にリアルで遊んだ。人と会う機会はめっきり減ってしまったので、こういうリアルでの体験の大切さを改めて感じた。あと、本当に世の中にはいろんな人がいて自分と考え方や趣味嗜好がまるで違っていたりすると面白い。絶対に自分だけの世界では体験しないようなことが起こる。

今までは、極力他人とは関わらずに生きていきたい派だったがある程度他人との交流も悪くないもんだと思った。

11月

引越しをする

引越しをした。ゼロからのスタートだったので、生活家電など揃えるのに苦労した。おかげで家電には割と詳しくなった。

短いスパンである程度のものを買い換えるのではなく初期投資をして、長く良いものを使うスタンスでいたので人生史上一番消費したと思う。例えるとファミリー層が買うであろう家電のクオリティで揃えた。独身貴族風の部屋になっている。

ほとんどのものは割と満足しているのだがオーブンレンジだけは、無駄に高いクオリティで買ってしまったと思っている。まあ大は小を兼ねる、ってことで、、

あと今回契約した家は、ZEH住宅で借主が太陽光発電で売電した売上を貰えるのだが 12月は460円だった。

12月

実家の引越しの手伝いをする

疲れた。疲れた。疲れた。

その他

react native/チーム開発

2022はほぼreact nativeを触っていた。自分はreactはv16.8未満で止まっていたので hookの使い方がそもそもわかっていなかった。

hookとかFCとか最近の書き方に少し慣れることができた。

あとは大規模開発が進む中での動き方とか、やっておいた方がいいことこういう時はこうする、みたいな事例を色んな初めて交流する人たちとチームになったことで学びがあった気がする。

週次の振り返りやモブプロ、モブプロができない時のソロでの動き方ドキュメント・作業ログの残し方、PRの出し方、slack bot活用等々

2023

これを頑張る

転職活動をする（転職が目的ではなく、ちゃんと自分の価値を知ることと、経歴と向き合うことをする）
美容を頑張る
車の免許を取る

2022-02-25

Macbookproが急に壊れ始め死んだ話

2022年1月の初めに、macbook pro 2017年モデル(購入は2018年末なので3年弱使用)が突然具合が悪くなった。

トラックパッドがカチっとならない。ただ普通に使用できるし、すぐ治るやろと思いそのまま1週間くらい使っていた。

しかし、いつまで経っても治らない。

ググった結果、さまざまなリセットを施すものの改善しない。

そして、左についているC端子もなんだか接続が悪くなりついに反応しなくなった。

つまり充電ができない(=終わり)のである。

これはまずいと思い、appleのサポートを受けられる近くの店舗に行った。

特に精密に見るわけでもなく、症状をヒアリングし概算見積もり10万前後と言われた。

流石に10万出すのであれば新品購入を検討したいと思い悩んでいたが

その見積もりしてくれたスタッフ曰く

appleの修理センターであればまた結果が変わるかも知れないとの話を受け

appleのサポートセンターに問い合わせることにした。

電話で聞くには

やはり10万ほどかかるとのこと。

ただ、ここだけの話裏技で見積もりを5万に設定し

精密検査をした上でそれ以上であれば

一度確認のメールが入り、修理するかを決定できるので

より厳密な見積ができるとのこと。

ただほぼ確定で10万は超えるだろうと言われた。

また5万円以下であれば、そのまま修理するためキャンセルできないと。

じゃあ、せっかくだから一応調査をしてもらった上で

新品購入検討するかという軽い気持ちで、修理に出した。

結果、5万円で修理され返ってきた。

（？？？？？？）

なぜ。

appleに再び確認したところ

「部品は正常に交換できました、安く済んだと思って残りの5万で美味しいものでも食べてください」

（？？？？？？）

その後もあまり会話にならず結局よくわからないまま、諦めてその場は終わらせた。

どういう修理をされたんだ・・・？見積とは・・・？

もやもやしたまま、終わり。

結局5万円という見積自体も電話越しにしたものだし何が正しいんだ。

みんなは気をつけようね。

2020-06-01

【Nuxt.js】動的ルーティングについて

はじめに

動的ルーティングについてここらで整理をと思い、めも。

動的ルーティングの概要

まず、動的ルーティングとは何か。以下公式より抜粋。

パラメータを使って動的なルーティングを定義するには .vue ファイル名またはディレクトリ名にアンダースコアのプレフィックスを付ける必要があります。

例えば

pages
    users
        _id.vue

_id.vueが動的ルーティング。

users/1でアクセスすれば、1のユーザーのページが表示される。

つまり動的に、1のユーザーのページを生成している。

各モードと動的ルーティング

Nuxt.jsには、SSR、SPA、静的の3つのモードが用意されている。

それぞれの動的ルーティングの動きをまとめると以下のような感じかと思う。

SSR -> ⭕️
SPA -> ❌
静的 -> ⭕️

SSR

SSRは、サーバーが動的なルーティングに対しHTMLを作成するため問題なく動く。

SPA

SPAの場合、表示は可能だが、そのページでリロードをすると404となる。理由としては、そのURLに該当するHTMLファイルがサーバー上になく、参照できないため。全てブラウザ上で、動的にページを生成しているSPAでは、表示はできても参照はできない。

▽表示はできても
f:id:h-sasaki-worksfront:20200601012956p:plain

▽リロードするとこうなる
f:id:h-sasaki-worksfront:20200601012954p:plain

静的

静的はそのままでは、動的ルーティングができません。少し設定が必要になります。

公式より以下抜粋

generate コマンド（yarn generate）では動的なルーティングは無視されます。Nuxt はこれらのルートが何であるのか知らないので、生成することができません。

そこで、Nuxtは以下のように解決策を提示しています

動的なパラメーターを用いたルートを生成させたい場合は、動的なルーティングの配列をセットする必要があります。 nuxt.config.js 内に /users/:id のルーティングを追加します:

export default {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

また、動的なパラメータが必要となった場合は、routesに対してページのルーティングを返すようにAPIのfetchを行います。もっとも効率的な方法として、payloadを使用することが勧められています。

上記の例では、サーバーから user.id を利用してルーティングを生成しますが、必要なデータ以外を破棄しています。通常、そのような場合は /users/id.vue の内部から再度データを取得する必要があります。再度取得することは可能ですが、そうした場合は generate.interval オプションに 100 などの値を設定して、サーバーへとコールが溢れないようにする必要があります。このような実装は生成時間の増加へとつながるため、 user オブジェクト自体を、 id.vue のコンテキストに渡すことが望ましいでしょう。上記のコードを、以下のように変更することで、実現することができます :

import axios from 'axios'

export default {
  generate: {
    routes () {
      return axios.get('https://my-api/users')
        .then((res) => {
          return res.data.map((user) => {
            return {
              route: '/users/' + user.id,
              payload: user
            }
          })
        })
    }
  }
}

このように、 /users/_id.vue から payload へとアクセスすることが可能です :

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

( ここら辺は公式を見るのが早い )

まとめ

動的ルーティングの設定・使用可否はモードによって異なるので注意して使用しよう。（雑）

参考

2020-05-31

【Nuxt Typescript】vuex-module-decoratorsを使ってみた

はじめに

vuex-module-decoratorsは、class構文でvuexを書くデコレーター。

これまでのNuxt Typescriptはcommitやdispatchを使用することで

型の推論が途切れてしまうという問題があった。

それを解決するツールとして最近スタンダードに使われているのがこのvuex-module-decoratorsらしいので試してみた。

全体像

axiosの設定部分は // axios としています。

~/store/index.tsと~/utils/store-accessor.tsが storeとコンポーネントをタイプセーフに繋ぐ役割を持っています。（これを別々のファイルとして定義している理由があんまりよくわかっていない... ）

component
└ comp.vue

store
├ index.ts
└ sampleStore.ts
    
utils
├ api.ts // axios
└ store-accessor.ts
    
plugins
└ axios-accessor.ts  // axios

ノーマルなvuexと比較

ノーマルなvuex

import { MutationTree, ActionTree, GetterTree } from 'vuex'
import { CounterState, RootState } from '@/store/types';

export const state = (): CounterState => ({
  count: 0
})

export const getters: GetterTree<CounterState, RootState> = {
  getCount: state => state.count
}

export const mutations: MutationTree<CounterState> = {
  increment(state: CounterState, delta: number): void {
    state.count += delta
  }
}

export const actions: ActionTree<CounterState, RootState> = {
  incr({ commit }) {
    commit('increment', 5)
  }
}

vuex-module-decorators

vuex-module-decorators

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

interface CounterState {
  count: number
}

@Module
export default class Counter extends VuexModule {
    // state
  count: number = 0

  // getters
  getCount() {
    return this.count
    }

  @Mutation
  increment(delta: number) {
    this.count += delta
  }

  // action 'incr' commits mutation 'increment' when done with return value as payload
  @Action({ commit: 'increment' })
  incr() {
    return 5
  }
}

感想

個人的にはvuex-module-decoratorsの方が見た目もスッキリしているし型もパッとみてわかりやすい気がするのでありかなと思います。

参考文献

https://championswimmer.in/vuex-module-decorators/[公式doc]
https://typescript.nuxtjs.org/ja/cookbook/store.html[Nuxt Typescript]

2020-05-30

【Nuxt.js】各モードについてメモ。

はじめに

Nuxt.jsを日々使ってはいるものの、まだまだ知識不足な部分がある。そのうちのひとつである、Nuxtのモードについてふわっとした知識しかなかったため今回実際に触れて　つまづいたところなどをメモしておく。

それぞれのモードについて

モードはまず、3つある。

1. SSR（サーバー サイド レンダリング）

2. SPA（シングル ページ アプリケーション）

3. 静的モード

SSR

NuxtにはNuxtサーバー（node.js）と呼ばれるものがある。 Nuxtサーバー上で、あらかじめhtmlを生成し、ブラウザに表示する方法。

SEO

クローラーが完全にレンダリングされたページが最初に表示されるため、SEO観点で良いとされる。

高速

サーバー側にHTMLを作成する責務があるため、ユーザー側のデバイス・ネットワークに影響を受けない。

注意点

サーバーサイドとクライアントサイドそれぞれ固有のコードを使い分けなければいけない。（例：サーバー側では windowやdocumentといったブラウザのAPIは使用できない）
静的ファイルサーバーにデプロイできる完全に静的なSPAとは異なり、サーバーレンダリングアプリには、Node.jsサーバーを実行できる環境が必要
Node.jsでのレンダリングは、静的ファイルを提供するよりもCPUに負荷がかかるためサーバーに負荷がかかる。高トラフィックが予想される場合は、対応するサーバーの負荷に備え、キャッシュなどを工夫し利用する必要がある。

SPA

SPAのビルドは'spa'モードで行い、/distの静的なファイルをサーバーにアップロードするのみ。

SPAは全てクライアントサイドで処理を行う。必要な資材を全て最初にサーバー側より受け取り、再度リロードを行わない限りブラウザ上でjavascriptがページのコンテンツの出し分けを行い、実際には遷移をしていないが、しているように見せる挙動をする。

注意点

初期のサーバーへの問い合わせが多いため、初期描画が遅い。
クローラが読み込む時点ではコンテンツが何もないためSEOの懸念点がある

静的モード

静的モードのビルドは'universal'モードで行い、事前にSSRでHTMLを作成しておく。

SSR時に、fetchしたAPIの情報を組み込んだ状態でレンダリング、ビルドを行うことで完全にレンダリングされた静的ファイルが吐き出される。

これによりSEO観点ではSSR同様、安心である。

もしユーザーのステータスに合わせてコンテンツを出し分ける場合は、generate時に全てのデータを取得、コンテンツ側では、出し分ける処理をあらかじめ書いておく。

あまりにも動的にユーザーに合わせて表示を変更するような処理の場合は複雑化する可能性が考えられる。

以上。

参考

Vue SSRガイドhttps://ssr.vuejs.org/