lamechang-dev

Webフロントエンドエンジニア lamechangのブログ。

2023年の振り返り

TL;DR 転職 関東に戻った 今年の抱負 明けましておめでとうございます! TL;DR 転職して楽しく働いてます 関東に帰りました 今年は引き続き技術と英語を頑張ります 転職 2023年4月に現職である株式会社Yoiiにフロントエンドエンジニアとして転職しました!入…

【ChatGPT】【GraphQL】ChatGPT-4に教えてもらいながらポートフォリオにGraphQLを爆速導入してページ追加してみた【20分で完了】

はじめに やってみたこと ざっくり振り返り はじめに この記事では、ChatGPT-4を利用した開発がどれだけの生産性向上に寄与するのか、というのをざっくり試したものになります。 今回は、あまり自分が詳しくないGraphQLで試してみました。 やってみたこと 試…

【英語】私の英語学習のこれまでとこれからを晒す

TL;DR これまで 〜高校卒業 大学在学中 社会人 SIer在籍時 Webエンジニア転向以降 これから 補足 TL;DR 私は自分に甘く、興味が湧かないものについては必然性がないと努力をし続けることができない愚かな人間なのです… これまで 〜高校卒業 大学受験をしてい…

【React】【Recoil】ポートフォリオ作成でRecoilを安全かつ綺麗に使おうとしたのでその構成を紹介する

はじめに レポジトリでのRecoilの運用ルール サンプルコード src/context/model/movies/index.ts src/context/model/movies/selector.ts src/context/model/movies/actions.ts その他補足 はじめに 昨日、ポートフォリオサイトをvercelでデプロイ・公開しま…

【ESlint】フロントエンドアーキテクチャ上で決めた依存ルールをESlintで制約として表現する

この記事は Wano Group Advent Calendar 2022の23日目の記事となります。 はじめに import/no-restricted-pathsの設定 (補足)no-restricted-importsについて 最後に はじめに 改めてですが、私は音楽ディストリビューションサービス「TuneCore Japan」のフ…

【React】ちゃんと知って使うReact.memo

この記事は Wano Group Advent Calendar 2022の10日目の記事となります。 はじめに React.memoに関する公式での説明 ではどういった時にReact.memoを使えば良いのか さいごに はじめに 改めてですが、私は音楽ディストリビューションサービス「TuneCore Japa…

【アルゴリズム】【動的計画法】ナップザック問題のアルゴリズム実装

動的計画法とは アルゴリズム分類の1つ。与えられた問題全体を一連の部分問題として分解した上で、それぞれの部分問題に対する解をメモ化しながら、小さな部分問題から大きな部分問題へと順に計算 => 解を求めていく手法のことを指します。動的計画法を適用…

【地方移住】【期間限定】エンジニアとして転職せずに首都圏から石川県に移住しました

2022年8月から、首都圏から親の実家がある石川県に移住しました。特に狙って行った地方移住ではなかったのですが、色々な気づきがあったのでそれを紹介できればと思います。 地方移住の経緯 家庭の事情 移住で起きた変化 経済面 仕事面 生活面 最後に 地方移…

【アルゴリズム】トリボナッチ数列のアルゴリズム

トリボナッチ数列とは - [tex: T{0} = 0] - [tex: T{1} = 0] - [tex: T{2} = 1] - T{N} = T{N-1} + T{N-2} + T_{N-3} (N = 3, 4...) によって定義される数列のことであり、[0,0,1,1,2,4,7,13,24,44...] と値が続いていく数列です。フィボナッチ数列が前2つの…

大学のパッとしないGPAを米国基準にしてみたら、思いの外まともだった

はじめに CS大学院進学 GPAに対する不安 WES WESとは WES iGPA Calculator 計算されたGPA 最後に はじめに CS大学院進学 以前にキャリアの振り返りをしたこの記事でも軽く触れていたんですが、そもそも自分には大学生の時にCS大学院に行くかどうかを迷った結…

コワーキングスペースの土日プランを契約した話

コワーキングスペースを契約しました 家から自転車で10分弱程度のところにあるBIZcomfortを土日プランで契約しました。めちゃくちゃいいのでそれについてざっと書きます。 bizcomfort.jp 契約した理由3点 1.副業を再開するため また本業と別のスタートアッ…

【TypeScript】レコード型とマップ型

はじめに レコード型 マップ型 組み込みのマップ型 はじめに 今回はTypeScriptにおいてObjectの型定義をしていく上で必須知識とも言っても過言ではないレコード型・マップ型についてです。花粉辛い。 レコード型 TypeScriptの組み込みのRecord 型は 、 ある…

【TypeScript】過剰プロパティチェックの挙動

過剰なプロパティチェック 過剰プロパティチェックが適用されないケース 変数に割り当てられる際の例 型アサーションの例 過剰なプロパティチェック TypeScriptには、過剰なプロパティチェックを行う機能が存在します。まず、以下の例を見てみましょう。 typ…

コードを一切書かない上流SEを3年やった後にコードを書くWebエンジニアを2年やって思ったことをつらつらと

2021年2月末でWebエンジニアになってから丸2年経つので、ポエムです。ポエムは緊張しますね。 SIerで上流SE3年 マネジメント・SE業務について 英語について 余暇の使い方ついて Webベンチャーでエンジニア2年 文化について 業務について 余暇の使い方につ…

【TypeScript】サブタイプとスーパータイプ、そして変性について

サブタイプとスーパータイプ サブタイプ(subtype) スーパータイプ(supertype) 変性とは? 関数の変性 参考文献 サブタイプとスーパータイプ TypeScript上での型の間の関係についての概念である サブタイプ スーパータイプ についてです。 サブタイプ(su…

【TypeScript】【React】【Recoil】翻訳しながらそれなりに型をつけて細々と進めていくRecoil Tutorial その4 Asynchronous Data Queries編(2)

本記事は、Reactの提供元であるFacebook改めMetaが開発中の新しい状態管理ライブラリである Recoil の公式チュートリアルを翻訳しつつ、TypeScriptで型付けをしながら進めていく連載の第四弾です。細々とやっていきます 今回は Asynchronous Data Queries の…

【TypeScript】【React】【Recoil】翻訳しながらそれなりに型をつけて細々と進めていくRecoil Tutorial その3 Asynchronous Data Queries編(1)

本記事は、Reactの提供元であるFacebook改めMetaが開発中の新しい状態管理ライブラリである Recoil の公式チュートリアルを翻訳しつつ、TypeScriptで型付けをしながら進めていく連載の第三弾です。細々とやっていきます 今回は Asynchronous Data Queries に…

【TypeScript】【React】【Recoil】翻訳しながらそれなりに型をつけて細々と進めていくRecoil Tutorial その2 Selector編

本記事は、Reactの提供元であるFacebook改めMetaが開発中の新しい状態管理ライブラリである Recoil の公式チュートリアルを翻訳しつつ、TypeScriptで型付けをしながら進めていく連載の第二弾です。細々とやっていきます 今回は Selector について。 recoiljs…

【TypeScript】【React】【Recoil】翻訳しながらそれなりに型をつけて細々と進めていくRecoil Tutorial その1 Atom編

本記事は、Reactの提供元であるFacebook改めMetaが開発中の新しい状態管理ライブラリである Recoil の公式チュートリアルを翻訳しつつ、TypeScriptで型付けをしながら進めていく連載の第一弾です。細々とやっていきます まずは Atom について。 recoiljs.org…

【JavaScript/TypeScript】条件に応じてオブジェクトのプロパティを追加する方法

※ ES6以上の動作環境 JavaScriptにおいて、条件に応じて(Conditionallyに)オブジェクトのプロパティを付与する方法について一応書きます。書こうと思った動機は「意外と頻出な実装パターンに見えてあまり日本語の情報にヒットしなかった」から困ってる人いる…

【Material UI】スナップショット実行時にコードが修正がないにも関わらず属性値に差分が出る

環境:"@material-ui/core": "^4.10.2” 特定のコンポーネントに一意の属性を自動で付与する挙動の影響でコード上の修正がなくてもスナップショットの実行時に差分が出ることがあります。差分が生じる箇所は aria-xxxx や id 、 class など複数属性のようです…

【material-ui】Gridコンポーネントのブレークポイント propsにbooleanを渡した際の挙動を知る

material-uiのgridコンポーネントとprops material-uiをデザインシステムとして利用した際に、レスポンシブデザインの対応方法としてgridレイアウトにブレークポイントを設定することは多いと思います。以下のような設定値を渡すことができます。 xs 全ての…