モダンJSの一時代を築いたBabelから学ぶトランスパイル
はじめに 今回この記事を書こうと思ったのは、JavaScriptのパーサ関連の記事が定期的に投稿される中で、 ESTreeの話はよく出てきていて反響がありそうだけれど、それを利用したツールは実際にどのようにコードを解析しているかが詳しく書かれている記事が少ないなあと思ったためです。 この記事では、トランスパイラとしてモダンJSの一時代を築いたBabelを例にトランスパイルについて、詳しく解説できたらと思います。 詳しい仕様などは日本語訳がされたハンドブック もありますが、 あいまいな訳になっているため、英語版のハンドブックをわたしはお勧めします。 記事の対象者 JavaScriptやTypeScriptを利用している JavaScriptなどのコードは書けても実際にブラウザでどのように実行されているか気になる JavaScriptなどのパーサや言語処理、トランスパイラ、コンパイラに興味があ
Solidの特徴と、その裏側 - console.lealog();
https://www.solidjs.com ずっと調べたいものリストにはあったやつで、Astro熱がちょっと収まったのでこのタイミング。 めちゃめちゃ雑にまとめると、React + MobX feat. Svelteって感じのUIフレームワークです。（つまり好みは分かれるであろう） Solidとは 基本はReactライクな書き味 JSXでコンポーネントを書く、Propsでデータを単方向に流す もちろん細かい挙動に差異はあるし、互換性はない `Suspense`とか`Portal`とか`ErrorBoundary`とかもある MobXライクなリアクティブの仕組みがビルトインされてる Propsが自動でProxyされてるイメージ 依存配列なしに、状態を読み取ったコンポーネント・関数だけが更新できたり ストア（ちょっと大きめの状態用）関連のコードもある Svelteと同様に、コンパイルして最
Rails 7とReactによるCRUDアプリ作成チュートリアル（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Create a CRUD App with Rails and React · James Hibbard 原文公開日: 2022/04/01 原著者: James Hibbard 日本語タイトルは内容に即したものにしました。 React logo is licensed under Creative Commons — Attribution 4.0 International — CC BY 4.0. ほとんどのWebアプリケーションでは、何らかの形式でデータを永続化する必要があります。これは、サーバーサイド言語で作業する場合はシンプルにやれるのが普通です。しかし、そこにフロントエンドのJavaScriptフレームワークも加わってくると、少しややこしくなり始めます。 本チュートリアルでは、Ruby on Rai
Browserslist でサポートブラウザを設定しよう - BASEプロダクトチームブログ
この記事は BASE Advent Calendar 2021 の 5 日目の記事です。 基盤チームの右京です。 最近ひょんなことから browserslist の設定を見返したのですが「babel や autoprefixer で必要になったので導入した」以上はあまり触れられていなかったため、この機会にいちから見直してみようと思いました。 browserslist? https://github.com/browserslist/browserslist 簡単に言えば、クエリを書くとそれに該当するブラウザをリストで取得できます。babel(preset-env) や autoprefixer はここから取得出来るリストを利用して、必要な変換内容を決定しています。単純にバージョン指定でのクエリが記述できるだけではなく、利用統計に基づく絞り込みも可能となっています。例えば、0.2% 以上のシ
全ての道はRomeへ続くのか - これからのJavascript開発を考える
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
Reconstructing TypeScript, part 0: intro and background
Jake Donham > Technical Difficulties > Reconstructing TypeScript, part 0 Reconstructing TypeScript, part 0: intro and background2021-09-07I've been building a "document development environment" called Programmable Matter that supports live code embedded in documents, with a simple TypeScript-like programming language. It's been fun figuring out how to implement it—the type system in TypeScript is
Rust Is The Future of JavaScript Infrastructure
Rust is a fast, reliable, and memory-efficient programming language. It's been voted the most loved programming language six years in a row (survey). Created by Mozilla, it's now used at Facebook, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to replace parts of the JavaScript web ecosystem li
TypeScriptコンパイラの読み方
TypeScriptコンパイラリーディングをする上で、目当てのコードに辿りつくまでの手間を短縮するためのメモ書きです。コードリーディングの一般論や、TypeScriptコンパイラから読み取れる個別事象については極力省略しています。 TypeScriptの主要な処理系 多くのJavaScriptパーサーが拡張としてTypeScriptを読めるようになっています。また抽象構文木のフォーマットに事実上の標準があり、各パーサーはそれに従っています。AST Explorerでこれらのパーサーの出力を調べることができます。特に重要なのが以下の2つの処理系です。 TypeScript TypeScriptの型推論・リント・トランスパイル・モジュールバンドリング等ができる。 Babel TypeScriptのトランスパイルができる。 TypeScriptコンパイラの構成 libに標準ライブラリ (型定義フ
Next.js 12について本気出して和訳してみた
Next.js 12について本気出して和訳してみた Next.js 12がリリースされました！！！🎉 公式ページは英語となっておりますので、Next.js 12の内容を和訳していきます。 公式ページは以下となっております。 英語が苦手な方はこの記事を参考にしてください！！！ ※本記事で使用している画像は公式ページのものです。 Next.js 12 2021年10月27日(水) Next.js Confで発表したように、Next.js 12は過去最大のリリースとなります。 Rustコンパイラー: Fast Refreshが3倍、そしてビルドが5倍速くなりました。 ミドルウェア(beta): Next.jsの柔軟性を高めるために、設定よりもコードを優先します。 React 18のサポート: ネイティブのNext.jsのAPIがサポートされ、サスペンスもサポートされています。 <Image /
最近のTypeScriptのES Modules対応事情
ブックマークサービスQiNeel関連の記事や身の回りのよしなしごとをそこはかとなく書きつくっています。 コロナの影響で中止となった幻のTSConf 2020で、TypeScriptとES Modulesについて登壇する予定でした。 最近のTypeScriptは、モジュール関連で新たな仕様が出てきたようなので簡単にまとめておきます。前職同僚でNode.js Core Collaboratorのshisamaおよびdeno-ja Slackコミュニティーからの情報を勝手に集約しました。みなさんありがとうございます。 背景 JavaScript同様、TypeScriptでもimport構文（ES Modules）をサポートしています。しかし、ES ModulesではCommonJS形式のrequire()と異なり拡張子を省略できないという制約があります。 フロントエンド開発では、ほとんどの場合で
Reactハンズオンラーニング 第2版 - hitode909の日記
ひさしぶりに学習した。 Reactは2015年くらいには、趣味でVRハウスを作ったり、QRコードを読めるページを作ったり、仕事でも使ったり、React鳥貴族っていう名前のただの飲み会に行ったりと、しばらくは触っていたのだけど、チームの異動があって、最近は主にjsx-domという、JSXを書いてBabelを通すとcreateElementに変換してくれる、という独特の世界観のJSXを書いたりしていた。 jsx-domは、Styled Componentsを使えたり、useRefを使えたりと、ちょっとReactのエッセンスは吸われているものの、単にcreateElementしてくれるだけで、差分レンダリングとかは当然できない、という、シンタックスシュガーとしてJSXを使える、というもので、偶然発見して、React非導入アプリケーションにとっては便利じゃん、って使っていたけど、身の回りに使ってる
JestでTypeScriptを高速化する | miyauci.me
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
HTMLコーディングでもReact+TypeScriptの開発体験を得る
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
Prettier 2.3 で TypeScript 4.3 をフォーマットする
{ "overrides": [ { "files": "*.ts", "options": { "parser": "babel-ts" } } ] } Configuration Overridesを使って、.tsファイルをフォーマットするときにbabel-tsパーサーを使うようにしています。 Prettier はデフォルトではtypescriptパーサーを使います。このtypescriptパーサーは、@typescript-eslint/typescript-estreeに依存しています。Prettier2.3 リリース時にはまだ@typescript-eslint/typescript-estreeは TypeScript 4.3 に対応していなかったので、Prettierはデフォルトのパーサーでは TypeScript 4.3 の新機能をフォーマットすることができません。 明示的
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え 「Babel」は、JavaScriptコンパイラもしくはトランスパイラの代表的なツールとして知られており、FacebookやSpotify、Slack、MongoDBなどさまざまな企業や開発現場で使われています。 そのBabelの開発チームが資金難になっていることを、開発の中心となっているコアチームがブログ「Babel is used by millions, so why are we running out of money?」（Babelは何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」で明らかにしています。 Babelとは、ECMAScript 15以降のいわゆるモダンなJavaScriptの構文や機能を活用して書
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ 現在、モダンなJavaScript開発環境としては、ESLintに代表される構文チェッカーや、Babelに代表されるJavaScript変換ツール、モジュールを組み合わせるなどのバンドル操作を行うWebpackなど、さまざまなツールを組み合わせる、いわゆるツールチェインを用いるのが一般的となっています。 こうしたなかで、このツールチェインの機能をすべて備えた1つのツールでJavaScriptの開発環境を統一してしまおうというオープンソースのプロジェクト「Rome」が、昨年発表されました。 Romeでは、JavaScriptやTypeScript、JSXなどでの開発において、現時点で以下の領域をカバーする予定です。HTML、CSS、Markdown、JSONなどにも対
おそらく誰も使わない @babel/parser 7.14 新機能 TypeScript プラグイン の dts オプションについて
const { parser } = require("@babel/parser"); const code = `const foo: string = "foo"`; parse(code); // 構文エラー、型注釈の構文をパースできない parse(code, { plugins: ["typescript"] }); // typescript プラグインを有効にしているため型注釈の構文をパースできる 現在実装されているプラグインは https://babeljs.io/docs/en/babel-parser#plugins で確認できます。 プラグインという呼ばれ方をしていますが、サードパーティがプラグインを実装することはできません。これは、@babel/parserの方針として決まっており、今後もそのような対応をすることはないでしょう。 なので、実際はプラグインというより
WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
webpack4系から5系にアップデートした際の対応事項とかメモ - Madogiwa Blog
個人で開発しているサービスでフロントエンドのbuildにwebpackを利用しているのですが、4系から5系にアップデートしたので、そのあたりで対応したことをメモしておきます📝 利用していたwebpackのビルド構成 webpackアップデート時の対応事項メモ modeを明示的に指定するようにした デフォルトでinstallされなくなったNode.js系のpolyfilをinstallした [hash]ではなく[contenthash]を利用するようにした その他の対応事項 webpack-assets-manifestのデフォルトのファイルパスが変わる おわりに 利用していたwebpackのビルド構成 基本的には以下のようなライブラリを利用したBabel + TypeScript + Vueで、 mini-css-extract-pluginでcssを別ファイルで生成するようにして、we
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsのReact Hookへの最適化は一体何をしているのか - tosuke
