swdev 0.4.0 のリリースをしました。面白機能をいっぱい足しました。 swdev@0.4.0 | Deno Swdev とは何か: おさらい No Bundle Frontend を目指して、 service worker ですべてをコンパイルすることを目標としています。ブラウザ内で完結してることが他にない優位で、効率的なホットリロードなどを実現できる基盤を作ろうとしています。 インストール $ deno install -qAf --unstable https://deno.land/x/swdev/swdev.ts $ swdev init myapp $ cd myapp $ swdev serve #=> localhost:7777 No Assets！ swdev init xxx で生成したプロジェクトが、ローカルに swdev 用のアセットを生成しないようにしまし

same-site/cross-site, same-origin/cross-origin の違いを曖昧なままにしておくと、分からないことや誤解がモリモリ増えていきますので、早いうちに定義を覚えちゃいましょう。 元記事はこちら: Origin とは Origin は scheme (http とか　https とか)、hostname、port の組み合わせを指す。same-origin と言った場合、これらすべてが一致するものを示している。一部でも異なるものはすべて cross-origin。 Origin A Origin B 解説

簡易的な自作Gitを作ったので記事にしておこうと思います。 ここで発表したスライドに補足説明とコードを付け足したものです Speaker Deck GitHub 自作GitのGitオブジェクトの仕様 自作Gitで使われているファイルの説明からしていきます。 Blob Tree Commit の三種類のファイルが存在しています。 本家Gitはこれに加えTagが存在してます。 これらをGitオブジェクトと言います。 この三種類のファイルは拡張子なのでどれかを判別しているわけではなく、ファイルの中身で判断します。 Blob BlobはUNIXとかで言うファイルの役割をしています。 中身は となっています。 最初にblobと書き込みこのファイルがBlobということを示します。 そしてスペースを挟んでコミットするファイルのサイズを書き込みます。 それからnull文字で区切ってコミットするファイルの中

ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから

Deno Deploy とは Deno Deloy は Node オリジナル作者であり、 Deno 作者の Ryan Dahl が作った会社のサービス Announcing the Deno Company | Deno Blog 面白いのは、 Vercel の Guillermo Rauch が出資してる In order to vigorously pursue these ideas, we have raised 4.9 million dollars of seed capital. Our investors are Dan Scholnick from Four Rivers Ventures, Guillermo from Rauch Capital, Lee Jacobs from Long Journey Ventures, the Mozilla Corporatio

AtCoder のジャッジシステムを利用しながらプログラミング言語 Rust について解説します．C++ や python のような他の言語に触れたことのないプログラミング初心者でも読めるよう努めています．更新履歴は github ( https://github.com/fiveseven-lambda/zenn/commits/main/books/rust-atcoder ) から見られます．内容に関するご意見やご指摘などは，プルリクエストか twitter ( https://twitter.com/57tggx ) で遠慮なくお願いします．カバー画像： GRAPHY 筧様

はじめに ここ最近、Denoのフロントエンド向けのエコシステムについて、色々試してみたり、調査などをしていました。 そこで、この記事では、2021年現在のDenoのフロントエンド開発の状況であったり、所感などについてまとめます。 フレームワークについて Node.jsにおけるフロントエンド開発では、以下のフレームワーク[1]が使われることが多いと思います。 React Vue.js Preact これらのフレームワークは、すでにDenoでも動作します。 またこれらをベースにしたフレームワークがいくつか開発されています。 Aleph.js Aleph.jsはNext.jsに影響を受けたReactベースのフレームワークです。 以下のような機能が提供されています: HMRをサポートするdevサーバを提供 ファイルシステムベースのルーティング SSR/SSGをサポート CSS Modules 開発

【更新履歴】 2021.04.10 - 文章の微調整、最新情報との整合性確認 はじめに Svelteは公式チュートリアルが非常に充実しており、一周すれば仕様の把握には十分でした。 しかしトランジションの中にある "crossfade" だけサンプルコードに謎が多く、ドキュメントの方も「チュートリアルを見てくれ」となぜか投げやり。ネットにも情報が少ないようなので記事にしました。(ちなみに引っかかったのはチュートリアルのココ) という事でメインはcrossfadeですが、せっかくなので他のも載せてます。

みなさん、ブラウザ内で TypeScript が直接動いてくれたらいいなぁ、と思ったことはありませんか？ しました。 これができます。 どのようにうごいてるか Service Worker は合法 MITM とも言えて、 fetch 時のリクエストを好きに書き換えることができます。 開発時 初回インストール時に Service Worker をインストール コンパイラを内蔵した Service Worker がリクエストの拡張子に応じて js に書き換える Content-Type: text/javascript として SW でキャッシュして返却 TypeScript(.ts, .tsx) と Svelte(.svelte + preprocess) に対応 WebSocket サーバーを起動。ファイル変更を監視して、変更されたファイル名をブラウザに通知 変更されたファイルを Serv

自分で Svelte + TypeScript を色々と書いてみたが、情報がまとまってなかったので、ここでまとめていく。 なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌としているが、Svelte はESM First で構文解析時の処理に仕様を寄せてるので、とてもシンプル。 webcomponents として配布するモードがあるのも気に入っている。Vue React は単体のビルドサイズが大きすぎて webcomponents の末端にするのは難しい。 やりたいこと <script la

ミニマルなモーダルライブラリ(MinimalModal.js)を自作してみたので紹介します。 MinimalModal.js とは 🤔 TypeScript で作成された、軽量かつ最小限の機能のモーダルライブラリです。 なんでこのライブラリ作ったの？ 🤔 Micromodal.jsを使おうと思ったのですが、 背景スクロール無効がなかったり、IE 未対応といったところが私の用途には合わなかったため、 いっそのこと作ってしまったほうが早いかなと考え、作ってみました。 機能 😋 モーダル用エレメントの open 属性の有無、及び aria-hidden の true/false の切り替え (開閉のアニメーションは CSS で実装) 背景をクリックまたは ESC キー押下でモーダルを閉じる。 (HTML の実装次第で背景クリックでも閉じないようにできる) タブキーのフォーカス移動でモーダル

追記: hasSuffix の実装が間違ってたので修正 ブラウザの二次元上の座標を計算するコードを書いていると、 px, rem, flex などの数値が入り乱れて、それらを文字列で管理してると扱いが難しくなります。また、ブラウザの DOM API は、コンテキスト次第で string | number みたいなノリで "250px" や 250 みたいな数値を雑に返してきます。 世の中には typescript 4.1 から使える template literal types で JSON パーサやパーサコンビネータを書く人がいるみたいですが、今回はそういう黒魔術にはできるだけ手を染めず、文字列表現に制約を掛けて、それらの計算を楽にできないかを試していました。 まずは template literal types の簡単なアイデアから。 type PixelValue = `${numb

No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue

プログラミング言語Rust入門です．なるべくわかりやすいように解説しました．公式ドキュメントを読んでみたけど，あまりよくわからなかったという人に向いているかもしれません． 誤字や間違いなどのご指摘は以下からコメントをお願いします． https://zenn.dev/mebiusbox/scraps/90bc293a07430d

この記事は何？ 2021/3/3(水)、中国公安(警察)の発表により、中国の最新物流テックサービス "貨拉拉(LALAMOVE)" の利用者(配達依頼主)が運送中の車から飛び降り死亡し、もう一方の利用者(運送ドライバー)が過失致死罪で逮捕されたことと、そのあらましが明らかにされました。 事件の全容を読むと、下記のような方に何らかの示唆があるかもしれないなと思ったので、その経緯のまとめを試みています。 想定読者 中国の最新シェアリングサービスに興味のある方 物流業界・引っ越し業界でDXをしようとしている方 ラストワンマイルを解決しようとしている方 〇〇テック(X-Tech)系プロダクトを作ろうとしている方 シェアリングサービスを使っている方or稼いでいる方 中国の物流テックサービス"貨拉拉(LALAMOVE)"とは Lalamove Marketing, CC BY-SA 4.0, via

Vercel VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to

Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor

eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の

はじめに こんにちは。フロントエンドを軸にエンジニアをしています、いしまるといいます。 最近よく耳にするようになりました、ユーティリティクラスをたくさん用意してくれている「Tailwind CSS（以下、tailwind）」。 このユーティリティファーストのフレームワークの登場によって開発が非常にしやすくなりました。 しかし「CSS設計をしなくてもよくなるよ」とごく稀に聞くのですがそれは本当でしょうか。。。。。。 （私が文脈を吹き飛ばしただけかも） 確かに命名に頭を悩ませるといったところはあると思うのですが、ある程度ルール化は必要です。 この記事では「tailwindを使ったらCSS設計しなくてもよくなるというわけではない」ということが伝わると幸いです😇 CSS設計だいじ、だな、、、（個人の意見） ※CSS設計や、手法についてはこの記事において言及しません。 見た地獄その1: 当たってい

GitHub みたいなサービスを今一から作るならどの言語・フレームワークを使うか GitHub の次は何かを考えてみるのは、現実に実現困難なのを忘れれば、なかなかに楽しいことではあります。ここではその妄想をやっていきましょう。 GitHub の抱える課題を分割すると、Git の問題と、 GitHub の提供する機能の問題に分けられると思います。自分は、Git をベースとして GitHub に勝つのは現代ではなかなか難しいと考えています。MS による買収と実際に注ぎ込まれてる資本を考えると、よほど斬新な切り口でないと、 同じ Git を使っても優位性は出せません。 なので、 GitHub に本質的に勝つには、その基幹となる VCS から考え直すとよいのではないか、と考えています。幸いなことに(?)、Git はその優秀さは認められていますが、学習の困難さや特定のユースケースで機能しないことが知