kyonenya / kyonenya.github.io

言ってみただけ。哲学と哲学以外のことを書くテキストサイト

kyonenya

技術

• Next.js, React（フロントエンド）
• Node.js（バックエンド）
• TypeScript

作ったもの

1. kyonenya.github.io

• メインで運用しているブログサイト
• ノーフレームワーク、ブラウザ標準のAPIだけで作成したSPA（シングルページアプリケーション）
• 使用技術：Vanilla JS, TypeScript, Web Components

2. manuscript

• 自分が書き溜めている研究草稿を管理するためのWebアプリ。日記アプリ Day One からのJSONインポートや記事の一括印刷に対応
• Next.js でフロントエンドとバックエンドをまとめて一つのアプリとして開発中
  • [email protected] の React Server Components と Server Actions に対応済
  • refactor: Next.js 13.4 App Routerへの移行 #21
• 使用技術：Next.js, tRPC, Tanstack Query→Server Components & Server Actions, Prisma, PostgreSQL, Chakra UI→Tailwind CSS, Vercel, Supabase Auth, Isomorphic JavaScript (Universal JavaScript)

3. next-langchain-pdf

PDFを読み込んだ ChatGPT が質問に答えてくれるアプリ

• PDF文書の中から質問に関連しそうな箇所を類似度検索をかけて抽出。質問文と合わせてプロンプトとして送信し、応答をリアルタイムで表示する
• 使用技術：Langchain.js, OpenAI API (chatgpt-3.5-turbo-16k), Vercel AI SDK, Next.js

4. npm - search summary

• テキスト検索の結果文字列を生成する util 関数を npm パッケージとして切り出して公開しておいた
  • 1と2のアプリで使用中
• 使用技術：TypeScript, 関数型プログラミング

kyonenya.github.io's Issues

refactor: ビルドスクリプトのTypeScript化

• ts-nodeを導入
  • ts-node-devとどちらがいいか
• Postオブジェクトの型を参照してタグ一覧のサイトマップ生成をやりたい
• csl-jsonの型を参照して業績リスト生成をやりたい

ついでに

• PostのDateは+09:00つけとく
• 開発時にjsonに書いておいたlastModとかを参照して事前ビルドする？
  • 事前ビルドでもデータとスクリプトを分けておく
  • ハードコーディングはせず、distにのみハードコーディングされる

feat: 脚注機能

脚注をウェブページ ^[1] で実現する有力な手法はハイパーリンク ² 機能を応用することです。本文側と脚注側で相互にページ内リンクを貼るとWordの脚注機能と同様の機能が実現できます。WikiPedia ³⁾ はその手法で脚注を付けています。ただし連番機能は働かせられません。そういうのはプログラム ⁴⁾ で実現するしかなさそうです。

HTML講座

refactor: コンポーネント単位でのモジュール分割

• PostList, ArticleコンポーネントからPageオブジェクトをエクスポート
  • 現状、templates, pages, typesなど技術ベースで分割しており、無益。cf. 「技術駆動パッケージング」というアンチパターン / Twitter
• Pageのpropsをオブジェクトに
• テンプレートの一行目を改行しない
• タイトルがundefinedなら別のコンポーネントNoTitleListItemを呼ぶ？
• Postのindexを消す
  • いや、これは正しい実装だった
    • PostListでeachPostからリストアイテムを生成するときには、該当するPostがないことがあり得ないので、filterはむしろ不適切
    • ルーターでArticleページに飛ばすときはfilterが正しい
  • 代わりにArray.filterにするとundefinableになるので、真面目にエラーハンドリングする
    • 404ページに飛ばしてもいい
• PostListItemのロジックが追いづらい
• hashtagはTagとする
• #42
• pagesはやっぱり別モジュールにする
  • 気持ち的にはMapかMapped Typeにしたい、Mapは多用しない方がいいならMapped Type
• Textコンポーネントを共通化して、その中でダブルダッシュや全角スペースの表示調整をする
  • 現状、Postへの変換時にやっているが、それはPostモデルの責務ではない
  • やっぱナシ、全箇所Textコンポーネントを呼ぶ規約はつらすぎる
• PostListのヴァリアントは一つのモジュールに押し込める

その他

• undefinedがテンプレートリテラルに埋め込まれないように修正
• postのdateパースをやめる
• h2を大きく
• Worksも外部リンクに置き換え
• link-internalはshadow domをやめる、cssが当てられないので
• link-internalの装飾を属性で分岐 デフォルトは装飾あり
• 記事内のリンクを内部リンクと外部リンクに分けて挙動を上書き
• base.cssでのリセット処理を消す
  • いや、問題はそこじゃない
• ブログカードの文字長
• /libにロジックを移す？ renderとutilsとdayjsを
• notifyと骨抜きになったsearchはbootstrapsに押し込む
• /devに開発スクリプトを詰め込む？
  • やってみたけど意味ないかも、いったんrevertする
• !を消す
• dayjsをutil関数内に閉じ込める？
  • dataパース時にDateオブジェクトに変換しておく？
  • これ、やめた方がいい気もする、迷っている
  • やめた方がいい、こういう共通化・抽象化はロクなことがない
• READMEからリファクタや仕組みの記述を消して機能だけを書く
  • 印刷可能
  • 業績リスト生成
  • 通知
• data -> post
• dataのenrichをイミュータブルに
• searchモジュール内にhistory.pushのロジックを移す
• 旧readmeは削除し、代わりに旧コミットのreadmeへのパーマリンクを貼る
• package.jsonとタグの管理、バージョン3を宣言
• 内部リンクをCustom Elementsで表現し、リンクを上書きする既存の処理を削除
• 即自関数からvoidを消す
• ダブルダッシュのカーニング
• import-orderをeslintでfix
• attachshadowはメソッドチェーンに
• tsconfig-eslint-configを消せれば消す
• plugin:import/typescriptの謎
  • import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.
• 関数宣言はfunctionキーワードで
  • ワンライナーはconstでいい、returnのせいで逆に見にくくなる
  • 高階関数もconstの方がいい
  • 逆に言えば、それ以外はfunctionにする

検討

• posts.jsonにmodified日付を導入する？ いまさらながら
  • modifiedAtとcreatedAtで一組にする
    • creationDateだとmodificationDateと煩雑になる
• /distをignoreする？
  • 別にローカルでも検証できるし
  • webpackとts導入した時点でビルド必須になってしまってるし
  • でもActionsが必須になる
  • ビルド結果を別ブランチにする必要が出てきて……
    • mainブランチのdistだけをAction管理下に置けばいいか
  • あんまり複雑にしたくないな、いいじゃんgit管理下に置いたって
• npm-scriptsを並列にする？
  • 特に同時実行したいスクリプトもないし、5つ6つくらいはザラなので並列にしない
• sitemap.xmlをposts.jsonのmodifiedAtから自動生成する？
• htmlしかもたないコンポーネントと、Pageオブジェクトをexportするコンポーネントをどう区別するか
  • まず、メタデータはネストする { html, metaData?: { title, archiveHeader } }
  • その上で、全てのコンポーネントにメタデータをもつ可能性を認める？
    • それは不誠実だな
  • コンポーネントはすべて大文字にする？ それともPageオブジェクトをexportできるコンポーネントだけを大文字にする？
  • ともあれ、htmlだけのページ（works）もrenderで一括レンダリングできるようにしたい
• PageをComponentにリネームするか？
• タイトルのない記事の一覧表示を短く
  • 気軽に呟けるように
• Web Components化は今回はしない絶対しない、ソースコードから記事内容が見えなくなるので
• Custom Elementsのタグ名を変数として持っておく？
  • やめとく、意味ない
• HTML文字列からスペースを除去してレンダリング？
  • いらない、何か問題が起きているわけでもないのにfixしようとしない

improve: カラーパレットの調整

カラーパレット

mui-color-theme.mdにまとめた

• Default Theme - MUI
• The color system - Material Design

背景

ダークモード対応しているのに色名が"light"とか"dark"で混乱する。また、ところどころ違和感のある明るさの色がある

ライトモード

• テキストが浮いている（たぶんコントラストが大きすぎる）
• --main-color-midlightは未使用ではないか

ダークモード

• 背景色と文字色は圧倒的にダークモードの方が優れていて読みやすい（コントラストが適度に小さいから？）
• メニューが暗い
• リンク下線色が明るすぎる・色調も変
• クリック済みリンクの紫が暗すぎて読みづらい

feat: マークダウンによる下書き

• frontmatterをGitHubは解釈できる
  • dev/202005182044-awesome-next-issg.mdx at master · mizchi/dev
• markdown-itにした
• remarkも同様
  • ESM対応はとても難しそう
  • TypeScriptでESMで動くJavaScript製ライブラリ（remark-shortcodes）を使う | JavaScript/TypeScriptメモ
• remark作者の後継パッケージであるmicromark/micromark: the smallest commonmark (optionally gfm) compliant markdown parser that exists; new foundation for @unifiedjs (hundreds of projects w/ billions of downloads for dealing w/ content)
  • ESModule限定のため動かせず

feat: エピグラフ

参考

• (latex) epigraph と boxnote | 萌えとかプログラミングとか
  • 下線引くタイプ
• 私家版日本語 LaTeX テンプレート（2017年5月版）｜Colorless Green Ideas
• epigraph: LaTeX パッケージ
• ツイート / Twitter
  • 引用符アイコン
• 記事の書き方
  • Markdownの拡張方針

improve: デバイスごとに文字量を調整

webkit-line-clampを用いてCSS側で省略表示を実現

補足

text-align: justifyと併用できないのでPostListとBlogCardにpadding-leftを加えて調整

• cssでのテキスト省略時にiPhoneで三点リーダーの位置がおかしい【解決方法】 – hiroblog

設計

どのパターンがいいか
パターン2（ヘルパークラス）に決定

1. CSSのクラスをいくつか用意しておく

• 記事一覧（スマホ・タブレット・PC）
• 検索結果一覧（スマホ・タブレット・PC）

2. ヘルパークラスを用意しておく

• たくさん表示（6-5-4）-> 記事一覧
• 少なく表示（3-2-2）-> ブログカード・検索結果
• -webkit-line-clampなどは重複してもいい

3. JSで生成する

• メディアクエリが面倒

参考

• CSS : 「line-clamp」 で表示行数を制御する - Qiita

feat: 業績リストの自動生成

• 文献情報をCSL-JSONで保管し、citeproc-jsで文献リストの文字列を生成
  • 文字列中に含まれるmarkdownリンクをアンカーリンクに置換
  • Web Componentsで共通化した<link-external>を用いる
• CSL-JSONのフォルダごとに大見出しh2を切り、文献リストをそれぞれ生成
• 文献情報が正しく整形されるかどうかのテストを追加

検討

• 論文ごとにjsonのファイルを分けるか、それともまとめるか
  • 論文を文献管理ソフトにインポートしてもらいたいなら分けるべき
  • ページ生成のためにはまとめるべき、fetchは1回にまとめる
    • もし個別ファイルが欲しいならあとで分割すればいい
• 参照するlocaleとcslをバンドルしたJSに含めたい
  • 特に、それがないと動作しない必須ファイルであるxmlが外部に依存しているのが嫌
  • とはいえ、まずはfetchして動作させること
    • 参考：Demo: Standalone Bibliography — citeproc-js 1.1.73 documentation
• citeproc-jsの型付け
  • patch-packageがplay.jsで動作するか検証
  • ダメならBilalAlam173/-types-citeprocをコピペして手動で直す
• 事前にビルドして文献文字列を生成しておくことにした
  • citeproc-jsのパッケージサイズが1MBもあり、tree shakingも効かないため
  • jsonに何かカスタムフィールドを追加して保存する
    • パースの妨げにならないかどうかチェック
  • どうせならTypeScriptの埒外に置こうか
    • この程度のことにts-nodeは要らない
    • 型がつかない問題も片付く

参考

• webpack - アセットモジュール webpack - 日本語
• webpack : 生ファイルを文字列としてインポートする
• Angularでテキストファイルを文字列としてインポートしたい. HTMLファイルを文字列としてAngular内で利用したいがソース内に長大な文字… | by Suguru Murakami | Medium
• webpackの次のバージョンで入るassetModulesの紹介 - 技術探し
• Webpack5 入門 #main.jsにバンドルせずに複数のファイルに吐き出す

improve: 開発環境では予約投稿も閲覧できるようにする

• isDevelopmentグローバル変数はReactでいうContextなので、末端のPostListItemで購読してもまあいいか
  • 可能ならコンテクストであることをコードに明示したいが
  • 表示非表示、isNewもPostListItemに落とし込む
• いや、自分が表示されるかどうかをコンポーネント自身が知っている、というのはおかしい。これはルーターが知っているべき知識ではないか
  • 各ルーティング定義が、ではなく、大元のルーターが知っていれば、未来日付除外という同じ処理が重複したりもしないはず
• ついでにPostのindexを直す
  • いや直ってるわ、PostListでループ回すときはmapのindex = postのindexだから、ここはidではない

refactor: SearchSummaryをnpmパッケージとして切り出す

kyonenya/search-summary: Generate a search result string. Supports ellipsis.

設計

• 暇があったらsindresorhus/string-length: Get the real length of a stringで真面目に文字数を数える
• isMatchedを追加する、要らないかもしれない（すでに検索は終わっていて、あとは検索結果文字列を作るだけかもしれない）のでタプルで返す [isMatched, searchSummary]
  • マッチしなかった場合はundefinedを返せばよい
  • 検索ライブラリではなく検索結果文字列生成ライブラリなので、目的をはっきりさせる
• searchSummary.join('')みたいにして結合された文字列ができたら便利じゃない？ オブジェクトだから難しいけど
  • メソッドを生やすためにclassにするか？ class書きたくないけど……
  • const summaryText = toSearchSummaryText(text, keyword)でいいか、内部的にはtoSearchSummaryとjoinの合成関数で
• 初期設定はもちろんFactoryパターンで渡す
  • 設定は省略可能な引数にする

参考

• TypeScriptでnpmライブラリ開発ことはじめ - Qiita
• 宣言ファイル(d.ts)の公開 | TypeScript 日本語ハンドブック | js STUDIO
  • mainはdist/index.jsでよい
• Node.jsの自作ライブラリをTypeScriptでつくってnpmに公開して、アプリから参照するやりかた - Code for final
  • index.d.tsは自動生成される
• Typescript+ESMでnpmパッケージ開発した備忘録
  • ESMのくだりは無視した方がいいかも
• TypeScript で npm パッケージを作る - 30歳からのプログラミング
  • prepublish
  • tgzをpackして試運転
• TypeScriptでNodeモジュールを作成してnpm公開するまで - Qiita
  • バージョンアップのくだりは参考になる

動機

• このリポジトリ内にロジックのテストとかを書きたくない
• 実装としてはkyonenya/manuscriptのSearchSummaryの方が良いのだが、そのコードをコピペしてくるのはメンテナンスコストもかかって嫌

feat: YouTube動画の埋め込み

要件

• モバイルでは画面幅90%くらい
• タブレット以上ならコンテナの60%くらい？
• 動画が複数ある場合
  • モバイルなら縦列、タブレット以上ならカラム落ちするまで横並び
    • 面倒だし汎用性がないのでナシ
  • 動画同士の間隔は1emくらい
    • これはコンテナのpaddingで対応する

参考

• YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima

improve: モバイルの文字量を文字数カウントで調整

モバイル端末では文字量の調整を、CSSではなく、JSから文字数を指定して調整するようにする。

問題

• CSSの-webkit-line-clampを動作させるためにtext-align: justifyをオフにしたことで、モバイル端末での記事一覧およびブログカードの本文文字列の表示が不自然に狭くなった
  • モバイルは両幅の余白が狭いのでこの問題が表面化しやすい、他の端末は問題ない

設計

• モバイルであることを検知したらモバイル用のSummaryコンポーネントを、それ以外ならCSSで文字量調整するコンポーネントに文字列をたっぷり渡して、それぞれ表示

参考

• useMedia React Hook - useHooks
• JSのレスポンシブ対応をresizeからmatchMediaに移行した
• MediaQueryList - Web API | MDN
• window.matchMediaによる、メディアクエリに応じたJavaScriptの実行 - Qiita
• beautiful-react-hooks/useMediaQuery.ts at master · antonioru/beautiful-react-hooks

chore: Worksの更新

• 現象学年報のリンク
  • アブストを kyonenya/works リポジトリから指示
• 紀要のリンク

refactor: ルーターのロジックを抽象する

• pushstate第一引数に渡せるようなstateオブジェクトを生成する cf. History.pushState() - Web API | MDN
  • { id: undefined, tag: "思考", searchWord="キーワード" }
• stateオブジェクトをもとにどのルートに行くかを判定
  • idがundefinedでないならArticle、tagがundefinedでないならTaggedPostList、など
  • ルート一覧はenumで定義しておく
• 最後にenumごとにレンダリング関数を分岐させる
  • 個々のコンポーネントにstateオブジェクトの一部を切り売りする

検討

• ['Article', 'PostList'] as constしておいて、'Article'なら'Article'ページを呼ぶ、というのは冗長ではないか
  • 最初からページをenumで列挙しておけないか
  • Mapは関数も持てるので、Map<Route, Page>でいいか
  • 正確にはRouteは検索フォームをdisableしたりするから、Map<Route, RouteFunction>として、これをindex.tsからrouterに設定として渡せばいい
  • つまりReactのApp.tsxみたいに具体的なルーティング定義はindex.tsに書く

improve: 記事本文の修正

• フロイトの否認→否定
• 想像された発話に「#転移」タグをつける
• 「盲」の前に改行
• id: 25の下に次記事へのブログカード
• 連続記事の上下にブログカード
• かかずらうにルビ
• 「それから」の後に改行
• リンクを［］で囲うのをやめる