\[1] Page lacks the HTML doctype, thus triggering quirks mode (https://web.dev/doctype/) 閲覧日: 2020/3/21
-*\[2] Fastify Docs Reply .raw (https://www.fastify.io/docs/latest/Reply/#raw) 閲覧日: 2020/3/21
-*\[3] node http ServerResponse write (https://nodejs.org/api/http.html#http_response_write_chunk_encoding_callback) 閲覧日: 2020/3/21
\ No newline at end of file diff --git a/packages/applications/turbo-blog/src/articles/public/how-to-make-economic-ssr-with-clourflareworker.md b/packages/applications/turbo-blog/src/articles/public/how-to-make-economic-ssr-with-clourflareworker.md deleted file mode 100644 index 6381f9ca..00000000 --- a/packages/applications/turbo-blog/src/articles/public/how-to-make-economic-ssr-with-clourflareworker.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: cloud flare workerで省エネSSRなBlogを目指す -tags: [Blog,Programming, Web] -description: | - 世は技術ブログ大時代. みんなはてなブログか[JAMstack](https://jamstack.org/)にその身を委ねていた. お手軽さを求めるならはてなブログ, あるいはそこにカスタマイズ性やスピードを求めてHeadlessCMSにコンテンツを追加して動的に静的サイトを更新していくJAMstackな構成を目指した. 実際今の時代, GatsbyjsなりNextjsでもcontentfulなどを組み込んだJAMstackのテンプレートがあるので, HeadlessCMSからAPIを取得して環境変数として設定して, 適切にCI/CDを組んであげればもうJAMstackによる高速でお手軽な技術ブログが完成します. すごい時代だ.でもそんな中, あえてSSRを用いた動的な構成にロマンを感じ動的なブログを構築しようとした男がいました, いや僕なんですけど. cloud runでNode.jsの上にexpressサーバーを生やして, そこでJSXをreact-domを通してhtmlにしています. - - しかし一回のアクセスごとにexpressが立ち上がると時間がかかる(特にTTFB), そもそも従量課金制なのでアクセスのたびにサーバーを立ち上げるのでなく, 出来るだけキャッシュを効かせたい. 特にこの場合本質となるブログ記事はCMS上にあるのでそこを参照したい. - - というのを叶えたく, edge-sideでスクリプトを動かしてキャッシュを動的に管理して更なる最適化を目指す, という取り組みをしてみます. -publishedAt: 2020/04/13 -updatedAt: 2020/04/13 ---- - -## はじめに - -世は技術ブログ大時代. みんなはてなブログか[JAMstack](https://jamstack.org/)にその身を委ねていた. お手軽さを求めるならはてなブログ, あるいはそこにカスタマイズ性やスピードを求めてHeadlessCMSにコンテンツを追加して動的に静的サイトを更新していくJAMstackな構成を目指した. 実際今の時代, GatsbyjsなりNextjsでもcontentfulなどを組み込んだJAMstackのテンプレートがあるので, HeadlessCMSからAPIを取得して環境変数として設定して, 適切にCI/CDを組んであげればもうJAMstackによる高速でお手軽な技術ブログが完成します. すごい時代だ.でもそんな中, あえてSSRを用いた動的な構成にロマンを感じて動的なブログを構築しようとした男がいました, いや僕なんですけど. cloud runでNode.jsの上にexpressサーバーを生やして, そこでJSXをreact-domを通してhtmlにしています. - -しかし一回のアクセスごとにexpressが立ち上がると時間がかかる(特にTTFB), そもそも従量課金制なのでアクセスのたびにサーバーを立ち上げるのでなく, 出来るだけキャッシュを効かせたい. 特にこの場合本質となるブログ記事はCMS上にあるのでそこを参照したい. - -というのを叶えたく, edge-sideでスクリプトを動かしてキャッシュを動的に管理して更なる最適化を目指す, という取り組みをしてみます. - -## Cloud flareってなんぞ - -一言で言い難いのですが, めちゃ簡単に使えるリバースプロキシを利用したCDNサービスとしておきましょう. サービスとしてはそこだけではないのですが, -* この記事ではCDN, リバースプロキシとして利用している -* 説明がしんどい, 記事の本質でない - -というのがありますので詳細は省かせてもらいます. 詳しく知りたい方は公式のwebページを参照してください. - -サーバーから配信される内容をCDNにキャッシュしておくことで, サーバーの負担を減らす, 帯域を減らしてパフォーマンス向上が図れたりします. コンテンツの配信元と, クライエントとなるブラウザの物理的距離が小さくなることも魅力です. え, そんなの影響する？と思うかもしれませんが, 適当に海外のカフェとかの個人webサイトとかを覗いてもらえば物理的距離の影響が見えると思います, CDNはこれを解消する一助になりますね. - -ちなみにですがJAMstack構成でブログ作っている人は, cloud flareにそのweb serverを登録するだけでその恩恵がかなり受けられます. 個人のweb siteなら無料で利用できますし, かなりお手軽に登録できるのでやってみてください. - -## cloudflare workerって何？ - -そもそもCloudflare workerとはなんなんでしょう？ ついさっき - -> ちなみにですがJAMstack構成でブログ作っている人は, Cloud flareにそのweb serverを登録するだけでその恩恵がかなり受けられます. - -といっていますが, 実はこれだけで僕のこのブログの動的な構成でも全然恩恵を受けることができます. -そもそもedge-sideを介すことでどんなことがおきてるかというと, - - - -こんな感じで, -1. clientからReqestが飛ぶ -2. Edge-serverでそれを受け取りキャッシュを見る -3. そのキャッシュされた内容をクライエントに返していいかどうかserverに確認しにいく -4. OKと返ってくる -5. キャッシュされた内容をクライエントに返す - - -みたいなことがおきています(といってもこの流れは過度に一般化されていて, もちろん状況によって分岐は生じますが) - -でもこれだとclientからアクセスが飛ぶたびにCloudRunが立ち上がってしまいます. いちいちサーバーを建ててhtmlを生成しても時間が勿体無いですし, 何よりお金がかかります. - -そもそも本質となるブログ記事はCMS上にあるので, キャッシュされているコンテンツをそのまま返していいか判定したければ, そもそもCMSだけ覗けば十分なはずです. - -これを可能にするのがcloudflareでservice worker的な, scriptを動かしてキャッシュを制御するcloud flare workerです. - -因みにJSだけでなくRustやCも動かす事が出来ます. - -## cloudflare workerを動かしてみる - -といってもやることは至極単純です. - -1. CMSから記事の更新状況をfetchしてくる -2. その結果をみてキャッシュされているコンテンツが最新のものか判断する -3. 最新のものだったらキャッシュされているコンテンツをクライエントに返す, 最新のものでなかったらCMS上のデータをもとにhtmlを生成してクライエントに返す, そしてそのhtmlとcmsから取ってきたデータをキャッシュしておく - -という感じです. - -まずcloudflare workerを編集するために**wrangler**を導入しましょう. - -```shell -npm i @cloudflare/wrangler -g -``` - -で**wrangler**をグローバルインストールします. - -で次にworkerのcodeを置いておきたいディレクトリで - -```shell -wrangler generate my-router-app -``` - -を実行してセットアップします. - -生成されるpackage.jsonをみてもらえれば分かる通り, mainとなるcodeは**index.js**ですので, そこのファイルが書き換える対象です. - -そこでは**fetch**に対するイベントリスナーとそのハンドラが生えています. -なのでがっつり触るべきはハンドラですね. -因みに初期のものから触っていなければ, - -```javascript -event.respondWith(handleRequest(event)) -``` - -としていますので, ハンドラとなるhandleRequestのなかで - -```javascript -return Response -``` - -という体になっていれば大丈夫です. - -因みにですが**wrangler**を使っていれば - -```shell -wrangler publish // publishされる - -wrangler preview --watch // dev-serverを建てる(HRM付き) -``` - -という感じです. - -## Routing - -まずこの場合(僕のブログ), 動的なスクリプトを効かせたいのは**https://~~~/index.html**だけです. このように, このメソッドだったらこういうハンドラで, このpathだったらこのハンドラでというのも勿論あるでしょう. -そのためにRoutingは不可欠ですね. - -といってもcloudflare workerの場合Routingはかなり原始的にする必要があり, - -```javascript -const url = new URL(event.request.url); -``` -でurlを取れるので, **url.method**でメソッドを取って, **url.pathname**でpathを取って, switch文で頑張りましょう. - -e.g. - -```javascript - -const handleRequest = (event) => { - const url = new URL(event.request.url) - - switch(url.method) { - case "GET": { - // handleGETMethod - break; - } - case "POST": { - // handlePOSTMethod - break - } - default: { - // asdf - break - } - } -} - -``` - -## Cache API - -**Cache API** を用いてキャッシュを制御します. 仰々しく聞こえますが, そんなややこしいことをする感じでもありません. そもそも利用可能なCacheに生えているメソッドはput, match, deleteだけです. -その内容も直感的に分かる通り - -* putでキャッシュする -* deleteで消す -* matchでキャッシュを探す - -という感じです. -引数も単純で例えばputは**put(Request, Response)**です. 因みにworker文脈でのRequestはstring値も受け取れます. 察しのいい人は気付いちゃうと思いますがなんか**Request**をkeyと見なせば**Map**っぽさが出てきますね. -matchについては**match(Request, options)**で該当Requestに対してキャッシュがあればそのキャッシュの**Response**を, なければ**undefined**を返します. optionについては割愛. -deleteについては**delete(Request, options)**で該当Requestに対してキャッシュがあればそのキャッシュを削除するという感じです. - -また**put**や**delete**を利用する時は, **event.waitUntil**で, putやdeleteが完了する前にサーバーが落ちないように制御しましょう. サーバーレス感があります -. -因みにCache APIのdocsはここにあります[https://developers.cloudflare.com/workers/reference/apis/cache/](https://developers.cloudflare.com/workers/reference/apis/cache/). - -またPreview modeについてはCacheAPIは未実装でまだ使えないっぽいので, 何度cache.putしてもキャッシュされていないという事態が起こります.注意してください(僕はここがわからず3０分くらい溶かしました) - -因みに以下のtemplateではCache APIが実際にどう使われてるかのexampleがみれます. [https://developers.cloudflare.com/workers/templates/pages/cache_api/](https://developers.cloudflare.com/workers/templates/pages/cache_api/) - -## やっていき - -さあ材料はだいたい揃ったのでやっていきましょう. -といってもやることは本当に単純です. - -まず僕の場合, HeadlessCMSのcontentfulを使ってブログ記事を管理しています. -contentfulだと以下のAPIが生えているので, [https://www.contentful.com/developers/docs/references/content-delivery-api/#/introduction/authentication](https://www.contentful.com/developers/docs/references/content-delivery-api/#/introduction/authentication), あとはtokenを取って**fetch**でブログコンテンツを参照する準備をします. - -以下はかなり事例レベルでfittingされてる話なのであまり参考にならないと思いますが, 実装としては - -```javascript - -const handleRequest = (event) => { - - const cache = caches.default; - - switch(url.pathname){ - case "/": { - // 基本/index.htmlのみ動的にキャッシュを制御する, それ以外は適当に普通にキャッシュしとけばOK - - // CMS上にある最新のコンテンツのための一覧を得る - const res = await fetch("https://~~~~~~~contentfulのAPI~~~~~/"); - - const cachedRes = await cache.match("jsonのkey", options); - - const curJson = await res.json(); - if(cachedRes){ - const cachedJson = cachedRes.json(); - - // 手元にあるjsonによる, 過去取得してキャッシュしたコンテンツにまつわる一覧のデータを, CMS上にある最新のそれとが一致する時 - if(JSON.stringify(cachedJson) === JSON.stringify(curJson)) { - return await cache.match("htmlのkey"); - }else{ - // この時はキャッシュされているものが古い - - e// 最新のコンテンツにまつわるjsonをキャッシュする - vent.waitUntil(cache.put("jsonのkey", cachedRes.clone())); - - } // 最新のコンテンツにまつわるjsonをサーバーに投げてhtmlを生成してもらう - const curHTMLRes = await fetch("~~~serverのurl, この場合cloud run~~~", { - method: "PUT", - body: JSON.stringify({ - item: curJson - }) - }) - - event.waitUntil(cache.put("htmlのkey", curHTMLRes.clone())); - return curHTMLRes; - - - } - default: { - break - } - } -} -``` - - -みたいな感じです. - -正直上のコードを見たところで得られるものは少なく, 参考にもならないと思いますがcloudflare workerを用いてCacheを動的に最適化するということがそこまで難解なことでもなく, それ自体は単純で見慣れたものであるというのは伝わったかと思います. - -完全に余談ですが, 僕的にはserverにhtmlを生成してもらうためだけにRequest投げるのは勿体無いんじゃないかなって思っていて, それをなんとかedge-sideでできないかなと考えています. -wrangler自体はwebpackでbundleさせることができるので, 理論上react-dom/serverくらいなら動くんじゃないかなとは思っています. -今は忙しいのでやらないですが, 気が向いたら実験しては見ます... - -因みにですが僕はこの最適化でSpeedIndexが**15%**削減されました.みんなもやってみてね - - - diff --git a/packages/applications/turbo-blog/src/articles/public/introduction-to-AST.md b/packages/applications/turbo-blog/src/articles/public/introduction-to-AST.md deleted file mode 100644 index 89cf0f36..00000000 --- a/packages/applications/turbo-blog/src/articles/public/introduction-to-AST.md +++ /dev/null @@ -1,560 +0,0 @@ ---- -title: ASTで僕の考えた最強のDXを実現する 〜自分のDXは自分で守っていけ〜 -tags: [JavaScript,AST] -description: | - ASTイジイジするのはいいぞ！！ - * 難しくない - * 自分のDXを自分で守るというエキサイティングな体験ができる - * 触れる範囲が広がる - * プログラミングをやる限りお世話になる - - と良いことづくめで最高なので布教したい - - また, このブログは [https://docs.google.com/presentation/d/1Ykka2_NvseClPO2J_oFqRUb_sD6rZfYBU-XWnsdTn9U/edit?usp=sharing](https://docs.google.com/presentation/d/1Ykka2_NvseClPO2J_oFqRUb_sD6rZfYBU-XWnsdTn9U/edit?usp=sharing) の補助資料です. まあこの記事の方を読めば大丈夫です大丈夫です. -publishedAt: 2020/09/12 -updatedAt: 2020/09/12 ---- - -## TL;DR - -ASTイジイジするのはいいぞ！！ -* 難しくない -* 自分のDXを自分で守るというエキサイティングな体験ができる -* 触れる範囲が広がる -* プログラミングをやる限りお世話になる - -と良いことづくめで最高なので布教したい - -また, このブログは [https://docs.google.com/presentation/d/1Ykka2_NvseClPO2J_oFqRUb_sD6rZfYBU-XWnsdTn9U/edit?usp=sharing](https://docs.google.com/presentation/d/1Ykka2_NvseClPO2J_oFqRUb_sD6rZfYBU-XWnsdTn9U/edit?usp=sharing) の補助資料です. まあこの記事の方を読めば大丈夫です大丈夫です. - -## AST とは - -ASTとは **A**bstract **S**ntax **T**ree の略です. 日本語でいうと **抽象構文木** というやつです. -**Tree** とあるように, プログラムの文法構造を **Tree** 構造で表現したものになります. -Tree 構造なので, それぞれのプログラムの節々を **Node** と言います. - -```javascript - -if( hoge === "bar" ) { - foga(); -} - -``` - -例えばですが, 上記のコードの AST はどのようなものになるか見てみましょう. - - - -if文を分解してみましょう. -if文は「もし〜〜なら、〜〜する」ということを記述できますね。 -コードを見てみると、「もし hoge が "bar" という string literal 値だったら, fuga という関数を引数なしで実行する」という感じですね. -AST上だと、まず `ifStatement` という Node が登場します. -そして, その `if` の子の Node として, `if` 文の「条件式」や, その「条件を満たす時に実行される処理」が入ります。 -そして条件式の中を見ていきましょう. -条件式の中は、まず `Binary Expression` という Node が登場します. これは二項演算式で, 二つの値を比較したり, ということをしているということがわかりますね(図では簡略のため省略しています) -で, `Binary Expression` で具体的に何をしているかという話になるのですが, -* 等しいかどうか -* `hoge` という変数 -* "bar" という string literal値 - -ということになりますね. - -このブログ(発表)では, ASTをイジイジするアプローチから code に対して介入し何らかの mutation を行なっていくプロセスを解説していきます. - -## ASTが使われているもの - - - -JSでいえば, babel, eslint, prettier, webpack, などなど, 私たちの開発者体験を潤す様々なツールがASTを用いています. - -僕はJSばかり書いているのでJSの例しか出せませんが, エンジニアがプログラムを扱う以上, ほぼほぼ必ずどこかでお世話になっているといっても過言はないはずです. - -## ASTでコードをいじいじするときのあれこれ - - - -大まかに分けて以下の三つのプロセスがあります。 -* parse: JS -> AST -* transform: transform AST -* unparse: AST -> JS - -`parse` の段階で, JavaScriptのソースコードを AST へと変換します. -`transform` の段階で, AST の中身を弄っていきます. -そして最後に `unparse` の段階で transform された AST を JavaScript のソースコードへと変換してくれます. - - - -また, 多くの場合先人の弛まぬ努力のおかげで, `parse`, `unparse` についてはライブラリがほぼほぼ担ってくれていて, 実装者がこのプロセスについて考えることは少ないです. - -では実際に `parse` と `unparse` だけ試してみましょう. - -## ASTを試してみる - -次のコードを試してみましょう。実行環境は Node.js 上です. - -```javascript -const { parse } = require("@babel/parser"); - -const code = ` -if(hoge === "bar") { - fuga(); -} -` - -// JSをASTにparseする -const ast = parser(code); - -console.dir(ast, { depth: null }); -``` - -するとこんな出力が出ると思います。(隅から隅まで読まなくても大丈夫です) - -```javascript -Node { - type: 'File', - start: 0, - end: 34, - loc: SourceLocation { - start: Position { line: 1, column: 0 }, - end: Position { line: 5, column: 0 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - errors: [], - program: Node { - type: 'Program', - start: 0, - end: 34, - loc: SourceLocation { - start: Position { line: 1, column: 0 }, - end: Position { line: 5, column: 0 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - sourceType: 'script', - interpreter: null, - body: [ - Node { - type: 'IfStatement', - start: 1, - end: 33, - loc: SourceLocation { - start: Position { line: 2, column: 0 }, - end: Position { line: 4, column: 1 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - test: Node { - type: 'BinaryExpression', - start: 4, - end: 18, - loc: SourceLocation { - start: Position { line: 2, column: 3 }, - end: Position { line: 2, column: 17 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - left: Node { - type: 'Identifier', - start: 4, - end: 8, - loc: SourceLocation { - start: Position { line: 2, column: 3 }, - end: Position { line: 2, column: 7 }, - filename: undefined, - identifierName: 'hoge' - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - name: 'hoge' - }, - operator: '===', - right: Node { - type: 'StringLiteral', - start: 13, - end: 18, - loc: SourceLocation { - start: Position { line: 2, column: 12 }, - end: Position { line: 2, column: 17 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: { rawValue: 'bar', raw: '"bar"' }, - value: 'bar' - } - }, - consequent: Node { - type: 'BlockStatement', - start: 20, - end: 33, - loc: SourceLocation { - start: Position { line: 2, column: 19 }, - end: Position { line: 4, column: 1 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - body: [ - Node { - type: 'ExpressionStatement', - start: 24, - end: 31, - loc: SourceLocation { - start: Position { line: 3, column: 2 }, - end: Position { line: 3, column: 9 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - expression: Node { - type: 'CallExpression', - start: 24, - end: 30, - loc: SourceLocation { - start: Position { line: 3, column: 2 }, - end: Position { line: 3, column: 8 }, - filename: undefined, - identifierName: undefined - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - callee: Node { - type: 'Identifier', - start: 24, - end: 28, - loc: SourceLocation { - start: Position { line: 3, column: 2 }, - end: Position { line: 3, column: 6 }, - filename: undefined, - identifierName: 'fuga' - }, - range: undefined, - leadingComments: undefined, - trailingComments: undefined, - innerComments: undefined, - extra: undefined, - name: 'fuga' - }, - arguments: [] - } - } - ], - directives: [] - }, - alternate: null - } - ], - directives: [] - }, - comments: [] -} -``` - -確かに, `ifStatement` のなかに, `test` (図で言うところの条件) があり, さらに `consequent` (図で言うところのthen) があり, `test` の中に `BinaryExpression` (図で言うところの二項演算子) があって, となっていることを確認できると思います. - -ライブラリに乗っかるだけで, JavaScriptのソースコードを AST へと簡単に `parse` できたのが体感できたと思います. - -次に `unparse` もやってみましょう. -先ほどのコードを次のように書き換えてみてください. - -```javascript -const { parse } = require("@babel/parser"); -const { default: generate } = require("@babel/generator"); - -const code = ` -if(hoge === "bar") { - fuga(); -} -` - -const ast = parser(code); - -// ASTをJSへとunparseする -const { code: output } = generate(ast); - -console.log(output) - -``` - -```javascript -if (hoge === "bar") { - fuga(); -} -``` - -このような, 入力したcodeと全く同じcodeが出力されたと思います. 簡単ですね. - -では次に実際にコードをいじいじしてみましょう. - -今回は簡単に, 変数を全部絵文字にしてくれる君を作ってみます. - -今回やりたいことの下準備として, 以下のようなclassを用意してください. -これはtextを渡すと絵文字に変換してくれる君です. -以前変換したことのあるtextを渡すと, そのときの絵文字を返してくれるようにしています. -このコード自体はこのブログの本旨から外れるので読む必要はないです. - -```javascript - -class Text2Emoji { - emojis; - textMap; - baseNumber; - idx; - - constructor(props) { - if(props.emojis.length < 1) { - throw new Error("emojis should be more than 1") - } - this.emojis = props.emojis; - this.textMap = new Map(); - this.textMap.set(); - this.baseNumber = this.emojis.length; - this.idx = 0; - } - - convert(text) { - if (this._isRegistered(text)) { - return this.textMap.get(text); - } - - const emoji = this._num2Emoji(this.idx); - this.idx += 1; - this.textMap.set(text, emoji); - return emoji; - - } - - _isRegistered(text) { - return !!this.textMap.get(text); - } - - _num2Emoji(num) { - const convertedNum = num.toString(this.baseNumber).split(""); - const key = convertedNum.map((el) => this.emojis[el]).join(""); - return key - } -} - -module.exports = { - Text2Emoji -} - -``` - -では, `transform` の部分のコードを書いていきましょう. -まずこのコードを実行してみてください. - -```javascript -const { parse } = require("@babel/parser"); -const { default: generate } = require("@babel/generator"); -// transform に必要な @babel/traverse をimport -const { default: traverse } = require("@babel/traverse"); - -// いじいじする対象のコード -const code = ` -const NAME = "Shinyaigeek"; -const JOB = "frontend engineer"; -const INTERESTS = ["web performance", "AST", "Usability"] -const AGE= 21; - -const hey = () => { - return \`Hi!! there!! My name is \${NAME}. I'm \${JOB}. I'm \${AGE} years old.My interests are \${INTERESTS.map(interest => interest + "/")}\` -} - -console.log(hey()); -` - -const ast = parser(code); - -const visitor = {}; - -// ASTを走査して, 特定Nodeについて処理を行う -traverse(ast, visitor); - -const { code: output } = generate(ast); - -console.log(output) -``` - -そうすると, さっき実行したJavaScriptと同じ出力がされたと思います. -`transform` で, astに対して破壊的変更を行い, その結果のASTを `generate` 関数に渡すのですが, 今回は変換の処理を何もしていません. - -次に変換の処理を書いていきます. - -`@babel/traverse` だと, visitor patternを採用しています. -visitor patternと言うのは, 走査対象の特定部分に **訪問** していく `visitor object` に処理を記述して, その処理を特定部分で実行していく, と言うパターンのことです. -テレビの集金を例に出すと, あるテレビ局の電波を受診している家庭に, 取り立て人が **訪問** して, 料金を取り立てると言う **処理** を実行していくと言うことになりますね. -取り立て人は, テレビ局の電波を受診していない家庭では取り立てと言う **処理** は実行しないですね. - -百聞は一見にしかずということで, 早速実際にコードを書いて試していきましょう. -次のコードを実行してみてください. - -```javascript -const { parse } = require("@babel/parser"); -const { default: generate } = require("@babel/generator"); -const { default: traverse } = require("@babel/traverse"); - -const code = ` -const NAME = "Shinyaigeek"; -const JOB = "frontend engineer"; -const INTERESTS = ["web performance", "AST", "Usability"] -const AGE= 21; - -const hey = () => { - return \`Hi!! there!! My name is \${NAME}. I'm \${JOB}. I'm \${AGE} years old.My interests are \${INTERESTS.map(interest => interest + "/")}\` -} - -console.log(hey()); -` - -const ast = parse(code); - -const { code: output } = generate(ast); - -// visitor patternを書き込んでいく -const visitor = { - // Identifier に訪問する visitor オブジェクト - Identifier(nodePath) { - // visitor objectで行う処理 - console.log(nodePath.node.type + ": " + nodePath.node.name) - } -}; - -traverse(ast, visitor); -``` - -すると次のような出力が出ると思います. - -```shell -Identifier: NAME -Identifier: JOB -Identifier: INTERESTS -Identifier: AGE -Identifier: hey -Identifier: NAME -Identifier: JOB -Identifier: AGE -Identifier: INTERESTS -Identifier: map -Identifier: interest -Identifier: interest -Identifier: console -Identifier: log -Identifier: hey -``` - -これで全ての識別子に **訪問** して, その識別子の名前をlogで出力しているというのがわかりますね. -次に, log に出すだけではなく, 実際に AST の transform を行なっていきましょう. - -次のコードを実行してみてください. - -```javascript -const { parse } = require("@babel/parser"); -const { default: generate } = require("@babel/generator"); -const { default: traverse } = require("@babel/traverse"); -const { Text2Emoji } = require("./Text2Emoji"); - -// textを絵文字にしてくれる君 -const converter = new Text2Emoji({ - emojis: ["🐈", "🦍", "🐵", "🐶"] -}) - -const code = ` -const NAME = "Shinyaigeek"; -const JOB = "frontend engineer"; -const INTERESTS = ["web performance", "AST", "Usability"] -const AGE= 21; - -const hey = () => { - return \`Hi!! there!! My name is \${NAME}. I'm \${JOB}. I'm \${AGE} years old.My interests are \${INTERESTS.map(interest => interest + "/")}\` -} - -console.log(hey()); -` - -const ast = parse(code); - -const { code: output } = generate(ast); - -const visitor = { - Identifier(nodePath) { - // visitor objectで行う処理 - // 識別子の名前を絵文字にする - const emoji = converter.convert(nodePath.node.name); - // 訪問した識別子を, 名前が絵文字になった識別子に置き換える - nodePath.replaceWith( - identifier(emoji) - ) - // 名前がすでに絵文字になった識別子を再度訪問しないように, skip する - nodePath.skip(); - } -}; - -traverse(ast, visitor); - -const { code: output } = generate(ast) -console.log(output); -``` - -するとこのような出力が出たと思います. - -```javascript -const 🐈 = "Shinyaigeek"; -const 🦍 = "frontend engineer"; -const 🐵 = ["web performance", "AST", "Usability"]; -const 🐶 = 21; - -const 🦍🐈 = () => { - return `Hi!! there!! My name is ${🐈}. I'm ${🦍}. I'm ${🐶} years old.My interests are ${🐵.🦍🦍((🦍🐵) => 🦍🐵 + "/")}`; -}; - -🦍🐶.🐵🐈(🦍🐈()); -``` - -お！！識別子が絵文字に変換されてくれてますね！！ -各識別子がちゃんと対応していることを確認してみてください. - -今回は変数全部絵文字にする君というかなりしょうもないツールを作っただけですが, 賢い人ならあれもできそうこれもできそうと, 何かアイディアが浮かび上がったかもしれませんね. - -## まとめ - -ASTを触れるようになると, 自分の開発者体験を自分で守っていくというエキサイティングな体験ができるようになります. -Let's AST!! \ No newline at end of file diff --git a/packages/applications/turbo-blog/src/articles/public/introduction-treeche.md b/packages/applications/turbo-blog/src/articles/public/introduction-treeche.md deleted file mode 100644 index ac440405..00000000 --- a/packages/applications/turbo-blog/src/articles/public/introduction-treeche.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Treeche, Tree-Shakable Checker for JavaScript/TypeScript Application to reduce bundle size -tags: [Programming, JavaScript, DX, Frontend] -description: bundle size を減らすことに有用な, JavaScript/TypeScript 製 module が tree-shakable かどうかをチェックするnpmモジュール、treeche を開発したのでそれの紹介記事. -publishedAt: 2022/08/27 -updatedAt: 2022/08/27 ---- - -## Treeche とは？ - -Treecheとは、**Tree** -Shakable **Che** ckerの略です. JavaScript/TypeScript module が Tree-Shakable かどうかを確認するためのツールです. バンドルサイズの削減やそれによるUserExperienceの最適化に有用です. - -[https://github.com/Shinyaigeek/treeche](https://github.com/Shinyaigeek/treeche) - -## Example - -```typescript -// this is not tree-shakable because have side-effect - -const currentYear = new Date().getFullYear(); - -export function getCurrentYear() { - return `Year ${currentYear}` -} -``` - -上記のような module は副作用を有しているため, tree-shakable ではありません。 - -このような場合、Treeche は以下のような出力をします. - -```shell -🚨 ~/application/side_effect.ts is not tree-shakable due to the following code: - - -const currentYear = new Date().getFullYear(); -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -``` - -下記のように, 副作用のある module を副作用のない module に修正して - -```typescript -export function getCurrentYear(currentDate: Date) { - return `Year ${currentDate.getFullYear()}` -} -``` - -treeche を実行すると下記のような出力がなされます. - -```shell -Congratulation 🎉 All files are tree-shakeable ✨ -``` - -## JavaScript の module バンドルにおいて副作用とは何なのか - -ECMAScript のモジュールコンテキストにおける副作用とは, module の外部に影響を与えるコードのことを指します. 例えば、以下のようにモジュールのトップレベルで `window` オブジェクトに変数を設定するのは副作用です. module は import 時に実行されるため, module の top-level で `window` オブジェクトなどに mutation が加えられていると, module の import 時に実行される必要があります. - -```javascript -window.m = 1; -export mod() { - return 1; -} -``` - -もちろん, この処理が `init` のような module から export される関数の中で実行された場合は, import 時にこれが実行されないので、副作用はなくなります。 - -## なぜ副作用で bundle-size が大きくなるのか？ - -rollup の REPL で bundler の挙動を確認することができます。 - -URL: [https://rollupjs.org/repl/?version=2.78.1&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMGhvZ2UlMjAlN0QlMjBmcm9tJTIwJTVDJTIyLiUyRm1vZCU1QyUyMiUzQiU1Q24lNUNuY29uc29sZS5sb2coaG9nZSgpKSUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMm1vZC5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJleHBvcnQlMjBmdW5jdGlvbiUyMGhvZ2UoKSUyMCU3QiU1Q24lNUN0cmV0dXJuJTIwMSUzQiU1Q24lN0QlNUNuJTVDbmV4cG9ydCUyMGZ1bmN0aW9uJTIwZnVnYSgpJTIwJTdCJTVDbiU1Q3RyZXR1cm4lMjBuZXclMjBEYXRlKCkuZ2V0RnVsbFllYXIoKSUzQiU1Q24lN0QlMjIlN0QlNUQlMkMlMjJvcHRpb25zJTIyJTNBJTdCJTIyZm9ybWF0JTIyJTNBJTIyZXMlMjIlMkMlMjJuYW1lJTIyJTNBJTIybXlCdW5kbGUlMjIlMkMlMjJhbWQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMiUyMiU3RCUyQyUyMmdsb2JhbHMlMjIlM0ElN0IlN0QlN0QlMkMlMjJleGFtcGxlJTIyJTNBbnVsbCU3RA==](https://rollupjs.org/repl/?version=2.78.1&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMGhvZ2UlMjAlN0QlMjBmcm9tJTIwJTVDJTIyLiUyRm1vZCU1QyUyM) - - -**main.js** -```javascript -import { hoge } from "./mod"; - -console.log(hoge()) -``` - -**mod.js** -```javascript -export function hoge() { - return 1; -} - -export function fuga() { - return new Date().getFullYear(); -} -``` - -上記のようなコードを rollup で bundle した結果は以下のようになります. -```javascript -function hoge() { - return 1; -} - -console.log(hoge()); -``` - -`mod.js` 内の `fuga` 関数が bundle の結果に存在しないのは, bundler が `main.js` が `fuga` 関数をインポートしていない(そしてもちろん使っていない)ことを知っているからで, そのため `fuga` 関数をバンドル出力に含める必要がなく, バンドルサイズの減少につながります。 - -しかし以下のように `mod.js` を編集するとどうなるでしょう. -```javascript -export function hoge() { - return 1; -} - -const _fuga = new Date().getFullYear(); - -export function fuga() { - return _fuga; -} -``` - -バンドルされた出力は、上記のようになります。 -```javascript -function hoge() { - return 1; -} - -new Date().getFullYear(); - -console.log(hoge()); -``` - -[https://rollupjs.org/repl/?version=2.78.1&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMGhvZ2UlMjAlN0QlMjBmcm9tJTIwJTVDJTIyLiUyRm1vZCU1QyUyMiUzQiU1Q24lNUNuY29uc29sZS5sb2coaG9nZSgpKSUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMm1vZC5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJleHBvcnQlMjBmdW5jdGlvbiUyMGhvZ2UoKSUyMCU3QiU1Q24lNUN0cmV0dXJuJTIwMSUzQiU1Q24lN0QlNUNuJTVDbmNvbnN0JTIwX2Z1Z2ElMjAlM0QlMjBuZXclMjBEYXRlKCkuZ2V0RnVsbFllYXIoKSUzQiU1Q24lNUNuZXhwb3J0JTIwZnVuY3Rpb24lMjBmdWdhKCklMjAlN0IlNUNuJTVDdHJldHVybiUyMF9mdWdhJTNCJTVDbiU3RCUyMiU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJlcyUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTJDJTIyZ2xvYmFscyUyMiUzQSU3QiU3RCU3RCUyQyUyMmV4YW1wbGUlMjIlM0FudWxsJTdE](https://rollupjs.org/repl/?version=2.78.1&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMGhvZ) - -バンドルされている出力に不要な `new Date().getFullYear()` が含まれていることを確認できますね. なぜなら `mod.js` が `new Date().getFullYear()` という副作用を孕むからです. JavaScript では、import されたモジュールは import 時に実行されるので、`new Date().getFullYear()` のような副作用のあるコードはそもそも実行されるべきであるため, bundler が削除することができません. しかしそもそも `fuga` 関数を import しないのであれば、`new Date().getFullYear()` がバンドルされた出力に含まれる必要はありません. なぜなら、もう一方の関数 `hoge` は `const _fuga = new Date().getFullYear()` を必要としないためです. なので理想としては `new Date().getFullYear()` というコードが出力からなくなっているべきです. - -## How to use? - -Treecheをグローバルインストールして使うのみです. - -```shell -npm install treeche -g -treeche "**/*.ts" --excludes "node_modules" "**/*.test.ts" -``` - -argument に入力のファイルを取ることができます. ここには Node glob pattern を利用することができます. また `--excludes` option で, 特定のファイル, フォルダを除外することができます. test ファイルや node_modules はノイズになるのでこれを用いて除外することが想定されています. また argument を省略した上で, `--entry-point` で単一のファイルを指定すると, そこを entrypoint として bundle した上で, その上で副作用があるかチェックしてくれます. - -## オプション - -|kind|name|description|example| -|:--:|:--:|:--:|:--:| -|argument|inputs|input files to check tree-shakable. you can use Node glob pattern| treeche "src/**/*.ts"| -|option|excludes|excludes files to filter from inputs. you can use Node glob pattern| treeche "src/**/*.ts" --e "node_modules"| -|option|entry point|the unique entry point to check tree-shakable. if you specify input with this, treeche will bundle so you can check tree-shakable also in node_modules| treeche --entry-point ./src/main.ts| - -## 動作原理は？ - -動作原理はとても単純で, Treeche は JavaScript module bundler である rollup を内部で実行し、下記のように option で指定した入力モジュールを import している仮想エントリポイントコードをバンドルします。 - -```javascript - -import "./your-module" - -``` - -"./your-module" に副作用がある場合, import 以外のコードも出力されます. それをチェックしています. - -## Feedback - -これは欲しいと思ってサクッと作った試験的なものですので, 多分バグがあります. 先に謝っておきます. バグや要望などあればフィードバックいただけると嬉しいです！ diff --git a/packages/applications/turbo-blog/src/articles/public/log-2020.md b/packages/applications/turbo-blog/src/articles/public/log-2020.md deleted file mode 100644 index dbc74ba7..00000000 --- a/packages/applications/turbo-blog/src/articles/public/log-2020.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: 2020年の振り返りと次やりたいこと -tags: [Blog,Poem] -description: 今年の一年を一言で表すと「深化」の一年でした, 去年なあなあで理解していた部分など, 細かく突き詰めて理解できそれを元にわかる領域の問題に対して自分なりの意見考察をもって考えられるようになったような気がします. -publishedAt: 2020/12/24 -updatedAt: 2020/12/24 ---- -## はじめに - -こんにちは, しにゃいです. - -!tweet[](https://twitter.com/sanpo_shiho/status/1341760993584541696) - -さんぽし君がこんな記事を書いていて, 触発されて僕も今年の振り返り兼抱負を書いていこうと思い筆をとりました. - -!tweet[](https://twitter.com/Shinyaigeek/status/1341770719844167682) - -いつものように, 「書いてる(publishするとは言ってない)」芸をやっていたのですが, 今回はちゃんとpublishすることができそうです, 偉い. - -## 2020年の振り返り - -### インターン - -絶賛就活中で, 色々なところに顔を出していました. - -* 大手町にある謎の企業(長期インターン) -* CyberAgent(2days) -* VOYAGE GROUP(2weeks) -* Recruit (1 month) -* Cybozu (1 week) -* wantedly (3 weeks) - -長期インターン以外は全て夏に行っていました. -夏にこれだけのインターンを詰め込むとなると当然夏休みは休みなしでインターンでした(いうたらリクルートでのインターンは夏休み終わりに行っていたので学業と並行して, って感じでした). -ですがそこまで大変だったという印象もなく, 寧ろインターンで多くの方々と交流できてめちゃくちゃ楽しかったです. 普段の大学の授業がまあまあ詰まっていてサマーインターン中よりも忙しかったというのもありそうですが. - -正直エンジニアになることは特殊なケースというか大学の周りのみんなとは全く別の道を選ぶことになっていたのである種の不安感, 将来の不透明感は覚えていたのですが, インターンもありこの1年間で**プロ** として働いているエンジニアの方と喋ることも増え,最前線で道を切り拓いていっているような人たちを目の当たりにして俺もやっていくぞと勇気が出ました, ここが何よりもの収穫かなとは思っています. - -インターンでお世話になった方々, 本当にありがとうございました. - -### 開発 - -ここ一年で作ってたやつです, starしてくれると嬉しい...💓 - -#### Shinyapack - -https://github.com/Shinyaigeek/Shinyapack - -夏休みの自由研究のテーマが, Webのエコシステムの再発明で, その一環でやっていました. -ちょうどhiroppyさんの書かれた 『module bundlerの作り方(準備編)』([https://blog.hiroppy.me/entry/create-module-bundler-preparation](https://blog.hiroppy.me/entry/create-module-bundler-preparation)) を読んで, タイミングの良さに運命を感じおいらもmodule bundlerを作ろう！！と思い至り作ってみました. - -中身は, どうせなら気になったdenoを触ってみようと思いTSで書いて, parserやgeneratorはbabelのものを利用していました. moduleはskypackからimportしていた気がします. -確か当時query paramでtypes={型定義のURL}を付ければいい感じに型定義がつくと聞いていたのにうまくいかなくてイライラして完全趣味且つ勉強目的の開発だしいいだろ！！とか言いながら型をぶっ壊しながらコードを書いていったのはいい(?)思い出です. - -これを作るにあたりwebpackのコードもちょこちょこ読んで書き方とかそういう面での学びがあったり, webpackのinterfaceにちょっと詳しくなったりもしました. -また中身を知ることで, 複雑怪奇なJSのエコシステムへの解像度がちょっと上がった気もしています. - -前述の通り, 夏はインターンで忙しかったのがあり最低限の実装しかできなかったのですが, terserを実装してその気持ちになってコードを書けるようになりたいとは考えています. - -#### Shinyact - -これは未完成のためprivate repositoryです... - -これも夏休みの自由研究の一環でReactを再発明しようとして作ったものです. これは記事などは一切参照せずReactをコードリーディングしつつ頑張っていました. - -- -mountできるところまでは持っていったのですが, Reactがどのようにして状態を持っているかや, どうやって状態の初期化が複数回起きないようにしているかなど, 結局コード読んでも解読しきれずそこで止まってしまっています. - -VDOMの構造などは結構学べた気がしていて, そこは良かったです. - -これまたタイミングよくsaddnessOjisanがちょうどpreactを再実装したoreactを作っていたので, preactのコードリーティングを進めつつまた再チャレンジしたいと考えています. 宿題ですね. - -#### Next.js 非公式日本語翻訳プロジェクト - -https://github.com/Nextjs-ja-translation/Nextjs-ja-translation-docs - -もともと非公式のNext.jsの日本語翻訳サイト自体はあってOSSとして運用されていたのですが, ドキュメントの中身やデザインが古いもののまま更新が止まっていたので, 「更新せえへん?(意訳)」という旨のissueを作った結果作り直そうとなりました. - -当時よく話していた [かみむらさん](https://twitter.com/kamimura_th) にやってみませんかと相談してみたところ, 快諾していただき, そのあとNext.jsを作っているVercelの中のShu Uesugiさんにnext-siteをfolkして日本語翻訳していって良いか確認を取りスタートしました. - -僕は翻訳のレビューやCI,linterの整備, 移行作業やトップページの翻訳などを行っていました. - -最近Next.jsが大盛り上がりしているような印象を持っていますが, それに一役買えたのであれば幸いです. - -https://nextjs-ja-translation-docs.vercel.app/ - -余談ですが, 本家のドキュメントサイトであるnext-siteのリポジトリは今見えない状況になっています. -このリポジトリはNext.js confあたり, つまりNext.jsのv10が発表されたタイミングで見えなくなっていました. -これは邪推ですが, i18n routingにNext.jsが対応したことを受けて, vercel側で「これが18nのベストプラクティスや！！」とドキュメントサイトを翻訳もするのではとは思っています. - -#### babel-plugin-lit-jsx - -https://github.com/Shinyaigeek/babel-plugin-lit-jsx - -これはJSXで書かれている, hooks(というよりReact)に依存しないFunctional Componentをlit-htmlで動くようにしてくれるbabel-pluginです. - -僕の技術ブログはJSXでコンポーネントを書いて, SSRして生成されたhtmlをCDNにキャッシュして, client-sideでhydrationはしないという構成になっています. -これは僕の技術ブログの場合clientにおける状態変化は少なく, Reactを使うとしたらtemplate engineとしての利用がメインとなってしまいますが, そのためにReactをclient-sideで使うのはI/Oコストを無駄に増やすだけではないかという考えのもとフロントエンドではhydrationしないという実装にしました. - -ですがNext.jsなどにあるようなprefetch僕も欲しい！となり, htmlのbodyの部分をprefetchしてページ遷移のタイミングでinnerHTMLを置き換えるだとか, あらかじめリソースをfetchしておいてそれをブラウザにcacheさせるとか色々方法は思いついていたのですが, 最終的にviewに必要なJSONをprefetchして, それをclinet-sideのJSでレンダリングしようとなりました. - -レンダリングはlit-htmlで行おうとなったのですが, 正直型などの面で書き味がよろしくなく, やっぱり @types/react のJSXの型定義の恩恵は受けたいという話になり「でもhooksに依存しないFunctional Componentだったらlit-htmlに自動で置き換えられるんじゃね」という発想の元それを実現するためのbabel-pluginを作っていました. - -原理的には babel/traverse でASTをみてゴリゴリ変換しています. - -具体的にはこのようなjsxを - -```typescript -import Header from "./Header"; -import Footer from "./Footer"; -import BlogPost from "./BlogPOst"; - -const Layout = (props: { content: string }) => { - return ( -mountできるようになった, reconciliationの処理書く pic.twitter.com/7r8WqLaTiN
— しにゃい (@Shinyaigeek) September 19, 2020
- -僕が勢いで22卒交流slackを作ってみたらそこから一気に交流の輪が広がり交流も増え楽しかったです. - -オンラインで飲んだりもしていましたし, ましくんが主催してくれた22卒サマーインターン前にツヨツヨになっちゃおうLTなど, イベントも結構あってかなり楽しかったです. - - - -とある会社の人事さんと飲んでいた時に, 今年のエンジニア学生は大学とか地域を超えて仲良くなっている感じがあると仰っていて, おお〜〜〜〜ってなっていました. - -## やっていくこと - -### 就活 - -はい, 考えないといけませんね. - -めちゃくちゃスローペースで進めています. -とはいっても受ける会社とかはある程度決まっていてあとはやっていくだけという感じです. 就活終了できるタイミングが結構遅くなりそうでドキドキしています. -ちゃんと満足のいく結果を出したいですね. - -### 技術ブログの改善 - -これはやり残しちゃったタスクですね. -さっき言及したbabel-plugin-lit-jsxを用いてprefetchを実装するとかもできていませんし, Algoriaを用いて全文検索を実装するとか, OGPを動的に生成するとか, Fieldデータを収集するとかやるべきこと/やりたいことがまだまだあります. -これもちゃんとやってその上でやったことの詳細を技術ブログに書きたいですね. - -### OSS - -今年こそはもっとOSS活動をがっつりやっていきたいなというお気持ちです(多分毎年言ってる). -誰かのブログでnode.jsのcode & learnが紹介されてたんですが, まだやってないかなぁ。。。 - -### 卒業 - -多分これが一番難しい. -頑張ります - -### ブラウザ作り - -これは来年やりたいことというよりも, 次の春休みの自由研究の課題です. - -Webフロントエンドエンジニアを名乗っているのにブラウザのことを知り尽くしてはいないし作ったこともないことにちょっとした引っ掛かりを感じていて, それを解消しようという意図があります. - -春休みの自由研究のテーマを考えていた時にちょうど keiya sasaki さんがTLでブラウザを作っているのが目に入った, 12月24日(今日ですね！！)発売のWeb + DB Pressに自作ブラウザ特集がある, 『[Go言語でつくるインタプリタ](https://www.amazon.co.jp/Go%E8%A8%80%E8%AA%9E%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%97%E3%83%AA%E3%82%BF-Thorsten-Ball/dp/4873118220)』をちょうど勧められていた, など諸々タイミングがよくて運命を感じブラウザ作りを春休みの自由研究のテーマにしました. - -## 終わりに - -ノリで書き始めましたが, 意外と書く内容が多くてびっくりしました. 充実した一年間だったのかもしれません. - -今年の一年を一言で表すと「深化」の一年でした, 去年なあなあで理解していた部分など, 細かく突き詰めて理解できそれを元にわかる領域の問題に対して自分なりの意見考察をもって考えられるようになったような気がします. - -こういう話をするということは来年は何の年にしたいかという話をするということなのですが, 来年何の年にしたいかということよりも, 2年後何の年にしたいかということの方が明確に決まっているためそこから逆算した目標を来年何の年にしたいかとして掲げたいと思います. - -僕はUX, DX周りを改善していくことが大好きなのですが, ここら辺はトレードオフや人的リソース, 開発者の意識など様々な問題が絡み合う多目的問題だと考えています. こうした開発現場における多目的問題の全体最適化を目指していきたいのですが, そのためには「こうすればこうなる」だけではなく, 「こうすればこうなるはずだけどそれによってどれくらい改善されたのか」まで, 仮説に対して検証を行いそれを元に次の意思決定を下して...ということが求められると考えています.. こうしたことは実際に企業に入って動かないと実践できない(特に僕は大学関係で何らかの組織に属しているといったこともないので...)ことだと思っているので, これを2年後の目標に掲げています. つまり2年後は「進化」の年にしたいです. - -2年後は「進化」の年にしたいんですが, そこから逆算して来年は「レベリング」の年にしたいです(「深化」, 「進化」といい感じに踏みたかったけどいいのが思いつかなかった...) -僕はまだまだWebについて理解できないことがたくさんあると思っていて, Web Developerとして深さも広さも足りていないと感じています. (深さで言えばブラウザそのものへの理解など, 広さで言えばUIデザイン, サーバーサイドなど...) -これらの足りてないところを補い2年後の「進化」のための土台づくりとなる, 「レベリング」をしていきたいなと考えています. - -来年もこう思えるような一年間にしたいですね, やっていきましょう！！！！！良いお年を！！！！！！！ \ No newline at end of file diff --git a/packages/applications/turbo-blog/src/articles/public/log-ca-web-speed-hackathon.md b/packages/applications/turbo-blog/src/articles/public/log-ca-web-speed-hackathon.md deleted file mode 100644 index 1063260c..00000000 --- a/packages/applications/turbo-blog/src/articles/public/log-ca-web-speed-hackathon.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: CyberAgent主催『Web Speed Hackathon Online』参加ログ -tags: [Web,Programming] -description: | - Cyber Agent主催のWeb Speed Hackathon Online 4/25, 4/26に参加してきました. 結果は残念ながらレギュレーション違反で選外でしたが, とても楽しく刺激を得られたイベントになりました. - - この混乱した情勢の中オンラインという形でシステムを整えて実施してくださったCyber Agentの皆さん, ありがとうございました. -publishedAt: 2020/04/26 -updatedAt: 2020/04/26 ---- - -## はじめに - -Cyber Agent主催のWeb Speed Hackathon Online 4/25, 4/26に参加してきました. 結果は残念ながらレギュレーション違反で選外でしたが, とても楽しく刺激を得られたイベントになりました. - - - -この混乱した情勢の中オンラインという形でシステムを整えて実施してくださったCyber Agentの皆さん, ありがとうございました. - -## イベント内容 -あらかじめ用意されている, 架空のブログサービスのパフォーマンスをどれだけ高められるかというものです. -ランタイムのパフォーマンスの最適化ももちろん必要でしたが, チューニング対象がメディアという特性上やはりI/Oコストをどれだけ抑えられるかが大きな鍵で, フロントエンドだけでなくインフラ, バックエンドも触れるところがありました. - -得点づけはlight houseにより計測される得点や, TTI, Speed Index等に重み付けを行なってホニャホニャするそうです. - -レギュレーションは**Google Chrome で機能落ちやデザイン差異が生じない**ことです. -具体的には画像のアスペクト比等が崩れない, いいね機能などが落ちない等で結構厳し目だった印象があります(あと個人で進めていたこともあって気付きにくかった) - -僕のレギュ違反はmoment, lodash, jQueryを剥がした時に機能落ちが生じたか, 画像のresizeを行なった時にアスペクト比がずれたかかなと。。悔しい。。 - -## 経緯 - -スタート時 -22卒のエンジニア志望の学生の交流のためのslackのワークスペース生やしたので22卒だよ！という人いれば招待するのでリプかDMかください🙇♂️(いきなりDMするのは憚られた)
— しにゃい (@Shinyaigeek) April 7, 2020
- -1日目終了 - -やっていき💪💪💪💪💪 #WebSpeedHackathon
— しにゃい | Shinobu Hayashi@🏡 (@Shinyaigeek) April 25, 2020
- - -調子乗ってる時 -#WebSpeedHackathon
— しにゃい | Shinobu Hayashi@🏡 (@Shinyaigeek) April 25, 2020
現状3位。。。まだまだ詰められる要素あるしやっていくぞ💪
- -終わった直後(審査中) -逃げ切りたいですが。。 pic.twitter.com/HXU4Z0nURy
— しにゃい | Shinobu Hayashi@🏡 (@Shinyaigeek) April 26, 2020
- -死んだあと -#WebSpeedHackathon
— しにゃい | Shinobu Hayashi@🏡 (@Shinyaigeek) April 26, 2020
お疲れ様でした！！あとは神に祈ります。。
- -## やった施策 - -雑に箇条書きです. 効果が顕著だったものは**太字**にします -よろしければ他の参加者の皆さんもどんなことをやったか教えて欲しいです🤲 - -* webpackのbuild最適化 - * **source map剥がす** - * **modeをnone -> productionにする** ([https://webpack.js.org/configuration/mode/](https://webpack.js.org/configuration/mode/)) -* code splitting - Reactに頼りました. Router levelでchunkしてさらにcomponentレベルでもいくつかchunkしました. fetch, contextの更新のためのscriptも切り出そうと思いましたが, webpackをゴリゴリ考える必要が出てきてしんどくなって諦めました - * **Lazy, Suspense** ([https://ja.reactjs.org/docs/code-splitting.html](https://ja.reactjs.org/docs/code-splitting.html)) - ちなみにですが, 遅延読み込みをする時, **main.bundle.js**から相対パスで必要なjsを読み込むっぽくて, それはサーバーのどこにmain.jsがあるかでなくそのスクリプトが評価された時点のパスから相対的にパスが決定されるっぽくて, 例えばReact routerとかを使っているとダイレクトに **/asdf/hogehoge/barbar/celcel/**みたいなところにアクセスするとchunkされているjsが迷子になってエラーが出ます. これをなんとかするために, サーバー上で, jsへのRequestのうち迷子になりそうなものは, catchしてよしなに返すというものを実装しました.多分webpackでこういうのをいい感じに解決するものがありそうでしたけど, 見つからなかった。。 ちなみにhtmlファイルの配信にも似たようなことをしなければならないです. -* 画像の最適化 - * 用いられている画像のresize, webp化(画像があるリポジトリからcloneしてcloud storageにアップロードしました) -> ここでやらかした可能性ありますね。。 - * **webpackによりbase64にencodeされて埋め込まれているものもあったのを, encodeさせずに普通にpathで画像を指定する.** -* 一部ライブラリの削除 - * jQuery, moment, lodashを剥がしました -> ここでやらかした可能性もありますね。。 - * [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)で剥がすべきライブラリを洗い出しました -  - * immutable.jsとbluebird.jsについては辛そうだったので諦めました。。 -* html, cssのminify - * htmlはHtmlWebpackPluginに任せました - * cssはpost-cssに任せました -* google fontの最適化 - google fontsはquery paramaterでこの文字のフォントだけ欲しい！という指定ができます, それをやりました [https://developers.google.com/fonts/docs/getting_started](https://developers.google.com/fonts/docs/getting_started) -* fontawesomeの読み込みを最小限にする -* service workerでfetch時にキャッシュ -* 配信されるコンテンツにとても強いCacheを効かせる -* react importの最適化 - import React fromよりもimport * as React fromの方が余計なプロパティアクセスが生じなくてちょっと早くなるらしいです, まじで？(未検証) -#WebSpeedHackathon
— しにゃい | Shinobu Hayashi@🏡 (@Shinyaigeek) April 26, 2020
レギュレーション違反やってしまっていた。。めっちゃ悔しい。。お疲れ様でした。。！ pic.twitter.com/zV40X344Jw
-* 配信時に圧縮をかける - expressでcompressionするあれです -* 画像の遅延読み込み - [https://developers.google.com/web/updates/2016/04/intersectionobserver](https://developers.google.com/web/updates/2016/04/intersectionobserver), [https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=ja](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=ja), [https://blog.jxck.io/entries/2019-05-20/lazyloading.html](https://blog.jxck.io/entries/2019-05-20/lazyloading.html)この辺 - 実装は時間がなかったので良さそうなReact Componentを採用しました [https://www.npmjs.com/package/react-lazy-load-image-component](https://www.npmjs.com/package/react-lazy-load-image-component) - -## やれなかったこと -* SSR - そもそもメディアだったらSSRしたくない？ってなって1時間ほど作業しましたが, React-routerやreact-reduxといったfor clientのライブラリが多く, シンプルにserver上でレンダリングまでが既にしんどい, client, server間でcontextやstate, routerの共有が沼いという理由で諦めました -* ブログの記事をfetchを並列でRequestを投げる - -```javascript -useEffect(() => { - await fetchASDF() - await fetchHOGE() - await fetchBAR() -},[]) -``` -となっていて, これだとfetchASDFが終わったらfetchHOGEのRequestを投げてそのResponseが返ってきたらfetchBarを投げてという感じでブロッキングになっちゃって辛いので -```javascript -Promise.all([fetchAsdf(), fetchHOGE(), fetchBAR()]) -``` - -という感じにしてRequestをまとめて投げてもらうようにして, こうすれば多分fetchにかかる時間が短くなってTTI減らせるんじゃないかのと思っていたのですが, なぜかTTIが大幅に落ち込んだので辞めました。。。何故だ。。知見求むです。。 - -## 結局 - -You might want to check the build output of your Webpack. If you see something like react_default.a.createElement(...). Note the extra .a. That might mean you're using `import React from "react"` which adds a bad getter in Webpack. Instead use `import * as React from "react"`.
— Sebastian Markbåge (@sebmarkbage) April 15, 2020
- -パフォーマンスチューニングをする時, (パフォーマンスでなくとも何らかのチューニングを行う時), ただパフォーマンスについてだけ数字をとって考えればいいというわけではなく, デザイン差分や機能差分についても目を配りそれらに落ちがないようにする必要がもちろんあるんですが, その際**僕のような注意力散漫な人間であっても, そして別に特段注意を払わなくとも**差異が発生した時は気づけるようなシステムを作っていくべきだと感じました. せっかくPlaywright, puppeteer, GitHub Actionsといった便利なツールがあるし, エンジニアを志望する以上こういう仕組みづくりをして行くべきで, 逆に普段のプロダクトでこういったことを怠っていた | Review任せにしていたというのが今回のレギュレーション違反に繋がったかなと反省があります. - -最後に主催してくれたCyber Agent, 競い合った参加者の皆さんに感謝を述べて終わりたいと思います.ありがとうございました！！ - -(次は優勝したいのでまたやってください) - \ No newline at end of file diff --git a/packages/applications/turbo-blog/src/articles/public/m17n-with-cloudflare-workers.md b/packages/applications/turbo-blog/src/articles/public/m17n-with-cloudflare-workers.md deleted file mode 100644 index e25539eb..00000000 --- a/packages/applications/turbo-blog/src/articles/public/m17n-with-cloudflare-workers.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: cloudflare workers で多言語対応を行う -tags: [Programming,CDN,CloudFlare] -description: 弊ブログで多言語対応を行なった。その際 cloudflare workers を利用したが体験が良かったのでメモとして残しておく。 -publishedAt: 2022/02/19 -updatedAt: 2022/02/19 ---- - -こんにちは、しにゃいです。卒業論文を無事倒し入社まで暇になり、暇つぶしに気になってる OSS にPRを投げていたところ、そのメンテナやPRで会話した人から Twitter でDMが飛んでくる機会が増え、また cloudflare のアナリティクスを見ても最近如実に国外からのアクセスが増えていました。クローラーbotの存在を考えても明らかに数が増加していたためこれなら弊ブログ(shinyaigeek.dev)も多言語対応を進めた方がいいんだろうな、という気持ちになり多言語対応を進めました。要件の中にあった, HTTP Request Header の "accept-language" を見てよしなにコンテンツを振り分ける, という処理に cloudflare workers を利用したのですが、30分程度いじいじしたらいい感じにできて体験が良かったので備忘録程度に書いておこうと思い本記事の執筆を始めました。 - -## ブログの構成 - -まず弊ブログの構成から述べていきます。弊ブログはコンポーネントを JSX で記述し、記事自体は markdown で書いています。それをオレオレ静的サイトビルダーでHTMLとしてVPSに立てたh2oサーバーから配信しています。ブログにそこまでの機能は求めておらず、ブログの場合はページ遷移も少ないだろうという想定から hydration は行わず、React 抜きのWebページになっています。一部動的に JavaScript を使っている部分がありますが、そこは customElements でカプセル化しています。 - -ひとまず対応する言語はデフォルトの日本語と、英語として、ビルドするときに英語用のHTML、日本語用のHTMLの二種類を吐き出すようにしました。JSも使っていないため完全にURLベースで英語用のページ、日本語用のページを振り分けるようにしています。サブドメインとして "en.shinyaigeek.dev" と "ja.shinyaigeek.dev" を用意し、前者からは英語用のページ、後者からは日本語用のページを配信するようにしています。また "shinyaigeek.dev"、"www.shinyaigeek.dev" からは日本語用のページを配信するようにしています。 - -## 技術選定 - -まずHTTP Request を見て "accept-language" によってよしなにHTMLを振り分けるかよしなにリダイレクトさせるか、という選択肢がありました。よしなにHTMLを振り分ける方式だとshared cache周りが面倒になる、また、振り分けも cloudflare worker でURL Rewritesを行えばその心配は無くなりますが、静的なWebページとして運用している以上あるURLを叩くと同じResponseが返される、というようにしたかったのでこの方針は取らずによしなにリダイレクトさせるようにしました。HTTP Requestを送信してきたクライアントにリダイレクトしてもらうためにはもちろん301 HTTP Responseを返却する必要があります。それをOrigin Serverから返却する、といったことももちろん可能なのですが現状Origin Serverは日本にしかなく、"accept-language" で英語になるようなユーザー、すなわちこの対応で掬い上げたいクライアントは多くが日本国外からHTTP Requestを飛ばしてくると想定すると、地理的な要因で生じ得る遅延をなくしたく、cloudflare workers を用いてネットワークエッジで捌いてしまおう、となりました。 - -## やり方 - -至極単純です。 "accept-language" をパースしてよしなにより好まれる言語を決定する君はnpmにいくつか出ていますので、最も適格なものをインストールして、振り分けるだけです。 - -- [accept-language](https://www.npmjs.com/package/accept-language) -- [accept-language-parser](https://www.npmjs.com/package/accept-language-parser) -- [resolve-accept-language](https://www.npmjs.com/package/resolve-accept-language) - - -注意点としては、 -- HTML 以外への HTTP Request については特に何もしない - - 今回はRequestのURLが `.html` で終わるか, `/` で終わる時をターゲットとしました -- 無限ループに注意する - - en 向けのページにリダイレクトしてそれに応じてそのクライアントからHTTP Requestが飛んできてそれによってまた以下のような cloudflare workers が発火してまた en 向けのページにリダイレクトして...という無限ループは生じ得ます - - 本ブログでは en 向けのページ、ja向けのページはそれぞれ別ドメインにしてあり、そのドメインへの HTTP Request にはそもそも cloudflare workers が発火しないようになっています。これは上記の無限ループ対策でもありますが、こうしたURLにアクセスしてくる人は accept-language 関係なくその言語で読みたいであろう、という意図もあります。 - - 例えばサブドメインではなく pathname に `/en/` といったprefixをつけて対応している人は注意が必要になるでしょう。 - -以下に簡単なコードを載せておきます。 - -### コード - -```typescript -import resolveAcceptLanguage from 'resolve-accept-language' - -const handler = function (event: FetchEvent) { - // HTTP Request からURLを取得 - const { url } = event.request - // URLから pathname とクエリを取得 - const { pathname, search } = new URL(url) - - // HTMLに対してのHTTP Requestではない時は特に何もしない - if (!pathname.endsWith('.html') && !pathname.endsWith('/')) { - return fetch(event.request) - } - - // HTTP Request Headerからaccept-languageを取得 - const acceptLanguage = event.request.headers.get('accept-language') - if (!acceptLanguage) { - return fetch(event.request) - } - // 言語を決定する - const preferredLanguage = resolveAcceptLanguage( - acceptLanguage, - ['en-US', 'ja-JP'], - 'ja-JP', - ) - - // 英語が好ましいとなったときは "en.shinyaigeek.dev" にリダイレクトする - if (preferedLanguage === 'en-US') { - return Response.redirect( - `https://en.shinyaigeek.dev${pathname}${search}`, - 301, - ) - } - - return fetch(event.request) -} - -addEventListener('fetch', (event) => { - event.respondWith(handler(event)) -}) -``` - -## まとめ - -一才のフレームワークを使わずにブログを作っているので、こうした多言語対応も自分で考えてあれこれしなければいけないですが、修行になって楽しいですね。また最近は cloudflare workers や Compute@Edge など、フロントエンドエンジニアがサクッと reverse proxy 的なことをしかも馴染みあるJSで制御できるようになっていていい時代です。また一切フレームワークを使わずに力技で対応しているので、実はこういうこともした方がいいよ、これはこうした方がいい、などあれば教えていただけると幸いです。 diff --git a/packages/applications/turbo-blog/src/articles/public/nice-to-meet-you.md b/packages/applications/turbo-blog/src/articles/public/nice-to-meet-you.md deleted file mode 100644 index 6a234b46..00000000 --- a/packages/applications/turbo-blog/src/articles/public/nice-to-meet-you.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 初めまして -tags: [Blog,Poem] -description: | - 初めまして、しにゃいこと、林仁と言います。 ブログ始めてみました。 なんでアメブロやはてなブログなど既存のブログサービスを使わずにこんなダサくめんどくさそうなことをしたかというと単純に面白いかなと今日の朝思っちゃいまして -publishedAt: 2018/10/21 -updatedAt: 2018/10/21 ---- - -初めまして、しにゃいこと、林仁と言います。 ブログ始めてみました。 なんでアメブロやはてなブログなど既存のブログサービスを使わずにこんなダサくめんどくさそうなことをしたかというと単純に面白いかなと今日の朝思っちゃいまして - -とりあえず自己紹介でも。 東京大学文科３類 1 年林仁です。趣味はダーツと水泳、読書、アニメ。いわゆるくそ陰キャです。 最近趣味でプログラミングを齧ってる候、その一環として、とりあえず自分で何かページを成形したいなと今日の朝思い至ってこうなります。 さっきまで友達と遊んでてクソ疲れた状態で深夜からこの作業始めたんでクッソ適当です、いいね機能もなければコメント機能もない、実はこのヘッダーのロゴは僕が 20 分くらいで適当に書いた何か、まじでクソやる気ないブログですけどちょっとずつ時間を縫って改良していきます。 今仕事の関係で HTML を弄ることが多いのでこれくらいはサクッとやりたいなと思います(唐突なイキリ) タイトルにもなっているように僕の将来の夢は今んとこ技術やさんなんすよね。理由はかっこいいからです。 まあ実は技術やさんというよりコンピューターサイエンスに携わりたいという欲望もありますけど まあとりあえずこのブログをあろうことか読んで時間をドブに捨ててしまったエンジニアやコンピューターサイエンスに携わっているよ！という方、とにかくイキってください、めっちゃアドバイスとか欲しいです。 下にコメント機能がわりに Twitter と Insta のアカウント貼っとくんでまぁじでお願いします。。。 あとなんか依頼があれば多分言い値でやります。 とりあえずもう眠いんで成形だとかは今度また気が向いたらします。 とりあえず今のうちにやるべきこと、やったことをまとめておくと次僕が気まぐれでこのサイトを開いたときのためにまとめておきやす。 ☆ やったこと ・ヘッダー作成（適当） ・初めましてを書く ・よくわからないロゴ作成 ・GoogleAnalytics 導入 ☆ やるべきこと (上から) ・コメント機能 ・デザイニング ・サイドメニュー ・いいね機能 ・文章書く ・楽になるような CGI 作成 こんな感じですかね、駄文でしたがここまで読んでくれた方ありがとうございました。多分３日後くらいに更新します。 \ No newline at end of file diff --git a/packages/applications/turbo-blog/src/articles/public/pnpm-outdated-command-supports-json-format.md b/packages/applications/turbo-blog/src/articles/public/pnpm-outdated-command-supports-json-format.md deleted file mode 100644 index 2e6a577b..00000000 --- a/packages/applications/turbo-blog/src/articles/public/pnpm-outdated-command-supports-json-format.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: pnpm outdated コマンドが JSON format をサポートした -tags: [Blog,JavaScript,TypeScript,OSS] -description: pnpm で古くなったパッケージを検知する outdated コマンドで, JSON 形式での出力をサポートしました. -publishedAt: 2022/11/06 -updatedAt: 2018/11/06 ---- - -## TL;DR - -- pnpm outdated コマンドが JSON 形式の出力をサポートした -- これでプロジェクト中の依存パッケージの自動アップデートなどがやりやすくなる -- 実装を担当していたので, 実装や変化, ユースケースをブログに示す - - -## pnpm とは - -[https://pnpm.io/](https://pnpm.io/) - -pnpm とは Node.js 環境におけるパッケージマネージャーの一つです. パッケージマネージャーとして, 他のツールだと npm や yarn が挙げられます. - -pnpm は symlink を用いて, npm モジュールの高速で省容量なダウンロードを提供しています. 通常あるプロジェクトで npm モジュールをインストールすると, `node_modules` 以下にそれらのモジュール, とさらにネストされた依存モジュール群が全て展開されます. pnpm はプロジェクトを跨いで, それらのモジュールを単一のディスク領域へと保存し, プロジェクト配下にはそれへのハードリンクが展開されるようになります. また, 異なるバージョンのモジュールに依存している際, それら一つ一つを丸々 install するのではなく, それらのモジュールごとの更新の差分のみを保存します. これらの方法により省容量で高速なモジュールのインストールを実現しています. - -また, pnpm の特徴として大胆に他のパッケージマネージャーにはない utility コマンドやオプションを追加して行っている, といったことも挙げられます. - -[](https://twitter.com/Shinyaigeek/status/1577947254916550656) - -pnpm のメンバーとして, `pnpm outdated` コマンドに JSON 形式での出力機能を実装したので, それについてブログに書き起こそうと思います. - -## pnpm outdated コマンドについて - -`pnpm outdated` コマンドは, プロジェクト中の依存モジュールのうち, deprecate されていたり新しいバージョンが publish されているなどで, 古くなったモジュールを洗い出すためのコマンドです. - -例えばこのブログで `pnpm outdated` を実行すると以下のような出力が得られます. - - - -また list 形式での出力もサポートしており, `pnpm outdated --table false` と実行すると以下のような出力が得られます. - - - -## pnpm outdated コマンドに JSON 形式の出力をサポートしたかったモチベーション - -モチベーションとしては, 上記のような table 形式, list 形式での出力だとパッケージのアップデートを自動化したい, となったときにそれら形式はヒューマンフレンドリーに偏っており, 逆に自動化しにくい, といった背景がありました. -自動化しやすいように, 出力フォーマットとして JSON 形式をサポートすることになりました. - -## format オプションについて - -JSON 形式の出力のサポートのために, `--format` が追加されました. 一方これは `--table {boolean}` と責務が微妙に被ってしまいます. また `--table` は boolean 値を取るため, 命名的にも機能的にも `--table` で JSON 形式での出力を指定できるようにすべきではありません. また責務も被るため, その解消として `--format {table | list | json}` と取れるようにし, `--table` は削除されました. ([実装](https://github.com/pnpm/pnpm/blob/main/packages/plugin-commands-outdated/src/outdated.ts#L43) - -## JSON 形式の出力例 - -`pnpm outdated --format json` を実行します. - -```json -{ - "uglify-es": { - "current": "3.3.9", - "latest": "3.3.9", - "wanted": "3.3.9", - "isDeprecated": true, - "dependencyType": "dependencies" - }, - "highlight.js": { - "current": "11.3.1", - "latest": "11.6.0", - "wanted": "11.3.1", - "isDeprecated": false, - "dependencyType": "dependencies" - }, - "@types/highlight.js": { - "current": "9.12.4", - "latest": "10.1.0", - "wanted": "9.12.4", - "isDeprecated": true, - "dependencyType": "devDependencies" - }, - ... -``` - -自動化しやすそうでハッピーですね. 2022/11/06 時点ではまだリリースされていませんが, 次の minor release で出ると思うので待ち遠しいです. \ No newline at end of file diff --git a/packages/applications/turbo-blog/src/articles/public/remake-blog-with-nextjs-nowsh.md b/packages/applications/turbo-blog/src/articles/public/remake-blog-with-nextjs-nowsh.md deleted file mode 100644 index 867a8ecb..00000000 --- a/packages/applications/turbo-blog/src/articles/public/remake-blog-with-nextjs-nowsh.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Next.jsとnow.shでブログを新しく作り替えた -tags: [Blog,Programming, JavaScript,React] -description: | - [Next.js 9](https://nextjs.org/blog/next-9) - 7月8日Next.jsのv9リリースが発表されました。 - - 実はこのブログの前身もNext.jsで書かれていて書いた当時はまだv8でした。でv9リリースからおよそ5ヶ月が経ってやっと、重い腰を上げて自分のブログのアップデートを試みました。 - ですが蓋を開けるとあら不思議、あまりの~~クソ~~コードぷりになかなか作業が進まない。 - 具体的に言ってしまうと@ts-ignoreとanyのオンパレードで下手したらJSのまま作業するよりも酷い代物が出来上がっていました。 - そんなものをアップデートしようとしても全然コンパイルが通らず、しかもバカ遅い。 - ちなみにこれが書き換える前のlighthouseのスコア、無慈悲な0点に涙を禁じ得ません。 - そしてもう何もかもが無理になり一から作り直してしまうことにしました() -publishedAt: 2019/12/14 -updatedAt: 2019/12/14 ---- - -asdfasdfasdfasdf## 作り替えに至った経緯 - -[Next.js 9](https://nextjs.org/blog/next-9) -7月8日Next.jsのv9リリースが発表されました。 - -実はこのブログの前身もNext.jsで書かれていて書いた当時はまだv8でした。でv9リリースからおよそ5ヶ月が経ってやっと、重い腰を上げて自分のブログのアップデートを試みました。 -ですが蓋を開けるとあら不思議、あまりの~~クソ~~コードぷりになかなか作業が進まない。 -具体的に言ってしまうと@ts-ignoreとanyのオンパレードで下手したらJSのまま作業するよりも酷い代物が出来上がっていました。 -そんなものをアップデートしようとしても全然コンパイルが通らず、しかもバカ遅い。 - -ちなみにこれが書き換える前のlighthouseのスコア、無慈悲な0点に涙を禁じ得ません。 -そしてもう何もかもが無理になり一から作り直してしまうことにしました() - -## やったこと -ここからだらだらと箇条書きになります。 - -* SSRした - -実は以前のブログはstatic file exportしたものを一々FTPしてました(ぇ -Next.jsのSSR (with rehydration) はTTFBがちょっと辛いというのはありましたが、以前のぐっちゃぐちゃになっていたものに比べるとかなり早くなりました。 -(~~それでもまだ速さが物足りないしブログにSSRはミスマッチな気がするからGatsbyに乗り換えたい~~) - -* ダークモードに対応した - -スマホやブラウザのダークモード、ライトモードそれぞれによって微妙に異なる配色を採用するようにしています。 -cssのprefers-color-schemeというメディアクエリで対応できたので、そこでcss変数作ってよしなにやりました。 -prefers-*はユーザーの閲覧環境に関するメディアクエリで、まだ実装はされてない(はず)ですけど今後はアニメーションの動きを減らすか否か、コントラストが高いか低いかというのにも対応できるようになるっぽい？ - -* 画像の遅延読み込み - -ブログのコンテンツ一覧のページのアイキャッチ?画像の読み込みがボトルネックになっていたので、低解像度のデフォルトとなる画像をあらかじめ読み込んで表示させておき、Intersection Observer APIというターゲットとなる要素について、それが指定された要素あるいはビューポートと*交差*するたびに呼ばれるコールバック関数を定められるAPIを用いています。 -僕はuseEffect(componentDidMound)の中で、windowのloadイベントでIntersectionObserverを定め〜って感じの実装にしました。 -これにより、ファーストビューではブログのアイキャッチ画像は低解像度のものが表示され、帯域の節約になりもちろんロード時間も減ります。そして下にスクロールしてそれが表示される！！ってなると(ビューポートと交差すると)新たに普通の解像度のその記事のアイキャッチ画像が読み込まれ差し込まれるという具合です。 -僕の場合これがかなり速度に貢献した。 - -* webフォントとの別れ - -Unicode-rangeで帯域減らしたといえど4.7MBは辛かった、以上 - -* animationをkeyframesで表現 - -以前は[Ant Motion](https://motion.ant.design/components/tween-one)のtween oneというライブラリを用いてアニメーションを表現していたけれど、僕のCSS習熟度が上がりこれ別にkeyframesで表現できるくねってなった、あとはやるだけ。 -ちなみにトップページの惑星の公転周期っぽいアニメーションは - -```JSX -個人戦のハッカソンや個人開発をADHDがやるのはやはり辛い(辛い)
— しにゃい | Shinobu Hayashi@🏡 (@Shinyaigeek) April 26, 2020