周報 #31 - オープンソース、フロントエンド開発と ChatGPT の実践

前言#

本記事は 2023-02-13 から 2023-02-20 までの週の生活の記録と考察です。

この週は仕事と様々な自分のプロジェクトの予定が異常に詰まっていて、実際には全く寝る時間がないほど忙しいわけではないのですが、理由のわからない不安感と低迷した気持ちがあって、しばしば報復的な徹夜をする傾向があり、スマホで記録したところ、毎日の平均睡眠時間が 3 時間を下回っていました。

今週のバレンタインデーは豆瓣映画カレンダーに触発されていくつかの感情が湧き上がり、過去のことを思い出しました；決心して ChatGPT Plus を購入し、GitHub Copilot と組み合わせて多くの繰り返し作業を節約しました；最近ずっとこれに取り組んでいて、博訳の先輩の経済ライブ配信で 1 時間 AIGC と ChatGPT について解説しました。ライブ配信の初挑戦で、とても新鮮な体験でした；週末はあまりにも抑圧的だったので、友人と海の酒場に行って少し酒を飲み、貴重なリラックスタイムを過ごしました；以前のサイドプロジェクトは狂ったように先延ばしにしていて、週末にはほぼ徹夜で 2 日間、狂ったようにフロントエンドを書きました；Cusdis v2 の開発チームに参加し、最初の機能を作成しました。バックエンドとして最初に提案した比較的大きなオープンソースプロジェクトの PR が Next.js だったのは少し奇妙でした；他にもたくさん面白いことがありました。

オープンソースとフロントエンド学習#

自分は GitHub、Twitter、ブログでかなり活発に活動しているようですが、実際には仕事の年数が短く、現在の仕事もオープンソースではないため、大規模なオープンソースプロジェクトにコード貢献の形で参加したことはあまりありません。ただ、いくつかの Markdown と課題プロジェクトでかなりのスターを獲得し、しばしば少し恥ずかしい気持ちになります。

そのため、今年の初めにはいくつかのフラグを立て、自分が興味のあるオープンソースプロジェクトに様々な形で参加することにしました。先週には自分にオープンソース予算を設定しました（詳しくは『週報 #30 - オープンソース予算、執筆の初心と技術への謙虚さ』を参照）、RSS3 にいくつかの Issues を提起しました。これは良いスタートです。

面白いことの一つは、Randy が Twitter で Cusdis v2 の開発仲間を探しているのを見たことです。私は Cusdis をほぼ 2 年間使用しており（このブログのコメントシステムです）、このシンプルで強力なシステムが非常に気に入っています。また、いくつかの友人のためにデプロイや使用の問題を解決したりもしました。ほぼ移動広告板のようになっています。

私はフロントエンドではありませんが、興味があったので TG に参加して少し話しました。Randy は本当に純粋な技術者で、とても親切でした。自分の状況と考えを簡単に述べた後、彼は最新のコードを引っ張って、動かせるかどうかを確認してから話そうと言いました（急に面接のような感じがしました）。

私はコード構造とコマンドをざっと見ました。以前 Solidity を書いていたときは JavaScript ベースの Hardhat フレームワークを使っていたので、フロントエンドを学ぶ際に TypeScript も理解していたため、パッケージ管理や基本的なコマンドには比較的慣れていました。ただ、yarn から pnpm に変更し、環境をいじって、サーバー上で Docker を使って PostgreSQL インスタンスを起動しました。すぐに動き始めました（後でローカルの sqlite で十分だと気づきましたが、そんなに大回りする必要はありませんでした）。

その後、現在の基本機能を見せてもらい、どの部分に興味があるかを確認しました。そこで、私はゆっくりとコードを見始め、いくつかの v1 バージョンのバグを彼に提起しました（すぐに修正されました、強力な実行力です）。その後、仕事のプロジェクトが非常に忙しくなり、書き始めることはできませんでしたが、その間に Randy が書いた Next.js 開発の小さな本を読みました：

Next.js アプリケーション開発実践

この本は本当に素晴らしく、私が Next.js を書いて以来、コード実践に関して最も明確に説明されている資料です。そこには Query、Mutation、Query Invalidation を通じてデータを強制的に更新するなどのベストプラクティスが含まれており、超便利な ORM ライブラリ Prisma も推奨されています。前半の理論説明は非常にわかりやすく、後半には 2 つの実例プロジェクトも付いていて、非常に見る価値があります。

side_project_api_structure

この本を読み終えた後、途中まで作成していたサイドプロジェクトの Go バックエンドを廃棄し、週末を丸ごと使ってバックエンドロジックの実装部分を Next.js の API モジュールで Prisma を使って PostgreSQL データベースに接続する形で再構築しました。最初に書くときは少し慣れない部分がありましたが、ユーザー管理と認証の部分ではその小さな本のコードを見ながら修正し、後の他の機能は比較的スムーズに進みました。これも比較的完全な実践といえるでしょう。Next.js + TailwindCSS + Prisma の組み合わせは非常に良い開発体験をもたらし、独立していくつかのプロジェクトを開発するのに非常に適しています。

週末の 2 日間の狂ったようなコード執筆を経て、フロントエンドの実装に対する自信もかなり増しました。そこで Randy に開発タスクを受け取りに行きました。機能は複雑ではなく、Mutation を使用してユーザーがコメントを保存するための Webhook 接続設定のロジックを実装し、いくつかの読み込み中の状態やトースト通知などの効果を追加しましたが、これは良いスタートです。

chat_with_randy_01

実装過程でいくつかの問題に直面し、彼に質問しましたが、非常に親切に答えてくれました。最後に、夜にこの PR を完成させました。

feat: save webhook settings logic (with loading and toast) by pseudoyu · Pull Request #241 · djyde/cusdis

chat_with_randy_02

実際、このような体験は非常に面白いです。ほとんどフロントエンドプロジェクトを書いたことがない自分がオープンソースに参加し、尊敬する開発者から助けと指導を受けることができました。時には積極的になることで予想外の収穫があるかもしれません。しかし、自分がブロックチェーンのバックエンド開発者として参加した最初の比較的大きなオープンソースプロジェクトで提案した最初の機能的 PR が実はフロントエンドであったことを考えると、これは奇妙な体験でした。

興味がある方はぜひ Cusdis を試してみてください。以前、デプロイに関する紹介記事も書いたので参考にしてください：

軽量級オープンソース無料ブログコメントシステム解決策（Cusdis + Railway）・Pseudoyu

ChatGPT#

自分は最初に GitHub Copilot のベータテスターで、初めて使ったときは驚きました。AI がコードの分野でこれほどのことができるとは思いませんでした。その後も継続的に使用しており、もう 1 年以上になります；その後、頻繁に使用しているのは DeepL の機械翻訳で、質は Google 翻訳よりもかなり良いと感じており、多くのオープンソースの翻訳プロジェクトを完了するのに役立ちました；その後は Notion AI ですが、完全に Notion から Logseq に移行したため、試してみたもののそのまま放置してしまいました；同様のものとして、以前のブラックフライデーで購入した Craft というオンラインノートソフトウェアもあり、小さなアシスタントが内蔵されていてテキストを最適化します；そして最も重要なのは、昨年末にリリースされた ChatGPT です。

11 月末にリリースされたことを覚えていて、12 月初めにオーストラリアにいる倪に電話番号の認証コードを受け取って体験を始めました。当時はよくコードの質問をしており、基本的にかなり正確な回答を得ることができましたが、実際には GitHub Copilot のような無感覚な方法の方が好みで、毎回言葉を組織して質問し、コードを貼り付けて編集するのはあまりしたくありませんでした。そのため、しばらく遊んだ後は実際には放置してしまい、新しい技術を学ぶときに時々開いて見る程度でした。

chatgpt_assistant_usage

先週、偶然自力が ChatGPT をアシスタントとして使用している方法を見て、非常に魅力的でした。いろいろと仮想クレジットカードなどを駆使して、ようやく Plus メンバーシップを取得しました。月 20 ドルという高額な出費により、自分の日常使用のニーズを整理し始めました。最終的にプログラミングコードの問題、日本語学習、中英翻訳、検索エンジン、文案の最適化などのニーズを複数の対話ボックスに分けて使用し、毎日まるで一群の小さなアシスタントがいるかのように賑やかです。

最近はフロントエンドに関することが多く、以前は授業で学んだこともありましたが、まだ多くの詳細がはっきりしないことが多いです。この時、ChatGPT に質問し、その回答から正解をフィルタリングして自分の知識として消化するのは非常に効果的で、実戦的でもあり、多くの新しい実装のアイデアを提案してくれます。言語学習も同様だと思いますが、日本語学習の効果をしっかりテストする時間がまだ取れていないので、後で面白いことがあれば対話を記録してみます。

面白いことと物#

入力#

ほとんどの面白い入力は『Yu's Life』Telegram チャンネルで自動的に同期されますが、ここでも一部を選んで列挙してみます。ニュースレターのような感じです。

記事#

ポッドキャスト#

自分が聞いているポッドキャストをいくつか記録しました：

動画#

同様に、見た面白い動画も記録しています：

個人生活のスナップショット#

跳海酒館#

sea_bar_outside

sea_bar_wine

週末に友人と跳海酒館に行きました。胡同の中にある小さなバーで、混雑していますが騒がしくはなく、独特の賑やかさがあります。中には「誰かが海に飛び込んだ」という大きな文字が書かれています。北京に出張中の友人と長い間楽しく話し、今週の少し陰鬱な気持ちもかなり和らぎました。新しい週も良い調整をしなければなりません。

捏捏#

my_lovely_nie_nie_01

『跳海酒館』で少し酒を飲み、家に帰ったのは大体 1 時で、あまり長くないうちに昏睡状態になりました。ぼんやりと目を覚ますと、捏捏が私の顔の近くに寄って何かを嗅いでいるようで、時々小さな爪で試しに触れていました。頭が（再起動後）しばらく回転してから、彼女が私がまだ生きているか心配しているのだと気づきました。暗闇の中で慌ててスマホを開いて一枚撮影し、久しぶりの温かさと依存感を感じました。

my_lovely_nie_nie_02

彼女は自分がとても可愛いことを知っているに違いありません！

バレンタインデー#

valentine_douban

豆瓣映画カレンダーの選曲者はやはり少し考えがあるようで、バレンタインデーには花束のような恋愛を放ち、次のように言います：

恋愛はパーティーのようなもので、いつかは終わるものです。