はてなブックマーク

新しく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

週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス

Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕

厳格モード時に変数として使えなくなる予約語です。 arguments eval implements interface package private protected public static let yield // index.js var arguments; arguments = []; var eval = 1; eval = eval; // constは予約語ですが、letは違います var implements, interface, package, private, protected, public, static, let, yield, await; 上記以外の許容されない記法 特殊な記法のケースです。 CodeCJSESMSCRIPT

GitHub Next | AI for Pull Requests GitHub Next Project: AI for Pull Requests wants to make GitHub Pull Requests seamless, low burden an... この機能の登場により、PR でのレビューのオーバヘッドを少なくすることが期待されます。この PR では何を変更したのかを説明したり、更には review の依頼を投げることもできます。 また、Issue でも AI にどうしたらよいか？を聞くこともできるそうです。詳しくは公式の動画を見てください。 How many times have you submitted a change and forgot to update the unit tests? Or the documentation? Or introd

Astro の<script>は何もインテグレーションを入れなくても使えるお手軽さがある一方、ハマるポイントがあります。 Script の問題点 以下のコードの場合、Header は共通で使われるものではあるものの Foo は条件により/blog以下でしか HTML 上には出力されません。 つまり、これは他のページではこの Foo.astro 自体が読み込まれないように期待したいところです。 しかし、これは上手くいきません。 --- // Foo.astro --- <span>foo</span> <script> console.log("hello"); </script> --- // Header.astro import Foo from "./Foo.astro"; --- <header> <p>site</p> {Astro.url.pathname.startsWith

タイトルの通りこの hiroppy.me のサイトを 1 から刷新し、そこにブログページが入ったことによりブログもはてなから移管することにしました。 特に意識してなかったのですが、はてな ブログの方が、ちょうど 100 記事目の時に移行するという流れになってしまいました。。 はてな ブログは有料会員で 4 年間ぐらいやっていたのですが、最近は使えておらず、そうなると当初の目的である独自ドメインでのはてブ通知も今はあまり必要なくなりました。 また、ブログの名前が技術探しですが、最近はプライベートの話や技術を昔以上に探せてない点があり、もう自分としては役割を終えたのかなと思っています。 359 人の方に購読してもらい、多くの方に閲覧してもらって本当にありがとうございました。1 年半も技術の記事を投稿していなかったのに未だにアクセスがあり、嬉しく思います。 過去の記事もこちらへ移動させてますが、

メルカリを退職した - 技術探し 6ヶ月でしたが、退職することになりました。 本当にありがとうございます。 環境 アメリカと日本のプロダクトで活動していて、フロントエンドチームに所属していました。 特にメンターでチームリーダの方からは... 一回目の退職の後に、アイルランドに住みながらメルカリ Web のリアーキテクチャに関する技術顧問として 1 年半ほど働いた後に日本に帰ったタイミングでお誘いを頂き、2019 年の 11 月に二回目の正式な入社をしました。 メルカリでやったこと 入社後、リアーキテクチャとは異なりますが、メルカリ web の刷新プロダクトがはじまるということだったのでそちらに一年ぐらい開発に関わっていました。その後に、再度設立されたソウゾウの初期メンバーとして参加することとなりました。 メルカリ チームメンバーとは 2017 年や技術顧問時代からの知り合いも多く、プライベ

30 歳という節目でもあり、社会人になって、7 年経ったのでせっかくなので振り返ろうかと思う。今日から form の枠で 20 代が使えなくなってしまったことは悲しい。 仕事 自分のキャリアはとても珍しいと思う。新卒でドワンゴに入り、後にメルカリへ行き、またドワンゴに行って今現在、メルカリ(souzoh)にいる。出戻りを歓迎してくれる会社は本当にいい会社だと思った。 そこでは、立ち上げフェーズでアーキテクチャの構築やベースを書く 0 ->1 をすることがほとんどでニコナレや N 予備校、new メルカリ Web、メルカリ Shops などを作ったり、動画の最適化の研究をしたりしていた。あまり知られていないが、自分は画像処理の研究を 3-4 年間やっていたので、少しだけ画像や動画の最適化にも詳しかった。振り返って一番良かったことは、運が良かったのかどこのチームも仲のいい友人が多く出来て、あま

注意: これは公式見解ではない、ただ 1 メンバーの感想文です。 最近の大きなニュースとしては、webpack の主要メンバーの 2 人(Sokra, Alexander)は現在 vercel 雇われたことです。 これによりメンテナンスの安定度が増したことは確かでしょう。現状の問題点はメンテナ不足です。webpack ですら深刻です。 例えば今日、障害が発生している mini-css-extract-plugin は一人で開発しているためレビュワーがいません。この 2 年ぐらいずっとこのような感じです。 npm dependency is breaking some React apps today — here's the fix Tons of users are reporting their Facebook Create React App builds are failing

今回は graphql-codegen を使い説明します。今回の例は、graphql-codegen 以外でも発生する可能性がありますが自動生成系が一番顕著に影響がわかりやすいです。 graphql-codegen はよく、graphql のスキーマから typescript の型定義/react の hooks 等を自動生成するのに使われますが、これは next.js と組み合わせた場合、少しトリッキーな部分があります。 graphql-codegen はデフォルトでは 1 ファイルにすべて出力されますが、それに対し next.js は各ページを chunks として吐くため何も考えずに実装すると、バンドルされるファイル量が膨大になる可能性があります。next.config.js から webpack の設定を上書きできますが、optimization はかなり上書きしづらくそもそも上書

数日前に GitHub Sponsors の機能で企業が支援できるようになることが発表されました。 これにより、今後どのように OSS に変化があるのかないのかを注目します。 特別視するのが良いアイディアか否か そこで以下のような面白い議論が発生しました。 これはこの機能が入ったときに、もし支援している企業やユーザーだけが issue を作れて、他の人はコメントだけできるようにする機能が入ったらどうなるかという議論です。 なぜこのようなツイートをこの人がしたかというと以下の理由です。 The goal is to reduce the maintainer’s burden. Today the options are: turn off issues completely or make the repo private and give access to sponsors. It w

予定では、明日の 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/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

puppeteer をラップした api server みたいなもので内部は koa が使われています。これを起動し、/renderへ url を path として挿入するとそのページの html が返されます。 例えば、/render/https://google.comとアクセスすると、google.com の html が返ってきます。 また、スクリーンショットも取れたりします。(/screenshot) 返す html は配信元とは一致はせず最適化されたものが返されます。例えば、console.log('hello')やdocument.write('test')だけ書かれた js などは、html に挿入された後そのスクリプトタグは html 内からなくなったり、baseがついたりします。 ちなみに rendertron を GCP で動かすのはもっと簡単だったりします。 インフ

この機能が導入されることにより、{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

GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler You will know how to make a javascript bundler. Contribute to hiroppy/the-sample-of-module-bundler d... 変更されたコード一覧はこちら ECMAScript Modules(ESM)について さて、多くの人がすでに使っている以下のような構文が ESM と呼ばれるものです。 import { version } from "module"; export const a = 1; 仕様等のドキュメント tc39: https://tc39.es/ecma262/#sec-modules whatwg: ht

今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi

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 は、ローダーチェインと呼ばれる仕組みで動いています。 これには、inline の書き方が存在しますが開発者ですら使うのは非推奨です。 しかし、webpack のログにはこの表記が多々出てくるため疑問がある人は多いと思います。 設定は以下のファイル群です。 // webpack.config.js module.exports = { mode: "development", module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, { test: /\.css$/i, use: [require.resolve("./loader")], enforce: "post", }, ], }, }; // l

実行コードを制御するセキュリティ機構が Node.js に入りました。 ポリシーファイルを使い、整合性のチェックを行います。 これにより、requireしたときにファイルが変化していないことを保証することが可能です。 A Node.js Security Model A Node.js Security Model Intent This document proposes a way to introduce a set of features to Node.... アルゴリズムは、W3C にある SRI と同様です。 https://www.w3.org/TR/SRI/#the-integrity-attribute https://github.com/nodejs/node/blob/master/lib/internal/policy/sri.js この機能は、まだ実験中のフェ

<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 では、

3/2 - 8/26 までアイルランドで生活していました。 長かったようであっという間に過ぎていって本当に幸せな日々でした。人生の中で一番良かったんじゃないかな。。。 アイルランド イギリスの左にある島で北部がイギリス領です。 首都はタックスヘイブンで有名なダブリンで多くの有名な IT 企業がこの都市に集まっています。 日本から直接アイルランドに行くことは出来ず、一度乗り継ぎが必要となります。 時差 タイムゾーンは GMT+0 でイギリスと同じとなりますが、サマータイムにより現在は GMT+1 となります。 サマータイムは、3 月の最終日曜日から 10 月の最終日曜日の期間となります。 つまり、日本との時差が 8, 9 時間なので日本で一番活発な時間帯がアイルランドの深夜となります。 気候 天気が不安定なのは有名な話で突然雨が降ったり突然晴れたりします。 しかしながら、夏は最高 20 度ぐ

potato4d くんのエンジニアキャリアにおける「焦燥感」を読んでこの文章を書いています。残念ながら日本にいなかったため、直では聞いていないです。 読んで思ったことは、自分より若いのに(年齢は仕事等には関係ないが人生的な話ね)将来のことを考えていてすごいなーって思っています。 エンジニアキャリアにおける焦燥感との向き合い方 2019年7月6日、株式会社サイバーエージェントが主催するイベント「Battle Conference U30」が開催されました。30歳以下のエンジニアによる30歳以下のエンジニアのための技術カンファ... さて、自分について纏めてみようと思う。 前提として、今はマネージメント的な話は考えておらず、今はコードを書くことに集中したいなって思っている。 ただ組織論的な部分はすごい興味あるから、多くの人を参考にしていきたいなとは思う。 どうエンジニアが気持ちよく働ける組織に

TL;DR 昨日、初めてやったソシャゲに 5 万円近く投資した結果、ガチャでは出ずに、天井だった。 事の発端は、昨日の深夜である。あまりにも何もやる気が出なかったので YouTube に行ったら、とある動画がサジェストされた。 まぁ暇やし見るかって気持ちで見たらそれはソシャゲのガチャを回している動画だった。そう、プリンセスコネクトだ。 この動画は、今期間限定のガチャを回していたのだが、そのピックアップキャラのアニメーション動画があまりにも自分に謎フィットしてしまった。そして、気付いたらアプリをダウンロードしていた。内部データー関連で 1 時間ぐらいダウンロードにかかった気がする。 最初にチュートリアルをやった。長かった。本当に長かった。多分目的がガチャを引くということしか頭になかったと思う。そして、ガチャの画面まで自由に移動できる状態になった。まずは最初に数回引けるぐらいのジュエルをもらう

webpack-dev-server のテストを高速化しました。 jest を使っていて、--runInBandを今までは使っていましたが、それを外しました。 —runInBand jest はデフォルトでワーカーを使い並列実行を行います。 しかし、このオプションをつけるとそれが直列実行できます。 理由としては、server の listen するテストが多く、mocha で書かれていたため、急に jest に移行してもコード自体が並列実行できるものではなかったからです。 PR test: don't use --runInBand and improve execution performance by hiroppy · Pull Request #2005 · webpack/webpack-dev-server This is a bugfix This is a feature