tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【今日の振り返り! 】

今日の振り返り! ①今日の対応 ◎チケットの工数整理 x5 ②GOOD(続ける事) ◎スプリント始め、持っているチケットの整理を行ったことで「小さなタスクはまとめて〇〇のPRにまとめる」みたいな方針が固まった ◎学習、日報、勤怠、振り返り、のルーティーンが習慣…

【日記】今日の振り返り

今日の振り返り! ①今日の対応 ◎PRの本番化 x2 ◎レビュー x1 ②GOOD(続ける事) 上司のレビューを最優先に行ったことでサクサクレビュー対応が進んだ - レビュー早めにみるムーブを率先していくぞ!! 自分の実装方針を相談してみて、ポジティブな意見をもらえ…

【日記】振り返り!

昨日忘れていたぜ ①今日の対応 ◎FB修正対応 x1 ②GOOD(続ける事) ◎レトロスペクティブ自信ないなか堂々と話せた (すみません今日はあんまりGOODがないのです。) ③BAD(反省ポイント) ◎別の作業があったとしても、一つの作業に一日かかってしまうような現状 ◎日…

【日記】今日の振り返り

今日を振り返っていきます‍♀️ ①今日の対応 ◎レビュー系 x3 ◎PR修正系 x2 ②GOOD(続ける事) ◎なるべく一つの作業に時間かけない+こだわらないように作業した。 →と思ったが後半、共通化作業でどん詰まり(笑) ◎共通化で難しい部分の実装で悩んでいたところ、Pre…

【日記】今日の振り返り

残業してないですが、もはや毎日振り返っていきます‍♀️ ①今日の対応 ◎テストFB修正の対応 x4 ◎ミーティング +2h ◎PRの修正など ②GOOD(続ける事) ◎朝のポモドーロが作業に集中しやすいことがわかった →前日に組んだTODOを30分レベルに分解して、明日の30分ご…

【日記】今日の振り返り

残業してないですが、もはや毎日振り返っていきます‍♀️ ①今日の対応 ◎テストFBチケット x6 +ミーティング x1.5h ②GOOD(続ける事) ◎コンポーネントの実装確認をstorybookで確認することで、ダミー定義 + ローカル表示の手間が省けた(-10~20分) ◎(上記のよう…

【日記】今週の振り返り

せっかく毎日振り返りを書くようになったので、 一週間の振り返りも書いていく〜〜 今週のGood ◎9時間以内に決められた仕事を終えられるようになった。 → 「なんで8時間で終わらないのか」を日記を通して考えるようになった。 ◎はてなブログのpv数が初めて一…

【日記】今日の改善ポイント

今日の改善ポイント ①今日の対応 ◎本番実装 x6 (PRを本番化) ◎新規実装の工数算出 +ミーティング x1.5h ②振り返りポイント ◎本番実装と別のタスクを同時並行で行なっていること ->結論、別のタスクが全然進まない問題が発生した。あとマージしてないのにCD…

【Typescript】as const と readonlyとの違い

as const について as const とは 下記のようにオブジェクトの末尾に as const を付け加えることで全てのプロパティーを再代入不可能(readonly)なオブジェクトにすること。 const human = { name: "Taro", age: 12, height: 176, } as const; human.name = "…

【日記】今日の改善ポイント

1時間残業しちゃったので改善ポイントを振り返ろうと思います。 ①今日の対応 ◎レビュー x6 ◎本番実装 x3 ◎テストFBの修正 x5 (ここまで到達できず、明日対応することに) +ミーティング x1.5h 7:30時スタート、前回分の記事を書いていなかったので「振り返り…

【日記】ちょっと残業したので反省。。

毎日投稿を再度始めたわけですが、毎日技術的なことを記事にするのも難しいので 残業した日は反省ポイントを振り返ろうかなと思います。 ①今日の対応 ◎レビュー x4 ◎新規開発 x2 ◎先輩レビューワーからのFB対応 x1 ここまでで9時間で完了するはずだったが13…

vscodeで選択範囲を大文字(もしくは小文字)に変換

大文字に置換できるのだ、、 結論 コマンドパレットを開く command + shift + p 大文字に変換:大文字 または upper と入力し enter (小文字に変換:小文字 または lower と入力し enter) >upper

9月振り返り

10月になったので9月を振り返ります。 1. テストコード Jestでのテストコードを意識して書き始めました。 TDDテスト駆動開発という実装方法に沿って 「必ず失敗する関数」->「成功するケース」->「要件と照らし合わせながら網羅していく」 ようになるべく意…

【TypeScript】NonNullable<Type> について

filterとflatmapに関する以下の記事で見かけた NonNullable について NonNullable について TypeScript v2.8 で追加されたUtilityTypesの一つ 既存の型のTypeから null と undefined を除いた型を構成してくれる Example // null や undefined が入っている…

【Typescript】mapflat を使って配列のfilter処理を行う

filterを使って値を取り除く場合はアサーションする必要がある const stringFalsyArray = ["string", false] const stringArrayTypeofStringFalsy = stringFalsyArray.filter((item)=> item ?? item) typeof stringArrayTypeofStringFalsy // ( string | boo…

filter関数を使って falsy な値を取り除く + 型を絞る

filter関数を使って特定の値を取り除く場合 const arrayWithFalsy = ["value1", false, "value2", false, "value3"] const arrayWithoutFalsy = arrayWithFalsy.filter((item)=>item === "string" && item) console.log(arrayWithoutFalsy) // ["value1", "v…

【React】最近学んだReact Typescriptの使い方

定数のKeyのユニオン型を作る const CAR = { NAME: "honda", COLOR: "red" } type K = keyof typeof CAR // typeof K = NAME | COLOR 分割代入を別名で const res = { loading: true, data : { hoge: "hoge", fuga: "fuga", } } // 別名の分割代入 const {da…

api通信の際、引数で受け取った値をそのままリクエストのパラメーターに使用しない

結論 ❌ UI層のフォームなどで受け取った値をapiの値として使う ⭕️ 一度 requestBody などの変数に再代入することで、UI側で受け取る値と、apiのパラメーターとして送る値を切り離す 実際に書いたコード export const signIn = async ( params: SignInParams,…

JSX 型にドット記法を使用する

reactのドキュメントにあった記法についてメモ ドット記法 以下のように、オブジェクトの中身を "." で呼び出せること。 const obj = { a: "a", b: "b", cfanc: () => {} }; obj.a // "a" reactでも同じように const SomeComponent = { Foo: () => <div>ふぅ〜</div>, B…

【react】ループ用のモックの作成方法

最近新規開発でBEのデータの代わりにモックデータを書くことが多いのですが、 リードエンジニアのイケメンコードを発見したのでメモ。 例 //domain層 export interface Human { id: string; name: string; height: number; age: string; } export const useH…

【目標】2022年後半

okinawanpizza.hatenablog.com ↑前半の振り返り 要約 ものづくり系 個人開発 x 1 LT x 1 threeを使ったポートフォリオ x 1 習慣系 毎日React記事 読書週一冊 毎週の振り返り 後半はどういう年にするか 前半は転職先の情報のインプットが多い半年だったので、…

【振り返り】2022年前半の振り返り

人生で初めて振り返りの記事を書きたいと思います。 ということでいってみよう。 協賛 参考にした記事を三つ。 マイナビのいかにもって感じの記事です。 フレームワークを色々探すより、考えることがシンプルなのが好き。 gakumado.mynavi.jp 料理アドバイザ…

【Typescript】型定義のコツ 型と参照先を一つのオブジェクトから呼び出す

実装のレビューで素敵な書き方を教えていただいたのでメモ。 修正前 ステータスを受け取り その結果に応じてreturnが異なるコンポーネントがあります。 ここには主に以下のような改善点があります。 - マジックストリングを用いない (複製や多くの箇所でValu…

Atomic Design

現在開発中のサービスにおいて 既存のAtomic Design に沿ったコンポーネント設計をしております。 Atomic Design がよくわからなかったのでメモしていきます。 そもそもatomic Design とは Atomic design is methodology for creating design systems. There…

【typescript】sortを利用して配列を並び替える

sort()メソッドは、配列の要素をソートする関数のこと。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 一般的なuse case 配列にsort() を実行すると昇順に並び替えてくれます。 定義した配列そのものが変更さ…

【typescript】配列の二列目以降の取り出し

今まではsplice(num)などを利用して 配列を切り分けて取り出していたのですが、最近はもっと直感的な取り出し方があるみたいです。 まとめて取り出し 配列があります const smalls = [ "小動物", "小型車", "小論文" ]; まとめて取り出すことも可能!! cons…

【Typescript】Partial<T> ついて

今日はUtility Typesについて学んだので、その学習メモ。 さまざまなユーティリティーがあるが、その一つを例にとってみると少し理解が深まりました。 今回はPartialについて。 Utilty Types とは Typescriptが提供する型の関数のようなもの。 元のインター…

【Typescript】型ガードについて

型ガード(Type guard)について if分やcase文を始めたとした条件分岐で変数の方を判別し、ブロック内の変数の型を絞り込む機能のこと。 型を変数内で明示して変換する「キャスト」を使用することを防げる。 type of 変数の型をチェックできます。 type You = …

【Typescript】オブジェクトのキーの文字列のみを許容する動的な型宣言

オブジェクトのキーをオブジェクトの型のプロパティーとしてそのまま流用したい場合。 まず、オブジェクトの型を定義したい場合 type Panda = { age: number } const panda: Panda = { age: 11, } //型通り そのオブジェクトのキーをage, name, color, dream…

【Typescript】extendsを用いてジェネリクスの型パラメータに制約をつける

ジェネリクスで型定義をする際に、特定のプロパティーを持たせるように制限することができる。 引数に存在しないプロパティーがある場合 function showBirthday<T>(person: T): Date { const birthDay = person.getBirthDay(); // personの型は未知なのでgetBir</t>…