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などの静的解析ツールを使い適切にルール
TypeScript 5.5で導入されたisolatedDeclarationsは、JavaScriptエコシステムを大きく変えるゲームチェンジャーかもしれない
7月7日、Denoの開発者マーヴィン・H氏が「JavaScriptエコシステムを加速する（Speeding up the JavaScript ecosystem）」と題した記事を公開した。この記事では、TypeScriptの新機能「isolatedDeclaration」が、JavaScript / TypeScriptエコシステムを変革する可能性について詳細に紹介されている。本記事ではその内容を簡単に紹介する。 本記事は、以下のエキスパートの皆様に監修していただきました: 古川陽介さん（Japan Node.js Association代表理事） うひょさん（株式会社カオナビ フロントエンドエンジニア） npmパッケージングの問題点 現在npmでのパッケージングプロセスは相当に複雑である。モジュールをnpmに公開しようとする開発者は、CommonJS対ESMの問題や、多くの設定調整を行
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
<T, K extends keyof T> をちゃんと理解する
TL;DR TypeScriptでライブラリなどを覗いているとよく見かける<T, K extends keyof T>について、問題を分解してきちんと理解する試みです。 extends この場合のextendsの役割は継承ではなく、制約です。 例えば以下のようなイメージ。 type StringOrNumber<T extends string | number> = T type A = StringOrNumber<string> type B = StringOrNumber<number> // Type 'boolean' does not satisfy the constraint 'string | number' type C = StringOrNumber<boolean> type User = { id: number; name: string; }; cons
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
TypeScript の変性（共変・反変）を 5 分で理解する
type User = { name: string } type Admin = User & { permissions: string[] } const user: User = { name: "user", } const admin: Admin = { name: "admin", permissions: [], } User は名前だけを持つ型で、Admin は名前と権限を持つ型です。また、それぞれの型の変数も用意しています。 この後のコード例は極力シンプルにするため、やや不自然なコードになっていますがご了承ください[1]。 サブタイプとスーパータイプ Admin 型の変数は name プロパティを持ち、User 型の条件を満たしています。そのため、User 型の変数には Admin 型の変数を代入できます。 その逆は型エラーになります。User 型の変数には perm
TypeScriptの変更点まとめ ──新しい演算子・トップレベルawait・usingについて
本連載の趣旨 本連載は、TypeScriptのアップデートを紹介する連載です。 TypeScriptは、その登場以来、順当にバージョンアップを重ね、現在（原稿執筆時点）5.2が最新となっています。各バージョンアップでは、性能改善に関するアップデートが主なものもあれば、大きな機能追加が施されたものもあります。 本連載では、これらのアップデートの内容のうち、バージョン3から5.2までに施されたものを整理し、テーマごとに紹介していきます。具体的には、以下のテーマを予定しています。 タプルに関するアップデート 型システムに関するアップデート 型の絞り込みに関するアップデート クラス構文に関するアップデート デコレータに関するアップデート 第1回目である今回は、上記テーマに含まれていないもので重要なアップデートを取り上げます。これらは、ひとつのテーマで連載1回分の内容にはならないものを、詰め合わせセ
【2024年最新】モダンフロント学習教材まとめ - Qiita
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！ という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背
Remove TypeScript - laiso
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
4歳娘「パパ、具体的な名前をつけないで？」 - Qiita
↓新作もよろしくやで！ ジェネリクスをもう少しだけ使いこなす。 コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった 36歳ザコーダーの休日 ワイ「何やこのコード、全然動かへんやん」 ワイ「怖いな～怖いな～…なんか嫌だなあ～」 よめ太郎「（何で自分が書いたコード見て稲川淳二みたいに怯えとんねん・・・）」 よめ太郎「（そんな鳥肌立つようなクソコード書いてんのかいな・・・）」 娘（4歳）「ねぇ、パパ」 ワイ「なんや、娘ちゃん」 娘「ちょっと、作ってほしい関数があるの」 ワイ「またかいな」 ワイ「娘ちゃんはホンマに関数が大好きやなぁ」 ワイ「しゃあない、パパはプログラミング苦手やけど、頑張って作ったるわ」 娘「ありがとう、パパ」 今回の要件 ワイ「ほんで、今回はどんな関数を作ればええんや？」 娘「えっとね」 娘「'あ'という文字列を渡したら」 娘「['あ', 'あ
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
そろそろJavaScriptに採用されそうなOptional Chainingを今さら徹底解説 - Qiita
みなさん、Optional Chaining使ってますか？ 私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC39ミーティングでStage 3に上昇し、いよいよ正式採用が近く期待も高まってきたところです。TypeScript 3.7にも導入されたため、TypeScriptユーザーの方々は11月上旬に正式リリースが予定されているTypeScript 3.7を今か今かと待
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
