【Devinをより効果的に成長させる方法メモ。追加学習プロンプトシェア📝】 DevinのPRに追加コミットして見本見せて整理してもらうのがいい方法かと、 見本のコーディングをコミットで見せてあげた後、 ＝追加学習プロンプト＝ 「今回の私のコミットから何を学びましたか？ 今後、このプロジェクトに機能追加する上で押さえておくべき知識や文化はなんですか？全て網羅的に洗い出して構造化して整理してください」 ＝＝＝＝ てslackで投稿すると、よりナレッジが効率的に貯まっていくと思います。 ちなみに私の場合はDevinはこんな感じに私の見本のソースを構造化して整理してくれました。 ＝＝＝＝＝ ## プロジェクトの構造と慣習 1. レイヤー構造 - backend/Layer/commonに共通コード（モデル、リポジトリ） - backend/src/functionsに各Lambda関数 - frontend/src/appに画面コンポーネント - frontend/src/libにAPI関数2. 開発規約 - TypeScript 5.3.3を使用（5.4.0以上は非対応） - ESLintによる厳格なコード品質管理 - console.warnを使用（console.log非推奨）3. エラーハンドリング - フロントエンド：Snackbarによるユーザー通知 - バックエンド：適切なステータスコードとエラーメッセージ - ローディング状態の表示（CircularProgress）4. 認証フロー - Cognitoによる認証 - useAuth()フックによる状態管理 - 未認証時の自動リダイレクト5. データアクセス - MongoDBをLayer/commonのリポジトリで集約 - ユーザー名と日付による一意性管理 - 型定義による厳格なデータ構造 プロジェクトの開発文化とプラクティスについて、さらに詳細を整理しました：## 1. アーキテクチャ設計の原則 ### フロントエンド - **コンポーネント設計** - 認証関連は`src/components/auth/`に集約 - 共通レイアウトは`src/components/layout/` - ページコンポーネントは`src/app/`配下- **状態管理** - AuthContextによる認証状態の集中管理 - useStateとuseEffectによるローカル状態管理 - エラー状態はSnackbarで統一的に表示### バックエンド - **レイヤードアーキテクチャ** - Lambda関数（プレゼンテーション層） - リポジトリ（データアクセス層） - モデル（ドメイン層）## 2. コーディング規約 ### TypeScript - バージョン5.3.3を使用（5.4.0以上は非対応） - 厳格な型定義（interfaceを活用） - mongooseの型定義を明示的に追加### エラーハンドリング - console.warnを使用（console.log非推奨） - try-catchによる例外処理の徹底 - エラーメッセージの統一的な形式## 3. データベース設計 ### MongoDB - コレクション名は複数形（memos, diaries） - スキーマ定義は`models/`配下 - ユーザー名と日付による複合キー## 4. API設計 ### エンドポイント - RESTful設計原則に従う - クエリパラメータによるフィルタリング - 認証情報はヘッダーで伝搬### レスポンス - 一貫したJSONフォーマット - 適切なHTTPステータスコード - エラーメッセージの構造化## 5. セキュリティプラクティス - Cognitoによる認証 - APIゲートウェイでの認証チェック - 環境変数による機密情報管理## 6. 開発フロー ### コミット規約 - feat: 新機能 - fix: バグ修正 - chore: 設定変更 - 日本語でのコミットメッセージ### CI/CD - PRごとのCIチェック - ESLintによる静的解析 - 型チェックの厳格化## 7. パフォーマンス最適化 - ローディング状態の表示 - エラー時の適切なフォールバック - 適切なキャッシング戦略## 8. テスト戦略 - CIでの自動テスト - 型システムによる静的検証 - PRレビューでの手動テスト## 9. ドキュメンテーション - 型定義による暗黙的なAPI仕様 - コメントによる複雑なロジックの説明 - READMEによるセットアップ手順## 10. 依存関係管理 - Layer/nodejs配下でのパッケージ管理 - 共通依存はcommonLayerで管理 - バージョン互換性の慎重な管理 ＝＝＝＝ こんな感じで、私の見本ソースコードからピックアップしてかなり良い学習をしてくれます。 自分のコードを構造化して整理してくれるので良い復習にもなりますのでぜひおすすめです〜☺️

Spinner/CircularProgress

Day 12 of #100DaysOfCode • Learned about the Javascript Substring method, used it to create a mask on the card number for my credit card UI component. Only showing the last 4 digits of the card number. • Added loading animations…there are async api calls that are made when a different component renders on the screen. Used the CircularProgress component from MaterialUI • Probably will refactor the mapping logic into its own component and make some other code refactors today. #javascript #CONNECT

CircularProgress が一瞬表示されるため、天気情報が表示されたときのありがたみがより大きくなります

Day 50 of #100DaysOfCode I addressed some of yesterday's bugs and modified the front end today (Notifications, CircularProgress - loading animations and a little bit of CSS ) #web3 #Solidity #ReactJS

Domina css y HTML en poco tiempo y desde Cero. #AndroidDev #JetpackCompose #100DaysOfCode #CoilImage #Coil #Image #Transition #CircularProgress #ImagePainter #CrossFade #MakeItEasyDev #Developer #Programmer #Navigation merchand.org/programacion-we…

Thank you everyone for joining our livestream today! We will posting the videos up on YouTube very soon and will be in touch with update. Now… time to celebrate #wctd2021 #circularprogress

We asked our signatories: what's the one thing you need from others to succeed in your circularity ambitions? See their answers below. #CircularProgress #WCTD2021 👇

Excellent #CircularProgress from @circularfsystem

What's been challenging for you in your circularity journey? Is it accessing the right information? Finding the infrastructure and resource? Or is it slow-moving systems that inhibit your progress? Get in our mentions! #CircularProgress #WCTD2021

Today's theme is to Report, Reflect and Celebrate the last year. Send us your #CircularProgress updates so we can see what you've been up to!

Join us this Friday for World Circular Textiles Day and learn about the industry's progress on the path to circular fashion and textiles. Register now: eventbrite.co.uk/e/wctd-2021… @WCTD2050 #CircularProgress

Its #WorldCircularTextilesDay this Friday! Join @WCTD2050 in celebrating where progress has been made, as well as exploring the big challenges and needs of signatories in the ongoing quest to achieve full circularity by 2050. #CircularProgress: bit.ly/2Ymgoms

It's #WorldCircularTextilesDay this Friday (8th October)! We're looking forward to joining the livestream session “WCTD2021: Report, reflect, celebrate” - find out more & sign up to watch 👇@WCTD2050 #CircularProgress #Circularity eventbrite.co.uk/e/wctd-2021…

Yeah it's because data hasn't loaded yet. @baalazamon is going to hide that behind a CircularProgress element in next build. We noticed too.

APIサーバーにDOSしたことに気づいたのはCircularProgressがカックカクになったからですね、びっくりしました

Day 44 Working with a new side project. Looking into Material-UI CircularProgress component as a loading component. This sure makes it easy. material-ui.com/components/p… #100daysofCode #React

This describes exactly how I learn front end stuff: import CircularProgress from '@ material-ui/core/CircularProgress'

CircularProgress for macOS: Circular progress indicator for your macOS app. - cocoacontrols.com/controls/c…

then we update the progress value of the CircularProgress (at this point, it shows the progress). CircularProgress also comes with the aria-* attributes to make its progress value accessible to screenreaders.