writeSyncStep1 とは より詳細な仕様 writeSyncStep1 とは Yjs の WebSocket サーバーを実装していると、 writeSyncStep1 という謎のステップがあることがわかる。 共同編集に新しいクライアント（共同編集者）が参加した時に、今共同編集中のドキュメント全…
Next.js でたまにこういうエラーが出てくる。 エラーが出てくるけど、dom は正常に描画されている。 どうやら、HTML タグの使い方がおかしい場合にこのエラーが出てくる事があるようだ。 私の場合は、<table> タグを使おうとしてこのエラーが出たのだが、<table> タグを使</table></table>…
Next.js の Head コンポーネントを使う タイトルとかをいい感じに使い回す Next.js の Head コンポーネントを使う Next.js では、 Head コンポーネントを使うことで、 title などの <head> タグ内の属性を設定できます。 import type { NextPage } from 'next'; im</head>…
docs.yjs.dev ※ Yjs は、ドキュメント共同編集用のライブラリです。 ※ Awareness 、あるいは、 Awareness 情報というのは、ドキュメント共同編集の際の、各ユーザーのカーソルの位置など、ドキュメントの更新以外の情報のことを指します。 Awareness & Prese…
y-protocols のドキュメントが少ない Yjs の WebSocket のサーバーサイドを自前実装しようとすると、y-protocols について理解しなければなりません。 github.com Yjs 公式には y-websocket というリポジトリがあり、この中にはサーバーサイドの実装も入って…
y-websocket の README の翻訳です。 github.com y-websocket とは Quick Start y-websocket をインストールします。 WebSocket サーバーを立ち上げます クライアントの実装例 API （Websocket Provider の API） Websocket サーバー データを永続化したい場…
前回の記事 Vercel にデプロイする 今回使うコード Next.js と Vercel の相性が良い理由 プルリクエストするごとにプレビュービルドする Static Generation されたファイルを Netlify にデプロイするにはどうするのか 前回の記事 今回は Next.js を Vercel …
前回の記事 Dynamic Routes とは Markdown で書かれた記事を表示する 日付をきれいに表示する（CSS） fallback について Catch-all Routes 404 ページをカスタマイズする場合 API を叩く際の注意点 次回 前回の記事 この記事は第4回の記事です。 今までの記…
前回の記事 今回の概要 Pre-rendering とは 2種類の Pre-rendering Static Generation vs Server-side Rendering Static Generation with Data を行う getStaticProps について Server-side Rendering を行う Client-side Rendering を行う SWR（React Hooks…
前回の記事: Docker で Next.js 開発環境を用意する 今回の概要 Next.js チュートリアルのページ ソースコード 新しいページを追加する ページ遷移（リンク） 画像などのアセットの配置方法 title などのメタデータの設定方法 CSSの書き方 Layout グローバル…
なぜこれを勉強しようと思ったか React の Server-side Rendering 技術は重要 Next は Server-side Rendering ではなく Static Generation Next.js を動かす準備 次回 なぜこれを勉強しようと思ったか この記事がたまたま twitter にの記事が流れてきたので…
LGTM画像生成サイト LGTMoon で多言語対応してみましたので、どのような対応を行ったかをまとめます。 LGTMoon - 最もシンプルなLGTM画像ジェネレーター Vue.js フロントエンドは Vue.js で組まれています。 多言語化には vue-i18n を使います。 yarn add vu…
はじめに Akashicでニコ生のゲームを作った 作ったもの リポジトリ 遊び方 「アドリブ紙芝居」の実装について 生放送ゲームの作り方 アドリブ紙芝居の実装の方針 実装にあたっての注意点 ゲームの解像度 ES6以降の文法は使えない ビルド 苦労した点 制限時間…
前提 npm init npm install typescript index.ts を用意 コンパイル 動かす 前提 node, npm はインストール済み npm init npm init を叩いて適当に package.json を作成する。 npm install typescript npm install typescript 以下が package.json に追記さ…
僕が考える最強の「Macにnpmをインストールする方法」in 2019 環境 nodebrew nodebrewでnodeを入れる npmを入れる 環境 macOS Mojave Homebrewはインストール済みである前提 nodebrew npmを動かすためにはnodeを入れなければ入れないのだが、簡単にnodeのバ…
不具合の概要 LGTMoonで「最近の画像」が更新されない部具合が発生していました。 LGTMoon - 最も簡単なLGTM画像ジェネレーター LGTMoonはの「最近の画像」ページでは、最新の画像が存在しているかどうかを常にポーリングしており、画像の生成が完了したら自…
状況 Vue CLI 3（3.2.1） nom 6.4.1 yarn 1.12.3 の環境で、yarn serve だと問題なく動作するが、yarn build した結果だとうまくレンダリングされず、TypeError: u is undefined componentNormalizer.js:24 エラーが出る。 詳細はこんな感じだ。 Uncaught Ty…
はじめに 2018年8月にVue CLIのVersion 3が来ましたが、検索するとまだVue CLI 2の記事が多い。 npm install vue-cli とすると2系がインストールされてしまうのが罠でもある。Vue CLI 3を使ってみると、2よりかなり便利になっていると思ったので、Vue CLI 3…
結論 JavaScriptでの正規表現の書き方 正規表現で改行も含めた文字列にマッチする方法 文字列結合して正規表現を使いたい場合 改めて結論 結論 new RegExp('[\\s\\S]', 'gm') です JavaScriptでの正規表現の書き方 JavaSctiptの正規表現のドキュメントはこち…
Javascriptのundefined判定 if(hoge === undefined) { // } ただし、 undefined の再定義ができるので、注意が必要だが、普通そんなことしないので、基本的には undefined と === 比較したらいいと思います。 例えば行かのようにundefinedの再定義ができます…
