TypeScriptの型エラーを踏み潰すときのお作法 - Qiita
TypeScriptは、型の合わないプログラムに対して型エラーを出すことを主な役目としています。 もちろんプログラムを正しく修正すれば型エラーは消えるのですが、TypeScriptを書いている方ならばそれ以外の方法で型エラーを消したことがある人がほとんどでしょう。すなわち、as、any、// @ts-ignoreその他諸々です。このような手段を使うことで、本来の問題を解決せずに型エラーを消すことができます。 もちろんこれらを濫用するのは勧められたことではありません。それは筆者の過去の記事『敗北者のTypeScript』で解説した通りです。プログラムの修正でasなどを使わずに型エラーが消せるのならばそうすべきで、そうしないのは敗北者です。 しかしながら、asなどをどうしても使わなければいけない場面はあります。それは、TypeScriptの型推論能力や型の表現力が足りないために型エラーが出てい
TypeScriptで型安全に配列の要素を取得する | miyauci.me
TypeScriptで型安全に配列の要素を取得するTypeScriptで型安全にリスト構造の先頭要素を取得する方法を紹介します。また、Conditional Typesやinferシグネチャ、データ構造のパターンマッチング、オーバーロードといったTypeScriptの型システムの力を引き出すこれらの要素についても解説しています。
Ranorex＋reg-cli連携によるビジュアルテスト - UIテスト自動化ツール Ranorex
今回は、Ranorexとreg-cli（reg-suit）の連携によるビジュアルテストの検証について紹介します。 Ranorex単体でも、ノンプログラミングによる画像比較や、ビジュアルテストを行うことも可能であり、どの方法使用するかはテスト内容や環境に合わせて選択することができます。 reg-cli（reg-suit）とは？ reg-cliは、VRT（Visual Regression Testing）を行うためのテストツール（OSS）であり、reg-vizにて提供されています。一般的にWebアプリなどのビジュアルリグレッションテストなどで利用されており、コマンドラインで使用できます。また、関連ツールとしてreg-suitがあります。 reg-cli：指定のフォルダ内にある２つの画像を比較し、差分結果をHTMLレポートして出力します。reg-suit：比較画像データや、差分結果をAWS S
npmとyarnのコマンド早見表
2019/12/24追記 npmとyarnの脆弱性が報告されています。 [npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ] (https://blog.cybozu.io/entry/npm-vulnerabilities-and-postinstall) npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる 概要 npmとyarnの「よく使う」から「ときどき使う」くらいまでのコマンド早見表です。 環境 Windows 10 Professional Nodist 0.8.8 参考 [npm Documentation] (https://docs.npmjs.com/cli) [CLI の紹介 | Yarn] (https://yarn
MacでRubyをインストールする方法をわかりやすく解説【初心者必見】 | 侍エンジニアブログ
こちらのターミナルは、よく使うものなので、mac上のDOCKに移動させておくと便利です。 mac版のRubyを実際にインストールする手順 これから実際にRubyをインストールしていくのですが、実はMacには元からRubyが入っています。 ですが、そのバージョンが古い可能性があるので、新しいバージョンのRubyや、好きなバージョンのRubyをインストールする方法をご紹介します。 大まかな流れは、 です。 それでは実際に説明していきます。 Homebrewをインストールする Homebrewが既にインストールされていないかの確認 まず、元からhomebrewがインストールされていないかを確認します。 そのために、 brew -v とターミナルに打ち込みエンターを押してください。 そして、 brew: command not found と表示された人はまだhomebrewがダウンロードされてい
URLSearchParams という便利な機能が増えてた : (*x).b=z->a+y/c
調べてみると Chrome 49 からのようです 結構前ですね URL オブジェクトURL のオブジェクトに searchParams というプロパティが追加されていて クエリパラメータを簡単に扱えます const url = new URL("http://var.blog.jp/page1.html?query=1&qqq=aaa&foo=bar") const params = url.searchParams // URLSearchParams {} params.toString() // "query=1&qqq=aaa&foo=bar" params.append("xxxx", "yyy") params.delete("qqq") params.toString() // "query=1&foo=bar&xxxx=yyy" url.href // "http://va
CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法
CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装 この実装で学んだこと はじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され
TypeScriptで自作している便利型Tips
たまになんかこういうの取り出したいんだけど、なんかないかなーみたいなことになっていくつか作ってみたりしているので、せっかくなので記載しておく🙆🏻♂️ 命名が微妙なので、命名をどうにかしたいというのがある valueOf<T> keyOfの反対。 与えられたオブジェクトのvalueのユニオン型を作る
React開発を快適にするChrome拡張を公開したので見てください！
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
eslint-plugin-react/docs/rules/jsx-no-useless-fragment.md at master · jsx-eslint/eslint-plugin-react
SVGの見た目は「属性」で書く――HTMLとの違い
SVGはCSSよりも後に登場した仕様なので（SVG 1.0が2001年リリース、CSS 2が1998年リリース）、いくつかの属性は普段CSSでなじみのあるプロパティとまったく同じ名前になっています。また、それ以外の属性名についても、ハイフン「-」区切りとなっており、CSSプロパティ名の作法に則っています。SVGの属性名は、当時としてはモダンなルールで決められたわけですね。 それぞれの属性がどのような表示になるのか、簡単に見ていきましょう。 塗り色を指定する「fill属性」 fill属性は、塗り色を指定する属性です。値にはCSSでも使っている「色」を指定します。fill-opacity属性を併用すれば、塗り色の透明度も指定できます。 <body> <svg width="320" height="200" viewBox="0 0 320 200"> <circle cx="40" cy="
SourceTreeからコミットを試みるとHuskyのpre-commitでエラーになる（husky - pre-commit hook exited with code 127） 😱 - みかづきブログ・カスタム
ことの発端 Huskyでpre-commitが設定してあるプロジェクトに対し、SourceTreeからコミットを行った際、 .husky/pre-commit: line 4: yarn: command not found husky - pre-commit hook exited with code 127 (error) というエラーが出てコミットできませんでした。 pre-commitを確認してみると、 yarn lintという箇所があり、 yarn が見つからないことが原因のようです。 対策 Atlassianのコミュニティから解決法を見つけました。 community.atlassian.com いくつか方法が書いてありますが、僕はターミナルからSourceTreeを起動することで解決しました。 つまり、 open /Applications/SourceTree.app/C
Google TypeScript Style Guideを読む
はじめに TypeScriptのプロジェクトでコーディング規約を決める時にeslintのおすすめ設定だけでは上手くいかないことがあります。この記事ではGoogleが提供しているスタイルガイドを見て使えそうなところを紹介します。 eslintと@typescript-eslint/eslint-pluginの内容と照らし合わせて紹介します。 対象読者 社内プロジェクトのTypeScriptのコーディング規約を整備したい方 @typescript-eslint/eslint-pluginのplugin:@typescript-eslint/recommendedとplugin:@typescript-eslint/recommended-requiring-type-checkingの設定だけではソースコードの治安の維持が出来なくなってしまった方 Google TypeScript Style
TypeScriptでinterfaceのネストを表現する
概要TypeScriptを書いていて、interfaceを使ってオブジェクトやクラスの型を定義していると、interfaceの中にinterfaceを含めたいということがあります。 ここでは、そのようなinterfaceのネスト(入れ子ともいう)を表現する方法を紹介します。 環境TypeScript 2.7方法ここでは例として、建物にコメントが属するようなデータをinterfaceで表現します。 建物のinterfaceをIBuilding、コメントのinterfaceをICommentのような名前とした場合、このようにして入れ子のインターフェースを定義できます。 interface IComment { content: string; } interface IBuilding { name: string; description: string; comment: IComment
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コーダー向け】webpackでEJS・Sass・JSな普通のコーディング環境を作ってみた
株式会社 エヴォワークス -EVOWORX-
TypeScriptの勉強のために type-challenges の初級を【全問解答】する - Qiita
【TypeScript】keyofとtypeofよく忘れるのでまとめ - Qiita
Can't properly set up next-config storybook to get images from url
Check WebTech|採用技術にフォーカスしたWebサイトリンク集。トレンドリサーチや技術選定の参考に、WEBデザインやコーディング、開発の参考にも使えるWebサイトギャラリー。