<p>ずいぶんとブログをサボっております。<br>お茶です。<br>さて今回は、このポートフォリオサイトを<strong>マジで誰にも伝わらないアップデート</strong>をしたことについて書いていきたいと思います。</p><h1 id="h51db7864f2">マジで伝わらんアプデ</h1><h2 id="he0df481c38">何が変わったん？？？</h2><p>実は今回のアップデート、デザインや動作、見た目については<strong>何一つ変わっていません</strong><br>では、何を変えたのかというと技術選定を見直して新基盤へ作り直しました。<br><br>なに同じモン作り直しとんねん！！と言われそうですが、今回のリプレイスは個人的に有意義だったのでよかったポイントをまとめておきます。</p><h2 id="h269acc1424">爆速になった</h2><p>これまでのお茶.devは結構もっさりしていました。<br>GoogleのLightHouseというWebAppのパフォーマンスを計測できるサービスがあるのですが、以前の結果がこちらです。</p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/7de7ecbda3704c65819dcfcc20528c94/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-04-05%207.53.33.png" alt="" width="2880" height="1522"></figure><p>とっても残念な感じですね。<br>では、今回作り直してリプレイスした結果を見てみましょう。</p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/413d62aecbf64ee19f22711fbb5d62ac/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-04-05%207.35.00.png" alt="" width="2854" height="1588"></figure><p><strong>めっちゃ速くなりました！！！！！！</strong><br>アクセシビリティも大幅改善できています。<br>計測の結果は端末の性能や状態にも影響を受けるみたいですが、数回試したところ70~80前後の結果が返ってきているのでこちらは以前と比べて爆速になったと言えそうです。<br><br>これで回線が貧弱な場所や通信制限がかかった状態でも比較的スムーズにページが表示されやすくなっているはずです。</p><h2 id="h130ea34ea1">PWAになった</h2><p>PWAに対応しました。<br>PWAとはざっくりいうとWebアプリをネイティブアプリのように利用できる技術です。<br>お使いのiPhoneアプリやAndroidアプリと同じようにダウンロードして個別のアプリとしてこのポートフォリオサイトをみることができます(需要どこ？？？)</p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/28e6706007a84302b6ec504fba89ee6f/9MvVCKv2.jpg" alt="" width="1077" height="842"></figure><p>ページを開くとインストールのバーが出るのでそちらからインストールできます。<br>表示されない場合はブラウザのサイドバーを適当にゴニョゴニョするとインストールボタンがあると思うのでそこからインストールできます。</p><p></p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/a853a9d9be2948ccab71c7ada209ea19/s0PcO2GU.jpg" alt="" width="1019" height="576"></figure><p>やっぱり自分の携帯に自作アプリのアイコンが並んでいるとちょっとテンション上がりますね。</p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/c32ca12404c549389c9ba37175f49607/80Euqs9R.jpg" alt="" width="793" height="589"></figure><p>よければダウンロードしてみてください。</p><h2 id="h5c949d4c8d">具体的に何したの？？？</h2><p>lightHouseは具体的にパフォーマスやアクセシビリティの問題点を提示してくれるのでそれをベースにパフォーマンスチューニングをしていきました。</p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/52d047df49954e69b55635d975ae9975/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-04-05%208.31.18.png" alt="" width="1644" height="844"></figure><p>画像がデカさと表示の最適化、JavaScriptの量をダイエットするのを目標に作業をしていきます。</p><h2 id="hdd19bf8ee2">画像最適化</h2><p>画像サイズがそもそもデカすぎるので圧縮しました。<br>圧縮にはGoogleが提供しているsquooshを使ってwebp形式へ圧縮変換しました。<br>肉眼で違いがわからない範囲で大きく軽量化できたと思います。</p><ul><li>Squoosh<p><a href="https://squoosh.app/">https://squoosh.app/</a></p></li></ul><p>あとはNext.jsとVercelを使っているのでImageタグを素直にNextImageに置き換えました。<br>使える環境は限られますが、ざっと置き換えるだけでレイアウトシフト,遅延ローディングなどサクッと最適化できるのはとても便利です。</p><h2 id="h48025b509e">ChakraUIを剥がす</h2><p>コレが一番効果あったと思います。<br>元々お茶.devはChakraUIを利用して作ったものでした。ChakraUIのスタイルはemotion(CSS in JS)に依存しているので必然的にJavaScriptの記述量が多くなり、ランタイム時に動的にスタイルが生成されるのでどうしても表示がもっさりしてしまいます。<br><br>CSSフレームワークは便利ではあるのですが、<br>タグのprops上に直接styleをガシガシ書き込まれるとテンプレートが汚れて非常に読みづらくスタイルのリプレイスには苦労しました。<br>実装コストの高いコンポーネントがあるなどの事情があれば別ですが、今回は特段複雑なデザインがあるわけでもなくコンポーネントごとにスタイルを当てるのであればCSSModulesで十分なので現状CSS in JSに優位性はそこまでないと感じます。<br>特にページそのものに大きなJSのロジックは無かったのでスタイルを修正するだけで大幅にJSの量をダイエットできてよかったです。</p><h2 id="h7c99701f9e">Bunでmonorepo化</h2><p>今回のパフォーマンスチューニングとは関係ないのですが、yarnからbunに乗り換えました。<br>パッケージインストールやローカルサーバーの起動など動作が明らかに速くなったのでとても開発体験がよくなりました。<br>個別でお茶.devの管理ツールも作っていたのですが、リポジトリを一つにまとめたかったのでTurboRepoのモノレポにしました。</p><ul><li>TurboRepo<p><a href="https://turbo.build/">https://turbo.build/</a></p></li></ul><p>bunは非常に高速で便利なのですが、--filter機能やパッケージのインタラクティブアップデートが無いなどモノレポ上欲しいコマンドが足りなくてまだまだ発展途上の基盤だなと感じる部分が多かったです。<br>個人的にはストレスのない速度でnpm&amp;yarnから乗り換えて使うならpnpmで現状十分だと感じました。</p><p></p><h1 id="ha214098e44">まとめ</h1><p>ざっとモノレポの新リポジトリにリプレイスして、パフォーマンスチューニングをしてみました。<br>パフォーマンスのいいものを作るため考慮すべきことや事前に技術選定で時点で考えておかなければならないことなどいい勉強になったので個人的にこのリプレイスには満足です。<br>やっと初めてテックブログ的な記事をかけて嬉しいなと感じています。</p>

誰にも伝わらないアップデートをしました。

<p>2023年が終わってしまったので活動記録として振り返りをしておきたいと思います。</p><h1 id="h0b2bb79295">振り返り</h1><h2 id="h042cdbbf1a">2023/1月</h2><p>ちょうど1年前のお正月にメンヘラテクノロジーへjoinしました。<br><br>調子に乗って挑戦した起業家支援プログラムのビジコンみたいなものに友達と挑戦し見事敗北。<br><br>それ以降ひたすら子供向けプログラミングスクールの先生をしたり倉庫で段ボールを運んだり、鰻屋のホールのバイトをしながら趣味で夜な夜な個人開発をしていたので初めての実務経験にテンションが上がっていました。<br><br>お正月におもちをモチモチしながら環境構築をモチモチして過ごしました。<br><br>受託開発の案件にアサインされ、エンジニアデビューをしたお正月休みでした。</p><h2 id="hedaf8accbc">2023/2~3月</h2><p>お試しjoinの期間も終わり、受託開発と並行して映画とのタイアップアプリを作りました。<br><br>有名なホラー映画の「エスター」の性格診断アプリで初めてのtoC向けのアプリということもあり友達や知り合いからアプリで遊んだ感想をもらったりSNSでシェアされたり作ったものを楽しんでもらえた事がとても嬉しかったです。</p><ul><li>エスター診断<br><a href="https://esther.menhera-senpai.com/">https://esther.menhera-senpai.com/</a></li></ul><p><br>これまで個人で作ったものが他人に評価される事がなかったので今年の中でも思い入れが強いプロダクトだと思います。</p><h2 id="h2211f8c4dc">2023/4~6月</h2><p>エスターをリリースし映画も公開されました。<br><br>これまでは1月の後半の定期テスト以外はほぼ長期休暇の中お仕事ができていましたが、限界大学生なので新学期が始まり学業との両立可能な生活を探る期間になりました。<br><br>4月からは社内の管理画面のメンテや機能追加などの細々とした開発もするようになりました。<br>普段見ることのないサービスの裏側がどのように管理されているかを体験できて楽しかったです。<br><br>5月には東京でメンヘラテクノロジーのメンバーと初めてリアルで顔合わせしました。<br>普段のリモートとは印象がガラリと変わって面白かったです。</p><h2 id="h119ad36630">2023/7月~9月</h2><p>Nuxt.js製サービスをNext.jsへリプレイスすることになりました。<br>React力の修行やVueへの理解を深める意味で個人的にとても有意義でした。<br><br>新規サービスのDIALS2のPRアプリを作りました。内容としては恋愛心理テストです。<br>新しい試みとしてPWAとして実装しAppStoreでネイティブアプリとして配信するといったことを行いました。<br><br>参加するミーティングの数が増えたり、新メンバーの面談への同席などタスクの内容や幅が変化し始めました。<br>開発実装面以外の内容に触れる機会が多くなってとても楽しかったです。</p><h2 id="hf4208d5fae">2023/10~12月</h2><p>Appleとアプリの配信の審査でずっと英語でレスバしていました。<br>最終的にはなんとか審査が通りリリースする事ができました。</p><ul><li>DIALS2 - イケメンキャラと一緒に恋愛心理テスト<p><a href="https://apps.apple.com/jp/app/dials2-%E3%82%A4%E3%82%B1%E3%83%A1%E3%83%B3%E3%82%AD%E3%83%A3%E3%83%A9%E3%81%A8%E4%B8%80%E7%B7%92%E3%81%AB%E6%81%8B%E6%84%9B%E5%BF%83%E7%90%86%E3%83%86%E3%82%B9%E3%83%88/id6468646332">https://apps.apple.com/jp/app/dials2-%E3%82%A4%E3%82%B1%E3%83%A1%E3%83%B3%E3%82%AD%E3%83%A3%E3%83%A9%E3%81%A8%E4%B8%80%E7%B7%92%E3%81%AB%E6%81%8B%E6%84%9B%E5%BF%83%E7%90%86%E3%83%86%E3%82%B9%E3%83%88/id6468646332</a></p></li></ul><p><br>個人的に結構大変だったので(主にAppleとの口喧嘩が)みんなに遊んでもらいたいです。<br><br>11月には、東京工業大学で「ボッチ開発者向けチーム開発体験ワークショップ」というイベントがありました。<br>企画内容や当日使うサンプルコード、スライドや司会進行などガッツリと普段あまり担当することのない内容に触れることができて勉強になりました。このイベントについては別の記事を書きたいです。<br>//TODO: ぼっち開発イベントの記事を書く<br><br>翌週には、クソアプリハッカソンに参加しました。<br><br>初めてのハッカソン参加でしたがもくもくとみんなで作業をして、ワイワイと発表し合う空気感がとても心地よかったです。<br>アドカレに成果物について書いてあるのでよかったら読んでみてください</p><ul><li>架空請求クソタスク管理アプリ<p><a href="https://qiita.com/okamonster0615/items/067e88900b7bcb97f280">https://qiita.com/okamonster0615/items/067e88900b7bcb97f280</a></p></li></ul><p>その後も東京で全社mtgなどがあり、まだ会ったことのないメンバーなどと顔合わせできました。<br><br>新メンバーも増え、実装者としてのタスクだけでなくレビューする側になったり抽象度の高いタスクを担当することが多くなってきました。大変ではありますが、毎日できることが増えていく感覚があってとても楽しいです。</p><h1 id="h9006f5ed34">今後について</h1><p>ちょうどエンジニアデビューから1年が経ちました。一瞬にして終わった1年でしたが、ものすごく濃い1年を送れたと思います。<br>去年は、「やりたい！」と言ったお仕事をかなり自由にさせてもらえたお陰で幅広い経験が積めた年だったと思います。<br><br>今年は、振られたタスク以外の問題点や懸念点など自分自身の判断と行動で解決できるようになりたいなと思っています。<br>あとは、個人開発などをたくさんしてスキルの深さや、ちゃんとリリースをして完成させ切る力なども鍛えて行きたいです。</p>

2023年振り返り

<p><strong>「クソアプリ Advent Calendar 2023」の23日目の記事です。</strong></p><p><a href="https://qiita.com/advent-calendar/2023/kuso-app">https://qiita.com/advent-calendar/2023/kuso-app</a></p><h1 id="hcaa90397d4">作ったもの</h1><p>仕事を終わらせないと延々と架空請求をしてくるタスク管理アプリを作りました。</p><p></p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/ad1605cc64674b65ad536e51f11334af/F_oCXsvaYAEhB8f.jpeg" alt="" width="1200" height="666"></figure><p>※ジョークアプリなので悪質な意図はないです。</p><p>※機能自体はまぁまぁ悪質です。</p><h2 id="hd92040d0df">きっかけ</h2><p>ネットサーフィンをしていると広告を誤ってクリックしたり、怪しいリンクを踏んでしまって<strong>多額請求をされてしまう経験</strong>を皆さん一度はされたことはあるのではないでしょうか。</p><p>架空請求とわかっていても<strong>法的措置</strong>などの強い言葉や<strong>ゴリゴリに減っていくタイマー</strong>など結構焦ると思います。</p><p>タスクを登録してもついつい忘れてしまうタスク管理アプリにこの焦りをぶつけられないかという深夜のバグ発想の元このアプリは生まれました。</p><h1 id="h389e0f276f">機能紹介</h1><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/4df5f2efe52e49eabc481d711965e17a/F_oCXsvaYAEhB8f.jpeg" alt="" width="1200" height="666"></figure><p>基本機能は雑なカンバンボードみたいな構成です。</p><ul><li>未完了のタスク</li><li>進行中のタスク</li><li>完了済みのタスク</li></ul><p>のステータスでタスクを管理するシンプルなTODOアプリです。</p><h3 id="hdb0d56d754">タスク登録</h3><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/6b4f01a4590c4072ae1ab30269fade31/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-22%2018.33.15.png" alt="" width="2878" height="1582"></figure><p>モーダルからタスクを登録できます。</p><p>入力項目としてタスクの</p><ul><li>タイトル</li><li>詳細</li><li>期限</li></ul><p>を入力します。ジョークアプリなのに真面目に入力項目バリデーションしました(偉い)</p><p>追加ボタンを押せばタスクをを登録できます。</p><p>さあ</p><p>ここからが</p><p>本番です</p><p>・</p><p>・</p><p>・</p><p>・</p><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/f5853318167f4c0d84e73ee90574eb23/F_oCXtQa4AAy9r8.jpeg" alt="" width="1200" height="664"></figure><p><strong>キターーーーーー！！！！！</strong></p><p>めっちゃ架空請求をしてくれます。</p><p>支払い期日はタスクの期限となっていてリアルタイムで残り時間が目減りしていきます。怖いですね。</p><h1 id="h23061a5cab">技術構成</h1><ul><li>FrontEnd<ul><li>Next.js</li></ul></li><li>DB<ul><li>FireStore</li></ul></li><li>Hosting<ul><li>Vercel</li></ul></li></ul><p>お手軽でシンプルな構成になっています。</p><h1 id="hb2fb298eb1">こだわりポイント</h1><h2 id="h4d08c6b956">素の見た目は普通にする</h2><p>意図しないタイミングで請求されるのが一番ビビります。</p><h2 id="h72591925d6">コントラストをバキバキにする</h2><p>架空請求サイトを勉強した結果、純色バキバキの<strong>警告色・コントラスト</strong>にする一般的な架空請求のイメージに近づくことがわかりました。</p><p>うまく作りすぎるとただの巧妙な請求になってしまうので一目で</p><p><strong>架空請求だ！！！！！</strong></p><p>となる塩梅が難しかったです。</p><h2 id="he063b3c180">ブラウザバックは許さん</h2><p>架空請求のページはクソアプリなので閉じるボタンなどはありません。</p><p>だからと言ってブラウザバックされてしまうと簡単に請求ページを閉じられてしまいます。</p><p>そこで<strong>別のページ遷移</strong>するのではなく<strong>全画面のクソデカモーダル</strong>として実装しています。</p><p>これによってブラウザバックをすることでタスク管理画面に戻るという手段を封じています。</p><p>リロードをすれば閉じれるのですが、</p><p>今後<strong>PWA化するとブラウザのリロードボタンが表示されない</strong>のでさらなる嫌がらせが期待できます。</p><h1 id="h7dabb5418b">今後の展望</h1><p>今回クソアプリを作成作って反省点が色々出てきました。</p><p>その反省点を今後改善してクソの真髄に触れたいと思います</p><h2 id="h0b349bbf9b">SSL証明書</h2><p>架空請求をふっかけて来ているのにhttpsなのは内部的にクソさが足りない気がしました。</p><p>怪しいクソサイトは脆弱性があってナンボなのでサーバーレスな構成を崩しSSL証明書を剥がしてhttp化したいと思います。</p><h2 id="ha958e1e5cc">期限切れのタスクの表示を変えたい</h2><p>期限が切れても何も起こらなかったら焦りを煽り切れない気がします。</p><p>期限が切れるともっと焦るページを作りたいです。</p><h2 id="h7128e9ef60">PWA化したい</h2><p>現在はリロードをすると簡単に請求画面を閉じられてしまいます。</p><p>PWAをスタンドアローンで起動するとブラウザのツールバーは表示されないので請求画面を閉じられないようにPWA化したいです。</p><p></p>

OCHA.dev

OCHA .dev

PROFILE

SKILLS

HTML

CSS

JavaScript

TypeScript

PHP

Java

Python

MATLAB

Verilog

Express

React.js

Next.js

Three.js

MySQL

Apache

Firebase

Vercel

LaTeX

BLOG

CONTACT