関連スライド
SPAセキュリティ超入門
徳丸 浩
697.4K
各ページのテキスト
WEB DEVELOPER PORTOFOLIO Kim Yu Min / キム・ユミン
⾃⼰紹介 | プロフィール 「 チャレンジ」を楽しむエンジニア GitHubのQRコード *ここ１年間、1回以上Git Commitをした⽇ 名前 ・ 年齢 趣味 キム・ユミン (2000年) ITカンファレンス参加 資格 ⼤学 ・ 専攻 JLPT N1 JPT 835 永進専⾨⼤学 AI・ソフトウェア ブログ GitHub https://yuminnkdevlog.vercel.app/ https://github.com/ yuminn-k 1
⾃⼰紹介 | 学⽣時代に⼀番⼀⽣懸命やったこと 共に成⻑したい イキイキした⽇本語を学びたい 不便なことを直したり 勉強した技術を実際に活⽤したい 様々なテーマの専攻知識を得たい グローバル活動 スタディグループ活動 2019.03 ~ 2019.08 ~ 2019.11 活動の結果 毎⽇学習する習慣を⾝につけたい 活動の結果 ITカンファレンス参加 2022.04 ~ 参加の結果 1. ⽇本語会話能⼒UP 1. ⼤学「チュータリングプログラム」優秀賞受賞 1. 現場のエンジニアとの交流 2. ⽇本⽂化への理解 2. アルゴリズム知識UP 2. 新技術情報を収集 1⽇1コミット 2022.07 ~ コミットの結果 チームプロジェクト 2022.10 ~ チームプロジェクトの結果 1. 毎⽇開発する習慣 1. プロジェクト企画能⼒向上 2. エンジニアとして進路確⽴ 2. 新技術への能⼒向上 活 動 写 真 グローバル活動様⼦ スタディグループ活動様⼦ カンファレンス活動様⼦ GitHubのステット チームプロジェクト活動様⼦ 2
⾃⼰紹介 | スキルシート Back-End PHP, Go, Laravel, Gin, Python RESTful API(JSON) Server Apache, AWS EC2, Docker CI/CD GitHub Actions, GitHub Package (Container-Registry) Tools Front-End HTML5, CSS3, JavaScript(ES6), TypeScript, tailwind-css, styled-component, Redux, Recoil, React.js, Next.js DB Oracle, MySQL, MariaDB, Firebase realtime database Cloud Service Vercel, Firebase, AWS, cloudtype Collaboration & Design & Document 3
プロジェクト | プロジェクト実績 チームプロジェクト 2023.07.~2023.08. 個⼈プロジェクト 2023.07.~2023.07. チームプロジェクト 2023.07.~2023.09. 個⼈プロジェクト 2023.10.~2023.12. 個⼈プロジェクト 2024.01.~2024.01. チームプロジェクト 2024.01.~ ⾷べようか 3-AD ⼤学ESG実装フォーラム JITSU yuminnk-nextjs Minori Team Leader & Back-end Automate Tasks Team Leader & Full-stack Full-stack Framework Template Team Leader & Back-end レストランレビュー サービス GithubのREADME.md 更新サービス ⼤学ESG実践 フォーラム ウェブサイト IT⽤語 学習サービス Next.js 14版 ボイラープレート RAGを導⼊した 授業プラットフォーム 4
プロジェクト | チームプロジェクト(1) Minori | RAGを導⼊した授業プラットフォーム 開発期間 2024.01.~ (開発中) プラットフォーム Web 開発⼈数 5人 (リーダー、バックエンド) 役割 サービス企画 (貢献度 100%) オンライン授業機能 (貢献度 100%) チャとお機能 (貢献度 100%) クラスページ (貢献度 50%) Gin、Next.js配布パイプライン (貢献度 100%) GitHub QR 開発環境 言語 Go, TypeScript, YAML サーバー AWS EC2 フレームワーク Gin, Nest.js, Next.js DB MySQL, PostgreSQL, Redis CI/CD Docker, GitHub Actions, GitHub Package (Container-Registry), DockerHub GitHub Link https://github.com/YJU-OKURA/project_minori-gin-deployment-repo Swagger Link http://43.203.66.25/api/gin/swagger/index.html 5
プロジェクト | チームプロジェクト(1) Minori | サービス企画 (流れ / ツール) 企画 分析 / 設計 サービス企画 要件整理 サービス ⽤語定義 ERD設計 Git連携 開発環境構築 プロトタイプ デザイン 履行 ⼀般機機能実装 (例︓ポスト) パイプライン 構築 コア機能実装 (例︓講義、チャット) Agileでプロジェクトを進⾏ (テストコード作成) レイアウトはレイアウトはFigmaで実装 Trelloでスケジュール管理 Trello 6
プロジェクト | チームプロジェクト(1) Minori | サービス企画 (ERD設計 1/2) 7
プロジェクト | チームプロジェクト(1) Minori | サービス企画 (ERD設計 2/2) 8
プロジェクト | チームプロジェクト(1) Minori | 機能紹介 教師のページ クラス管理ページ 講義ページ Quiz管理ページ ユーザー クラスメンバー、 資料など管理 資料を共有してライブ講義 ライブチャット 講義のQuizを作成及び結果確認 権限確認 ログイン機能 学⽣のページ クラスルームページ 担当部分 学⽣は選択したクラスの 資料を確認 学習ページ ユーザーはRAGを適⽤した資 料を⾒ながら学習 Quizページ Quizの回答及びフィードバック確認 9
プロジェクト | チームプロジェクト(1) Minori | 機能実装 (パイプライン構築) パイプライン構築のためにDockerとGitHub Actions、GitHub Packageを使⽤ なぜ導⼊したか 1. Pull RequestでMergeする 2. OKラベルが付いてると Dockerイメージ化して GitHub Packageに保存する 3. 変更があればEC2から GitHub Packageの最新イメージを Pullしてコンテナを再起動する GitHub Actions, GitHub Package, Dockerを活⽤して、OKラベルが 付いたPull RequestがMergeされた際、⾃動的にDockerイメージ化して GitHub Packageに保存するCI/CDパイプラインを構築しました。 その後、AWS EC2でGitHub PackageからDockerイメージを取得し、 既存のコンテナを削除した後に新しいコンテナを⽴ち上げるプロセスを 実装しています。このプロセスを採用した理由は以下の通りです。 まず、JenkinsではなくGitHub Actionsを使⽤したのは、GitHub内での開発 プロセスをシームレスに管理できる点が⼤きいです。GitHub Actionsは GitHubリポジトリと直接統合されており、設定や管理が容易で、開発の効率 を向上させます。また、GitHub Actionsは柔軟で拡張性が高く、様々なワー クフローに合わせてカスタマイズ可能です。 次に、DockerHubではなくGitHub Packageを選んだ理由は、GitHub エコシステム内で全てを⼀元管理できる利便性にあります。 GitHub PackageはGitHubリポジトリと直接連携し、ソースコードと パッケージを同じ場所で管理することが可能です。 これにより、バージョン管理やアクセス制御が容易になり、セキュリティ⾯ でも強化されます。 10
プロジェクト | チームプロジェクト(1) Minori | 機能実装 (データベースバックアップ) 背景 EC2インスタンス上でMySQLデータベースを運⽤している中で、 データの安全性と信頼性を⾼めるために、⾃動バックアップシステムの必要 性が浮き彫りになりました。データ損失のリスクを減らすため、 効率的かつ定期的なバックアップが求められていました。 プロセス 1. 1時間ずつCronを実⾏ 1. バックアップスクリプトの作成: MySQLデータベースをバックアップするためのシェルスクリプトを作成しま した。このスクリプトは、データベースをバックアップし、古いファイルを ⾃動的に削除する機能を含んでいます。 2. Crontabによる⾃動化: Crontabを使⽤して、スクリプトを定期的に実⾏するように設定しました。 この設定により、1時間ごとに⾃動的にデータベースのバックアップが⾏われ ます。 2. MySQLデータベース 情報を持ってくる MySQL Database 3. バックアップイメージを ⾃動に保存 Shell Script Backed Up 効果 - データ保護: 定期的なバックアップにより、データ損失のリスクを軽減 できます。 - 効率的な運用: 自動化されたプロセスにより、バックアップ作業の手間が 省け、時間を節約できます。 - 高い安定性: Crontabの利⽤により、環境変数が適切に設定され、システム 再起動後も⾃動的にバックアップタスクが継続されます。 11
プロジェクト | チームプロジェクト(1) Minori | 機能実装 (コンベンション定義) 背景 プロジェクトの進⾏において、コードの品質を保持し、チームメンバー間の コミュニケーションを円滑にするため、コードコンベンションの導⼊が必要でした。 具体的には、フロントエンドにはGoogle TypeScript Style(GTS)を採⽤し、その他にも コミット、GitHubのissue、Pull Request、コードレビューに関するコンベンションを 作成しました。 コンベンションの内容 - コード: GTSを基に、統⼀されたコーディングスタイルを適⽤しました。 コミット: コミットメッセージのフォーマットを定義し、変更内容の理解を容易にしました。 GitHubのissue: タスク管理と進捗の追跡を効率化するためのルールを設定しました。 Pull Request: コードの統合プロセスを明確にし、品質保持に貢献しました。 コードレビュー: チームメンバー間の相互レビューを促進し、コードの品質を⾼めました。 導⼊の効果 このコンベンションの導⼊により、次のような効果が得られました。 - 品質の向上: コードの⼀貫性と可読性が向上し、品質が保たれました。 - 効率的なコミュニケーション: コンベンションにより、チーム内のコミュニケーションが スムーズになりました。 - 迅速なプロジェクト進行:明確なルールにより、作業の速度が向上し、プロジェクト進⾏が スムーズになりました。 12
プロジェクト | チームプロジェクト(1) Minori | 機能実装 (ChatGPTコードレビューbot) 背景 プロジェクトの効率を向上させ、コード品質を維持するために、⾃動化されたコードレビューの 導⼊が必要と考えました。 この⽬的のために、ChatGPTをベースにしたコードレビューボットを選択し、導⼊しました。 ChatGPT コードレビューボットの特徴 1. 即時フィードバック: コード提出後、すぐに詳細なフィードバックが得られます。 2. コードの品質向上: 潜在的なバグ、最適化の余地、コーディング標準に関する指摘を通じて、コード の品質が向上します。 3. 学習機会の提供: チームメンバーは、ボットのフィードバックから新たなプログラミング技術やベス トプラクティスを学ぶことができます。 導入の効果 ChatGPT コードレビューボットの導⼊により、以下の効果が得られました。 - 迅速な問題の特定: コードの問題点を早期に特定し、修正することが可能になりました。 - 生産性の向上: ⾃動化されたレビュープロセスにより、チームメンバーの⽣産性が向上しました。 - コミュニケーションの効率化: コードレビューに関する議論が効率的に⾏えるようになり、開発プロセスがスムーズになりました。 13
プロジェクト | チームプロジェクト(2) ⾷べようか | ⽇本の店舗情報や位置情報提供、レビューサービス 開発期間 2023.07.~2023.08. (1ヶ⽉) プラットフォーム Web 開発⼈数 4人 (リーダー、バックエンド) 役割 サービス企画 (貢献度 100%) レストラン情報取得機能 (貢献度 100%) レストラン情報検索機能 (貢献度 100%) フォロー機能 (貢献度 100%) GitHub QR 開発環境 ⾔語 PHP, TypeScript サーバー AWS EC2 フレームワーク Laravel, React.js DB MySQL API Hotpepper API GitHub Link https://github.com/Tabeyouka/project_TABEYOUKA_laravel-deployment-repo Notion Link https://www.notion.so/yuminn-k/11a0dd80f3b642a3a73853c6d635c10a?pvs=4 14
プロジェクト | チームプロジェクト(2) ⾷べようか | サービス企画 (流れ / ツール) 企画 分析 / 設計 サービス企画 要件整理 サービス ⽤語定義 ERD設計 Git連携 開発環境構築 プロトタイプ デザイン 履行 機能実装 配布 リファクタリング レイアウトはFigmaで実装 Notionでスケジュール管理 Sprint Kanban 15
プロジェクト | チームプロジェクト(2) ⾷べようか | サービス企画 (ERD設計) 16
プロジェクト | チームプロジェクト(2) ⾷べようか | サービスの流れ 担当部分 他ユーザー レストラン フォローしたユーザーのレビュー ユーザー レストラン検索ページ レストラン詳細ページ ログイン機能 マイページ マイレビュー管理 レビュー作成ページ ログイン機能 17
プロジェクト | チームプロジェクト(2) ⾷べようか | 機能実装 ADRデザインパターン git-secrets Public API 発⽣した問題 発⽣した問題 発⽣した問題 クロールの⽅式では⼀定のデータを取得することに問題発⽣ MVCパターンのメリットは広く使われているパターンであり、 Laravelでも基本的にサポートしているパターンです。 ただViewとModel間の依存性が⾼いという⽋点があります。 ViewとModelの⾼い依存性はアプリケーションが⼤きくなれ ばなるほど複雑になり、メンテナンスが難しくなるという点 を改善しようとしました。 悩んだこと vs Crawling 決定理由・得たこと こうして適⽤したデザインパターンがADRパターンです。 ADRはリクエストを処理する「Action」と 応答を処理する「Responder」を明⽰的に分離し、 それぞれの役割がより明確になります。 これにより、コードの読みやすさが向上し、 メンテナンスが容易になります。 また、ADRは、ドメインロジックを処理する「Domain」を 別に置くことで、ビジネスロジックが「Action」と 「Responder」から分離されます。 これにより、ビジネスロジックの再利⽤性が⾼まり、 テストも容易になりました。 解決⽅法 vs Hotpepper API APIキー情報をコードに含めてコミットするというミスが発⽣ しました。このような機密情報が公開リポジトリに公開され ると、セキュリティ上⾮常に危険な状況でした。したがって 、この問題を防⽌する⽅法を⾒つける必要がありました。 Gurunavi API 決定理由 このGurunaviもAPIを提供していたが、 2021年から有料化になり、新規登録も制限しています。 Hotpepperから提供しているAPIの場合は レストランの情報だけでなく様々なAPIを提供し、 検索ロジックなどを実装する時使えると判断しました。 この問題を解決するために、git-secretsというツールを導⼊ しました。git-secretsは、コミット前に機密情報を検査し、 検出された場合はコミットを中⽌する役割を果たします。 まず、git-secretsをインストールし、プロジェクトに適⽤し ました。次に、機密情報のパターンをgit-secretsに登録しま した。このように登録したパターンに該当する情報がコミッ トされようとすると、git-secretsがこれを検出し、コミット を防ぐことで、機密情報の公開を防ぎました。 この⽅法により、git-secretsを導⼊して機密情報が誤ってコ ミットされることを防ぎました。これにより、セキュリティ リスクを減らし、プロジェクトの安全性を強化することがで きました。 18
プロジェクト | チームプロジェクト(2) ⾷べようか | API ⽂書化 背景 導⼊の効果 プロジェクト内でAPIの仕様と情報を効果的に管理し共有するため、 Notionを使用してAPI文書を作成しました。このツールの柔軟性と アクセシビリティにより、チームメンバー間のコミュニケーションと理解を 深めることが可能になりました。 NotionによるAPI⽂書化の導⼊は、次のような効果をもたらしました。 ⽂書化のプロセス NotionでのAPI⽂書化には以下のプロセスを採⽤しました。 - APIの仕様記述: 各APIエンドポイントの詳細な説明、リクエストと レスポンスのフォーマット、パラメータ、HTTPステータス コード等を記述しました。 - チームとの共有: ⽂書化されたAPI仕様をチームメンバーと共有し、開発の 際の参照資料として使⽤しました。 - 定期的な更新とメンテナンス: APIの変更や更新に応じて、⽂書を定期的に 更新し、最新の情報を保持しました。 - 情報の中⼼化: APIに関するすべての情報を⼀つの場所で管理し、アクセス しやすくしました。 - 効率的なチームワーク: APIの詳細が明確になり、チームメンバーが迅速に 情報を共有し協⼒できるようになりました。 - 開発プロセスの加速: APIの仕様が明確になったことで、開発プロセスが スムーズに進み、エラー発⽣率が低減しました。 まとめ Notionを使⽤したAPIの⽂書化は、チーム内のコミュニケーションの効率化と 開発プロセスを加速させました。 また、プロジェクトの技術と進捗を共有し品質を向上させました。 19
プロジェクト | チームプロジェクト(3) ⼤学ESG実装フォーラム | ⼤学ESG実践フォーラムの管理⽬的のウェブサイト 開発期間 2023.07.~2023.09. (2ヶ⽉半) プラットフォーム Web 開発⼈数 4人 (リーダー、フルスタック) 役割 サービス企画 (貢献度 100%) ログインページ (貢献度 100%)、フロントエンド (貢献度 100%) フォーラム紹介ページ (貢献度 100%) 、フロントエンド (貢献度 100%) 社員案内ページ (貢献度 100%) 、フロントエンド (貢献度 100%) 投稿ページ (貢献度 100%) 、フロントエンド (貢献度 100%) GitHub QR 開発環境 ⾔語 PHP, TypeScript サーバー AWS EC2 フレームワーク Laravel, React.js DB MySQL ライブラリー Quill Editor GitHub Link (FE) https://github.com/ESGForumWebSiteDev/project_ESGForumWebSiteDev_react-deployment-repo GitHub Link (BE) https://github.com/ESGForumWebSiteDev/project_ESGForumWebSiteDev_laravel-deployment-repo 21
プロジェクト | チームプロジェクト(3) ⼤学ESG実装フォーラム 企画 | サービス企画 (流れ / ツール) 分析 / 設計 案件取得 要件整理 サービス 具体化 ERD設計 Git連携 開発環境構築 プロトタイプ デザイン 履行 機能実装 配布 リファクタリング GitHub Projectでスケジュール管理 22
プロジェクト | チームプロジェクト(3) ⼤学ESG実装フォーラム | サービス企画 (ERD設計) 23
プロジェクト | チームプロジェクト(3) ⼤学ESG実装フォーラム | サービスの流れ 担当部分 ユーザー ESG Forum ログイン ⾮ログイン メインページ 事業紹介ページ フォーラム紹介ページ 事業紹介ペー ジ 管理者 メンバー紹介ページ 掲⽰板ページ ユーザー管理 管理者権限確認 ポスト作成 24
プロジェクト | チームプロジェクト(3) ⼤学ESG実装フォーラム | 機能実装 ログインロジック スマートエディター 悩み 悩み セミナーの⽇程など様々な様式でポストを 作成する必要がありました。 セミナーの⽇程など様々な様式でポストを 作成する必要がありました。 ログイン処理⽅式 ツー ル vs Session vs JWT Quill 選択理由 選択理由 セッション認証でなく、JWT認証を採択した理由は2つです。 1. 状態を維持しない(ステートレス) JWTはクライアント側で認証情報を保存するため、 サーバーは状態を維持する必要がありません。 これによりサーバーの負担が軽減され、拡張性が向上します。 2. ⾼いセキュリティ JWTはデジタル署名を使⽤してトークンの整合性を 保証するため、トークンが改ざんされたかどうかを 簡単に検査することができます。 CKEditor QuillとCKEditorの中でQuillを採⽤した理由は以下の通りです。 1. 豊富なカスタマイズオプションを提供します。 画像を添付する際、プレビューオプションを実装する必要があったので、 カスタマイズが便利なQuillが適していると判断しました。 2. 軽いです。 ポストを作成しながら、単純な単純なテキスト⼊⼒機能より様々な機能が 要求されましたが、表挿⼊やフォントサイズ調整など多くの機能が 必要ではなかったので、軽いQuillエディタが適していると判断しました。 25
プロジェクト | チームプロジェクト(3) ⼤学ESG実装フォーラム | プロジェクト管理とコード管理 APIドキュメンテーションツール︓Postman Gitブランチ戦略の利用 開発プロセスの進捗状況と技術を共有するために、APIドキュメンテー ションにはPostmanを使⽤しました。これにより、APIの仕様やテス トが簡単に共有できるようになりました。 プロジェクトの効率的な管理とコードの整理のために、 Gitブランチ戦略を利⽤しました。これにより、機能の追加や バグ修正をより整理された形で管理できるようになりました。 コミットコンベンションの導入 コードの履歴をより読みやすくするために、以下のような コミットコンベンションを採⽤しました。 <タイプ>: <タイトル>の形式で記述。タイトルは50⽂字以内。 タイトルの後は改⾏し、タイトルの末尾にはピリオドを付けない。 ✨ feat: 新機能追加 🐛 fix: バグ修正 📝 docs: ⽂書の修正 ✅ test: テストコード追加 ♻ refactor: コードのリファクタリング 💄 style: コード意味に影響を与えない変更 🔧 chore: ビルド処理またはパッケージマネージャの変更 GitHub Projectsでのプロジェクトスケジュール管理 プロジェクトの進捗管理とタスクの分配にはGitHub Projects を利⽤しました。これにより、プロジェクトの進⾏状況を⼀⽬ で確認でき、効率的なチームワークが可能になりました。 まとめ プロジェクトの効率性、および品質の向上させるため、Postmanの使 ⽤、明確なコミットコンベンション、Gitブランチ戦略、そして GitHub Projectsによるプロジェクト管理を導⼊しました。 これらのツールと戦略は、チームでの作業をよりスムーズにし、プロ ジェクトの完成度を高めました。 26
プロジェクト | 個⼈プロジェクト(1) 3-AD | 個⼈技術ブログにあるポストを毎⽇3つずつランダムに選んでGithubのREADME.mdを更新するサービス 開発期間 2023.07.~2023.07. (1ヶ⽉) プラットフォーム Web 開発⼈数 1⼈ (個⼈プロジェクト) GitHub QR 開発環境 ⾔語 Python, YAML CI/CD GitHub Actions, Docker GitHub Link https://github.com/yuminn-k/yuminn-k Blog Link https://yuminnk-devlog.vercel.app/githubactions%E6%B4%BB%E7%94%A8%E8%87%AA%E5%88%86%E5% A0%B1%E5%91%8A 27
プロジェクト | 個⼈プロジェクト(1) 3-AD | サービス企画 & 流れ 案件取得 サービス企画 履行 企画 サービス企画 まとめ ブログポスト Scraping Docker化 workflow 作成 ⽂書化 サービスの流れ 収集したデータを基に READMEに適⽤する スクリプトを実⾏ Cron実⾏ Github Actions このようなポストを 投稿してる ブログがあるんだ︕ 広告評価︕ GitHub README クロールでデーター収集 28
プロジェクト | 個⼈プロジェクト(1) 3-AD | 機能実装 (⾃動化) 難しかったこと GitHub Actionsの動作原理とブログポストを収集する⽅法 「GitHub Actions」を初めて使うので、 ワークフローの動作原理を理解するのに苦労しました。 また、ウェブスクレイピングでブログポストを抽出する 過程でも試⾏錯誤をしました。 学んだこと このプロジェクトでは、GitHub Actionsを実際に⽤いることで、 継続的インテグレーション（CI）の具体的な流れとその設定⽅法に ついて深い理解を得ました。 BeautifulSoupを使⽤したウェブスクレイピングの技術を習得し、 これにより効率的なデータ収集の技術も⾝に付けました。 ⾃動化プロセスの重要性と、⼿作業で⾏っていた作業を⾃動化すること で⽣じる効率性の向上について学びました。 解決⽅法 1. GitHub公式ドキュメント参照と環境設定 GitHub Actionsの動作原理を理解するため 公式ドキュメントを参考にしました。 そして、Pythonスクリプトを実⾏できるように 環境を設定し、必要な依存関係をインストールしました。 2. ウェブスクレイピング ブログポストを取得するためにウェブスクレイピング技術を使⽤しました。 PythonのBeautifulSoupライブラリを使⽤してHTML要素を解析し、 必要なデータを抽出する⽅法を学びました。 結果 ⾃動化に関する実務的な経験を積み、その過程でGitHub Actionsの活⽤ における専⾨性を⾼めました。この経験により、次のプロジェクトに おいてCI/CDパイプラインの構築を担当するきっかけとなりました。 ⾃動化に対する興味を更に深め、より幅広い⾃動化の実装と、⽣産性の 向上ができる技術を⾝につけました。 29
プロジェクト | 個⼈プロジェクト(2) JITSU | ⽇本語のIT⽤語を学習できるサービス 開発期間 2023.10.~2023.12. (2ヶ⽉半) プラットフォーム Web 開発⼈数 1⼈ (個⼈プロジェクト) GitHub QR 開発環境 ⾔語 PHP, Blade Template サーバー cloudtype, heroku フレームワーク Laravel DB MariaDB CI/CD GitHub Actions GitHub Link https://github.com/yuminn-k/project_JITSU-deployment-repo 30
プロジェクト | 個⼈プロジェクト(2) JITSU | サービス企画 & 流れ サービス企画 企画 サービス企画 履行 ⽤語データ Scraping まとめ 機能実装 ⽂書化 パイプライン構築 サービスの流れ ⽤語学習 ログイン メインページ 学習⽤語管理 31
プロジェクト | 個⼈プロジェクト(2) JITSU | サービス企画 (ERD設計) 32
プロジェクト | 個⼈プロジェクト(2) JITSU | 機能実装 (配布 & パイプライン) SaaSサービス、cloudtypeを通じてサービスの配布を⾏いました。 Secretキーの登録、GitHub Actionsを通じてパイプラインを実装するだけで配布までの プロセスを簡単にすることができました。 33
プロジェクト | 個⼈プロジェクト(3) yuminnk-nextjs-template | Next.js 14版ボイラープレート 開発期間 2024.01.~2024.01 (1ヶ⽉) プラットフォーム Web 開発⼈数 1⼈ (個⼈プロジェクト) GitHub QR 開発環境 ⾔語 TypeScript フレームワーク Next.js Tools GTS, Commitlint, Husky, Jest GitHub Link https://github.com/yuminn-k/yuminnk-nextjs-template Blog Link https://yuminnk-devlog.vercel.app/nextjs-14%E4%BD%9C%E6%88%90%E5%8A%B9%E7%8E%87%E6%9C%80%E5%A4%A7%E5 %8C%96 34
プロジェクト | 個⼈プロジェクト(3) yuminnk-nextjs-template | テンプレート構成 このようなことを導⼊しました。 1. GTS GoogleのTypeScriptスタイルを導⼊し、”コードの⼀貫性と 保存性” を確保しました。 2. Commitlint “整理されたコミット履歴” を作成しました。 3. Husky Gitフックを⾃動化し、”コード品質” を向上させました。 4. Jest 効率的な ”テスト環境” を構築しました。 その結果… Minoriのフロントエンド側で使⽤中︕ 35
THANK YOU Kim Yu Min / キム・ユミン