JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
ABEMA で Web フロントデベロッパーとして活動している 宮代 @3846masa です。CyberAgent Advent Calendar 2021 4 日目は、Web パフォーマンス改善のコンテストについてお話します。 TL;DR Web パフォーマンス改善コンテスト “Web Speed Hackathon 2021 mini” を開催します！ 改善する対象は https://web-speed-hackathon-2021.herokuapp.com/ です オンライン開催で、12 月 4 日から 1 月 3 日までの 1 ヶ月間、好きなときに誰でも参加できます 記事の後半は、課題となる「重たい短文投稿サイト」を作るまでの開催記です はじめに CyberAgent では、Web パフォーマンス改善を競うコンテスト “Web Speed Hackathon 2020” を昨年
2022年に OSS 活動によって得た報酬を公開
この記事を書いているのは 12 月 17 日なのでもう 3 日分書いていないことになりますが、頑張って追いつきたいと思います。 筆者が 2022 年に OSS 活動によって得た報酬を公開します。 前提 筆者はUbie 株式会社のフルタイムのソフトウェアエンジニア兼大学生であり、余暇時間にいくつかの OSS に関わっています。 主に Prettier というコードフォーマッターのメンテナンスをしています。 目的 この記事の目的は、読者の誰かがお世話になっている OSS プロジェクトに対して寄付や貢献をするきっかけになることです。ぜひお願いします。 筆者が受け取っている OSS 活動による報酬には大きく分けて二種類あります。 一つ目は OSS プロジェクトの OpenCollective から分配された報酬です。Prettier の OpenCollective に集まった資金を毎月 $150
GraphQL Highway
銀座Rails#40
前に書いた ESLint と Prettier の共存設定とその根拠について が公式推奨が変わったことにより一部間違った情報になっているのでその訂正記事です。 該当記事に書いた内容は Prettier と ESLint の関係を読み解く上で役立つ情報だと思うので、警告とこのページへのリンクを書いた上でそのまま残しておきます。 (追記) この記事の内容も間違った内容を書いていました。なので一度大幅な訂正をしています。prettier-eslint も推奨ではありません。 変更点の要約 Prettier と ESLint の組み合わせについて公式 の推奨方法が変わりました。 きっといつかこの情報も古くなるので直リンクではなく、ドキュメントの GitHub のリンクを貼っておきます。 ドキュメント自体のリンクはこちらです。 新しいドキュメントを要約すると、 Linter と Formatter
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型、あるいは手癖のようなものだと思う。 せっかくなので、id:mizdra の今の npm-scripts を書く時の手癖を書き連ねてみる。 基本形 { "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development", "lint": "eslint .", "test": "jest" } } 一番シンプルな npm-scripts を書く時のパターン。以下の 4 つの script を登録している。 buil
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
俺のフロントエンド依存管理ポリシー20241120
ポリシー: この世界では常に最新版を使うという気持ちで生きていく Node.js は枯れるという概念がなく、常に古いことはリスク という認識。LTS も短め(3年) 古いAPIのドキュメントは常に消失する モダンなツールは、モダンな前提を要求する ~2020: CJS/ESM 関連で断絶がある(jestが動かなくなりつつある) ~2019: パフォーマンス意識が低い時代の実装が多い ~2015: Node.js のみでしか動かないものが多い。peerDeps の意識が低い この辺で目視でポチポチする npm: npm-check-updates - npm yarn upgrade-iteractive pnpm upgrade -i サーバーランタイムには安定を、ツールチェインにはパフォーマンスを サーバーランタイム(Node.js) Node 本体は Stable LTS か、一つ前の
textlint - Linterの作り方
[fit] textlint - Linterの作り方 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Book: JavaScript Primer アジェンダ Linterを作る人向けの話 Linterの考え方とアーキテクチャを一致させる 使うものを作ろう、作るために使おう textlint とは 自然言語(日本語や英語など)に対するLinter MarkdownやHTMLなどのマークアップ言語に対応している ビルトインのルールは0 利用できるルールは100以上ある 多くのルールはオフラインで動くので、外部に入力してる内容を送信しない CI/CDに組み込める自然言語のチェッカー(表記揺れ、スペルチェック、誤用、読みやすさのチェックなど) textlint users Translation: Angul
スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2021年上半期、およそ6万行の JavaScript コードを TypeScript に置き換える作業を、半年間単独で行いました。 本記事では、機能開発自体を止めずに、どのように走り切ることができたのか、ふりかえりたいと思います。 なお、本記事の内容は、移行開始直後の登壇資料 “大規模 Vue アプリケーションの TypeScript 移行” と、移行完了後の登壇資料 “6万行の TypeScript 移行とその後” と重複する内容を含んでいます。 Teachme Biz と TypeScript弊社が開発している、マニュアル作成・共有システム Teachme Biz は、iOS/Android や Windows など、マルチプラットフォームで提供されています。 その中でも、作成・管理に多く使われて
見つけた GitHub の Issue を片っ端から subscribe している - mizdra's blog
あるライブラリを使っていてバグっぽい挙動に遭遇した時、ほぼ必ず当該ライブラリの Issue を検索するようにしている。加えて、見つけた Issue の subscribe ボタンを押して、https://github.com/notifications に通知がいくようにしている。バグ遭遇時以外にも、何らかの理由で Issue に到達した時にその Issue を subscribe してる。 ハマったバグの Issue を見つけた時 欲しい機能の feature reuqest の Issue を見つけた時 例: Docker for Mac の VirtioFS 対応の Issue その他面白や動向をチェックしたい Issue を見つけた時 例: TS 4.7 のリリース計画について議論している Issue 例: Jest の ESM 対応の Meta Issue 例: ESLint の
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
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
TypeScript開発にモジュラーモノリスを持ち込む - Sansan Tech Blog
Bill One Entry*1の秋山です。 本題へ入る前にお知らせです。12/23、TypeScript を活用した型安全なチーム開発をテーマにイベントを開催します。弊社社員のうち、TypeScript を日々の開発で活用しているメンバーが登壇します。ぜひお気軽にご参加ください。 sansan.connpass.com はじめに モジュラーモノリスとは 保守性が低いとビジネスに悪影響を与える 技術的負債と開発生産性 コード品質とビジネス影響 モジュール分割の方針 方針１：モジュールにDBテーブルを専有させる 補遺：モジュラーモノリスとNoSQL 方針２：モジュール内をレイヤードアーキテクチャとして構成する 方針３：ESLint ルールによって実現する TypeScript 開発にモジュラーモノリスを持ち込む ステップ１：単一のエイリアスを設定する ステップ２：ESLint ルールを設定す
Prettierを使わない理由
この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 勘違いしている人が多そうなので追記します。 Prettierを使わないというのは私が独断で決めた事ではないです。 チームが発足する際の技術選定で合意は取れていますし、私が関与していない別のチームでも同様にPrettier無しで開発しています。 私達のチームはメンバー同士を互いに信頼していますし、細いスタイルで喧嘩を始めるようなメンバーは居ないので安心してください。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的としており、ESLintとは異なりデフォルト設定のままですぐに使えるのが特徴です。 さらに、PrettierはJS
TypeScriptプロジェクトのCIでやってること
概要 最近退職に伴いTypeScriptプロジェクトのCI/CDの見直しを行っているので主にプルリクに対するCIを中心に何をやっているのか(やっていた＆やろうとしているもの含む)紹介します。 それぞれはさらっとした紹介のみです。 ちなみに書いてから気づいたんですが殆どTS以外でもできます。 tsc, prettier, eslint 基本です。恐らく殆どのプロジェクトでやっているかと思います。 tscは--noEmitオプションを付けて実行、eslintは--cacheと--quietオプションを付けて実行しています。 prettierは--list-differentオプションを付けると差分があった場合(=prettierが適用されていないファイルがあった場合)にエラーにしてくれます。 CIでWebpack等でバンドルしてる場合はこの辺を明示的に行わなくてもそこでコケるのでやってないケー
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
ESLint を MCP サーバーとして実行する
ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。 ESLint v9.26.0 から、ESLint を[MCP（Model Context Protocol](feat: Add MCP server by nzakas · Pull Request #19592 · eslint/eslint) サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正できるようになります。 ESLint を MCP サーバーとして実行する MCP サーバーとして ESLint を実行するには、--mcp オプションを使用します。 npx eslint --mcp このコマ
はじめに こんにちは。calloc134 です。 バックエンド開発において、DB にデータを保存することはよくあることです。 DB と接続してデータのやり取りを行う必要がありますが、皆さんはどのようにしてデータを取得していますか？ ORM やクエリビルダを利用したり、逆に SQL を記述してコード生成を行ったりと、様々な方法があります。 今回はこれらのアプローチについて比較し、比較的斬新な方針を取っているものとして SafeQL を紹介します。 注意点 ここでは、TypeScript のバックエンド開発と、そこで利用されるライブラリを前提として話を進めます。 Go や Python など他の言語での利用方法については、別途調査が必要です。 SQL に対するアプローチ まず、SQL に対するアプローチには大きく分けて 2 つの方法があります。 それぞれのライブラリの使い方を、簡単に見ていきま
ぼくのかんがえたNext.jsの構成
はじめに 普段開発している Next.js プロジェクトの構成がなかなかいけてるんじゃないかということで、その構成を公開しちゃおうというお話。ほんとはタイトルをぼくがかんがえたさいきょうのNext.jsの構成にしたかったけどひよりました (今回の記事を作るにあたり改めて一から Next.js のリポジトリ作ったら husky のバージョン上がってたり、eslint-config-prettier の v8 系になって config の書き方ちょっと変わってたり、時代は移り変わるのです・・) 意外と手順書いていくと長くなったので一部coming soonになっているものは確固たる意思を持って、随時追記します 更新履歴 2021/04/01 css modules が storybook で上手く呼べてなかったので修正、あと storybook のバージョンアップ 2021/03/31 なんと
Deno (ディノ) Advent Calendar 2020、25日目の記事です。今日は Deno が Node.js に依存しなくなった経緯の話をします。 Node.js に依存しながら始まった Deno の開発 Deno は、プロジェクトが始まって以来いくつかの点で Node.js に依存して開発が進められてきました。おもに Node.js に依存していたのは以下の3種類のプログラムです。 バンドラ parcel (のちに rollup に移行) フォーマッタ prettier リンタ tslint (のちに eslint に移行) この中でバンドラが最も最初に Deno 製のツールにリプレースされ、その後フォーマッター、リンターの順でリプレースされていきました。リンターがリプレースされたのはつい最近 (2020年11月) のことです。この記事ではそれぞれの経緯・手法について紹介して
@uhyo さんのTS本ということで読んでいます。 一応入門書という位置づけなので、社内での育成に活用したい目線。 とはいえ自分でも学べるところ多そう、特にTSのd.tsみたいなモジュールまわり理解弱いので… 全体的な感想 4章（関数）、6章（高度な型）が特によかった。 （5章が入ってないのは自分がクラス使わないからなので、使う人だったら5章も入ってると思う） 自分も何年かフロントエンドエンジニアとしてやっているのでさすがにだいたいは知っている内容のおさらいになったけど、それでもふわっとした理解が適切に言語化だったり、コーナーケースの知らない挙動など発見は沢山あった。 特に育成には有用だなと思った。6章の内容は理論と実践の話のバランスが良く、レベル的にもそれなりにTS書いてる人でも知らないこと全然ありそうな内容だったので、自分のチームのメンバーにも少なくとも6章は読んでもらいたい。勧めます
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
tsconfig.json 設定項目備忘録
型推論オプション 型推論の結果が変わるもの。 ⭐strict ... 以下のセット alwaysStrict strictNullChecks T | null や T | undefined が T に縮退しなくなる。 例 strictBindCallApply Function の各種メソッドが any に縮退しなくなる。 例 strictFunctionTypes コールバック関数の引数が共変でもunifyするようになる結果、型変数の推論優先度が変わることがある。 例 strictPropertyInitialization noImplicitAny 宣言型がない場合にflow typeが使われる機会が増える。 例 noImplicitThis thisの宣言型がない場合に文脈から型が決定される機会が増える。 例 useUnknownInCatchVariables catch (
複数リポジトリ間におけるeslint・prettierの設定共通化 - LIVESENSE ENGINEER BLOG
転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプロジェクトとの優先順位を鑑みて、都度改善される可能性があります。その際はこちらの記事も併せて更新できればと考えています。 TL;DR 最終成果物は以下のリポジトリで公開しています。利用リポジトリ側での設定等は README に記載しております。 https://github.com/livesense-inc/eslint-config-template モチベーション 転職会議は現在ページごと・機能ごとにサーバーを別で管理するマイクロサービス構成で開発を行っています。その中で利用する静的コード分析やコードフォーマッタのルールは
【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)
選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Next.js + Vercelの開発体験が良すぎるので、できる限り活用して開発することを意識して作っています。 フレームワーク Next.js メインで使うライブラリ SWR tRPC React Hook Form Jotai Style/CSS に関して Vercelがリリースしたv0をいいなと思って、v0の出力で使われているTailwind CSS + shadcn/uiを使うようにしています。(v0活用は検証中です) よく使うインフラ系サービス Vercel: Gitにpus
VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020） - Qiita
Help us understand the problem. What are the problem?
はじめに React の Docker 環境構築の記事ってよくありますよね(笑) この記事が特徴的なのは、vscode 拡張機能の dev containers によってリモート側で開発が可能になるという点です。 リモートコンテナをビルドすると、リモートコンテナ側に自動的に vscode 拡張機能がインストールされ、設定まで自動的に反映されます。 そして、ホスト側の vscode 拡張機能には全く影響しません。 また、拡張機能がリモートコンテナ側にインストールされるので、リモート側のリソースを使用して vscode 拡張機能が動作します。 つまり、ホスト側に nodejs をインストールしたりという面倒な作業から解放されるという利点があります。 バージョン サンプルリポジトリ docker 環境のサンプルです。 コピーしていただいても、fork して利用していただいても構いません。 （※都
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
ContentsBasic project setupThe basic setup consists of four steps: Create the project and source directoriesCreate a package.jsonGet a .gitignore, tsconfig.json, .eslintrc.jsInstall TypeScript & dependenciesNote: This guide uses yarn, but if you prefer npm it has similar commands. # Create project folder mkdir my-project cd my-project # Create source folder and files mkdir src touch src/main.ts sr
Next.js 15
Next.js 15 is officially stable and ready for production. This release builds on the updates from both RC1 and RC2. We've focused heavily on stability while adding some exciting updates we think you'll love. Try Next.js 15 today: # Use the new automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@rc react-dom@rc We're also excited to s
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この書籍について · JavaScript Plugin Architecture
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
npm-scripts を書く時の手癖 - mizdra's blog
JavaScriptにセミコロンは入れるのか？入れないのか？ - Qiita
機能開発を止めずに、6万行の TypeScript 移行を完了させた開発プロセス
import * as 構文とパフォーマンス最適化 - Qiita
React+TSプロジェクトで便利だったLint/Format設定紹介
SQLに対するバックエンドのアプローチ比較、そしてSafeQLの紹介
Deno が Node.js に依存しなくなった - Qiita
「プロを目指す人のためのTypeScript入門」読書感想
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
React+Ts+Vite+ESLint+prettier Docker環境構築
2024年9月 俺の eslint.config.js
React×Firebaseでちゃんと開発するときの環境構築手順と解説
ESLint を使い倒す（おすすめルール紹介）
Starting a TypeScript Project in 2021
TypeScript Clearly & Quickly
「実装例から見る React のテストの書き方」をアップデートする
fortyfive45.shop-pro.jp
fortyfive45.shop-pro.jp
note.com/azusa_s_note
www.story.style
rightuncle.hatenablog.com
aostapp.hatenablog.com