2025/02/15 ~ 2025/02/16日に桃山学院大学で開催された58ハッカソンにメンターとして参加してきました<h1 id="hded64231b7">58ハッカソン</h1>58ハッカソンとはProgateさんとGONENGOさんが主催している学生ハッカソンイベントで会場に宿泊することができ、2日間夜通しで開発を行うことができます。 <a href="https://58hackathon.connpass.com/event/340146/">https://58hackathon.connpass.com/event/340146/</a> メンターも宿泊することができるので、2日間夜通し含めてミッチリと学生さんたちと開発したりディスカッションしたりすることができて楽しかったです。<figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/789a32c0c6e04a1aa51792cbe4fd6642/Gj1uZlxbMAAmme2.jpeg" alt="" width="2048" height="2017"></figure>みんな眠い目を擦りながらも熱い開発をしていて最高でした！<h2 id="hd92040d0df">きっかけ</h2>自分自身が関西に住んでいて関西開催であったというだけでなく、 スーパーハムスターでは、ProgatePathでインターンの求人をさせて頂いています。 自分もProgatePathからの参加者と面談をする中でとてもレベルの高い学生さんが多いという印象を感じていました。 実際に技術力の高い学生さんや熱意の高い学生さんに弊社を知ってもらえる機会であると同時に、自分自身も最近まで学生であったことからもっともっと技術の話や交流がしたい！という思いもありメンターとして参加させていただきました。<h2 id="hff0ad2574d">参加レポ</h2>とにかく学生さんの持っている技術レベルがとても高いなと感じました。 <ul><li>WebRTCを用いた通話実装</li><li>Web3や物理的カードやBluetoothで物理デバイスと連携したアプリ</li><li>バックエンドフレームワークにHonoを採用</li><li>画像認識,形態素解析を駆使したアプリ</li><li>CI/CDなどの環境整備</li><li>さくらAppRunをいち早く採用(ココ大事！！！)</li></ul>学生さんたちがみんなで出すアイデアの柔軟性や技術的な課題解決する姿から、実務を続けていく中で徐々に忘れかけていた初心や作りたいものを思い描いて片っ端から持っているスキルをぶつけて行く情熱的な姿勢や新たな技術の積極採用などの好奇心の大切さを改めて実感しました。 気持ちとしては、メンターとしてだけでなくめちゃくちゃプレイヤーとして参加したい気持ちになっていましたが個人的にも本当にいい刺激になりました。ハッカソン開始の結構早い段階でCANTERBURYチームに囲い込んでもらったので比較的関わる時間が長かったのですが、インプットがとんでもなく早く 少し一緒に作業しただけで、午前中にはメンバーの多くが初めてのHTML・CSSといった段階から、初めてのnpm install,初めてのGitHub,初めてのSvelte kitという調子で午後にはプルリクエストが飛びまくりメンバー間でレビューしまくるという目まぐるしい成長を遂げていました。 個人的な目標としてもこのハッカソンで成長をグラフにした時に微分不可能な2日間にして欲しいと思っていたので、どんどんできることが増えていくのを見ていてとても嬉しかったです。<figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/a5bf01837bab4e4f8f5f66e1441937c4/Gj4rOAba4AAkQD2.jpeg" alt="" width="2048" height="1365"></figure>最終的にはワードウルフをコンセプトにしたアプリを完成させました！すごい！！<h2 id="hd1797ee1b9">おめでとう</h2>なんと！初心者中心のCANTERBURYチームでしたが、周りの技術レベルも高い中 企業賞としてサーバーエージェント賞を受賞しました！！本当におめでとう！！<figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/adcd11fb166147cfb2a06e0622824d96/IMG_6010.jpg" alt="" width="4032" height="3024"></figure> もちろん他のチームも本当に最高に面白い素晴らしいプロダクトを作っていたのでまた機会があればメンターとして関わりたいなと思いました。<figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/f53dbc6ed5b8495c8d2e524b08007023/Gj5jePqbgAA-dpX%20(1).jpeg" alt="" width="2048" height="1536"></figure><h2 id="ha214098e44">まとめ</h2>スーパーハムスターとしても個人としても本当にいい刺激をもらえたなと感じました。 今回実際にふれあった体験をもとに、もっともっとインターンに参加してもらえるような取り組みを行なって皆さんと熱い開発を一緒にしたいなと思いました！

58ハッカソンにメンターとして参加しました

全然ブログ書いていなかったです。年が明けたので2024年の活動記録振り返りです。<h1 id="h0b2bb79295">振り返り</h1><h2 id="hdd98c0e552">2024/1~3月</h2>メンヘラテクノロジーでフロントエンドしてました。マジで記憶ないです。 めっちゃ大学とお仕事の両立で悩んでいたのと忙しかった記憶しか残ってないです。 記憶が正しければまだDIALS2のリプレイスをしていたかな？？ AppStoreへの配信でAppleとバトっては修正を繰り返していたような気がします。 WebアプリをPWA化してネイティブアプリとして配信するノウハウがこの一件でかなり蓄積したと思います。 通話機能などデバイスの固有機能にアクセスするようなアプリだったのでこれまでの申請より審査の返答内容や修正が複雑になったり難しかったですがモデルケースとして知見が得られてよかったです。 <ul><li>DIALS2 <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%82%B9%E3%83%88%E3%81%A8%E9%80%9A%E8%A9%B1/id6470936682">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%82%B9%E3%83%88%E3%81%A8%E9%80%9A%E8%A9%B1/id6470936682</a></li></ul><h2 id="hf1d271672b">2024/3~6月</h2>この時期から株式会社メンヘラテクノロジーから株式会社スーパーハムスターという会社に所属が変わりました。 業務内容としては変わらず、自社プロダクトの開発と受託開発です。 あるマッチングアプリの受託開発をしていました。 そんなにメンタル的に病むタイプでは無いのですが、学業と仕事の両立が現実的に不可能だと感じて悩んでいた時期です。 どれだけ時間を絞り出して稼働しても、仕事のパフォーマンスは上がらず、量もこなせなければ質もダメみないな状況が続いていました。 そんな状況でもちろんまともに学業など出来るはずもなく、どれだけ必死になっても仕事も勉強もクオリティが日に日に落ちていくのがとても辛かったです。 この時期は皆さんに本当にご迷惑をお掛けしたと思います。支えてくださった方々本当にありがとうございました。 最終的に6月に大学を中退する決意をしました。 それそのものが悪ではないのですが世間一般の価値観として大学中退の学歴は一生付いて回るものですし、自分の将来に大きく影響する事なので最後の最後まで悩んで考えた上で決めました。 それなりに学びたいことや志を持った上で大学に編入学したつもりではあったので、自分の中で重たい決断でした。<h2 id="h356092a49b">2024/7~8月</h2>大学前期終了とともに下宿先の家を引き上げて実家に戻ることになりました。引越しです。 役所手続き、大学関連手続き、その他色々バタバタしていました。学業であっぷあっぷしていた頃に拾えていなかった技術的なトレンド情報や言語のリリースノート、ドキュメントなど一気に読み漁りました。単純に決まった設計通りに実装するのではなく、DB設計やアーキテクチャ構成などに変更を加える実装を持つことも多くなってきたので自分の設計力を鍛えるためにアーキテクチャやデザインパターンの勉強をし始めました。この辺りは勉強をしても一朝一夕で実践できる訳ではないので、早い段階で知識として入れておいて常に意識しながら実装する &amp; 定期的に学び直すのを繰り返すのが大切だなと思います。 よくフロントエンドはトレンドに乗っかった使い捨ての技術ばかり追っていると揶揄されることもありますが、アーキテクチャや設計、デザインパターンは今後ずっと付き合っていく知識なので今年一番勉強してよかったなと思いました。 <ul><li>CleanArchitecture オススメ！ <a href="https://amzn.asia/d/7ZADUqj">https://amzn.asia/d/7ZADUqj</a></li></ul><h2 id="h6e4912a837">2024/9~11月</h2>やっとフルタイムらしいフルタイムになり始めました。自由の身です。 仕事に割ける時間もグッと増えたので特定のプロジェクト内のメンバーとしてタスクを消化するだけではなく、社内の様々なプロジェクトを横断しながら課題解決を行うことが多くなりました。 「お茶くん、どのプロジェクトにも大体いるよね」と言ってもらえたので短期間の間で沢山のプロジェクトに関われて嬉しかったですし、全く内容の違うプロジェクトを同時並行で追いかけることになるのでとても鍛えられてる感があって楽しかったです。 これまで学生との兼業だったとはいえ2年目なので会話内でキャリアのお話とかが出てきたりし始めました。 勢いでエンジニアになった自分は、エンジニアの役職名とかカタカナとアルファベット並んでてよく分からんマンだったので 「おお、社会人っぽい」ってなりました。マネジメントの道へ進むか、プレイヤーとして技術専門職へ進むか今後をぼんやりと考え始めるきっかけになりました。 自分としては技術が大好きで、もっとフロントエンド、バックエンド関係なく技術を追求して課題解決や提案をしていきたいなと思っているので技術専門職を目指したいです。 <ul><li>スタッフエンジニアへの道<ul><li><a href="https://speakerdeck.com/snoozer05/sutatuhuenzinianodao-the-staff-engineers-path">https://speakerdeck.com/snoozer05/sutatuhuenzinianodao-the-staff-engineers-path</a> </li></ul></li></ul>目標は宣言しておいてナンボだと思うのでスタッフエンジニアを目指して頑張ります！<h2 id="h35bdbceec6">2024/12月</h2>久しぶりに東京へ行って普段お仕事でお世話になっているエンジニアさんたちと集まりました。 普段、技術の話をする相手も対面で実装し合う相手もいないので溜まっているモヤモヤ感やフラストレーションが一気に吹き飛んでめちゃくちゃ楽しかったです。 ありがとうございました！ 普段は関西にいるのでもくもく会や技術的な交流をしているエンジニアさんいらっしゃれば是非お友達になりたいです！ 本当に友達が少ない引きこもりなのでお友達になってください。<h1 id="h9006f5ed34">今後について</h1>2024年は学生生活に見切りを付けて傾いていた体制を立て直す一年だったと思います。 2025年は技術力、開発力の両輪を鍛えながら思い切り走り出す年にしたいです。 大学を辞めた選択が正解だったのか正直なところまだ答えは出ていませんが、この決断を正解にしていけるように行動していきたいです。

2024年振り返り

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

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

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

2023年振り返り

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

クソアプリアドカレ2023

どうもお茶です。 深夜テンションの勢いで記事を書いています。 母校の学祭に遊びに行ったので適当に語ります。<h2 id="h6c831a0bba">母校</h2>現在、琵琶湖の限界大学生の自分ですが元々は近畿大学工業高等専門学校(近大高専)という高専の出身です。 高専のことを知らない人も多いので説明すると、高専とは実践的な専門技術や知識を叩き込む<s>最高にロックな</s>学校になっています。 中学卒業後から入学しますが、高校や専門学校とは別の区分の教育機関で5年一貫で専門性の高い技術者を養成します。 卒業後は在学中の技術や知識を活かして就職したり、高専で取った単位を変換して大学への編入学が可能です。 近大高専は三重県名張市にある高専で毎年10月ごろに高専名張祭という学園祭が開催されます。<a href="https://sites.google.com/view/nabarisai-2023/%E3%83%9B%E3%83%BC%E3%83%A0">https://sites.google.com/view/nabarisai-2023/%E3%83%9B%E3%83%BC%E3%83%A0</a> <h2 id="he7b6245faf">寝坊して出発</h2>とりあえず、寝坊しました。前日の予報では雨予報だったので電車で行きましたが全然晴れていました。 琵琶湖の底から特急を使いマッハで名張駅まで向かいました。 <figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/13b7ff9a58b8470190c46d1c552096f5/xmc0r4.jpg" alt="" width="3000" height="1688"></figure><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/c0d98deee26c423b9936fbda6fe381c7/-bem8wn.jpg" alt="" width="2215" height="2953"></figure>駅前の江戸川乱歩のおっさんに挨拶をしてタクシーで近大高専へ向かいます。 倫理のテストの当日に寝坊をしてタクシーで学校に向かった朝を思い出しました(トラウマ)<h2 id="hefd73549ef">高専名張祭</h2><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/bb100d2f676f4686b8097d5e79b41ec1/-jh0t3b.jpg" alt="" width="3000" height="1688"></figure>めっちゃ楽しかったです。 同級生と合流しずっと同窓会ムードでした。途中で中退してしまった友達とも久しぶりに会えたので行ってよかったなと思いました。 お世話になった先生に挨拶をしたり、みんなでボードゲームをしたりして遊びました。 メンヘラテクノロジーでの普段の業務がリモートワークということもあり、人と会う機会が少ないので対面で人と遊ぶのが久しぶりでとても嬉しかったです。 普段ぼっちを極めているのでchatGPTとジャンケンをしているのですが、ボードゲームの順番決めのジャンケンで久々に人間とジャンケンをするのが尋常じゃなく楽しかったです。対戦ありがとうございました <h2 id="hbe9ba4f9c6">コップ製作体験</h2><figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/0589968cc1134dc1a16819757b82d493/9caaki.jpg" alt="" width="3000" height="3000"></figure>催しの中でコップの製作体験があったのでメンヘラテクノロジーのコップを作りました。 フリーハンドの割には綺麗に切り抜けたと思います。<h2 id="h3bcda3e6b0">最後に</h2>みんなでテスト終わりによく食べに行ったラーメンを食べに行きました。<figure><img src="https://images.microcms-assets.io/assets/4b103750d6e54c4882d195782b1cba05/2145cb80acdc442f9a766c9699674f13/oyepfn.jpg" alt="" width="3000" height="3000"></figure> 懐かしすぎてやばかったです。 日程によって会えなかった友達もいて残念でしたが、 普段はぼっちでも集まる機会があれば卒業後も変わらず仲良く遊べる友達がいるのは幸せだなと思いました。

母校の学園祭に参戦してきた

はじめましてお茶です。今回新たにポートフォリオサイトを作ったので、このサイトと自分について書いてみたいと思います。<h2 id="h357338ad68">生態</h2>名称: お茶学名: 岡本和輝属: ヒト属生息地: びわ湖の底普段は大学に通いながら株式会社メンヘラテクノロジーでエンジニアをしています。<h2 id="hb81062e674">習性</h2>常人より体内時計が約12時間ほど早い特性があり、超早寝、超早起きすることによって規則正しい昼夜逆転生活を送っている。<h2 id="hecb32a3c76">好きな技術</h2>Webフロント系中心に触っています。バックエンドもそろそろ体系的に学びたいと思っています。高専の卒業研究でThree.js扱った経験からWebGL,WebXRが今はマイブームです。<h2 id="h424394ac6f">このサイトについて</h2>何かしら目に見える形で成果物を置ける場所を作りたいと考えていました。個人開発物であったり、学習した内容の発信場所として今後も活用していければと思います。<h2 id="hb72367fcbf">ブログについて</h2>このブログを作った理由としては <ul><li>自分自身の勉強のためシンプルに学習のアウトプット先が欲しかったからです。 新しい技術を学習するだけでなく実際に実装してその時の困ったことや躓いた点など、書いた記事がこの先で資産として役立って行けばいいなと思いました。 まぁ、本当は<s>自分で作ったくせにその時のことを速攻で忘れるからドキュメント化したい</s>という意図もあります。 自分の作ったドキュメントが誰かの役に立てばモチベにも繋がるので、せっかく勉強するのならばブログという形で知識共有できればいいなという気持ちです。 </li><li>テックブログ書いてる人ってなんかカッコイイからつよつよでナウでヤングでトレンディな技術をめちゃんこわかりやすく発信してる人達がかっこいいので憧れました。 別にモテなくてもいいので、技術発信してカッコイイ人になりたいです(煩悩) </li></ul>技術記事だけでなく、雑な日常事もグダグダと書いていきたいと思っているので適当にお付き合いください。以上！ざっくりこんな感じです

OCHA.dev

BLOG