これは何？

• 筆者が2023の未踏福岡に採択されたので、進捗を公開していくスクラップです

なぜスクラップ？

• 管理しやすい
  • 後から編集可能
  • Twitterに比べて分野ごとに内容をまとめられる

なぜ公開する？

• 未踏福岡、未踏ジュニア、未踏関連の方に参考になるかもしれない
  • もちろん、それ以外の開発者にとっても
• 自分の開発の速さやいつに何をしたのか記録しておきたい
• 不特定多数の人に見られているという自覚を持つことで自分に鞭を打つため

筆者について

• N高3年
• 2023未踏福岡Proコース採択
  • 唯一の高校生 & 個人でした😨
• Web / AI / Game 開発者
  • 専門はAIのローエンド
  • 詳しくはポートフォリオをご覧ください
• 趣味でブログやってます

開発環境

• M2Mac
• Docker

Nextのセットアップ

https://nextjs.org/
https://ui.shadcn.com/

認証系の作成

• NextAuthを使った認証
  • Next13からのApp Directoryを使ったので、_app.jsの書き方ができなくて困った
    • 最終的にnextauthのmiddlewareを頼った方が良いと判断
    • もしくは、server component, server側の処理で認証を判断した方がマシかもしれない
      • テスト段階なのでCSRで簡易的に実装した
• Prismaも使ってユーザー管理

フロントの作成

• Headerの作成
  • アバターをGoogleアカウントやGitHubと同期するようにしてみた
  • アバターを押すとdropdownを表示するようにしてみた
    • ログインしているユーザー名を出す等
    • ログアウトも実装
  • 
  • 

UIの作成

• Header, Dashboard, コース一覧, ログイン画面の作成
  • Headerのバグ修正
  • Dashboardからはアナリティクスも見れるようにしたい
    • コース一覧からさらに詳細画面を作れるようにする
    • dynamic route?
  • ログイン画面
    • GoogleとGithubでログインできるようにしている
      • メインがGoogleで、サブでGitHubを選択できるように
      • ログアウトはアバターのDropDownのログアウトボタンからできるように

設定画面の作成

• 設定画面の作成
  • 必要な設定のみ
• なぜかshadcnのtoastが動作しない
  • バグなのかわからない
  • 優先順位は低いが、違う環境でも試してみて、再現をしてみる

コース

• テストでタグをつけてみた
  • 今後、検索機能でコンテンツを検索できるようにする
• UIについて
  • UIはいくらでも後から簡単に変更できるので、未踏福岡期間は最低限のUIにする。
    • ダークモード切り替えなどは時間がかかる割にはreturnが少ないのでしないつもり
    • その他最低限のUIのみ準備

コースのUI

• 分裂したコースとは別に、コンテンツをまとめたコースを紹介するCardを作成
  • デザインは酷いが、後でいくらでも変えれるので、ひとまずイメージとしてこんな感じにしておく

外部サーバーにデプロイ

• Netlifyでやってみたがなぜか500エラーでアクセスできず
  • 色々調べたがログも取得できないので諦め

• Vercelでデプロイしてみた
  • 成功！無事にデプロイすることが出来た
  • ログイン機能がうまく動かなかったが、oauthのurlの設定とDBの設定をしていないからだと予想。
    • まだログイン機能はそこまで必要ではないので後々着手することにする

APIの実装

• usernameの変更をする機能の作成
  • axiosでpost
• routes handlerで苦戦した
  • https://eh-career.com/engineerhub/entry/2023/04/18/093000

コース画面の制作

• 細かい各コンテンツをまとめて、roadmapのようにする予定のコース画面の制作
  • gridを使ってみた
    
    
• そして、今気づいたけど、Zennのスクラップって投稿日時が分からないのか…更新日時はわかるが、もし間違えて更新したら大変
  • githubでコンテンツ管理した方が良いのかもしれない
    • ただ、画像や文字などの差分が全て公開されるのは困る

エディタ画面の作成

• 他に作る部分と言えばやっぱりエディタ部分なので、取り組んでみる
  • gridを使ってみたが、動的に変更するには何が良いのだろう？

Three.jsの導入

• 何気に初めてThree.jsをNextで動かすので、調べながらやってみる

React環境での違い

• 調べて行くと、ReactでThree.jsを使う際に、react-three-fiberというものがあるらしい。
  • どうやら、ThreejsのコードをReactのcomponent風にかけるというもの
    • めちゃくちゃ便利そう
    • ただ、今回のプロジェクトはReact環境以外でも動いて欲しいので、悩みどころ。

https://qiita.com/naberyo34/items/181f817ddd38c74dbc76
https://zenn.dev/hironorioka28/articles/5674b57278effd

Twitterに移行

• 理由
  • 日付が表示されない
    • 更新日時が表示されてしまう

https://twitter.com/Tebasaki_lab/status/1686367854860615680?s=20