なぽろぐ

気ままに感じたことを記事にまとめます。

Nextjsでsvgをインラインで読み込んでreact componentとして使う

Nextjsでもsvgをreact componentで使いたい

素のreactのプロジェクトだとこれ使ってパチッとやってたやつをNextjsでもやりたいってやつです. github.com

次のように書ければ目的達成という感じです.

import Icon from "~/assets/icons/icon.svg"
export const Component = () => {
  return (
    <Icon />
  )
}

Nextjs用のライブラリがあるですね~.うれしい.これを使うだけなのですが,next-imagesを併用してると動かないときもあるのでメモしておこうと思います. github.com

next-react-svg と next-images を併用する

next-images"jpg", "jpeg", "png", "svg", "gif", "ico", "webp", "jp2", "avif" の拡張子を含むファイルをすべて url-loader 通しちゃうので next-react-svg を使っていても svg は url 形式になってしまいます.なので次のようにnext-react-svgがincludeしてるpathnext-imagesではexcludeするという処理をすれば動きます.

next-compose-pluginswithXXXに対応するconfigを見やすく記述することができるpluginなのでいれています.

const { withPlugins } = require("next-compose-plugins")
const withImages = require('next-images')
const withReactSvg = require("next-react-svg")
const path = require('path')

const nextCofig = {
  / * someconfig .... */
  webpack(config) {
    config.resolve.alias['~'] = path.resolve('src')

    return config
  }
}

module.exports = withPlugins([
  [withImages, {
    exclude: path.resolve(__dirname, "src/assets/icons")
  }],
  [withReactSvg, {
    include: path.resolve(__dirname, "src/assets/icons")
  }]
], nextConfig)

typescriptを使う人向けにsvgの型定義を置いておきます.~/assets/icons/*.svgからimportするときはComponentで読み込んでほしいので次のようにどこかに記述して置けれいいはずです.

declare module '*.svg'
declare module '~/assets/icons/*.svg' {
  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>

  export = value
}

これで次のような記述をすることでsvgをcomponentとして扱うことができます.

import Icon from "~/assets/icons/icon.svg"
export const Component = () => {
  return (
    <Icon />
  )
}

2021年のカレンダーを買いました

購入したカレンダー

booth.pm

ひそなさんのサークルsuoiretsymでカレンダーを買い続けて5年目となりました!2016年から買い続けているのでこの時期(紅楼夢から12月あたり)になると毎年ワクワクしながら待ってます.

このカレンダーのおかげで毎月の変わり目がとても楽しくなります. 僕はその月にならないとカレンダーを絶対めくらない縛りをしてて,それがカレンダーの僕なりの楽しみ方だからですね~

f:id:Naporitan:20201225022136j:plain

すべて保管してるんですが,2016年の記憶もちょっとよみがえってきていいですね......毎年カレンダーを作ってくださっているひそなさんに感謝です:pray:本当に毎年の楽しみになっています!!!!

よく使いそうなtemplate-literal-typesを使った型定義

いつもTSのPlaygroundで作ってるなぁと思うやつをメモする

下に書いてあるやつすべてplaygroundで実行しているやつ

www.typescriptlang.org

splitの型定義

// 文字列を受け取って受け取ってその文字列をDelimiterでsplitする型
type Split<T, U extends string> = T extends string
                                    ? T extends ""
                                      ? []
                                      : T extends `${infer Head}${U}${infer Tail}`
                                        ? [Head, ...Split<Tail, U>]
                                        : [T]
                                    : []
type UseSplit1 = Split<"aaaaaa", ""> // 1文字づつ区切る
type UseSplit2 = Split<"abababab", "b"> // 特定文字で区切る
type UseSplit3 = Split<"a,b,c", ","> // csv的なやつ

nestしたobjectのkeyを列挙する型定義

// nestしたオブジェクトのkeyをすべて列挙する型
// json to csv的なやつに使えそうかも
type NestObjectKeys<T, D extends string = "."> = {
  [K in keyof T]: K extends string ? T[K] extends Record<string, unknown> ? `${K}${D}${NestObjectKeys<T[K], D>}` : K : never
}[keyof T]

const obj1 = {
  a: 1,
  b: null,
  c: "c",
  d: {
    a: 1,
    b: undefined,
    c: "dc",
    d: {
      a: 2,
      b: null,
      c: "ddc"
    }
  }
} as const
type Keys1 = NestObjectKeys<typeof obj1> // objectのkeyを.でつなげる
type Keys2 = NestObjectKeys<typeof obj1, "-"> // 特定の文字でつなげる

よくあるrouterライブラリのpath文字列を型に落とし込む型定義

// あるあるのrouterライブラリのpath文字列を型に落とし込む型
type AnalyzePath<T> = T extends string
                      ? T extends `/${infer Head}/${infer Tail}`
                        ? Head extends `:${infer U}`
                          ? { [K in U]: string } & AnalyzePath<`/${Tail}`>
                          : AnalyzePath<`/${Tail}`>
                        : T extends `/:${infer U}`
                          ? { [K in U]: string }
                          : {}
                      : {}
type AnalizedPath1 = AnalyzePath<"/users/:user_id/">
type AnalizedPath2 = AnalyzePath<"/users/:user_id/tweets/:tweet_id">

Nextjsのpath文字列を型に落とし込む型

これ型に落とし込めてもnextjsはfsでroutingされているからあまり意味ないんだよなぁと言うのが最近の悩み。ずっと考えてるけどいい方法思いつかないなぁ.....next.config.jswithXXXコンパイラをいじったりしていい感じにするとかかなぁ....わかりません

// Nextjsのpath文字列を型に落とし込む型
type AnalizeNextJSPath<T> = T extends string
                            ? T extends `${infer Head}[${infer U}]${infer Tail}`
                              ? U extends `...${infer U1}`
                                ? { [K in U1]: string[] } & AnalizeNextJSPath<Tail>
                                : { [K in U]: string } & AnalizeNextJSPath<Tail>
                              : {}
                            : {}
type AnalizedNextJSPath1 = AnalizeNextJSPath<"/users/[id]/">
type AnalizedNextJSPath2 = AnalizeNextJSPath<"/users/[id]/directory/[...directories]/">

snake caseをcamel caseにする型

// snake case to camel case
type SnakeToCamel<T> = T extends string
                        ? T extends `${infer Head}_${infer Tail}`
                          ? `${Lowercase<Head>}${Capitalize<Tail>}`
                          : never
                        : never
type UseSnakeToCamel = SnakeToCamel<"user_id" | "tweet_id">

camel caseをsnake caseにする型

// camel case to  snake case
type CamelToSnake<T> = T extends string
                        ? T extends `${infer Head}${infer Tail}`
                          ? Head extends Uppercase<Head>
                            ? `_${Lowercase<Head>}${CamelToSnake<Tail>}`
                            : `${Head}${CamelToSnake<Tail>}`
                          : T
                        : never
type UsecCamelToSnake = CamelToSnake<"userId" | "tweetId">

まとめ

便利ですね。template-literal-types。一生遊べる

ここ1年で買ってよかったものシリーズ

買ってよかったものシリーズ2020

1. ルンバi7

store.irobot-jp.com

最近買ったけどこれが最高すぎる。起動1、2回目までは30分くらい掃除してるんですが3回目くらいからは15分くらいで掃除してくれます。音は結構大きい。ルンバに掃除させながらAPEXをやると何も聞こえなくて普通に背後に寄られて死ぬのが容易になる。まぁ普通に掃除機なのでそれはそうだね。

地形を覚えてくれて仕切りを自分で設定して仕切りごとに掃除できる。これが便利〜〜〜いいね

f:id:Naporitan:20201201180602p:plain

2. hue

www.philips-hue.com

正社員になってからコロナの影響でフルリモートだったので気持ちの切り替えが大変だったんですが、これで割と僕は解決しました。始業時間と就業時間になったらライトの色を変えるように設定していたのでスパッとモード切替できてよかった〜。これもおすすめ。Amazon Echoとの相性もとてもいい。最高

3. ウォーターサーバー

premium-water.net

ウォーターサーバー自体はどこでもいいじゃないかと思ってるけど僕はこれ使ってます。温水と冷水が常に出てくるのはめちゃくちゃいいですね〜。東京は想像以上に水道水が飲めたものじゃないのでこれがあると家がペットボトルまみれにならないのが最高です。まじでいい。ごみ捨てが楽になるので。

4. webカメラ

www.logicool.co.jp

別にストリーマーってわけじゃないけど無駄にいいカメラを買った。カメラは最高すぎる。自分の顔を移したいわけじゃないが高画質のwebカメラはいろいろな遊び道具になるからね。いいもの!

5. マイク・オーディオインターフェース(これは前から持ってた)

www.marantzpro.jp

フルリモートだったのでMTGすべてがオンラインだったので聞こえづらいとか相手の耳障りにならないようにコンデンサーマイクを買いました。オーディオインターフェースがあるとハードウェアミュートがあるので色々便利ですよ。ミュートマークが出ずにミュートできるので〜

さいごに

今年も色々買った。AirPods ProとかMacBookProもかったけどフルリモートという関係上あまり効力を発揮せずランクインならずって感じです。ほと〜〜〜〜んど家にいたからね。来年は椅子とディスプレイを買いたいです。あとキーボードかな〜キーボード。ゴミ箱からひろってきたHHKBを漂白して使ってるのでそろそろ新品をね......

退職しました

from: SOELU株式会社
to: ??? <-- そのうち開放されます

しばらくニート生活です。年明けまで

伏線


欲しい物リストです www.amazon.jp

デカ枕を買ったら腰痛くなくなったんだがwwwwwwwwww

腰が痛ぇ!

起きたら腰痛いし、常に椅子に座って作業してるのでどう考えても運動不足で常に腰に負担をかけ続けている生活を送ってたし、健康診断に行ったら基本的には健康ですが背骨が曲がってますねぇ......って言われるくらい腰が終わってました。

あまりに痛いので整体にここ1ヶ月くらい通ってたのですが、そこでおすすめされた枕を購入してみるとまじで劇的な変化があったのでおすすめしておきます。全腰痛民族に捧ぐ.....

shopping.karada39.com

僕は枕が終わってたために腰を痛めていたようでした。前買った枕3年くらい使ってたものだったのでそれはそうかも知れない.....

これ高さ調整ができる(中のクッションが層になっている)のである程度自分用に調整できます。

2週間くらいつかってみた結果ですがまじで調子がいい。ありえないくらい調子がいい。無限に作業ができるし座ってられる。あと睡眠欲がめっちゃ増えた(睡眠による回復がとてつもないため)

さいごに

枕は1年、2年おきくらいに変えたほうがええ

実際に使っている様子を写真で取ろうと思ったけど掃除してないのでやめた。部屋が汚ねぇ