100日間チャレンジを振り返る

こんにちは、[Yui](https://twitter.com/yui_active)です。

実は7月5日から**#100日後に話題のwebサービスを立ち上げるワニ**と称して、100日チャレンジをしておりました。
大した成果は出せなかったのですが、一応完走したということで、その間に作ったサービスとできるようになったことなどをまとめて書いていきます。

実際のモーメントはこちら→https://twitter.com/i/events/1281676911056314368?s=21

#スキルのマッチングアプリAllesの改良

https://nandemokokan.bubbleapps.io/
これはNoCodeツールbubbleで作りました。NoCodeとは言えど、結構DB設計などをちゃんとしてないとだめで苦労しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあえず先日リリースしたこちらに関して、改良をしました。<br>・携帯でマイページの文字が縦に表示されてしまう問題をなくした<br>・ログイン後、検索ページにいけるように<br>・誰も気が付かないような微妙なデザイン調整<a href="https://t.co/VKMgYANn7Z">https://t.co/VKMgYANn7Z</a><br><br>1日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/xtlKQduP1O">pic.twitter.com/xtlKQduP1O</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1279566914474344449?ref_src=twsrc%5Etfw">July 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

サービス内容としては、**スキルとスキルを交換しよう**というシンプルなもの。
例えば、英語教える代わりにプログラミング教えてね、みたいな用途を意図して作りました。

通知機能とかはつけたのですが、なんかバグってしまうときがあります。

このアプリを作って、これはwebアプリではなく、ネイティブアプリのほうが相性が良いなと思って、flutterを勉強し始めることにしました。

# baggage transfer様のHP制作（掲載許可済み）
これは5月頃に受けた案件です。
WPで作ったんですが、結構機能がもりもりなので、苦労しました。
完成したのが1日目のときなので、今回の100日間チャレンジにのせました。

このときに若干PHPでカスタマイズをしたりしました。
PHPははじめて触ったので文法のことなどは何もわからないのですが、（他の案件もあったので）WPのカスタマイズぐらいなら問題なくできるようになりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">・9か国語対応<br>・自動見積もり機能<br>・会員登録機能<br><br>もろもろ組み込んだサイトようやく完成！<br>多分PCの方がレイアウト綺麗と思う🙆‍♀️<br>依頼されたものやけど、良いサービスなので使ってみてね（公開許可済み）<a href="https://t.co/bEGZHlUOEc">https://t.co/bEGZHlUOEc</a><br><br>1日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/mzmt1Z9pQz">pic.twitter.com/mzmt1Z9pQz</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1279684107602030592?ref_src=twsrc%5Etfw">July 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# flutterの練習期間
このとき確かUdemyでflutterでtwitterクローンを作ろうみたいな教材を見ていたような気がします。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Googleログインの実装からその後が進まない件<br>なぜか@が入力できないからこの後の動きを確認できないｗｗ<br>@を入れないとメールアドレスとして間違ってると出るのに、@の入力だけができないｗ<br><br>利用：flutter, firebase<br><br>2日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/evb5VGBY6O">pic.twitter.com/evb5VGBY6O</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1279941130075860993?ref_src=twsrc%5Etfw">July 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ただまあ見てわかる通りflutterもわからない、firebaseもわからないで結局わからないことだらけでした。（それはそう）

#たなばたまつり

そんなこんなしてるうちに7月7日になりました！なんか七夕のアプリを作りたいと思い立ったものの、すでに時間は7月7日の朝。ちゃんとしたアプリは作れないことは明確だったのでPWAで簡単に作ることにしました。

そして完成したのがこれ。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">リリースしました！<br><br>面白いと思ったら拡散してもらえると嬉しいです。<br><br>七夕にクイズと大喜利で遊べるアプリです。<br>登録も一切不要なのでお気軽にどうぞ。<a href="https://t.co/t13D80OmXL">https://t.co/t13D80OmXL</a><a href="https://twitter.com/hashtag/%E4%B8%83%E5%A4%95%E3%81%A7%E9%81%8A%E3%81%BC%E3%81%86?src=hash&amp;ref_src=twsrc%5Etfw">#七夕で遊ぼう</a><br><br>3日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/BYF6zr3ECG">pic.twitter.com/BYF6zr3ECG</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1280333267871297536?ref_src=twsrc%5Etfw">July 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まあ見るからにクソアプリなのですが、1日で作った割には面白いかなと思います。（自分に甘い）

# flutter続き

引き続きflutterの勉強の続きをやります。
前回のflutterとfirebaseでのTwitterクローンは完成したことはしたのですが、firebaseが全くわからなかったので、とりあえずflutterのみを勉強し直すことにしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあえずここまで完成（flutter）<br>中身はif文で動くだけの仕組みです。（まだ仕組みできてない）<br><br>適当に作りすぎて性格診断のはずが３枚目に性格自己判断させているというｗ<br>5日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/RlWpYuwskk">pic.twitter.com/RlWpYuwskk</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1281380866976079873?ref_src=twsrc%5Etfw">July 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

めちゃくちゃ単純なクイズアプリを作りました。

一応完成させました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">クソみたいな性格診断アプリできた<br>中身は点数制にして独断と偏見で振り分けてる<br><br>6日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/H20Y9XreZd">pic.twitter.com/H20Y9XreZd</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1281663330457808896?ref_src=twsrc%5Etfw">July 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 自分のお仕事用HP作る

そういえば私お仕事用のHPないな？ということに気がついて合わてて作ることにしました。
web制作の案件でなれてたのですぐにできました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">自分のPRページ完成！<a href="https://t.co/BJxQUSfjLm">https://t.co/BJxQUSfjLm</a><br>制作時間約5時間半です。<br><br>お仕事下さい。<br><br>6日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/q0x6ikfoz9">pic.twitter.com/q0x6ikfoz9</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1281939245448302593?ref_src=twsrc%5Etfw">July 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 3つめのflutterアプリ
簡単なものですが3つめのflutterアプリを作りました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">進捗<a href="https://twitter.com/kboy_silvergym?ref_src=twsrc%5Etfw">@kboy_silvergym</a> さんのYouTube見て作った<br>合計3つ簡単なアプリ作って、大体見た目部分は理解してきた気がするので、次からfirebaseと繋いでいきたい。（最初に先走ってfirebaseと繋いだ結果分からんくなったので、今度は慎重にいきたい笑）<br><br>8日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/xZBLImTgkX">pic.twitter.com/xZBLImTgkX</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1282365411648892929?ref_src=twsrc%5Etfw">July 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これでなんとなくflutterの見た目部分だけはなれてきたような気がします。

# Vue.jsの案件が決まる

そんなこんなしてるうちに案件が決まりました。
初の準委任契約です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">転職できないしもうニートで生きてくかと思ってたけどコードレビュー付きのwebアプリ開発案件決まった👀<br><br>過去に新規メディアの共同開発してたことと趣味で星占いAPI作ってたことが評価されたらしい。<br><br>なにかしらはしとくものだな。<br><br>10日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1283303324427538432?ref_src=twsrc%5Etfw">July 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

※余談ですが、私はもともと大阪で旅行会社で働いていて、エンジニアとして内定が出た＆私生活の都合上東京に行くことになったので仕事を辞めて8月から東京の予定でした。が、6月にコロナの影響で内定取り消しになってから転職活動がうまくいってませんでした。

もうニートになるしかない！とやさぐれてたので助かりました。

とはいえ、Vue.jsははじめて触るので、flutterそっちのけで勉強することにしました。

# Vue.jsで初アプリ完成

とりあえずUdemyで良さそうな教材を買って、Vue.jsを勉強してたら2日ぐらいで初アプリ完成しました。
Vue.jsは簡単にレイアウト整っていいですね。
このときにちょっとだけfirebaseを再度使いましたが、前にflutterで若干使ってたので、認証機能ぐらいは簡単に実装できました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">案件で必要になって一昨日から急遽勉強してるVue.jsの進捗状況です。<br>データの編集、更新が出来るようになった。<br>（ありがとうUdemy）<br><br>12日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/4GHRJ6ZKVK">https://t.co/4GHRJ6ZKVK</a> <a href="https://t.co/g8u3x0kkhd">pic.twitter.com/g8u3x0kkhd</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1284032827298852864?ref_src=twsrc%5Etfw">July 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ビルドした！！<br>Vue.jsでの初アプリ（なお練習用に作っただけのUdemyで見たままのアプリ）<br>ログイン、連絡先の追加、編集、削除が出来る。<br><br>12日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/45Ci5CIAm2">https://t.co/45Ci5CIAm2</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1284059199870132224?ref_src=twsrc%5Etfw">July 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# Vue.jsをもっと勉強する

上記ではVuetifyを入れてサクッと作っただけだったので、細かい部分の書き方はわかってませんでした。
なので、再度初心に戻ってv-bindの動きなどを確かめます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なんとなく動きがつかめてきた<br>v-onで書けるの便利だな<br><br>13日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/WOa3971y2W">https://t.co/WOa3971y2W</a> <a href="https://t.co/2ZT1VjXzeM">pic.twitter.com/2ZT1VjXzeM</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1284193153160019968?ref_src=twsrc%5Etfw">July 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

埋め込みやスライダーなどもできるようになりました。
このへんで、公式ドキュメントの読み方とかがなんとなくわかってきます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Vue学習しんちょくです。<br>Youtube埋め込みとスライダーなど出来るようになったよ<br><br>16日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/I8BaSpOSSn">https://t.co/I8BaSpOSSn</a> <a href="https://t.co/vZgvwTO2Xo">pic.twitter.com/vZgvwTO2Xo</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1285880472149659650?ref_src=twsrc%5Etfw">July 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# flutterほとんどしなくなる

flutterも地道に進めてたんですが、ちょっと案件の都合上時間が取れなくなり（言い訳）この発信の後はflutterに触ることはほとんどなくなります。

でも結構楽しかったので、またちゃんと勉強して今度こそはアプリを出したい！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">flutterも地道に勉強進めてます。<br>難しくてUdemyで同じところを5回ぐらい繰り返して見てる・・。<br><br>18日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/9lENKppbVq">https://t.co/9lENKppbVq</a> <a href="https://t.co/zvbMR6hpXC">pic.twitter.com/zvbMR6hpXC</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1286355019852382210?ref_src=twsrc%5Etfw">July 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 素のJavaScriptを使ってゲームを作る

Vue.jsで案件を進める中で、そもそもJavaScriptの知識が足りないと感じたので、基本から勉強し直すことにしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ちゃんと修正しました。<br><br>でもレイアウト整えるの疲れてしまったからもう良いかな・・。笑<br>23日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/mPl2n2LesE">pic.twitter.com/mPl2n2LesE</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1288473736627146755?ref_src=twsrc%5Etfw">July 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一応github pagesで公開はしたんですが、途中でやめた関係でかなりの糞レイアウトなので、見るときは自己責任でお願いします。（https://yuikoito.github.io/game/）

でもこんな単純なものですが、結構学びになることは多く、実際の案件では結構書けるようになりました。

# 英語でBot作る

こうしてる間に登壇に呼ばれたので参加する用の簡単なBotを作りました。5分ぐらいで作ったので本当にクソ。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">多分わりと会話にならないことも多いとは思いますが、お暇な方ぜひ英語で話しかけてください。<br>作業時間5分ぐらいの本当にスクリプトを埋め込んだだけのものです。<a href="https://t.co/ok2bBfumur">https://t.co/ok2bBfumur</a> <br><br>26日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/yGIiUKCAN4">pic.twitter.com/yGIiUKCAN4</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1289449623891795969?ref_src=twsrc%5Etfw">August 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# TODOアプリリリース

puzzllyさんで講座を出すことになったのでそれ用の簡単なTODOアプリを作りました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">todoistみたいなの作りました。<br>シンプルながら結構デザイン組んだので、少し効率の悪い作り方をしてしまったけど良い勉強になった！<a href="https://t.co/NCnOxwWcjd">https://t.co/NCnOxwWcjd</a><br><br>37日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/F99c2b4aME">pic.twitter.com/F99c2b4aME</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1293472471962677248?ref_src=twsrc%5Etfw">August 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ネコリスリリース

またまた遊びでJavaScriptを使ってテトリスならぬネコリスを作りました。
（PCのみ対応）
このときにcanvasをはじめて使いました。簡単に表示ができて面白いですね。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">まったくレイアウト整えてないけど、とりあえずあげときます。<br>よければ遊んでね。ネコリス。<br><br>PCの←→↓キーで移動します。↑を押すと回転。<br>消すごとにだんだん速くなる。<br><br>46日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/Jyi7QWymiL">https://t.co/Jyi7QWymiL</a> <a href="https://t.co/9J3GHgEH0z">pic.twitter.com/9J3GHgEH0z</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1296717663201157120?ref_src=twsrc%5Etfw">August 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを利用してのいのちのテトリスも。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">いのちのテトリス作ったぜ<br><br>50、51日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/PVthmWGRSK">https://t.co/PVthmWGRSK</a> <a href="https://t.co/2Hfd4E3Zgu">pic.twitter.com/2Hfd4E3Zgu</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1298450924378230785?ref_src=twsrc%5Etfw">August 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# しばらく発信サボる

この辺あんまり詳しく書くとあれなので書きませんが、受けた案件が炎上しまして。笑
本当に時間が取れなくなったのでいのちのテトリスの後3週間ぐらい発信をサボりました。

# 最後につくるアプリ決める

やっぱこのままじゃだめだと思って最後につくるアプリを決めました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こういうの作ることにした。<br>100日間に合わんなあ・・ｗ<br><br>82〜87日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a> <a href="https://t.co/a524HvgObh">pic.twitter.com/a524HvgObh</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1312034047372058624?ref_src=twsrc%5Etfw">October 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ほんやくんリリース

webアプリが間に合わないと思ったので、せめてということでLineBotをリリースしました。
結構話題になって嬉しかったです。
多分制作時間は10時間ぐらいですが、時間をかけたアプリが偉いわけじゃない！と自分を奮い立たせて発信しました。
（内心はこんなのリリースしてごめんなさいという気持ちだった）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画像を送信するだけで、勝手に画像内の言語を認識して何でも日本語に変えてくれるLineBot作りました！<br>英語、中国語、ドイツ語、フランス語あたりは動作確認してます！（他の言語でもOK）<br>良いな〜と思ったら拡散してもらえると嬉しいです！<br><br>これからwebアプリ化もします！ <a href="https://t.co/PrAG1o1gHO">pic.twitter.com/PrAG1o1gHO</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1313055726730792965?ref_src=twsrc%5Etfw">October 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#Pic Translatorリリース

絶対に間に合わないと思ってたアプリですが、無事リリースできました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ボタン一つで写真から文字起こししたり、母国語に翻訳するアプリ作りました！！<br>ボタン一つでコピー可能、多言語に対応してます。<br>登録不要で利用できます。<a href="https://twitter.com/hashtag/PicTranslator?src=hash&amp;ref_src=twsrc%5Etfw">#PicTranslator</a><br>拡散してもらえると私が喜びます！<a href="https://t.co/A28rXwMMB5">https://t.co/A28rXwMMB5</a><br><br>100日目<a href="https://twitter.com/hashtag/100%E6%97%A5%E5%BE%8C%E3%81%AB%E8%A9%B1%E9%A1%8C%E3%81%AEweb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B%E3%83%AF%E3%83%8B?src=hash&amp;ref_src=twsrc%5Etfw">#100日後に話題のwebサービスを立ち上げるワニ</a></p>&mdash; Yui☁個人開発 (@yui_active) <a href="https://twitter.com/yui_active/status/1316547840995278848?ref_src=twsrc%5Etfw">October 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらに関しては詳細は[リリース記事](https://qiita.com/Yui_active/items/717c00d642705875792a)に書いたのでよければ読んでください。

これにて、100日間の挑戦は終わりました。

# できるようになったこと、できなかったこと

**できるようになったこと** 

+ React、TypeScript、Vue.jsを使って働くことになった
+ React、TypeScript、Vue.jsが何となく分かるようになった（仕事で使った）
+ 月収100万超えた（上記の案件により　※1ヶ月だけなのでボーナス月）
+ SSRとCSRが理解できるようになった
+ 簡単なwebアプリなら1週間ぐらいでリリースできるという自信ができた
+ API接続完全に理解した
+ 公式ドキュメントを読めるようになった（今まではわからなさすぎて途中で眠気が来てた）

**できなかったこと**

+ 結局ネイティブアプリリリースできなかった
+ flutter理解できなかった
+ firebase認証機能しかわからなかった

# 感想
上記の通り、大したことはできなかったので、正直悔しいです。

ただ、私生活も入れるなら、少なくとも経済的には死なない程度のお仕事はエンジニアとして入るようになったので、自分に甘く、まずまずの結果だったということにしておきます。

もし次回するとすれば、次は100日間で写経をする、とか、●●のアプリをリリースする、とか、**何かひとつの目標**に対して進めたいなと思います。