本記事は、LINEヤフー株式会社のフロントエンドスペシャリスト、浜田真成さんによる寄稿です。 JavaScriptのビルドツールについて、その役割や歴史的な変遷をたどりながら、2025年現在の主要ツールの特徴と選定ポイントを解説します。LINEヤフーでのユースケースも交え、アプリケーション開発における最適なビルドツール選びの参考となる内容です。 はじめにこの記事は、Web開発におけるJavaScriptのビルドツールの役割やその特徴について解説するものです。 2025年現在までのビルドツール事情を整理し、アプリケーション開発者が「どのビルドツールを、何の目的で選択すべきか」を判断する1つの指針となれば幸いです。 1. ビルドツールの役割と歴史的変遷1-1. ビルドツールがなぜ必要なのかWebアプリケーション開発では、JavaScriptを用いることが主流です。 一方で、JavaScript

2025/04/22 フルスタックTypeScriptの現在地：3社が本音を語るハイブリッド勉強会 https://toggle.connpass.com/event/349725/ Goの組織でバックエンドTypeScriptを採用してどうだったか @osuzu ソフトウェアエンジニア

ご来店ありがとうございます。新刊発売予定のお知らせです。 2025年4月18日（金）、遠藤侑介著『型システムのしくみ ― TypeScriptで実装しながら学ぶ型とプログラミング言語』の発売を予定しています。なお、2025年4月16日（水）から開催されるRubyKaigi 2025会場のBOOKSTOREにて、著者サイン会に合わせた先行発売を予定しています（紙書籍のみ。部数には限りがあります）。ジュンク堂池袋本店様でも4月16日から販売していただける予定です。 『型システムのしくみ』について 多くのプログラミング言語では、さまざまな場面で「型」が登場します。特に静的型付き言語では、プログラムを実行せずに潜在的な問題をあぶり出す「型検査」の有用性が広く知られるようになりました。最近では動的型付き言語でも、型ヒントや静的解析ツールとして、この機能を部分的に取り入れる動きがあります。 型検査の背

While we’re not yet feature-complete, these numbers are representative of the order of magnitude performance improvement you’ll see checking most codebases. We’re incredibly excited about the opportunities that this massive speed boost creates. Features that once seemed out of reach are now within grasp. This native port will be able to provide instant, comprehensive error listings across an entir

デジカル開発メンバーの末永(@asmsuechan)です。電子カルテの開発を通して医師や医療事務の方の「書く」をサポートしています。 みなさん、マークダウンでテキストを書いていますか？私はマークダウンで書くことが好きで、プレーンテキストでもほとんどのメモをマークダウン記法で書いてしまいます。この記事もはてなのマークダウンを使って書いています。*1 マークダウンを使えるサービスを挙げていくとGitHubやStackOverflowなど開発者ならば誰しも知るサービスが多く出てきます。このことからもわかるように、マークダウンはもはや開発者とは縁の切れないものとなっています。 しかし、普段の開発時によく使うマークダウンですが、実際にはどのような仕組みで動いているのかを知る人は少ないのではないかと思います。 この記事ではオリジナルのマークダウンパーサ「minute」をTypeScriptを使ってハン

こんにちは、クレスウェア株式会社の奥野賢太郎 (@okunokentaro) です。本記事はTypeScript 一人 Advent Calendar 2022の1日目です。 Utility Types TypeScriptにはUtility Typesというものがあります。TypeScript 2.1から徐々に導入され、4.9の現在では、Utility Typesを全く知らないままTypeScript開発を進めるのはもったいないと言えるほど充実しました。 本記事や一連のアドベントカレンダーでは、そんなUtility Typesを中心にTypeScriptの活用について紹介していきます。そのまま説明するだけではドキュメントの日本語訳になってしまいますので、たとえ文量が短かったとしても筆者の経験や実例を中心に紹介する方向で予定しています。 ReturnType<T> 1日目を飾るのはRetu

TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。

2024年9月9日追記 2024年4月にこの記事を書いた時点から、Vite の設定ファイルや構成が変更されました。そのため、この記事の手順が現在では正しく動作しない可能性があります。 下記の Github リポジトリと package.json を参照し、ライブラリのバージョンを合わせることをお勧めします。 書いていて気づいたのですが、この記事に特に目新しいものはありません。コピペで最速環境構築をしたい方向けです。それぞれのツールについて細かい解説はしていないため、詳細は公式ドキュメントをご参照ください。 リポジトリはこちら。 Node.js この記事では Node.js のバージョン管理に volta を使用しますが、nvm や nodebrew などでも問題ありません。パッケージマネージャーには pnpm を使用したいところですが、2024 年 1 月現在、volta の pnpm サ

By The Build Tool for the Web Vite is a blazing fast frontend build tool powering the next generation of web applications.

この他にも多くの機能を有しており、すでに次世代のビルドツールとして充分に現実的な候補と言えるでしょう。 そしてなにより TypeScript トランスパイルの圧倒的な速さは魅力的です。Vite は esbuild を使って TypeScript をビルドするため非常に快適な開発体験が得られます。ただし型チェックは行えないため、 tsc --noEmit コマンドを並列実行するなりして担保します。 Vite の config ファイル自体を .ts として書けるのも大きいです。これにより config ファイル作成時も型チェックや入力補完等の恩恵を充分に受けられ、更に ES Modules にも対応してるので import 句の使用も可能です。 新規参入したシステムの弱点としてエコシステムの未発達が挙げられますが、Vite は Rollup 用プラグインと互換性を持つことでこの弱点を克服して

Vite + React で新規プロジェクトの開発環境を作ろうViteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Vite とは？Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、Sass を CSS に変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホットリロードと呼ばれるものですね。

これ僕らの物語であり、僕と君の物語であるかもしれない。 数日前、友人が言った。「久しぶりに Rails を書いたけれど、Node.js の良さに敵わない」と。 その言葉に同意しながらも、他方で少し不思議に思う。 いつから僕らは Node.js しか使わなくなったのか。あれだけ話していた Rails などの多くの Web 技術にときめかなくなったのか。と。 もちろん、使えないというわけではない。寧ろ今現役で十分な活躍をしているフロントエンドの人間は、等しく皆「主役であるバックエンドのサブとして存在するフロントエンド」を経験してきている。 書こうと思えば書ける。だがその中で、敢えてフロントエンドとその技術を選んできた。 だけど今はどうだろう。フロントエンドエンジニアはもはや「JavaScript を扱うソフトウェアエンジニア」となり、一般的なバックエンドは勿論、Node.jsが一級市民として存

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書について詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語と

2023年11月8日 プロを目指す人のためのTypeScript入門 - Forkwell Library #35

2023/09/02開催 Startup Day 2023での登壇資料です。

By all accounts, TypeScript has been a big success for Microsoft. I've seen loads of people sparkle with joy from dousing JavaScript with explicit types that can be checked by a compiler. But I've never been a fan. Not after giving it five minutes, not after giving it five years. So it's with great pleasure that I can announce we're dropping TypeScript from the next big release of Turbo 8. The fac

TypeScript で DI (依存性注入) するためのライブラリを作ったんですが, それを紹介する前に既存手法をまとめておいた方が説明が楽だなと思ったのでまとめておきます. そもそも DI の目的とは, みたいなところは詳しく説明しないのであしからず. 手法の比較 DI なし Service Locator エフェクト Constructor Injection Setter Injection デコレータ typed-inject 次回予告 手法の比較 DI なし まずは DI を使わない場合を見ていきましょう. ここでは例として, 以下のような時刻と乱数を必要とするコンポーネント MyService が, 時刻と乱数を扱う機能をそれぞれ提供するコンポーネント Clock と Random に依存するような場合を考えます. type Clock = { getTime: () =>

【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引

みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで