TypeScriptの不要なexportを自動で削除するOSS「ts-remove-unused」を開発しました
こんにちは。メディアカンパニーに所属する鴻巣和司 (@kazushikonosu) です。普段はLINEスキマニのフロントエンドの開発をしています。業務をきっかけに、TypeScriptの不要なデッドコードを自動で削除するツール ts-remove-unused を開発し、GitHub上でOSSとして公開しました。本稿では、ts-remove-unusedが解決しようとしている問題や直近で行った大規模な変更について紹介します。 exportしていることで気づきにくい不要なコード TypeScriptを使っている場合、tsconfig.json の compilerOptions.noUnusedLocals を有効にすることで、ファイル内で参照がない不要な変数などの定義をTypeScriptコンパイラの実行時に検知することが可能です。また、ESLintなどの静的解析ツールを使い適切にルール
JavaScript/TypeScriptからWebAssemblyやネイティブバイナリを生成するコンパイラ「Porffor」の開発が加速へ、開発者がフルタイムで取り組み
「Porffor」は、JavaScript/TypeScriptをWebAssemblyバイナリやネイティブバイナリへとコンパイルする実験的なツールであり、これまでにない2つの特徴を備えています。 1つ目はJavaScript/TypeScriptをコンパイルしてWebAssemblyバイナリやネイティブバイナリを生成しようとしている点です。 これまでもJavaScript/TypeScriptをWebAssemblyに変換するツールは存在していましたが、JavaScriptのコードとWebAssembly版のJavaScriptエンジンを1つにパッケージングするという手段で実現していました。 実行時には、パッケージ内部のJavaScriptコードをWebAssembly版JavaScriptエンジンで実行していたのです。そのため生成されたバイナリの大きさは比較的大きく、また実行速度はあく
TypeScript プロジェクトのコンパイル時間を改善してみた話
TypeScript プロジェクトのコンパイルのボトルネックを調査・解消してみた話 はじめに こんにちは。エンジニアの辻󠄀です。 私は社内のとある TypeScript プロジェクトで開発業務を行っていました。 ある日、新たに関数の実装を追加しようとしたその時、tsserver（TypeScript の language server）による補完候補がなかなか表示されないことに気づいたのです。 どうやら、コンパイルの時間が非常に長くなっていたことが原因のようです。 この記事では、tsc のコンパイルにおけるボトルネックを調査する方法と、そこで適用した２つの改善方法について紹介します。 コンパイル時間が低下する原因はプロジェクトの性質によって大きく異なるため、ここで述べる改善方法が任意のプロジェクトに有効だとは言えませんが、少なくとも調査方法については役に立つのではないかと思います。 ボト
TypeScriptでpdfからテキストを抽出する（PDF.js）
はじめに 本記事ではNode.js環境でTypeScriptを用いてPDFテキストを抽出する手順について、プロジェクトのセットアップから扱います。また、型定義を参照しつつサンプルコードに解説を加え、筆者の環境で遭遇したエラーも簡単に取り上げています。 想定読者 PDFをTypeScriptで扱いたい人。 使うもの／環境 2023年3月上旬、下記の環境化での実装です。 OS: Windows 11 VSCode コードの実行はCode Runnerを使用。 Node.js v16.13.2 16系だとエラーが生じます。本文ではそのエラーも扱います。 TypeScript v4.5.5 インストール済であること、文法の知識は前提としています。 pdfjs-dist PDF.jsのnpmライブラリ PDFの操作に使用 サンプルPDF 日本語、テキストのみ。 Marked Contentは対象外。
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
JavaScript/TypeScript の Lint ツールを XO で統一した - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。掲題の通り、少し前にドクターズプライムの Frontend プロジェクトで使う lint ツールとして ESLint ではなく XO を使っていく方針に切り替えました。最近その振り返りを行ったので、その備忘録として文字に起こします。 github.com 経緯と課題 これまでは Create React App に付属する ESLint に加えてルールを少しカスタマイズして、それをいくつかのプロジェクトで使っていました。これにはいくつかの課題が存在していました。 ESLint およびその周辺プラグインの依存関係を含めたバージョンアップをケアし続ける必要がある renovate や dependabot などを用いて（半）自動化できるものの、依存の数や大きさに応じて依然としてコストが高い ESLint のルールを中長期的にメンテナンスする必要があ
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と JavaScriptのツールチェインを統一的に提供することを目指した「Rome Tools, Inc.」（以下、Rome Tools）は、JavaScriptおよびTypeScriptのコードの書式を高速に整えるフォーマッター「Rome Formatter」をリリースしました。 Release of the Rome Formatter, a super fast formatter for JavaScript, with a focus on Prettier compatibilityhttps://t.co/2iXq5Gm5K3 — Rome Tools (@rometools) April 5, 2022 Rome Toolsは、
node プロジェクトでも deno lint | deno fmt する
なぜ npm ツールチェインで消耗した こういうところでシュッと deno を入れておくことで、あわよくば本番で使う準備をする 経緯 久々に eslint の設定を見直したらやたら長大な感じでメンテがしんどくなった npm/yarn workspace で monorepo 化した際に、様々な eslint のバージョンが混在して peer-deps の管理が困難になった deno に組み込まれてる lint, fmt は deno かどうかはあまり関係なく、単に typescript なら使える 中身は https://dprint.dev/ と https://github.com/denoland/deno_lint deno lint は eslint の recommended 相当のものは実装してある eslint + typescript をメンテするより、 eslint 吹
TypeScriptのProject Referencesを使ってソースコードを分割し、レイヤー間の依存関係を強制する
TypeScriptのProject Referencesを使ってソースコードを分割し、レイヤー間の依存関係を強制する サマリ Project Referencesを使うと、1つの巨大なtypescriptプロジェクトを、複数のプロジェクトに分割し、プロジェクト間の依存関係を整理することができる。これにより、例えば以下のようなことができる test/ ディレクトリで export しているテスト用の関数を、 src/ ディレクトリの本番用コードでは参照できなくする レイヤードアーキテクチャで設計しているとき、プレゼンテーション層で定義している関数を ドメイン層から参照できなくし、レイヤー間の依存関係を強制する また、プロジェクトの分割によりビルド時のパフォーマンスが大幅に改善する。 …と公式で書いているが、ビルド時の挙動を正確に把握しないとむしろ悪化するので、注意が必要 適切なプロジェクト
yarn v2にまつわる誤解 | Wantedly Engineer Blog
現在WantedlyではNode.jsのパッケージ管理にyarn v1を使っています。現在私は開発者体験の改善を目指してyarn v2への移行を検討しているのですが、その過程でyarn v2が誤解されがちだと感じるようになりました。そこで社内への情報提供も兼ねて、いくつか誤解されがちだと思われる点を紹介したいと思います。 (わかりやすさのためにyarn v2と呼んでいますが、 yarn v3以降も含みます。これらはメジャーバージョンアップではあるもののyarn v1→v2のようにアーキテクチャが刷新されるわけではないからです) ポイント1: yarnをv2にするのにPnPは必須ではないyarn PnPはyarn v2の目玉機能で、パッケージをnode_modules以下に展開せずに仮想化してロードできるようにするというものです。node_modulesの展開作業が不要になるほか、依存関係の
最近の ESLint とかの構成2021
みんな好きな構成を好きなように入れれば良いと思ってるけど、自分が最近やってるやつを雑に紹介する。 シンプルなTypeScriptのプロジェクトを想定している。 npm install --save-dev eslint prettier typescript eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin npm-run-all
TypeScriptの導入にあたって考慮すべきメリットとコスト
皆さんこんにちは。京都開発室のLinです。仕事と個人的なプロジェクトでTypeScriptによる開発を始めて約2年が経ちましたので、 TypeScript導入時の経験を皆さんにお話ししたいと思います。 近年、TypeScriptはフロントエンド分野で最も注目を集める技術となっています。The State of JavaScriptの資料によれば、TypeScriptの使用を選択する開発者は増加を続けており、その評価も肯定的なものが多いようです。 「次のプロジェクトではTypeScriptにより開発を行うべきだ」「今あるJavaScriptプロジェクトをTypeScript仕様に変更すれば、プロジェクト品質の向上につながる」と考えているチームは数多くあるでしょう。 しかしながら、TypeScript導入のコストおよびメリットについては、極めて慎重に評価を行う必要があると、私は考えています。
大規模 Closure Tools プロジェクトに Prettier を導入するまでの道のり - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの鈴木(@__sosukesuzuki)です。 弊社のサービスである kintone では、コードのフォーマットを ESLint のみで行っているためプロジェクト内でコーディングスタイルを統一しきれていないという問題を抱えていました。 そこで opinionated なコードフォーマッター Prettier を導入し、コードベース全体でコーディングスタイルを統一するための支援をフロントエンドエキスパートチームで行いました。 2011 年にローンチされた kintone では、フロントエンドの大部分が Closure Tools を使って開発されています。Closure Tools は型の指定方法やクラスの定義方法などに独自システムを採用しており、現在の JavaScript のエコシステムや仕様と一部乖離しています。そのため、Prettier 本
ベルフェイス株式会社を退職しました
Qrunch がサービス終了してしまうので、 こんにちは zenn.dev ！！ 一発目の投稿が退職エントリーですみません。 自己紹介 名前は sansaisoba とか @54i とか フリーランス歴が長めのアラフォーエンジニア 得意分野はバックエンド（主にPHP） Twilio とかもやってました 入社したきっかけ 今年の初頭、フリーランスで働いていた頃にお世話になった @24guchia さん にリファラルでベルフェイスに誘われ、約8年ぶりに正社員として働くことを決心し面接。無事、4月に入社しました。 ベルフェイスのプロダクト自体、非常にいいところに目をつけてるなと思ったことと、 CakePHP2 を Laravel に置き換えるプロジェクトがあるということで、まさに私の経験にフィットしてるので自信を持って入社しました。 あと、給料が良かったのも大きいです。重要なことです。 入社して
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
マイクロソフト発のオープンソース言語「TypeScript」、生みの親が語る開発当初や背景
今やTypeScriptはウェブアプリ開発時に最初に検討される言語となっているが、開発が始まった2010年頃は、まだオープンソースに恐れを抱いていたMicrosoft文化のなかで、ゆっくりと歩を進めていく必要があった。 TypeScriptの共同創案者であり、デンマークのソフトウェアエンジニアであるとともにMicrosoftのテクニカルフェローも務めているAnders Hejlsberg氏は米ZDNetに対して、Steve Ballmer氏が同社の最高経営責任者（CEO）だった2010年に、JavaScript開発者の心をつかむ唯一の道はオープンソース戦略だという決断をチームが下した際のことを語ってくれた。 Ballmer氏は2001年に、LinuxがMicrosoftの知的財産すべてを脅かす「ガン」だと発言しており、Microsoftの幹部らは2010年時点でも、オープンソースが依然とし
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - line/tsr: TypeScript Remove (tsr) is a utility that removes unused code from TypeScript projects – It's like tree shaking, but for source files
monorepo-utils/packages/@monorepo-utils/workspaces-to-typescript-project-references at master · azu/monorepo-utils
