https://www.yuyagishita.com/categories/indiedev/ Recent content in Indiedev on YAGI BLOG https://www.yuyagishita.com/images/top.png https://www.yuyagishita.com/images/top.png Hugo -- 0.152.2 en Fri, 09 Dec 2022 01:21:47 +0900 https://www.yuyagishita.com/indiedev/journal-tech/ Tue, 20 Apr 2021 20:50:14 +0900 https://www.yuyagishita.com/indiedev/journal-tech/ <p><img alt="journal-tech" loading="lazy" src="https://www.yuyagishita.com/img/journal-tech.png"></p> <p><a href="https://journaling.page/">Journal</a>というジャーナリングをするアプリをリリースしました。 ジャーナリングとは自分が思っていることを書き出すことで自分について理解を深めたり、自分がやりたいことを見つけるのに役立ったりします。 日記をイメージしてもらうのがわかりやすいと思います。</p> <p>今回はJournalを支えている技術について紹介します。</p> <h2 id="フロントエンド">フロントエンド</h2> <h3 id="nextjs">Next.js</h3> <p>フロントエンドは<a href="https://nextjs.org/">Next.js</a>（React）とTypeScriptを使っています。 なるべくシンプルに作りたかったので全ページをSPAで作っていますが、SSGできそうなところはSSGを使って静的ファイルにしたいと思ってます。</p> <h3 id="tailwind-css">Tailwind CSS</h3> <p>CSSには<a href="https://tailwindcss.com/">Tailwind CSS</a>を使っています。Next.jsとの相性が良さそうだったのとシンプルで使いやすそうだと思って選びました。CSSの知識が乏しいのでネットの有識者を参考にした結果、Tailwind CSSにしました。</p> <h3 id="vercel">Vercel</h3> <p>フロントエンドの本番環境のデプロイ先には<a href="https://vercel.com/">Vercel</a>を使っています。 VercelはNext.jsの運営元でデプロイがとても簡単で使いやすかったので選びました。 GitHubのリポジトリを指定すれば自動でデプロイをしてくれますし、設定も少なめで本当に簡単です。</p> <h3 id="vectr">Vectr</h3> <p>サイトのロゴやファビコンを作るのに<a href="https://vectr.com/">Vectr</a>を使っています。Vectrはsvg形式のファイルを無料で作れるので利用しました。</p> <h2 id="バックエンド">バックエンド</h2> <h3 id="echo">Echo</h3> <p>バックエンドはGoのフレームワークである<a href="https://echo.labstack.com/">Echo</a>を使っています。 GoでAPIを作るのにEchoはとてもお手軽とのことだったので選びました。 アーキテクチャにはクリーンアーキテクチャを選んでいます。クリーンアーキテクチャでコードを書いたことがありませんでしたが、テストコードが書きやすかったり、外部のライブラリなどの依存が減るので採用してよかったなと思っています。 また、コード量が増えたことはデメリットかなと思います。</p> <h3 id="cloud-run">Cloud Run</h3> <p>バックエンドの本番環境のデプロイ先は<a href="https://cloud.google.com/run/">Cloud Run</a>を使っています。 ローカルの開発環境でDockerを利用していて同じようなDockerfileでCloud Runにデプロイができ、Cloud Runがいい感じにリクエストをさばいてくれます。</p> <p>ただ、アプリが起動するまでに10秒弱ぐらい時間がかかってしまいAPIのレスポンス待ちになってしまうのがデメリットかなと思います。Cloud RunはフルマネージドでAPIを叩かれていないときはコンテナが起動していないのでレスポンスに少し時間がかかってしまうのは仕方ないですね。</p> <h3 id="cloud-sql">Cloud SQL</h3> <p>データベースの本番環境は<a href="https://cloud.google.com/sql/">Cloud SQL</a>(PostgreSQL)を使っています。 普段の仕事でも使っているRDBが自分としては使いやすいの選びました。</p> <h2 id="その他に利用しているサービス">その他に利用しているサービス</h2> <ul> <li> <p><a href="https://github.com/features/actions">GitHub Actions</a><br> CI/CDツール。バックエンドのデプロイに使っています。</p> </li> <li> <p><a href="https://firebase.google.com/docs/auth/">Firebase Authentication</a><br> ログイン認証のため。</p> </li> <li> <p><a href="https://domains.google/intl/ja_jp/">Google Domains</a><br> ドメイン取得のため。なるべくGCPにサービスを寄せている。</p> </li> </ul> https://www.yuyagishita.com/indiedev/senryu/ Sun, 20 Sep 2020 22:04:18 +0900 https://www.yuyagishita.com/indiedev/senryu/ <p><img alt="senryu" loading="lazy" src="https://www.yuyagishita.com/img/senryu.png"></p> <p>今回はじめて個人開発でアプリを作りました！！今年の1月に個人開発をしようと考えてから、アプリ企画・技術選定をして、開発途中で作るアプリを変えたりと色々と迷走しましたが、なんとか一区切りつきました！！（8か月ぐらいかかるなんてチンタラやってたなあ（笑））</p> <p>開発したアプリや今まで考えていたことなどをまとめます。</p> <h2 id="アプリ概要">アプリ概要</h2> <p>川柳を共有することができるSNSアプリ「SENRYU」を開発しました。</p> <h2 id="機能">機能</h2> <ul> <li>ログイン</li> <li>ユーザー登録</li> <li>ログアウト</li> <li>川柳一覧表示</li> <li>マイ川柳一覧表示</li> <li>川柳投稿</li> </ul> <h2 id="フロントエンド">フロントエンド</h2> <h3 id="nextjsreact">Next.js(React)</h3> <p>フロントエンドにはNext.jsを利用しました。TypeScriptを使ってみたくて、TypeScriptと相性がいいReactを選択して、最近話題のNext.jsにしようと決めました。<br> Next.jsはルーティング設定が楽だし、SSG, SSR, SPAをページごとに設定できて便利だしと使って良かったなと思っています。ただ、認証はFirebaseやNextAuth.jsを利用して他のSNSアカウントとかでログインする実装にするのが楽だと感じました。</p> <h3 id="material-ui">Material-UI</h3> <p>ReactのUIコンポーネントライブラリであるMaterial-UIを利用してUIの基礎を作りました。簡単に見た目を整えることができるので、とても便利です。</p> <h3 id="styled-components">styled-components</h3> <p>Material-UIの見た目を調整したい時にCCS in JSのstyled-componentsを利用しました。TypeScript内でCSSを書けるので普段CSSとかを書かない僕には使いやすかったです。</p> <h2 id="バックエンド">バックエンド</h2> <h3 id="go-kitgolang">Go kit(Golang)</h3> <p>個人的にGolangを利用したかったのとマイクロサービス構成でアプリを作ってみたいという理由からGo kitを利用しました。使ってみた感想としてあまり日本語のドキュメントとかなく調べるのが大変でしたが、Golangにはホットリロードがあってコンパイルが速く言語に慣れれば開発スピードが上がりそうだなと思いました。</p> <h2 id="データベース">データベース</h2> <h3 id="mongodb">MongoDB</h3> <p>NoSQLを利用したことがなかったので今回利用しました。MongoDBの基礎的な知識を身につけることはできましたが、RDBMSよりもNoSQLを利用するメリットがあんまりわからなかったです。</p> <h2 id="開発環境">開発環境</h2> <h3 id="docker">Docker</h3> <p>マイクロサービス構成でアプリ開発をしていたので、それぞれのサービス毎にコンテナを作成しました。ローカルでDockerコンテナを立てて開発するときはVSCodeのRemote Containerが非常に便利でした。ぜひ使ってみてほしいです。</p> <h2 id="対象リポジトリ">対象リポジトリ</h2> <p><a href="https://github.com/yuyagishita/senryu-frontend">senryu-frontend</a><br> <a href="https://github.com/yuyagishita/senryu-user">senryu-user</a><br> <a href="https://github.com/yuyagishita/senryu-post">senryu-post</a></p> <h2 id="記事を書くまでの経緯">記事を書くまでの経緯</h2> <p>元々、今年の1月に他のサービス開発を考えていました。技術選定の時には</p> <ul> <li>Next.js(React)</li> <li>TypeScript</li> <li>Go kit(Golang)</li> <li>MongoDB</li> <li>Docker</li> <li>Github Actions</li> <li>AWS</li> <li>K8s</li> <li>マイクロサービス</li> </ul> <p>でアプリを開発してリリースをしようと思っていました。せっかくの個人開発だし勉強もかねて挑戦してやる！っていう気持ちで技術選定をしましたが、今思うとDocker以外はほぼ経験がなかったのでめちゃくちゃ無謀だったなと思います。（笑）<br> そんな感じで技術選定をしてから要件や仕様決めて開発を始めましたが、わからないことが多すぎで全然進捗がなかったです。。亀の足のような遅さでしたがなんとか進めていた 4月頃か5月頃に気づいてしまいました。<br> 「クラウドでK8s使うと金けっこうかかるやんけ！」<br> 今思うと当たり前だし、調査不足すぎだよ自分。。ということがあり、最初に作りたかったサービスは世にリリースするのが厳しいなと思いましたが、せっかくある程度までは勉強して作っていたので、違うサービスとして開発をしてGithubで公開してポートフォリオ的な感じにしようと決めました。<br> といった経緯で今に至ります。結果的には個人開発したアプリをリリースすることはできませんでしたが、Next.jsとGolangを学べたり個人開発の雰囲気を味わえたので良かったです。</p> <h2 id="最後に">最後に</h2> <p>個人開発はすべてを自分で考えないといけないので、とても大変ですが技術選定や作業の進め方など誰からも指図されずに好きなようにできるので、楽しいし学びが多いですね。</p>