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

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

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

Login to Meetup | Meetup Find groups that host online or in person events and meet people in your local community who share y... ECMAScript Modules とは？ JavaScript には、AMD や UMD、CJS のような多くのモジュールシステムがあります。 ECMAScript Modules は当初 ES2015 に入る予定でした。 さて、ESM の仕様は WHATWG と TC39 が管理しますが、役割が違います。 TC39 は ESM のシンタックスや JS のルールを管理します。 例えば、モジュールは strict mode になるとか、thisの扱いとか。 しかし、モジュールの読み込みに関しては、WHATWG が管理します。 理由は、

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

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 に参加してない) そして、本業の他に個人事業主をやっていますが、今は税理士がいません。 日本では他の会社のお仕事もしているため、毎月ごとに請求書を書いて提出し

ステップ実行 --debugと--debug-brkは Node8 の時点ですでに非推奨なので、使わないでください。 デバッグ方法 コンソール Chrome devtools または、VSCode のような IDE に任せる 今回は、エディタ依存の話は特にしないです。 共通的な手順 基本的には、debugger を止めたい場所に置いていくことになります。 例として、以下のコードで説明していきます。 "use strict"; const { readFile } = require("fs"); const { promisify } = require("util"); const readFileAsync = promisify(readFile); (async () => { const data = await readFileAsync("hello.txt", "utf8"