TypeScript

例えば次ようなサインアップフォームのフィールドの値を引数に取るバリデーションを行う関数あるとして、この関数の型を別途定義したい interface SignUp { username: string; email: string; password: string; } const validation = ({ username, email, password }: Partial<SignUp>): boolean = {...} // => この関数の型を別途定義したい 引数が interface のオブジェクトのままなら [key in keyof Interface] を使って型定…

はじめに Draft.js製テキストエディタに入力されたデータをFireStoreに保存する手順を記録します。 正確には、今回エディタのコンポーネントを取ってきているライブラリはDraft.jsではなく、react-draft-wysiwygというDraft.jsをさらに拡張させたライブラリになります。 ですが今回やりたいことであるデータの書き込みをする限りではエディタのコンポーネントに限っては2つのライブラリ間で何か特別な機能の差異があるわけではないので、実装する際は好きな方を使用してもらって問題ありません（Draft.jsのエディタでも今回やりたいことができるのは確認済み）。 ちなみに私が…

Material UI の <TextField /> コンポーネントは出力時にいい感じに div で囲ってくれるからか、直接 readonly 属性を渡しても設定されなかった。 @mui/material@5.2.7 NG: <TextField /> に readonly 属性を渡しても readonly な状態にはならない disabled は効くけど readonly は効かない import { TextField } from '@mui/material'; const MyComponent = (): JSX.Element => { return ( <> <TextFie…

npmで、普通のfabric.jsを利用していた。 www.npmjs.com その場合、ピンチイン・ピンチアウトで、選択したオブジェクトの拡大・縮小ができなかった。 fabric-with-gesturesをインストールすれば、使えた。 www.npmjs.com TypeScriptの場合、npm install --save-dev @types/fabric-with-gesturesをしても無いので、tsconfig.jsonに以下を追記する。 "paths": { "fabric-with-gestures": ["node_modules/@types/fabric"] } 他に…

こんにちは、21 卒エンジニアの id:d-kimuson です。 モバイルファクトリーでは、最近のプロダクトではフロントエンドに TypeScript を採用していますが、僕がアサインされているプロダクトは歴史が長く JavaScript で書かれていて、今回 TypeScript へのリプレースを行いました。 既存プロダクトの TS リプレースではしっかり型付けすることは難しいので、型チェックオプションを緩くしてリプレースすることが多いと思います。しかし、既存コードからリプレース後のコードまで全て型安全性が担保できなくなってしまうので、後からの strict 化は非常に大変になってしまいま…

React のプロジェクトで import の並び順を揃えて見通しを良くしたい 前提 create-react-app --template typescript で作成したプロジェクトに ESLint と Prettier を導入してある "react-scripts": "^5.0.0" "react": "^17.0.2" "typescript": "~4.1.5" "eslint": "^8.6.0" "prettier": "2.5.1" 1. 使用してない import 自動削除する eslint-plugin-unused-imports を使用する $ npm i -D es…

いたるところで有名な Robert.C.Martin氏、いわゆるアンクル・ボブ (ボブおじさん Uncle Bob) の本。Cleanシリーズの3作目「Clean Architecture」を読んだので、その感想です。 Clean Architecture 達人に学ぶソフトウェアの構造と設計 (アスキードワンゴ)作者:Ｒｏｂｅｒｔ Ｃ．Ｍａｒｔｉｎ,角 征典,高木 正弘ドワンゴAmazon Clean Architecture 前提 エンティティ層（Entities） ユースケース層（Use Cases） インターフェースアダプター層（Interface Adapters） フレームワーク&ド…

更新日時 2022/01/25/07:00 Qiita Trends Daily 1位 ※前日4位 JavaScript,IEEE754 Qiita Trends Daily 2位 [New] Unity,UniRx Qiita Trends Daily 3位 [New] 営業,フリーランス Qiita Trends Daily 4位 [New] Python,初心者,データ分析,100本ノック Qiita Trends Daily 5位 [New] Rust,macos Qiita Trends Daily 6位 [New] Python,機械学習,AI Qiita Trends Daily…

はてなブログ独自の集計による人気記事のランキング。1月16日（日）から1月22日（土）〔2022年1月第4週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 クレジットカードを整理して最適解を見つけたい - 本しゃぶり by id:honeshabri 2 市場は「なんかいい感じにしてくれる」エンジニアを求めているのではないか - 毎日がもふもふ by id:redhornet96 3 私の部屋のインテリア2022 - VAMRSS by id:shirasusalad 4 （ネット）署名という仕組みに否を突き付けている人が多くて困惑している - 発声練習 by id:next4…

こんにちは、デジタルハーツでエンジニアをしているやまたろうです。 デジタルハーツでは Vue + Typescript を使用したフロントエンド開発、Figma を使用したデザイン作成やプロジェクトマネジメント業務など色々なことに挑戦させてもらっています。 本記事は、プロジェクトの技術選定をする時に最新の Vue の開発環境に触れる機会があったので所感など記載します。 2022年の Vue3の推奨開発環境とは Tooling : create-vue IDE : Volar State Management : Pinia 番外編 : Vue3.2 ＜script setup＞ 構文 さいごに…

読んだサイト 昔は、バンドラーというものがなくライブラリやプラグインなどを使う際は、CDNJS(CDNと同じ？)などを使い外部から読み込む必要があった。node.jsの登場とその恩恵によりnpmが使えるようになった。パッケージマネージャーを使えるようになったことで、ライブラリの管理が容易になる。 Browserifyが最初のバンドラーである。複数のファイルを１つのファイルに集約出来るようになり管理しやすくなる。その恩恵により、ファイルの数が少なくなる事でhttpの通信量が減りパフォーマンスも良くなった。その後は、CoffeeScriptというものと一緒に使われていたらしい。 バンドラーの次は、…

先週の This Week In React に流れてきたやつ。 🧵 TypeScript Cheat Sheets by @orta4 nicely designed and official cheatsheets now online:- Types- Interfaces- Classes- Control Flow Analysishttps://t.co/fnqAcuU8c8 pic.twitter.com/D7BlZsyvjf— Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 (@sebastienlorber) 2022年1月19日 ざっと読んでみたけどそこまで目新しい発…

Flow Launcher用のプラグインを初めて作ってみました。 umi-uyura/Flow.Launcher.Plugin.DesktopCleanup プラグインページにも掲載してもらえました。 Flow Launcherとは Flow LauncherはWindows用のアプリケーションランチャーです。 Macだと Alfred が有名でしょうか。 以前は Hain を使っていたのですが、いつの間にかリポジトリがアーカイブ状態になっていて、開発が止まってしまっているようでした。 そこで乗り換え先を探していくつかのランチャーアプリを試してみて、個人的に気に入ったので使ってみているのがFl…

個人用ドキュメント＆ブログ管理ツール(ガチめ)作成記 背景 なぜアウトプットのモチベがKeepできないのか ツールの大まかな要件 要件を満たすための工夫 (設計) 開発記録 おわりに reference 個人用ドキュメント＆ブログ管理ツール(ガチめ)作成記 初手、作成物： https://github.com/Symthy/docs-and-blog-enty-manager 作るに至った背景/作成にあたっての考え/過程等を記す。 背景 インプット：アウトプット = 3：7 が良いと言われているが、私自身この比率に全く届いていない所か、1:1にすら届いていない状態。 まずは、最低でも 1:1 …

目次 目次 とある日 起きたエラーについて Numberとnumberの違い Numberの定義 Number Interfaceについて numberの定義 まとめ 〆 とある日 プログラミングの勉強のためLeetCodeでコードを記述しててエラーに遭遇しました。 TypeScript初心者の自分にはそのエラーの原因がちょっと複雑だし、解説してる記事とかがないので調べてみた内容をまとめてます。 起きたエラーについて その際の再現でコードを記述してます。 このコードは17行目がエラーになります。 let a: Number let b: number a = 1 b = 1 console.l…

こん菜～（気さくな挨拶） 正月気分でぼんやりしている間に1月が終わりそうです、怖いですね。 今日はなんだか最近災難が続いているサイゼで書いています、おなかいっぱいになった。 というわけで新年なので、今日のお題は今年の目標についてです。

NuxtでComponentでの親→子間データのやり取りではpropsで十分だと思ってたけど Componentsが増えてきて、prop地獄になりつつあったので 地獄の回避するためにpropProvide / Injectついて調べる ↓は誤字って投稿したTweet 今更だけど、vueでproviderを使用すれば、props地獄から解放される？— Sugi (@SugiuraF) 2022年1月22日 公式ドキュメント こんな記事読むより、公式読んだほうが確実！ v3.ja.vuejs.org Provide / injectについて 親からすべての子Componentsへ値を伝播させたいと…