エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
メルカリShops の技術スタック、その後 | メルカリエンジニアリング
こんにちは。ソウゾウのSoftware Engineer(CTO)の@suguruです。連載：メルカリShops 開発の裏側 Vol.2の1日目を担当させていただきます。 去年、2021年に開始した メルカリShopsの技術スタック についての記事を書きましたが、今回はリリースまでに採用した技術スタックが、半年通してどのようにアップデートしてきたかを共有したいと思います。 ローンチ時に採用した技術が、実際の運用でどのように変遷したのかを共有することで、技術スタックを考える際の何らかの参考になれば幸いです。 monorepo メルカリShops ではサービスに必要なコードを1つに集約する monorepo を採用しています。リリース後半年たってコード量はかなり増えてきましたが、monorepo に対する満足度は非常に高く、うまく機能しています。 サービス全体の見通しが良くなることと、すべての
TypeScript Cheat Sheets
Popular Documentation PagesEveryday TypesAll of the common types in TypeScript Creating Types from TypesTechniques to make more elegant types More on FunctionsHow to provide types to functions in JavaScript More on ObjectsHow to provide a type shape to JavaScript objects NarrowingHow TypeScript infers types based on runtime behavior Variable DeclarationsHow to create and type JavaScript variables
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
TypeScriptで「Reactを自作しよう」をやってみた - $shibayu36->blog;
最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。 やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/mai
openapi-generator-cli による TypeScript 型定義
openapi-generator-cli を利用すると、OpenAPI 定義から TypeScript で利用可能なアセットを生成することができます。しかし最適な成果物を得るためには、OpenAPI 定義自体に少し工夫が必要で、一筋縄にはいかないことがあります。 本稿及びサンプルリポジトリでは、openapi-generator-cli と TypeScript 4.2 の新機能を活用したアプローチを紹介します。 課題点の確認 OpenAPI 定義にあたりresponsesフィールドのschemaに対し、インラインで定義を追加することが多いのではないでしょうか？OpenAPI を定義する GUI 「Stoplight Studio」 などでは、このインラインスキーマ定義が直感的で使いやすく、yaml を直接編集しなくても良いなど、開発に重宝します。 responses: "200": d
Google TypeScript Style Guide
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
Understanding design patterns in TypeScript and Node.js - LogRocket Blog
Ganesh Mani I'm a full-stack developer, Android application/game developer, and tech enthusiast who loves to work with current technologies in web, mobile, the IoT, machine learning, and data science. Editor’s note: This article was updated 27 September 2022 to include information about state patterns and anti-patterns in TypeScript, as well as to make general revisions to the article. Design patt
Goの型から静的解析でTypeScriptを生成したい
export type Param = { action: string; created_at: string; status: "Failure" | "OK"; version: number; } というinterfaceを生成してくれるライブラリです。jsonタグを見ます。 つまるところ、OpenAPIやgRPCを利用すればGoとTypeScriptで共通の型を利用できますが、それをもっと手軽にGoの型からTypeScriptのinterfaceを生成できたら便利そうだな、というのが開発した理由です。 類似のライブラリはあったのですが型解析のために一度コンパイルし、reflectを利用した型解析をしており一時ファイルを生成していました。そのためあまり使い勝手が良くなく、また実行に時間がかかるなどの問題があったため独自で作ることにしました。 Goの静的解析 Goでは静的解析ツールを
TypeScriptリポジトリの歩き方 - Qiita
* こちらはオプトテクノロジーズ社内勉強会での発表資料になります TypeScript リポジトリの歩き方 TypeScript のコードリーディングのはじめの一歩としてどこから手を付ければ良いのかを知る手助けになればと思いこさえました 目次 コードベースの概観についてドキュメントから知る 実装のエントリポイントから読み進める 動かして試す 自分が実際にコードリーディングしたときの例 コードベースの概観についてドキュメントから知る まず TypeScript の内部アーキテクチャの概観について知っていきましょう TypeScript の wiki が大変参考になります Architectural Overview: コード上のコンポーネントを図示しつつ説明している Layer Overview や全体で利用されているデータ構造を説明する Data Structures といった、実装を理解
TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ - Qiita
先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。 これは必見だわ!! TypeScriptの型についての問題集 想定に従って独自のユーティリティ型を作っていく感じの問題がレベル別に提供されてる Playgroundのリンクから手を動かしながらチャレンジできるので凄くやりやすい （自分はeasyの問題でも分からんのあった。頑張ろ😅）https://t.co/tkEFe7VrBQ — Kawamata Ryo (@KawamataRyo) September 3, 2020 type-challengesとは type-challenges/type-challenges: Collection of TypeScript type challenges with online judge VueUseやVueDemiの開発者である @antfu7さ
RustでwasmでWebWorkerでTypescriptな開発 - Qiita
本記事はsudachiclone-rs開発の続編であり、Rustのコードをwasmにし、WebWorker内で状態を持ったまま使いつつ、Typescriptで開発する、ということをやる場合にハマりそうなところに悉くハマった気がするので、その備忘録です。 成果物 レポジトリ: Rustで開発したsudachiclone-rsをwasmにコンパイルし、WebWorker内で動くようにしたもののデモ。 デモページ: 上記をhostingしています。pipから辞書を取ってきてブラウザ上のみでわかち書きできるデモ。 使ったツール群 typescript-definition Rustのstructやfunctionからtypescriptのd.tsを生成してくれる優れもの。crates.ioにあるのもを使っていないのは今のRustでは動かないから。(詳しくはissue参照) wasm-bindgen
1時間超のTypeScriptコンパイルを数十秒に抑えてみる - Qiita
この記事のソースコード: https://github.com/knjname/2020-09-03_growingtsd TypeScriptプロジェクトのコンパイルが終わらない！ こんにちは型に弱いマンです。 CIでTypeScriptプロジェクトのコンパイルが1時間たっても終わらなかったことはありませんか？ 私は何度かあります。 TypeScript的に行儀の良い(?)フレームワークを使っている方は、おそらくそういう現象に遭うことは少ないと思います。 行儀の悪い(?)フレームワークをハードに使っている方は、こういうことに遭う確率が高いと思います。 具体的にどういうフレームワークかというと、下記のようにコードで動的に型を紡ぎ出す系のフレームワークですね。 （mobx-state-tree なんかが該当します。） export type ItemDefinitions<D = {}> =
TypeScript学習ロードマップ - Qiita
TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
Introducing Rome
We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain. Rome is a monolithic tool con
React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js
高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。 シンプルで軽量な実装。 人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。 フレームワークなし（バニラJavaScript）でも使用
Moving from TypeScript to Rust / WebAssembly | nicolodavis.com
I recently decided to switch the engine of Boardgame Lab from TypeScript to Rust. The application itself is an SPA written in Svelte. I only switched the logic that updates the game state to Rust. Here is a summary of my experience with the transition: Isomorphic ArchitectureOne of the advantages of using JavaScript or TypeScript is that you can run the same code on both client and server. For Boa
TypeScriptのcompiler APIをいじる - asterisc
はじめに これを作っているときに、もともとのagreedとswaggerの型の帳尻を合わせるために、TypeScriptのASTをいじっていろいろやりました。 そのときに調べたことなどをメモ代わりにまとめます。この内容は調べたこと+僕独自の解釈が入っている可能性があり、正確ではないかもしれませんが、ご了承ください。 TypeScript Compiler API 何ができるようになるか TypeScript Compilerを使うことにより、TypeScriptのASTの解析や編集などを行うことができます。linterや、静的解析、自動生成系のツールを作る際によく使う機能です。 例えば前述のagreed-typedではTypeScriptの型定義やコメントをASTを解析することにより抜き出し、そこからOpenAPI2.0(Swagger)を生成しています。 実際のアプリケーションコードを書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
