【DDD入門】TypeScript × ドメイン駆動設計ハンズオン
TypeScriptとドメイン駆動設計（DDD）を組み合わせ、APIを構築するハンズオンガイドです。この本では、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。
Biome はじめました。
モチベーション そもそも TypeScript や JSX に詳しくないのでどう書くのがいいのか悩みたくない ESLint や Prettier の設定を なんとなく 設定して使ってしまっている Formatter / Linter 関連のライブラリの内容を理解せずにアップデートしてしまっている 依存関係は減らしていきたい Rust で書かれた言語向けの高速なツールが好き Rye とか Ruff とか efmt とか Biome Biome は Rust で書かれた Formatter / Linter を含むツール。本当におかしいくらい早い。 全然大きくないが、以下のソースコードに適用したときの速度。 $ pnpm run fmt > biome format --write ./src Formatted 114 file(s) in 11ms $ pnpm run lint > bi
Biome と ESLint の lint ルールの互換性
Biome では、現在約 150 個程度の JavaScript・TypeScript に関する lint ルールを実装しています。 これらのルール多くは既存の ESLint 関連で実装されているルールと同じものになっているのですが、ルールの名前が異なることもあり、その対応関係がわかりにくくなっています。 そこでこの記事では、フロントエンド開発をする場合によく設定していそうな次の lint ルールについて、Biome で実装されているかどうかの対応表を紹介します。 eslint (eslint:recommended) typescript-eslint (plugin:@typescript-eslint/recommended) eslint-plugin-jsx-a11y (plugin:jsx-a11y/recommended) eslint-plugin-react (plugi
PlaywrightのVSCode拡張を使って効率的にテストを書く
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
Electron ✖️React ✖️TypeScriptでZenn用マークダウンエディタを作ってみる
みなさんはじめまして。 普段はバックエンドエンジニアとして、ひっそりとphp等を書くことでご飯を食べております。 この度は流行りのZennに投稿するということで、大人気のReactとTypeScriptを学習しながらアプリを作ってみる記事にすることにしました。 学習するにしてもTodoアプリなどではモチベーションを保てず、ゼルダやピクミンに時間を奪われがちなので、俺の俺による俺のためのエディタを作るんだっていう気持ちで挑むことにします。 Electronって何？って人もいるかもしれないので説明しておくと、Windows、macOS、Linuxのデスクトップアプリケーションを作成するためのフレームワークです。 自分のアプリ作って使うってちょっと興奮しますよね。 はじめに 以下のgifのようにGit連携したZennの記事や本を編集できるマークエディタを目指します。 このアプリを作ろうと思ったき
Azure Functions に Docker イメージをデプロイして puppeteer を使いたい - Qiita
はじめに 今回試したコードはGitHubで公開しています。 この記事の内容を執筆するにあたり、技術検証段階でAzureサポートのOさんに大きなご助力をいただきました。この場をお借りして感謝申し上げます💐 今回やりたいこと WebスクレイピングやE2Eテストで利用されるPuppeteerを、Azure Functionsで動かしたい。 ただし、公式で利用できると発表されている環境とは、少し異なる設定で開発したい。 公式発表: Azure Functions Linux Consumption(消費量)プラン であれば実行可能 動かしたい環境: Azure Functions Linux App Service プラン Azure Functions on Linux では、公式にheadless Chromiumがサポートされている ただし、LinuxのConsumption(消費量)プラ
packelyze - お前の TypeScript はもっと小さくなる
TypeScriptの型定義ファイルから積極的な圧縮を行うための @mizchi/optools をリリースした。まだ実験中だが、結構動くはず。使う場合は自己責任で。 追記: optools を packelyze に rename した。これは optools という CLI 名が ImageMagick の提供するコマンドとぶつかったため。 試行錯誤の過程は https://zenn.dev/mizchi/scraps/1bdf01f5efb147 にある。 このライブラリは、自分の所属する Plaid の業務時間中に作成した。 想定ユーザー ライブラリ作者 ビルドサイズ厳しいフロントエンド開発者(サードパーティスクリプト等。自分が業務で作った理由がここ) リスクとってでもビルドサイズを縮めたいフロントエンド作者 動機 世の中な TypeScript で書かれたコードは、その型情報を使
【第5回】「型」はウェブシステム開発に「エンドゲーム」をもたらすか | GeeklyMedia(ギークリーメディア) | Geekly（ギークリー） IT・Web・ゲーム業界専門の人材紹介会社
伊藤直也さんが「今逢いたい」ソフトウェアエンジニアに声をかけて対談を重ねてきたシリーズの最終回は、これまでの対談の文章化を手がけたラムダノート株式会社の鹿野桂一郎さんとの異色対談です。コンピュータ技術書や記事の編集者であると同時に仕事や趣味でHaskellのプログラムも書く鹿野さんの視点を通し、現代のウェブシステム開発に伊藤さんが何を見ているのか、特に「型」と「エンジニアの学び」というこれまでの対談に通底するテーマについて掘り下げます。 ・伊藤 直也さん / 株式会社 一休 執行役員 CTO 新卒入社したニフティ株式会社でブログサービス「ココログ」を立ち上げ、CTOを務めた株式会社はてなでは「はてなブックマーク」などの開発を主導。グリー株式会社では統括部長としてSNSを担当した。2016年4月、一休に入社し執行役員CTOに就任。 ・鹿野 桂一郎さん / ラムダノート株式会社 代表取締役社長
OneJS
Use the /collab command on Discord to gain access to the OneJS private repo. The repo offers early access to the latest features and fixes that may not yet be available on the Asset Store. An early preview of OneJS V2 is available on branch onejs-v2. It brings major performance improvements, zero-allocation interop, and a new esbuild workflow. OneJS brings the power of Typescript, (P)React, Live-R
TypeScript の基礎から始める AWS CDK 開発入門
This workshop is about introduction TypeScript for using CDK.
【C#/TypeScript】TypeScript の SignalR client でも MessagePackHubProtocol を使いたい！ - ねののお庭。
リアルタイム通信するなら、やはりシリアライズ/デシリアライズは高速であればあるほどいい。 というわけで、TypeScript の SignalR client でも JSON ではなく MessagePack を使いたいよね、使おう！というお話。 SignalR の protocol シリアライザと言語 MessagePackHubProtocol を C# と TypeScript で使う場合の違い client が C# の場合 client が TypeScript の場合 TypeScript で JsonHubProtocol と MessagePackHubProtocol を使う場合の違い MessagePackHubProtocol を使うための解決策 使い方 推奨設定 まとめ SignalR の protocol SignalR は、内部で用いる server と cli
フロントエンドのテストコードを充実させるためにやったこと
まえがき （フロントエンドに限らずですが）フロントエンドの開発において、テストコードを充実させることはいいことづくめのように思えます。 機能が壊れていないことを確認しながらプロダクションコードを変更できる バグの発生に気づきやすくなる 動作確認を省ける場面が増え、開発速度が向上する テストを書きやすいように工夫してプロダクションコードを書くようになり、結果的にコンポーネントの設計やアクセシビリティを向上させることができる とはいえ、フロントエンドのテストコードを充実させるにはそれなりの工数が必要です。また、テストコードの書き方によってはメンテナンスコストもかかり、最悪の場合壊れっぱなしで放置されがちです。 プロダクトの新規開発にあたって0からフロントエンドの設計・開発環境構築をする機会があったので、フロントエンドのテストコードの書き方について調査して内容を整理しました。 前提 React/
次世代のFormatter「dprint」を試してみた
何のプラグインを使うか聞かれるので、スペースで選択します。 対応する設定が書かれた dprint.json が作成されます。 TypeScriptの例 下記プレイグラウンドから設定をコピーして、dprint.json に貼り付けます。 { "typescript": { "lineWidth": 80, "indentWidth": 4, "useTabs": true, "semiColons": "prefer", "quoteStyle": "alwaysDouble", "quoteProps": "preserve", "newLineKind": "lf", "useBraces": "whenNotSingleLine", "bracePosition": "sameLineUnlessHanging", "singleBodyPosition": "maintain", "
Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それを使う 本番と同じスキーマを持つ DBMS に対して、実際に insert したり select してテストする DBMS は docker-compose upとかで事前に立ち上げておく 双方にそれぞれ良さがあって、プロダクトによってどっちでやるか変わってくると思います。 この記事では 2 の手法を Prisma でどうやるかについて紹介します。 前提 実際のテストコードの例 テストヘルパーを作る 別解: ヘルパーを自動生成する je
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
Deno入門 ─ 新しいTypeScript/JavaScript実行環境でWebアプリ開発とデータベース接続の基本を体験しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
例えばmain.tsというスクリプトに対して、ファイルの読み取りだけを許可したい場合は、以下のようにコマンドを実行します。 $ deno run --allow-read main.ts このときmain.tsプログラムはファイルの読み取りだけが可能になるため、ファイルの書き込みやネットワークアクセスをするとPermissionErrorによる実行時エラーになります。 なお、実行時にフラグを何も与えなければ、どの権限も持っていない状態になります。 各フラグにはパラメータを指定でき、例えば次のように実行すると/home/userディレクトリの読み込みだけが許可されます（--allow-writeフラグも同様）。 $ deno run --allow-read=/home/user main.ts また、--allow-netを次のように指定すると、特定のドメインとポートだけのアクセスを許可で
TypeScriptの安全性の穴
TypeScriptの型システムは不完全です。 型システム上しょうが無い所も、どうしてそうなってるのって所もあります。 この記事では共通認識となっているようなものから、あまり認知されていないものも含め、TypeScriptの安全性の穴になり得る所を紹介します。 tsconfig.json 項目が大量にありますが、この記事では型安全性に大きく影響のあるオプションのみ紹介します。 strict このオプションが無効だと型安全性が大幅に失われます。 具体的にはnull | undefinedが無かったことにされたり、暗黙のanyが大量発生したりします。 なんでデフォルトがfalseなんですか？ 詳しくはこの記事を読んでください。 noUncheckedIndexedAccess このオプションがfalseの場合、インデックスシグネチャへのプロパティーアクセスが型安全ではなくなります。 const
TypeScriptで記述できるWebGL環境をwebpackで構築する | Yucchiy's Note
グラフィックスの勉強をちゃんとしたいとふと思い（思い立つが手が動かせてなかった）、興味があったWebGLを触ろうと思い、この環境をwebpackで整えました。 自分がウェブを仕事でやっているわけでなくて詳しくないので、ツッコミなどは大歓迎です。@yucchiy_ までご連絡いただけると幸いです。 やりたいこと TypeScriptベースで開発したい モデルやテクスチャのロード対応 シェーダーについては別シェーダーのインポート・エクスポートもできるようにしたい グラフィックス系の実装なので比較的記述するコードが複雑でかつ量も多くなりそうなのと、WebGLのAPIを叩くときの引数や戻り値のヒントとして、ある程度型がついていて、IDEで確認できると良いな、ということでTypeScriptを選択しました。 必要なモジュールのインストール 下記モジュールをインストールします。 $ npm insta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Roslyn とその活用法
.NETの型定義を書こうとしてえらいことになってる（ClearScript） - Qiita
