2022の15日目の記事です。こんにちは、yuiです。早いもので2020年の12月からエンジニアとしてのキャリアがスタートして丸2年がたちました。この記事ではこれまで作ってきた個人開発アプリをざっくりと振り返ります。※コードはとても公開できたレベルではないものも多いのですが、今更恥ずかしがっても仕方がないので供養も込めて公開できるものは公開します。おしゃべりマンhttps://twitter.com/yui_active/status/1313279939349639169?s=20&t=DqiLeFEc-2faeXimsxGg1gこちらはまだ旅行会社で働いているときにエンジニアとして働くことも特にイメージしないまま趣味で勉強しつつGASで作りました。これを作るためだけに2ヶ月ぐらい勉強したような記憶があります。これが初めての個人開発でしたが、このLineBotを作ったあとは普通に旅行会社で働いていただけで特に勉強をすることもなく、その後2年弱ぐらいはほとんど何もしていなかったのでエンジニアを目指すぞとなったときにはこの経験はびっくりするぐらい役に立ちませんでした。笑ただ初めて作ったということもあり、思い出深い一品です。技術記事https://qiita.com/yuikoito/items/04ccc89164c6bb57b09b2020年のクソアプリアドカレでアプリを作りきることができなくて、ちょっとだけ改善を加えて記事を書きました。APIネコリスhttps://twitter.com/yui_active/status/1296717663201157120?s=20&t=82bLsCNPM_ZyBib1fMnmFwhttps://yuikoito.github.io/TETRIS/猫の手形などで作られたテトリスが振ってくるアプリケーションです。当時はやっとhtmlやjsを理解したところでした。このレベルのものでも当時は全然書けなくて、めちゃくちゃ苦戦したのを覚えています。作成時期2020年8月リポジトリhttps://github.com/yuikoito/TETRIS技術スタックHTMLJavaScriptgithubホスティングPicTranslatorhttps://twitter.com/yui_active/status/1316547840995278848?s=20&t=-Y6YjVwzaprZ8dYL3B-2gAhttps://pic-translator.vercel.app/これは初めてちゃんと作ったwebアプリケーションでした。ボタン一つで画像から翻訳できたら便利じゃないかという思いから作りました。今だとありきたりな機能ですが、当時はあまりメジャーなものがなかったんですよね。Vue.jsに関してもほとんど初心者レベルだったので、状態管理どうしたら良いのかわかんなくて苦戦したのを覚えています。なんのことはないアプリですが、このアプリのおかげでエンジニアとして転職できました。何か作ったものを出しておくのは良いことですね。技術記事https://qiita.com/yuikoito/items/717c00d642705875792aリポジトリhttps://github.com/yuikoito/pictranslator技術スタックVue.jsvuetifyheroku→途中でVercelホスティングに切り替えすべてを爆発できるChrome拡張機能https://twitter.com/yui_active/status/1347886993733267458?s=20&t=DqiLeFEc-2faeXimsxGg1g初めての拡張機能作成でした。動きをなめらかにするのが難しかったです。この頃になるとだいぶコードを書くということに慣れてきたように感じます。技術記事https://qiita.com/yuikoito/items/3ff1d884fbe2cd991bfb技術スタックHTMLJavaScript塗り絵ツクールhttps://twitter.com/yui_active/status/1366738405904642048?s=20&t=DqiLeFEc-2faeXimsxGg1ghttps://nurie-maker.com/ボタン一つで塗り絵を作ることができるアプリケーションです。このときに初めて動的OGPなるものを組み込んでアプリを作りました。動的OGPには興味あったのですが、当時SSRやSPAという概念もわからず、なぜVue.jsだと動的にできないのだろうというところから調べて、なんとかSSRを理解してNuxt.jsで作った一品になります。作成時期2021年1月リポジトリhttps://github.com/yuikoito/nurie-creator技術記事https://zenn.dev/yui/articles/0507acb6cdc100バックエンドは夫がやってくれました。Componentshttps://twitter.com/yui_active/status/1398990248609161223?s=20&t=DqiLeFEc-2faeXimsxGg1ghttps://www.ui-components.com/毎回アニメーションを書くためにググってを繰り返していたので、自分用のコピペ集を作ろうと思い作りました。あとはこのアプリが個人開発で初めてのReact利用です。当時は仕事でVueメインで書いてましたが、Reactにも慣れたいと思っていたのでReactで書いてみました。このアプリでようやくTypeScriptを個人開発で導入することになります。今となっては型なしでは書けない体になってしまいました。作成時期2021年5月リポジトリhttps://github.com/yuikoito/ui-components技術記事https://qiita.com/yuikoito/items/1288fed0dcc24c71e159技術スタックReactTypeScriptSassVercel絵画ツクール(停止中)https://twitter.com/yui_active/status/1403347800151138306?s=20&t=DqiLeFEc-2faeXimsxGg1g初めての機械学習?系のアプリでした。処理をAWS上で動かしてAPI化しただけです。(営利目的ではないので大丈夫だとは思いながらも念の為に許可はとりました。)こういうOSSを公開してくれると非常に勉強になるので助かってます。こちらのアプリ、結構気に入っていたのですが、どうしても処理が重すぎて30秒のリミットを超えてしまうため、停止中です。Gateway)VercelGOHANhttps://twitter.com/yui_active/status/1406226902885433348?s=20&t=DqiLeFEc-2faeXimsxGg1g近くのごはん屋さんを教えてくれるLineBotです。LineDevelopersのLT用も兼ねて作りました。LineBotはこれ以外にも何十個と作ってきたのでいつものGASでサクッと作りました。APIポケモンAAツクールhttps://twitter.com/yui_active/status/1414458679110234116?s=20&t=DqiLeFEc-2faeXimsxGg1ghttps://poke.art-creator.net/これはまごうことなきクソアプリですが、LambdaでOpenCVを動かしたりと絶妙にめんどくさいことをしているアプリでもあります。このアプリ以前はOpenCVを使う系のものは夫にバックエンドをすべて担当してもらってたのですが、少しは私も理解したほうが良いということで、このアプリに関しては教えてもらいながらですが私がすべて作りました。APIを自作するのも初めてだったので難しかったですが何回か作ってるうちに少しだけ分かるようになりました。おかげでこれ以降Python+OpenCV+AWSの組み合わせで簡単なAPIは作れるようになりました。Gateway)漫画ツクールhttps://twitter.com/yui_active/status/1416788568186318849?s=20&t=DqiLeFEc-2faeXimsxGg1ghttps://manga.art-creator.net/ボタン一つで漫画化できるアプリです。ポケモンAAツクールで学んだことを忘れないうちに作りました。Gateway)表情筋チャレンジhttps://twitter.com/yui_active/status/1437600731356282885?s=20&t=W9KlOKcsKCiFK3i8bKLRjAhttps://face-expression-challenge.vercel.app/表情筋を鍛えるというよくわからんコンセプトのまま作ったアプリです。こちら初対面の人とどうしても無言の時間が続いた場合は「実は表情で遊べるゲームを作ったんですけどやります?」とコミュ障丸出しの誘い方をしてたまに遊んでいます。技術記事https://qiita.com/yuikoito/items/a0c588e19999e50f5a0bhttps://qiita.com/yuikoito/items/04e95735aa4340a11cf8リポジトリhttps://github.com/yuikoito/face-expression-challenge技術スタックNext.jsTypeScriptface-api.jsVercelEyedolhttps://twitter.com/yui_active/status/1467834998351089665?s=20&t=YtbTd8xIwFtHlrawzpwHmghttps://eyedol.vercel.app/目を大きくできるアプリです。Rekoginitionを使ったりしてちょっとだけ新しい挑戦をしています。Lambda)YOSOhttps://twitter.com/yui_active/status/1571347166375079936夫とハッカソンに出たときに一緒に作ったものになります。決勝まで行けて嬉しかったです。音声を録音してAPIコールをする部分でポーリング時に無限ループが発生しないようにしたりなど、音の扱いに関してはほとんど初めてだったので結構難しかったです。Speech結婚式のクイズアプリ動作イメージYouTubeのvideoIDが不正ですhttps://www.youtube.com/shorts/Ou9YuOuBsxU自分の結婚式用に作りました。ページの描画速度を意識したりと、かなり頑張りました。Reactで作ったのですが普通にCSRでデータを取得するとデータのロードが終わるまでの時間が長くて微妙過ぎたのでビルド時にAPIコールをしてデータを埋め込むスクリプトを書いたりなど、SSG的な動きになるように調整しました。Reviewer今はOpenAIを使ってコードレビューをしてくれるアプリを作っています。https://twitter.com/yui_active/status/1603154552269996032?s=20&t=oQISjP7EwSN_V-NxwCp1hQ大枠はできましたが、今はアイコン作ったりフォント考えたり、多言語化したりなどなど諸々調整中です。こちらは20日担当のクソアプリアドカレに出すつもりなのでそれまでになんとかします!!Mosaic自分以外、あるいは自分と友人以外、など登録した人以外の顔にモザイクをかけることができるアプリです。人混みの中で写真を撮ったときに背景に写り込んでしまった人がいる状態でSNSにアップしづらいというときに使うイメージです。APIは出来てるんですがデザインが追いつかず実装半分ぐらいで止まってます。刺繍ツクールこちらは友達のミシン屋さんと一緒にやっていて、例えば子どもが書いたかわいい絵を使ってかばんにしたりすることができるプラットフォームを作っています。写真を刺繍にできるレベルの簡単なイラスト化を行ってそれを刺繍にできたら楽しそうだなと思うので今はその写真→イラスト化の部分を実装しています。OpenCVだけだとどうしてもうまくいかなさそうで、機械学習を入れるのでモデルの作成とAWS上で動かす場合の30秒の壁をどのように突破しようかと考えています。おまけ〜TensorFlowを使ったDEMOアプリ達〜わざわざ個別で紹介するまでもないアプリたちの紹介をします。TensorFlowにハマっていて色々作った時期がありました。顔にマスクをかけるアプリhttps://twitter.com/yui_active/status/1396480098421850113?s=20&t=DqiLeFEc-2faeXimsxGg1g顔にマスクをかけるだけのアプリです。dev.toで出した記事では結構トレンドにのったりしました。当時TypeScriptとTensorFlowをあわせて使う場合に少しコツが必要なのに情報があまりなかったからかもしれません。技術記事https://qiita.com/yuikoito/items/b8062b9f89f72c6865edリポジトリhttps://github.com/yuikoito/mask-app気軽にバーチャル旅行ができるアプリhttps://twitter.com/yui_active/status/1419494821782114306?s=20&t=DqiLeFEc-2faeXimsxGg1ghttps://travel-app-three.vercel.app/背景を変更するアプリです。bodypixを使っています。技術記事https://qiita.com/yuikoito/items/bb9c40bbb673e4f71abeリポジトリhttps://github.com/yuikoito/tensorflow-bodypix-sample表情をアイコンで伝えるアプリhttps://twitter.com/yui_active/status/1424386546577313796?s=20&t=DqiLeFEc-2faeXimsxGg1ghttps://face2emoji.vercel.app/このアプリはTensorFlowを参考に作られているface-api.jsを使って作りました。技術記事https://qiita.com/yuikoito/items/a494402993ac4be46d97リポジトリhttps://github.com/yuikoito/face2emojiあとがき以上、今まで作ってきたアプリを振り返りました。思い出すことが多くてしんみりしました。2020年→2021年への移り変わりでできることが大幅に増えてて我ながら笑いました。いえ、まだまだできることは少ないのでもっといろんなアプリを作れるようになりたいものですね。ちなみに去年は色々細かいものも作りすぎて全ては書ききれなかったのですが、もし興味あれば1年間で作った18個のアプリの振り返りと行った5つの挑戦に関してという記事で書いてますのでお読みいただけると嬉しいです。私は作って覚えるタイプなので、今後も色々作りながら新しい技術を学んでいきます。他の個人開発エンジニアと比べると作ってるものがしょぼすぎて出すのが辛いのですが、作りながら幅を広げていこうと思っていますので見守ってもらえると嬉しいです💪ではでは、最後まで読んでいただいてありがとうございました〜!良ければ私のTwitterをフォローしてくれると嬉しいです!toffy(yui)都内でフロントエンドエンジニアをしています。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussiontoffy(yui)都内でフロントエンドエンジニアをしています。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。