【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
TypeScript の型定義に凝りすぎじゃね？ - Neo's World
TypeScript の型定義に凝りすぎじゃね？ ここ数年で、Qiita や Zenn で TypeScript の話を見かける機会が多くなった。JavaScript には Java のような型定義がなく、初心者の混乱の元・ひいては障害の元になりうるのはよく分かる。 しかし、最近どうにもこうにも、TypeScript でむりくり型定義するような Tips を多く見かけて、疑問に思っている。たかが TypeScript に頑張り過ぎじゃね？ と。 【TS】TypeScript 4.0 の新機能 - Qiita こういう新機能とか、追加されるのはいいんだけど、本当に便利なんか？と思ってしまう まず、TypeScript による型定義は単なる Linter でしかない。コードが実行される時は基本的に JavaScript に変換され、TypeScript の構文で記した型定義は消失する。コーディ
アンサー： なぜTypeScriptの型定義に凝るのか - Qiita
この記事は、昨日公開された以下の記事に対するアンサー記事です。TypeScriptで型定義に凝る派筆頭（自称）として、このお題に対して別の視点から光を当ててあげるためにこの記事を用意しました。 TypeScript の型定義に凝りすぎじゃね？ まず最初に、この記事（以下では元記事と呼びます）の著者を攻撃したり、元記事の内容を否定する意図はないことをご理解ください。結局のところ、考え方が異なり、前提が異なるから異なる結論になっているだけなのです。TypeScriptを使う皆さんがいろいろな観点から見た情報を取得し、自分の状況に応じた適切な考え方・判断をできるようにすることがこの記事の目的です。 要約 大きなコードを小さく分解しても本質的な難しさが消えるわけではないよ？ 型はドキュメントなんだから正確に書こうぜ！ 外界との接続も妥協せずに型システムで解決しようぜ！ 機械にできる仕事を人間がする
lerna/yarn/npm workspacesとTypeScript Project Referencesの設定を同期するツール
lerna/yarn/npm workspacesとTypeScript Project Referencesの設定を同期するツール TypeScript Project Referencesは、tsconfig.json同士の依存関係を定義することで、効率的なビルドが可能になる仕組みです。 Project Referencesの仕組みを使うことで、monorepoなど一つのリポジトリ内で複数のTypeScriptで書かれたパッケージがある場合に効率的なインクリメンタルビルドなどができます。 また、VSCodeなどのコード補完に使われるTS-Serverなどのスキャンも効率的になります。 Migrating Large TypeScript Codebases To Project References — Developer Tooling Optimizing multi-packag
input[type="number"]をやめた話
ファンタラクティブのエンジニアの 太田 です。 数値入力コンポーネントを作成する際に type="number" を使用するのをやめたことについて書きます。 input[type="number"]とは input[type="number"] (PC) input[type="number"] (スマホ) 数値を入力するためのinputで半角数値以外の入力を除外する 問題 validな数値しか受け付けない 数値以外の値が入力できないためTypeScriptでも扱いやすくよさそうに思えますが、使用するユーザーは戸惑うことがあるようです。 実際にあった問い合わせや、問い合わせから想像する状況は以下のようなものです。 入力できない (全角入力してる) 確定したら値が消えた (全角入力してる) ペーストできない (全角でペーストしてる) キーボードではなく、UI上の▲▼で入力しないといけないと思
![input[type="number"]をやめた話](https://cdn-ak-scissors.b.st-hatena.com/image/square/baca40dbd8892b9650741254db63ebc63ee954fa/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fy7q8dkG--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Ainput%25255Btype%25253D%252522number%252522%25255D%2525E3%252582%252592%2525E3%252582%252584%2525E3%252582%252581%2525E3%252581%25259F%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AHidetoshi%252520Ota%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4YmI2YjY4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252596%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxZWY4MWQxNDUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Rust-based platform for the Web – SWC
SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, and more. SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by al
tscをGoに移植 | POSTD
筆者はTypeScript型チェッカーtscをRustではなく、Goに移植しようと思います。拡張可能なRustプラットフォームSWCの作者の発言としては、奇妙に聞こえるかもしれません。理由を説明したいと思います。 なぜtscを移植するのか TypeScriptの普及が進むにつれて、大規模プロジェクトではあるジレンマに直面しています。型チェックは、ワークフローの中で最も時間がかかるプロセスの一つになっているのです。開発者は、イテレーションのサイクルを遅らせることなく、型安全を保証することを望んでいます。 tsc（TypeScript Compiler）は、型の妥当性をチェックし、コードをJavaScriptにコンパイルします。コードの量が多いほど、コンパイルには時間がかかります。中規模から大規模のTypeScriptプロジェクトでは、このコンパイルに膨大な時間がかかります。開発者はワークフロ
『プロを目指す人のためのTypeScript入門』読者が最新情報にキャッチアップできる記事
こんにちは。先日発売された『プロを目指す人のためのTypeScript入門』は、発売日の最新バージョンであるTypeScript 4.6に対応しています。 そこで、この記事では読者に向けたアフターサポートとして、本の発売時から現在までに増えた機能や変わったところをご紹介します。 現在のTypeScript最新版は4.9です。 TypeScript 4.7での更新 公式アナウンス: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/ Node.js向けES Modulesサポートの追加 TypeScript 4.7最大の話題はこちらです。本書の第1章では、tsconfig.jsonの設定項目について次のように説明しました。 現在のところnode16とnodenextには違いがありません。将来のNode.js
NestJS を使って最速リリースを目指している話 - ROBOT PAYMENT TECH-BLOG
こんにちは。ROBOT PAYMENTでエンジニアをやっております 牧野です。 今回は新規プロダクトの立ち上げに伴い開発言語からインフラ設計まで0→1でサービスリリースするのに必要な技術選定を行いました。 その際の選定理由や、実際に開発を進めていて得た所感などを書いてみたいと思います。 私は主にバックエンド（フロントエンド以外）を中心に技術選定を行っためそちらを中心に書かせていただきます。 チーム規模 選定技術 TypeScript NestJS GraphQL PostgreSQL AWS App Runner まとめ チーム規模 バックエンドエンジニア2人 フロントエンドエンジニア1人 PM 1人 デザイナー1人 上記を１チームとして最短距離でリリースすべくスクラム開発を行なっています。 既存の請求管理ロボ開発においては、厳密ではないですがコンテナ運用や監視ツール、CICDなど機能開発
zxの紹介 〜 さよならシェルスクリプト そして伝説へ｜Offers Tech Blog
はじめに こんにちは!! プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow 普通のバックエンドエンジニアの takkun7171 でございます。 最近は Apex もやってますが、筋トレにハマっています。可変式ダンベル買ったんですけど、これはいいモノですね。齢 40 のオッサンだけど、ちゃんと鍛えれば筋肉育つんだから！！w zxとは 簡単に言うと、JavaScript でシェルスクリプトがお手軽に書けます。 zx は Node の child_process のラッパーで、$で囲んで shell コマンドを簡単に実行できるので、 zxを使いこなせれば、シェルスクリプトとおさらばできます。 zx は 2021 年に最もトレンディだったプロジェクトだったらしいです。すごいですね。 紹介記事はネット上にちらほらあるのですが、便利さの割に周りで使って
webpack+TypeScriptでNode.js用にバンドルする
概要 筆者は仕事でよくサーバーレス構成のアプリを作成します。コンピューティングな部分はAWS Lambdaを利用することが大変多いです。AWS Lambdaにおいては、Node.jsがランタイムとしてサポートされております※、。当然ながら、TypeScriptはネイティブにはサポートされていないので、TypeScriptで作成されたソースコードをNode.js環境で動作するようにコンパイルしてやる必要があります。 また、AWS Lambdaといっても、多くはAPIGatewayやIoT Ruleなどのサービスのバックエンドで動作させることが多いと思います。その場合、例えばAPIGatewayの場合は、リソース*メソッドの数だけ別個のLambdaをデプロイすることになると思います。それぞれのAPI向けにバンドルされたコードをデプロイするのが理想的です。 これらの前提を踏まえると、tscでは複
TypeScriptの型ガードをちゃんと使おう
はじめに みなさんは、型ガードを有効活用できていますか？もしかしたら、型ガードを利用せずに type assertion で、 never型 や unknown型 を無理やり割り当てて解決してないでしょうか？ 今回は、みなさんもぜひ型ガードを有効に利用して、型安全なTypeScriptコーディングができればなあと思い本記事を書いていきます。 TypeScriptの型ガード（Type Guard）について Type Guardを使用すると、条件ブロック内のオブジェクトの型を制限することができます。 これだけ言われてもどう使うかはあまりわからないですね。 具体例を下記にコードで示していきます。 type DogBreed = 'Shiba Inu' | 'Golden retriever' | 'Chihuahua' type Dog = { readonly dogBreed: DogBre
歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita
はじめに 今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。 そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。 そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。 JavaScriptの歴史 JavaScriptの誕生 JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し
6歳娘「パパ、型による条件分岐はできないの？」 - Qiita
とある休日 娘「ねぇ、パパ！」 娘「switchやろ〜！」 ワイ「おお、ええで！娘ちゃん！」 ワイ「Switchやろう！」 ワイ「ほな、テレビをつけて・・・」 娘「テレビ？」 娘「何を言っているの、パパ？」 娘「TypeScriptのswitch文のことだよ？」 ワイ「ファッ！？」 switch文で何をしたいのか 娘「今ね、ショッピングサイトを構築してるところなの」 ワイ「ほうほう」 娘「それでね、手広く儲けようと思って」 ワイ「おお、ええやんか」 娘「個人ユーザーだけじゃなく、法人ユーザーも登録できるようにしようと思うの」 ワイ「なるほどな」 娘「言語はTypeScriptを使っているんだけど」 娘「ちょっと聞きたいことがあるの」 ワイ「おう、なんでも聞いてや」 あいさつ関数を作っている 娘「ショッピングサイトにログインしたときに・・・」 個人の場合 → 「無職 やめ太郎さん、こんにちは
大規模アプリのVue3アップデート対応知見まとめ
はじめに 今参加させてもらっている案件でついにVue3へのアップデートが完了したので、知見をまとめていきます！ 僕1人だけではなく、チームでやったので多少曖昧なところもありますが、そこはご愛嬌でお願いします。 マジで一年くらいかかりました。笑 ちなみにこれを全てやれば完璧にVue3対応出来るわけではなく、あくまでこのプロジェクトで躓いた知見を書いているだけでですので、実際に上げる場合はしっかりと公式ドキュメントを確認してください。 特に移行ビルド系は執筆時点で確認していたら、かなりリリースされていたので是非確認してみてください。 前提 新規機能の開発は止めない Options APIからComposition APIへの書き換えなどはしない 特にいつまでにアップデートなどの期限は設けない マイグレーションビルドは使わない webpackerをつかっている TypeScriptは使っていない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript で関数合成やPipe処理をする - Qiita
TypeScript で eslint-plugin を作成する
TypeScript 4.7と型レベルプログラミング
