t_wの輪郭

https://zenn.dev/nem/articles/ade7b83cae2fa5

ReactとWebRTCを組み合わせるとなぜかすぐに接続が切れてしまっていて、なんで途切れるねーんってなってたんだけども、RTCPeerConnectionをちゃんとuseStateで保持したら途切れなくなった。GCにさらわれてたんだろうか。

React NativeはReactでネイティブアプリを作るためのフレームワーク｡

https://developers-jp.googleblog.com/2024/05/google-maps-platform-react-10.html

2年前に作ったサービスの開発環境を作って、ライブラリとかアップデートしたらバグった。マイナスからのスタートや。

このサービスがどうして動いていたのか分からない。2年前の私がReactを何も理解していなかったことだけはわかる。

rxjs完全に理解した。rxjsを完全に理解した結果、今回はrxjsで頑張る必要がないことがわかった。

本業でもrxjsを振り回したいけど、振り回されるチームメンバーはたまんねぇだろうなって思う。

うちのチームメンバーはやわじゃないから、泣きながらもついてきてくれるはずだ…！Reactにも適応してくれたし、React Server Componentsも適応してくれた。

来週の私「非同期処理って時間方向のイテレーターとみなせるんですよ」
来週の私「イテレーターからイテレーターへの写像が…」

JavaScriptを無効化してブラウザを使っている人がいるという話を以前Misskey.ioで聞いた。昨今のウェブの状況を考えると、JavaScriptを無効化したいという気持ちには一定の理解が示せる。ブラウザバックしようとしたら広告が表示されるなど、JavaScriptによってこちらの想定と異なる動作をするサイトが増えてきている。

開発者の視点では「超長期的には生のHTMLしか勝たん」みたいな気持ちも若干ある。Reactで作ったSPAとかは10年後には動かない、あるいは現在のバージョンのReactなどを動かし続けるとセキュリティ上の問題が露呈するだろうという予感がある。つまりバージョンアップなどの技術の変化に追従する労力が要求される度合いが高い見込み。
といいつつも、私自身はReactを使いがちになっている。

https://qiita.com/uhyo/items/255760315ca61544fe33

https://zenn.dev/uhyo/books/react-concurrent-handson

https://iconoir.com/

アイコン配布サイト
SVG, Font, React, React Native, Flutter, Figma, Framerで利用可能

https://brandonmowat.github.io/react-chat-ui/demo/

Reactっぽい何か
狂気の産物らしい

https://github.com/wyozi/react-pptx

• Prisma
• Rust
• React
• TypeScript
• Tauri

React Server Components

朝

　特に記憶に無いです。

仕事

　「Next.jsを使えば忌々しいAmplifyのDataStoreを無くせるんじゃね？」とか思って、社内システムの移植を開始した。もともとReactで動いていたので、3時間ほどでシステムがNext.jsの上で動くようになった。Next.jsの恩恵が受けられるのはこれからだ。

夜

　「Next.jsを使えばBERTでSentence Embeddingを取るAPIをサーバーレスでつくれるんじゃね？」とかおもって実装した結果、比較的高性能な開発機であっても計算に3秒もかかることがわかり、検索には使えず無事死亡した。

デライトが落ちていた

　「あれ」ってどんなんだったっけと思って、デライトで検索しようとしたところ、デライトが落ちていた(障害のお知らせ)。普段当たり前のようにデライトが使えているが、knownetの開発を通じてデライトが安定稼働していたことの異常さに気付きつつある。knownetの方はちゃんと動いている期間のほうが短い。

　探そうとしていた情報については『t_wの輪郭』を参照して見つけられた。いざというときの保証として機能してくれた。

knownetが盛大にバグっていた。

　無限にReactのレンダリングが走り、検索は動かずという状態だった。「何を見てたんだ？」とは思うものの、コードの変更において焦点外の箇所に波及してバグると、気づくことが非常に難しい。まじでコレを保守するの無理な気がしてきた。質的難易度が非常に高い。

　自動テストをやったほうが良いのはわかっているが、自動テストがどうも導入しづらい。

　Embeddingの類似度に基づいて関連付けの候補を出す機能 だの 検索結果から投稿を選んだ際に非表示の関連付けをつけて検索結果を強化する機能 だのを追加したいのだが、もはや認知的攻勢限界に達しており、これ以上機能を追加することは考えられない。バグが生まれる可能性が極めて高い。しばらくは理腑やバグつぶしに徹したい。もう少し難易度が下がってきたら機能追加を考えよう。

https://suzukalight.com/snippet/posts/2021-01-04-header-scroll-visible

https://github.com/Hapag-Lloyd/jest-puppeteer-react

import { Post } from "@/models";
import React from "react";
import { renderToString } from 'react-dom/server';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [elemName: string]: unknown;
    }
  }
}

export function RssFeed({ posts }: { posts: Post[] }) {
  return renderToString(
    <rss version='2.0'>
      <channel>
        <language>ja</language>
        <title>t_wの輪郭</title>
        <rsslink>https://towasys.com/</rsslink>
        <description>t_wの輪郭のRSSです。</description>
        {posts.map(post => <item>
          <title>{(post.title ? post.title : "あれ") + "|" + post.kno}</title>
          <description>{post.body_html ?? ""}</description>
          {post.posted_at && <pubDate>{new Date(post.posted_at * 1000).toUTCString()}</pubDate>}
          <rsslink>{`https://towasys.com/${post.kno}`}</rsslink>
          <guid isPermaLink="true">{`https://towasys.com/${post.kno}`}</guid>
        </item>)}
      </channel>
    </rss>
  ).replaceAll("rsslink", "link")
}

Next.jsでの使い方

getServerSidePropsで下記を実行

const rss_feed = RssFeed({ posts })
context.res.statusCode = 200
context.res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate') // 24時間キャッシュする
context.res.setHeader('Content-Type', 'text/xml')
context.res.end(rss_feed)
return {
    props: {},
}

ノリと勢いで『t_wの輪郭』をReactで作り直しだウェーイってしてるけど、SEO死ぬんじゃねこれ

あとOGP対応無理くねコレ

何ならRSSも無理っぽい

AWS AmplifyでSSRする方法探すか

使用できますAWS Amplifyサーバー側レンダリング (SSR) を使用する Web アプリをデプロイしてホストします。現在、Amplify ホスティングは Next.js フレームワークを使用して作成されたアプリをサポートしています。

公式の日本語が怪しいけど、AWS AmplifyはNext.jsでSSR出来るらしい。

React+DataStoreからNext.jsに切り替えるぞッ！！！！

ここまで作ったフロントエンドを捨てることになるけど、メリットはあるし、やるしかねぇ。

• フロントエンドの実装はまだほとんど進んでない
• AmplifyでNext.jsで動かす勉強になる

何気なくページのソースをチラ見したら「アッ」ってなった次第にございます。

『t_wの輪郭』の移行をするか

今はExpressとEJSで動かしてるので、AWS AmplifyとReactに移行したろう

React的なアレがウェブ標準に取り込まれんかのう……

Reactのコンポーネント書くときに

const Component = ()=>(
  <div></div>
)

とかやっていい気になってたけど、どうせ後から処理追加してreturn 書くハメになるし、最初からfunctionって書いた方が分かり良い気がしてきた。

仕事でReactを使っているが、Amplify UI以外のライブラリをほとんど使っていない。必要なコンポーネントがあれば自前で実装するし、ややこしいものはライブラリを探して、そのコードからエッセンスを読み取り、その上で自前で再実装してしまう。

どこの誰とも知らない人間が書いた保守されるかどうかもわからずセキュリティも保証されないものを使うより、自分で書いたコードの方が信頼できる。

いずれAmplifyから離れることもあろうから、Amplify UIも再実装してしまいたい。Amplify UIのFlexコンポーネントはうまく出来ている。display: flex;と書くよりも記述量が少ないし、何をしたいのかタグから読み取れて明瞭だ。それでいてAWSに依存しない。テーマ機構とも無関係。再実装するに値するコンポーネントだ。

良いホスティングサービス知りたい

Reactで書いたウェブアプリをAWS Amplifyでホスティングしてる

同僚にはVercelにしろって言われてる

https://zenn.dev/ababup1192/articles/ebc5ff81f92a88

https://zenn.dev/tockri/books/dcaf6c55e64448/viewer/react

useEffectの第二引数をうまく使うとよろしい
→useEffect使うとめっちゃ便利やん！多用したろ！
→『You Might Not Need an Effect』
→ウッ（爆死）

https://react.dev/learn/you-might-not-need-an-effect

Reactで「要素が書き換わらねー」ってしてたんだけど、理解度が低い時のコードが悪さをしていた

修正前

if (post_to_display == null) {
    set_post_to_display(props.post);
}

修正後

useEffect(()=>{
    set_post_to_display(props.post);
}, [props.post]);