初めてのハッカソンの開発期間前や期間中での私の心境や、生活などをここに記しておきます。

だいたいキックオフ（開発開始）の1ヶ月半前くらいに出場を決めました。出場理由は「エンジニアとしての実績が欲しい」です。雑談や就活などで一つ話のタネにできればいいなと思っていました。そのためには何か賞をとっておきたいですよね。 もちろん目標は最優秀賞です。 2人チームとして出場しました。一緒に開発したチームメンバーは大学1年生の頃から一緒に大学生活を過ごした友人です。技術力も人間性も間違いないです。

ハッカソンが始まる前に友人から「ベンチプレスの挙上速度を測りたいけど、計測するデバイスが高価なので行えない。」という話を聞きました。 そこで、友人の不満を解決するための「ベンチプレスの挙上速度を計測するアプリ」というおおまかなアイデアが生まれました。 「ベンチプレスの挙上速度を計測するアプリ」についてチームメンバーと深掘りしました。 我々が考えたことは2つです。 ・過去の受賞作の特徴。 ・評価基準をどうアピールできるか。 目標は最優秀賞なので、最優秀が取れる作品を作成することに注力しました。 まず過去の受賞作を見て、共通点や特徴を調査しました。過去の受賞作品の多くは「ユーザーの動作からデータを取り、そのデータからソフトウェアの力でユーザーをサポートする」という特徴を持っていたように感じました。 ・バスケのシュート（ユーザーの動き）を評価するアプリ。 ・自分の姿勢（ユーザーの動き）をぬいぐるみと同期し、評価するアプリ。 ・筆の動きや力の入れ具合（ユーザーの動き）から書いた字を評価するアプリ。 逆に、web上で情報を入力して最適な筋トレ、食事、マッチングを提案するなど、ユーザー自身がデータを入力するようなアプリで目標達成することは難しいと考えました。 次に、作品が完成した時、評価基準をどうアピールすることができるかということを考えました。 新規性：世界で類似したサービスがない。 技術性：高度かつ新しい技術を使用している。 発展性：多くの人々が抱える課題を解決することで、その人々への波及効果が期待できる。 再現性：発表した作品のアイデア、機能が実際に動く。ユーザーが使いやすいようデザインされている。 これらのことを考えながらアイデアを出したり、それらをマージしたりして作品のアイデアが完成しました。 「ベンチプレスのVBT(Velocity Based Training)をサポートするwatchOSアプリ」です。

作品のアイデアが決まると、使用する技術もなんとなく決まります。今回の開発では、Swift、SwiftUI、CoreML、CoreMotionなどの技術を使うことが予想されたのでそれらの技術についての事前学習をしておきました。 事前学習をすることによって開発期間中はスムーズに開発できたと思います。

開発期間が始まると、我々は作品の核となる「ユーザーの動作からベンチプレスの動作を判定する」、「ベンチプレスの挙上速度を計測する」という機能を開発し始めました。 これらが実現できるかを早めに確認したかったのです。もし実装が難しそうならアイデアから考え直す必要があります。開発期間終了間近で「実装できなかった...」は避けたかったので、デザインやDP図の作成より先に作品の核となる機能を先に開発し始めました。 だいたい20~30時間かけて作品の核となる機能を開発しました。形になりそうだったので最初に決めたアイデア通り（ベンチプレスのVBTをサポートするwatchOSアプリ）の作品を作成することにしました。

次に作品の機能決めを行いました。 コミュニケーター(開発を手助けてくださるYahoo社員の方々)から「ターゲットユーザー、ターゲットユーザーが抱える課題、課題の解決法を決めると機能を決めやすいよ」というアドバイスを頂き、チームメンバーと一緒に実行しました。 出た課題の解決法から作品の機能を決めました。

作品の核となる部分を開発し、作品の機能が決まると、次にDP図とデザインの作成を行いました。発展性、再現性をアピールするため「ユーザーが必要なデータ」、「ユーザーが使いやすいデザイン」を意識してDP図とデザインを作成しました。

キックオフから6日後に、DP図とデザインを元に開発し始めました。使用技術の事前学習と、作品の核である機能の開発を行なっていたので比較的スムーズに開発することが出来ました。とは言ってもバグで時間を取られることもありました。しかし、30分ほど詰まったらチームメンバーに相談するなどで過度な時間ロスは防げたかと思います。チーム力も良かったですね。

ある程度開発が進むと、プレゼンテーションの準備に取り掛かりました。いくらすごい作品を作成したとしても、それが伝わらなければ意味がないですよね。作品が持つ4つの評価基準（新規性、技術性、発展性、再現性）をアピールすることを意識して、スライドとデモ動画の作成しました。

発表日当日は初めてのハッカソンということもあってか、緊張しました。他の参加者の発表を聞く前は最優秀賞を取れる自信がありましたが、他の参加者の作品を知ると、自信がなくなりました。それくらい素晴らしい作品を作成していました。 我々のプレゼンテーションは練習通り、上手く出来たと思います。（下記のURLでプレゼンテーションが見れます。

結果は最優秀賞を取ることが出来ました。結果を聞いた時、とても興奮しました。当然ですよね、1ヶ月半前から目標に向けて努力し続け、それが最高の形として現れたのですから。

ハッカソンの経験を通して「短期間で自分たちのアイデアを形にする技術力、プロダクト管理力」です。 短期間でアイデアを形にするには以下のことが必要だと考えています。 ・アイデアを具体的にし、タスクに分割し、優先度を付け、優先度が高いものから取り組む。(プロダクト管理力) ・難易度が高いタスクをこなす。(技術力) 作品の核から開発した(プロダクト管理力)、ベンチプレスの動作を検知する機械学習モデルを作成した(技術力)経験を経て、「短期間で自分たちのアイデアを形にする技術力、プロダクト管理力」を得ることができました。

振り返ってみて最高の出来事でした。ものづくりの楽しさを存分に味わったし、目標を達成できたし。 最優秀賞の特典としてHackDayに招待されたのでそれに向けてまた頑張りたいと思います。もちろん目標は優勝で。 そして何より、チームを組んでくれた友人や、ものづくりの素晴らしさを体験できる機会を与えてくださったYahoo社員の皆様などの、周囲の人々の力がなければこのような体験は出来ませんでした。本当に感謝しています。ありがとうございました。

Open HackU 2022 Spring Osaka に参加し、最終終賞を取ることができました。どのように開発期間前や期間中を過ごしたか、発表日の心境などについてなどを記します。

初ハッカソンで優勝した話

エンジニアは毎日パソコンを扱います。作業スピードが速いエンジニアとそうでないエンジニアの生産性の違いは大きいです。 インターンやハッカソン、勉強会などでつよつよエンジニアのターミナルを見ると、おおよその方は自分でカスタマイズしたターミナルを使っています。 まだデフォルトのターミナルを使用しているのであれば、この記事を読んでオリジナルのシェルを作りましょう！ さて、まずは完成までのロードマップを紹介します。

GUIとCLI ↓ Fish(Shell)をインストールする ↓ デフォルトShellをFishにする ↓ Iceberg, Rictyをインストール ↓ Fishの詳細設定 ↓ おわりに

GUI(Graphical User Interface)は画面上のアイコンやメニューバーなどをマウスなどのデバイスで操作できるUIです。直感的に操作することができるのでパソコンを扱うのに慣れていない人からしたら楽ですよね。 現在のパソコンのインターフェースは、ほぼすべてGUIを採用しています。

CLI(Command Line Interface)とは「端末エミュレータ(Macであればterminal)」と呼ばれる文字入出力ソフトウェアを介して、キーボードからコマンドやデータを入力をし、コンピュータを操作するUIです。すべての操作をキーボードで行います。 ドラマや映画などでハッカーが黒い画面に緑色の文字の羅列を打っているシーンがありますよね。あれはCLIでコンピュータを操作しています。

結論から言います。人生でコンピュータを合計数十時間程度しか扱わないのであれば、CLIよりGUIを使用した方がいいでしょう。上の学習曲線の通り、GUIの方が扱えるようになるまでの時間が短いためです。 しかし、エンジニアを目指す方、エンジニアの方々はCLIを使用すべきです。 CLIは ・キーボードからいちいちコマンドを入力しなければいけない ・&nbsp;数多くのコマンドとそれらの使い方を覚えなければいけない ・画面の出力も地味 (多くの場合単色で、文字だけ) でわかりづらい というデメリットがあります。 ある程度学習し、それらを克服することでGUIより圧倒的に作業効率が上がります。CLIの学習に費やした労力と時間は、後になって作業効率という大きなリターンが返ってきます。 ぜひ、CLIをマスターしましょう。

Fishである理由は以下の理由です。 ・シンタックスハイライトがすごい 入力中のコマンドにもシンタックスハイライトが効く。 コマンドやオプションが合っているか一目でわかる。 ・優秀なタブ補完 入力中にインタラクティブに補完が見える。 一度Fishを使い始めたら他のShellで作業することが難しくなります。

以下のコマンドでFishをインストールします。<pre><code>brew install fish</code></pre> 以下のコマンドでshellのパスを一覧してください。<pre><code>cat /etc/shells</code></pre> M1Macの方は/opt/homebrew/bin/fish が含まれていたら大丈夫です。

<pre><code>chsh -s /opt/homebrew/bin/fish</code></pre>を打つとFishをデフォルトのShellにすることができます。 chshはログイン時のshellを変更するコマンドです。 -s(--shell)はshellオプションと言ってシェルを指定するときに使います。今回はFish(/opt/homebrew/bin/fish)を指定しています。 さあ、terminalを再起動してみましょう！ Fishに変わっているはずです！

ここからはFishをカスタマイズしていきます。 デフォルトのままでいいのであれば、ここは飛ばして、Fishの詳細設定に行ってください。 Icebergは背景、文字の色を変えて、terminalをカッコ良くしてくれます。 フォントはRictyがおすすめ！RictyはLinux 環境での研究・開発を想定したプログラミング用フォントです。テキストエディタやターミナルエミュレータ、プログラミング言語やマークアップ言語に対する使用に適しています。 Iceberg, Rictyのインストールと適用は以下の記事が丁寧に説明しています。参考にして適用してみましょう。

FishにPATHを通すときは~/.config/fish/config.fishに<pre><code>set PATH /usr/local/bin /usr/bin</code></pre>のようにset PATHの後に通したいPATHを書き込むとFishにPATHが通るようになります。

Fishで<pre><code>fish_config</code></pre>と打つと、以下のような画面に遷移します。

ここではFishのシンタックスハイライトの色、プロンプトなどを変更できます。 自分ならではのFishを作成してみましょう！

さてみなさん、自分の好みのFishは作成できましたか？ちなみに私のオリジナルFishはこれです！

自分でカスタマイズしたFishでパソコンを操作することで作業効率、モチベーションを上げて、開発に取り組むことができます。 この記事がみなさんのエンジニアライフに役立つことを願っています😄

MacのデフォルトターミナルをFishに変え作業効率を上げる。Fishを自分の好みの見た目にカスタマイズする方法もここで紹介します。

MacのデフォルトターミナルをFishに

前回このTsuguBlogというWebサイトを作成した後、次はiosアプリに挑戦してみたいと思いました。日常的に触れているスマートフォンの中に自分のアイデアが入り、普段の生活を支えてくれるということに魅力を感じたのかもしれません。

iosアプリを作ろうと思ったもののどのようなアプリを作るかは全く決めていませんでした。自分が使いたくなるようなアプリでないとモチベーション維持が難しいです。なのでサブスクリプションの無料体験後も契約してしまい、料金が発生してしまった過去の経験から、サブスクリプションを管理するアプリを作成することにしました。

言語はTypeScriptを採用しました。 TypeScriptで開発をすることは初めてでした。最初はかなり使いづらかったです。propsに型をつけたり、この変数にこの型のデータは入れられません！といったエラーを受けてスムーズに開発できませんでした。めんどくさいからanyを型としてつけてしまったり... でも慣れると気持ちいいですね。自分で設定した型のデータ以外は受け入れ無い。それ以外入る恐れがあるとエラーで教えてくれる。そんなTypeScriptが好きになりました。 次回、開発するときも言語はTypeScriptで！ <a style="color:#2937ff" href="https://tsugu-blog.vercel.app/products/jamstack-blog" target="_blank" rel="noopener noreferrer">TsuguBlogを作成したときに書いた記事</a>で「次の開発からはTypescriptを使用しようと思います。」と未来の自分と約束しました。約束守れましたね。

iosアプリの開発で言語がTypeScript？？ はい、ReactNativeで開発しました。 ReactNativeの選定理由は以前から開発でReactを使用しており、学習コストが少なかったためです。 Reactを学習済みの人なら簡単にプログラミングすることができますよ。開発した感じ、大きな違いはありませんでした。

Expo はクロスプラットフォーム（iOS/Android/Web）で React Native アプリを開発するための便利機能を集めたプラットフォーム。 素のReactNativeで開発するよりも少し制限がかかりますが、その分めちゃくちゃ楽です。 僕は初め、Expoを使わずReactNativeで開発しようと思いました。しかし、初期設定で3日間費やして、挙句の果てにエラーを解決できず開発を始めることができませんでした。Expoを用いると、5分で開発を始めることができました。 個人的にバーコードを読み込むことで自分の携帯で開発中のアプリを試せるところが好みです。

初めてのiosアプリ開発ということもあり、とにかく時間がかかりました。 学習期間は1ヶ月程度なので学習期間を含めると約6ヶ月です。 途中で難しいエラーを解決できなかったり、自分の思い描く機能を実装することができなかったり。モチベーションが落ちてあまり開発スピードが落ちてしまうときもありました。しかし、「AppStoreに自分のアプリを並べたい」、「自分自身がこのアプリを使いたい」という気持ちでなんとか乗り越えることができました。 初めてのiosアプリ開発ながら、自信があるアプリなので是非インストールして、使用してみてください。 不具合、改善点などありましたら是非<a style="color:#2937ff" href="https://docs.google.com/forms/d/e/1FAIpQLScpz38vrQ4KgTqT_4oj69h1clGFJHwil1E8BqaRgGtpb-JUTw/viewform" target="_blank" rel="noopener noreferrer">manasubのお問合せフォーム</a>より教えてください。 今すぐ「manasub(マナサブ)」でサブスクリプションを管理してみませんか？

サブスクリプション、固定費を簡単に管理。
あなたは毎月どれくらいサブスクリプションにお金を使っていますか？
金額、支払日が一目瞭然！支払日三日前に通知で知らせてくれる機能も...

ReactNative(Expo)でiosアプリを作成

学習したことをアウトプットすることはエンジニアにとって大切ですよね。 フロントエンドに興味を持ち、React、Next.jsを勉強していた時から、アウトプットとして技術ブログを作成することを決めていました。 なぜ技術ブログをアウトプットに選んだのかって？ 僕のような開発の知識、経験がない方のお手伝いをこの技術ブログで出来たら良いなと思ったからですよ！！

言語はJavascriptを採用しています。 現在主流となっているTypescriptで書こうと思ったのですが、今回が初めてのプロダクト開発なので、使い慣れているJavascriptで開発しました。 次の開発からはTypescriptを使用しようと思います。

Next.jsは基本的に全てのページをPre-rendering(各ページに対してHTMLを予め作っておくこと)します。なのでパフォーマンスやSEOがより良い結果になります。 Pre-renderingには以下の二種類があります。 ・静的にサイトを作成するSSG ・リクエストのたびにHTMLが作成されるSSR SSGを使うことで表示速度を速くすることができ、SSRを使うことで動的コンテンツを扱えます。この点からNext.jsを採用しました。(あと今流行っているから...)

最近流行っているCSSフレームワークTailwindCSSを使用しました。 まずクラス名を決めなくていいので超楽です。 さらに、細かいレイアウトを簡単にできるという点もいいですね。 ただ、コードが長くなって可読性が低くなる点が...と思ったんですけど慣れたら案外大丈夫でした。

記事の内容、「ブログ」「プロダクト」の一覧画面の一部分はmicroCMSで作成しています。 さまざまなヘッドレスCMSがある中でなぜmicroCMS? ・国産なので日本語表記 ・<a style="color:#1d4ed8" href="https://blog.microcms.io/getting-started/" target="_blank" rel="noopener noreferrer">microcmsのブログ</a>にさまざまな情報が日本語で載っているので助かる(実際何度も助かりました) 色々な機能が追加され続けているので今後も期待ですね。

ホスティングサービスはVercelを使用しています。 Next.jsとVercelは同じ会社で作成されており、とても相性がいいです。無料でデプロイ、ドメインをカスタムすることができるという点がとても魅力的です。 Next.jsを使用する際のホスティングサービスはVercel一択です！！

初めてのプロダクト開発だったので結構時間はかかりました。 でも「このサイトが世界に配信され、誰かの助けになるのでは？？」と思いながら開発すると楽しかったです。 これからも「プロダクト」、「ブログ」を更新するので是非チェックしてみてください。

Next.js、TailwindCSS、microCMSでJAMstackブログを作成しました。