TypeScript で"moduleResolution": "Node"は使わないほうがいい
はじめにタイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。 今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。 この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。 今後のバージョンアップにて変更がある可能性があります。 TL;DR"moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でも
Refine | Open-source Retool for Enterprise
The sweet spot between low-code and full-code.Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run. Business applications not only share fundamental UI elements, but also the underlying logic.Stop writing repetitive code for CRUD, security and state management. Let Refine automatically tran
React の状態管理ライブラリ9選
はじめに 次から次へと登場する状態管理ライブラリですが、それだけ React (に限った話ではないが) において状態管理というのは大きなテーマであり、最も実装難易度の高いトピックの一つでしょう。適切な設計ができないとアプリケーションの規模が大きくなるにつれ負債は増え続けます。 状態管理の難しさをよく表した文章が Redux の公式サイトにあるためお借りしたいと思います。(Redux の公式サイトは読み物としても面白いです) JavaScript のシングルページアプリケーションの要件がますます複雑になるにつれて、コードはこれまで以上に多くの状態を管理する必要があります。この状態には、サーバーのレスポンスやキャッシュされたデータ、まだサーバーに永続化されていないローカルに作成されたデータなどが含まれます。UI の状態も複雑化しており、アクティブなルート、選択されたタブ、スピナー、ページネーシ
msw で handler の mock や spy をする - mizdra's blog
元々「ServiceWorker をベースにした技術をわざわざテストに持ち込む意味とは?」と思って、msw をテスト環境で使う意義について懐疑的だったのですが、いざ使ってみるとすごく便利ですね。ServiceWorker 云々以前に、ネットワークリクエストの mock ライブラリとして、インターフェイスがとても使いやすいです。 zenn.dev 特に handler の mock や spy が簡単にできるのが嬉しいです。Jest と組み合わせた時の例だと、以下のようなイメージ。 // jest.setup.ts import { server } from './src/test-utils/msw'; beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => ser
rollup が求めてたものだったかもしれない : (*x).b=z->a+y/c
rollup 使ってみたあるライブラリのコードを見ていて すごく規則的ではあるんだけど無駄が多くて こんなこと手動でするかなぁ？と思うのがありました いかにも機械的って感じですが webpack みたいなバンドルされたものって感じでもなく普通に書いたようなコードです それでも global$1 と global$2 とか人が書かないような部分も多く気になってました その後色々あって rollup がもしかしたらこれかもと思うことがあって 試してみたら正解でした webpack や parcel と違って rollup はライブラリ向いてるとか聞いたことはありましたがその意味はよくわかってませんでした ですが バンドル結果をみればその理由は明らかでした rollup の良いところwebpack や parcel は元のファイルの import/export 処理だけを書き換えてそれぞれを関数
import、export、require | TypeScript入門『サバイバルTypeScript』
実務でアプリケーションを作る場合、複数のJavaScriptファイルを組み合わせて、ひとつのアプリケーションを成すことが多いです。いわゆるモジュール指向の開発です。ここではJavaScriptとTypeScriptでのモジュールと、モジュール同士を組み合わせるためのimport、export、requireについて説明します。 スクリプトとモジュールJavaScriptのファイルは大きく分けて、スクリプトとモジュールに分類されます。スクリプトは普通のJavaScriptファイルです。
tsconfig.jsonのよく使いそうなオプションを理解する
tsconfig.jsonを書く時に必要なオプションが何だったか、どんな役割を持つかを忘れてしまうため、個人的によく使いそうなオプションを書いていきます。 TypeScriptのバージョンは4.4です。 各オプション target TypeScriptはJavaScriptにコンパイルされるため、その時にどのバージョンのJavaScriptで出力するかをtargetで指定します。 ドキュメントを確認すると、デフォルトはES3ですが、以下の中からも選択できます。 es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, esnext どれを選択すれば良いかは、Node.jsのバージョン毎に推奨されるtargetがあるため、node.greenを確認します。Node.jsのバージョンは、node -vで確認できま
Full-stack app tutorial with NestJS and React - LogRocket Blog
Clara Ekekenta Software Engineer and perpetual learner with a passion for OS and expertise in Python, JavaScript, Go, Rust, and Web 3.0. NestJS is a robust framework for building efficient, scalable Node.js server-side applications. Nest offers many features that allow developers to build web apps using their programming paradigms of choice (functional, object-oriented, or functional reactive). Ne
新言語『TypoScript』を作った - Qiita
この記事は、クソアプリAdvent Calendar2021の20日目(ホノルル時間)の記事であると同時に、GMOペパボエンジニア Advent Calendar 2021の21日目(日本時間)の記事でもあります。 みなさん、TypeScript使ってますか？TypeScriptはJavaScriptの世界に秩序をもたらす素晴らしい言語ですね。 しかし世界には光の秩序だけでなく闇の混沌も必要です。 という訳で、JavaScriptに闇の混沌をもたらす新言語を作ってみました。 その名も『TypoScript』です。 TypoScript is 何 TypoScriptとは何か。まずはこちらのコードをご覧ください。 function fizz_buzz(count) { for (var i = 1; i <= caunt; i++) { if (i % 3 === 0 && i % 5 ==
うわっ...私の.eslintrc、無駄が多すぎ...？
{ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:react/recommended", "prettier" ], "plugins": [ "@typescript-eslint", "react" ], "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "rules": { "react/prop-types": "off", "react/react-in-jsx-scope": "of
React with Typescript
At present react js has been a very popular library to build beautiful and scalable user interfaces. Today I would like to build a demo react project with typescript. Project setup We would like to use the create-react-app environment built by facebook developer team to create our project. Our project will have a form to add favorite tv series and show the list. It will be a single page website. A
FormDataをTypeScriptで型安全に扱いたい
こんにちは、あかしぃです。 Ajax通信でファイルデータを送信するときによく使う「FormData」。こいつを型安全に扱いたい...というのがこの記事のテーマです。 シンプルにこう書けばいいのか...？と思って以下のようにやってみましたが、これはダメでした。 // この型を適用すれば、sample以外をappendしようとすると型エラーになったり...？ interface CustomFormData { sample: string; } // この時点でエラー。ダメだった... const formData = new FormData() as CustomFormData; フリーダムなkeyで登録することを許可するのはアレなので、なんとかしたいところです。 FormDataのtypeを見てみる そもそも、FormDataのtypeはどうなっているのか？ということで、それを見てみ
Reactを使うならRecoilも学べば良いと思うって話 - Grooves開発ブログ
こんにちは、 tbaba です。元々 Rubyist として入社していますが、ここ2〜3年はフロントエンド力の向上にも力を注いでおります。 突然ですが、React で状態を管理する時に何を使っていますか？クラスコンポーネントにしてクラスに状態をもたせている、Redux を使って管理している、React Hooks で管理している、などなど色々な選択肢があるかと思います。 そんな中で自分たちのチームは、現在社内向けのアプリケーションにおいて、フロントエンド開発をする際に Recoil という状態管理ライブラリを使うことが多いです。そこで、今日は「なんでそれ使うの」「何が便利なの」みたいな話ができれば良いなと思います。 先に言っておくと、自分のスキルセットとしては「 TypeScript を利用した開発2年目」「React を利用した開発3年目」「基本は Ruby on Rails が得意なバ
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こんな文章を書き始めた理由｜こわくない関数型プログラミング
Safe Data Fetching in Modern JavaScript
純粋関数は最高だ｜こわくない関数型プログラミング
Introduction to Remix - This Dot Labs - This Dot Labs
はじめに｜いまさら始めるフロントエンド 単語帳
Battle-Tested JavaScript Frameworks