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と同
Node.jsに入る新しいCJSからESMへの読み込み方法の紹介 - hiroppy's site
新しくCJSとESMの間での解決方法が変わる提案が出てきました。 まだマージされてませんが、すでに複数の承認があり、この方針から変わることはないように見えるので紹介したいと思います。 module: support require()ing synchronous ESM graphs by joyeecheung · Pull Request #51977 · nodejs/node Summary This patch adds require() support for synchronous ESM graphs under the flag --experimental-r... 新しい提案 この仕組みを利用する場合、--experimental-require-moduleフラグが必要となります。 以下は、わかりやすいようにpackage typeを指定せずにデフォルトはCJS
メルカリを退職して、Yuimediに入社しました - hiroppy's site
メルカリを退職した - 技術探し 6ヶ月でしたが、退職することになりました。 本当にありがとうございます。 環境 アメリカと日本のプロダクトで活動していて、フロントエンドチームに所属していました。 特にメンターでチームリーダの方からは... 一回目の退職の後に、アイルランドに住みながらメルカリ Web のリアーキテクチャに関する技術顧問として 1 年半ほど働いた後に日本に帰ったタイミングでお誘いを頂き、2019 年の 11 月に二回目の正式な入社をしました。 メルカリでやったこと 入社後、リアーキテクチャとは異なりますが、メルカリ web の刷新プロダクトがはじまるということだったのでそちらに一年ぐらい開発に関わっていました。その後に、再度設立されたソウゾウの初期メンバーとして参加することとなりました。 メルカリ チームメンバーとは 2017 年や技術顧問時代からの知り合いも多く、プライベ
webpack@5の主な変更点まとめ - hiroppy's site
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
webpack@5で入るModule Federationについて - hiroppy's site
Module Federation(以下 mfe)は webpack@5 から入る新しい仕組みの一つです。 Proposal Merge Proposal: Module federation and code sharing between bundles. Many builds act as one · Issue #10352 · webpack/webpack This is a proposal to merge my existing work into the Webpack core. The base concept is federated ap... 目的 アプリケーションを作る時に、webpack はビルド時のソースコードは使う前提で実行するので、様々な最適化を行うことができます。 もし、node_modules 経由以外でライブラリを使うという場合は scrip
webpack@5で入るPersistent Cachingについて - hiroppy's site
webpack/lib/config/defaults.js 実際に使うときの設定 結論ですが、webpack.config.js へ以下のように書くことが推奨されます。 module.exports = { cache: { type: "filesystem", buildDependencies: { config: [__filename], }, }, }; あとは、各コードの設定に依存するためversion等の追加が必要になる可能性があります。 ドキュメント Other Options | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... 仕組み ファイルキャッシュでは以下のようにデフォルトではnode_m
webpackの次のバージョンで入るassetModulesの紹介 - hiroppy's site
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb) 使い方 実験フラグをオンにする。 // webpa
module bundlerの作り方(準備編) - hiroppy's site
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
アイルランドから帰ってきた - hiroppy's site
3/2 - 8/26 までアイルランドで生活していました。 長かったようであっという間に過ぎていって本当に幸せな日々でした。人生の中で一番良かったんじゃないかな。。。 アイルランド イギリスの左にある島で北部がイギリス領です。 首都はタックスヘイブンで有名なダブリンで多くの有名な IT 企業がこの都市に集まっています。 日本から直接アイルランドに行くことは出来ず、一度乗り継ぎが必要となります。 時差 タイムゾーンは GMT+0 でイギリスと同じとなりますが、サマータイムにより現在は GMT+1 となります。 サマータイムは、3 月の最終日曜日から 10 月の最終日曜日の期間となります。 つまり、日本との時差が 8, 9 時間なので日本で一番活発な時間帯がアイルランドの深夜となります。 気候 天気が不安定なのは有名な話で突然雨が降ったり突然晴れたりします。 しかしながら、夏は最高 20 度ぐ
初めて海外で登壇してきました - hiroppy's site
概要 ダブリンの node.js meetup でゲストとして、登壇してきました。 スライド + ノート 内容は、今後の Node.js の ESM 実装に関する話です。 以下の記事に文字を書き起こししてありますので、興味あったら見てください。 Introduce ECMAScript Modules of Node.js I talked about ECMAScript Modules at Dubin Node.js meetup. I made comments to deepen your understand... 経緯 We had a look at some of your previous talks and our group would definitely love to hear from you! Let me know if you are interest
Node.jsの新しいモジュール方式の実験的導入 - hiroppy's site
Node.js の Core へ ESM と CJS の新しい方式が実験的フェイズ(stability: 1)として入ります。 ESM 対応は安定化までのプランとしてステージを 4 つ(0 -3)用意しており、現在が 2 です。 modules/plan-for-new-modules-implementation.md at main · nodejs/modules Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 2019 年の 10 月に実験的から安定的へ移行するのが最終目標となります。(stage:3) 内容まとめ --es-module-specifier-resolution=node|explicit で処理解決方法を決定する ex
OSSで報酬が支給された話 - hiroppy's site
hiroppy is creating OSS | Patreon Become a patron of hiroppy today: Get access to exclusive content and experiences on the world’s lar... 以下、編集前の記事 注意: あくまでもこれは webpack の話です 2 月分の OSS 活動費 2 月分の OSS 活動費が以下の額で支給されます。 $1674(186,620.87 円) Total: $2093(233,331.83 円) 現状の自分について 今年から webpack に復帰しました。(以前活動してた時はまだ openCollective に参加してない) そして、本業の他に個人事業主をやっていますが、今は税理士がいません。 日本では他の会社のお仕事もしているため、毎月ごとに請求書を書いて提出し
OSSの現状と今後 - hiroppy's site
Gatsby が面白い仕組みを導入していて、驚いたので書くことにしました。 Gatsby React.js の静的サイトジェネレーター GitHub - gatsbyjs/gatsby: The fastest frontend for the headless web. Build modern websites with React. The fastest frontend for the headless web. Build modern websites with React. - GitHub - gatsbyjs/gat... 最近、海外ではとても流行っています。 コミュニティ 最近、gatsby のメンテナチームに所属しました。 人数が異常ですよね、このチームに所属していると gatsbyjs/gatsby の write 権限を持ちます。 そう、個人的に画期的だと思った
Node.jsのCoreにレポート機能が入った - hiroppy's site
node-report: meld into core by gireeshpunathil · Pull Request #22712 · nodejs/node Checklist make -j4 test (UNIX), or vcbuild test (Windows) passes tests and/or benchmarks are inc... 結構前から進行してて入れたいねーってなってたらこんなにかかってしまいました。 semver-minor なので、次のリリースで入るでしょう。 目的 主な目的としては、何かのエラーで例外をキャッチしたときにその時の詳細情報をコア側から提供し、原因特定の手助けをします。 node-report node-report とは、公式が出しているレポーターです。 主に以下の情報を提供します。 JavaScript Stack Trace N
Node.jsでのイベントループの仕組みとタイマーについて - 技術探し
libuv/core.c at v1.x · libuv/libuv Cross-platform asynchronous I/O. Contribute to libuv/libuv development by creating an account on Git... タスク タスクは、同期タスクと非同期タスクの 2 種類存在します。 setTimeout(() => console.log(1)); setImmediate(() => console.log(2)); process.nextTick(() => console.log(3)); Promise.resolve().then(() => console.log(4)); (() => console.log(5))(); 同期タスク (() => console.log(5))(); 非同期タスク setTim
Presentation APIを使ってみる - hiroppy's site
GitHub - hiroppy/fusuma: ✍️Fusuma makes slides with Markdown easily. ✍️Fusuma makes slides with Markdown easily. Contribute to hiroppy/fusuma development by creating an ... ステータスは 勧告候補 で、今現在は chrome のみ実装されています。 この API は、Keynote や PowerPoint でプレゼンテーションモードにすると他のディスプレイに出力できるようになる機能をブラウザで実現できます。 ディスプレイの他にも、Chrome Cast や AirPlay 等にも映し出すことも可能です。 とりあえずディスプレイが一枚繋がっているかネットワーク以下に Chrome Cast 等があれば使えます。 いままで
業務で使える簡単なSSR + SPA のテンプレートを公開した - hiroppy's site
久しぶりのブログです。 よく Node.js の人と思われがちですが、普段は Node.js でのバックエンド開発はもちろんですが React や Vue を書いていますので、たまにはフロントエンドネタを投稿しようと思います。 GitHub - hiroppy/ssr-sample: A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App - GitHub ... リポジトリにあるコード見たほうが早いと思いますので、ここでは注意点等を列挙していこうかなと思います。 主な技術スタック de
Node.js Package Mode について - hiroppy's site
esm: Implement esm mode flag by guybedford · Pull Request #18392 · nodejs/node This provides a mode: "esm" flag for package.json files which will treat ".js" files as ES modules w... まだ、master へ入っていないので、未確定です。 今は、Core で開発するか http2 の様な感じで upstream で開発するや semver の扱い等の開発指針を決めたところです。 現在の Node.js の ECMAScript Modules に対する問題点 ESM を使用する場合、現在はファイルの拡張子を.mjsにする必要があるが可能であれば、ユーザーは.jsファイルで書きたい。 Node.js Package
Node.jsにworkerが入った - hiroppy's site
Node@10.5.0で入った worker の話です。 この記事は、Roppongi.js #4の登壇資料です。 5min で話しきれないので記事にまとめました。 実は、自分が Node.js に関わって、最初から最後(今現在)までずっと追っている珍しいモジュールです。 worker_threads とは？ worker: initial implementation by addaleax · Pull Request #20876 · nodejs/node Hi everyone! 👋 This PR adds threading support for to Node.js. I realize that this is not exactly a ... 実装著者は Anna (この PR は io.js 時代に petkaantonov が実装したのをベースに現環境へ移した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
