TS 4.9 satisfies operator を使って React Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog
BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかけるようになり、ルーティング宣言から型を拾いやすくなった React Router v6.4 から createXXXRouter のAPIが追加され、コンポーネントではなく、プレーンオブジェクトでルーティングを書けるようになりました import { createBrowserRouter } from
技術ブログが書ける開発をする - Mobile Factory Tech Blog
この記事はモバイルファクトリー Advent Calendar 2021の25日目の記事です。 メリークリスマス🎉 エンジニアのid:kfly8です。 技術ブログの「ネタがない」といったコメントや「この記事の課題がよくわからない」といった記事レビューをすることがあります。技術アドベントカレンダーの時期は、短期間に記事が集中するので、特に困らせているように感じます。 普段から意識する習慣で、楽ができないかと考えると、「技術ブログが書ける開発をする」のが良いと思いました。 誤解しないでほしいのが、「技術ブログを書くために開発をしよう」と言いたいわけではないです。あくまで、チーム、事業の目的ありきです。 ただ「技術ブログが書ける開発をする」ことは、普段の開発の質を高めると思っています。 技術ブログが書ける開発とは？ モバファクの技術ブログでは、「課題を解決する方法や経験を発信したい」と思ってい
VSCode で TypeScript の交差型のプロパティを省略せずに見れるようにする - Mobile Factory Tech Blog
VSCode でホバーして型情報を見ようとすると、交差型はプロパティが展開されません プロパティの型を展開する Mapped Types を通すことで省略せずにプロパティを見ることができます。プロパティが交差型になっていることもあるので、再帰的にプロパティを Mapped Types に通すような型を定義しておいて、通すことでプロパティを全て確認できます type Expand<T> = T extends object ? T extends infer O ? { [K in keyof O]: Expand<O[K]> } : never : T type Temp = Expand<`確認したい型`> 厳密でなくとも簡単にどんなプロパティがあるか把握したいだけなら組み込みの Required や Partial を使うのが手軽です。ただし、あくまでデバッグ用途でそれぞれ省略可能プロ
突撃！ 在宅の開発環境 2021年夏 - Mobile Factory Tech Blog
はじめに こんにちは。ブロックチェーンチームのエンジニア、 @nanamachi です。 tech.mobilefactory.jp 前回の記事ではたくさんの方に閲覧&コメントいただきありがとうございました。この記事から1年。モバイルファクトリーは日本のどこからでも働けるようになり、書籍購入、資格取得、セミナー参加、懇親会の支援制度などフルリモートに適応できるよう多くの変化をしてきました ( https://recruit.mobilefactory.jp/work-style/ )。その中で社員の環境もさまざま変わったことでしょう。 この変化を記事にすれば、閲覧数を稼げる 弊社の魅力を発信できるに違いない!という目論見で、初めてバズった記事にすがるエンジニア組織開発責任者の@kfly8から次のようなチャットが送られてきました。 kfly8: インターネット識者*1の @nanamachi
Vue.js で疑似要素に動的なスタイルを適用する - Mobile Factory Tech Blog
ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。 この記事では、その際の問題と解決方法について紹介します。 この記事のゴール Vue.js では HTML クラスのバインディング や インラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。 例えば、<input :style="{ paddingLeft: myPadding }">で、input タグの padding-left は myPadding を更新することで動的に変更されます。 しかし、これらの構文では ::placeholder の疑似要素だけを指定できず、結果スタイルを変更できません。 CSS カス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
