この記事は株式会社富士通システムズウェブテクノロジーの社内技術コミュニティで、「イノベーション推進コミュニティ」
略して「いのべこ」が企画する、いのべこ Advent Calendar 2020の12日目の記事です。
本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。
ここまでお約束 
この記事を書いたきっかけ
私はこの冬、社内ハッカソンに参加しました。
この記事を書く直前までハッカソンで奮闘していて、惜しくも入賞は逃してしまったものの、非常に貴重な体験ができたと思っています。
この場を借りて、会社や、応援してくださった皆様、主催者・メンバーにもお礼を伝えたいと思っています。
そのハッカソンの場で、いろいろ事前研修などがあったり、自分たちで考え・実装をしたりする中で、
こんな便利なものがあるのか！もっとこんな技術を身につけておけばよかったな・・・と思ったりしたことがあったので、
そんな内容をここで共有し、これからハッカソンに参加してみたいと思う人の助けになればいいなと思っています。
どちらかといえばポエムっぽい内容になってしまいますが、ご興味のある方は覗いていただければと思います。
ハッカソンとは
ハッカソンという言葉はハック(hack )とマラソン(marathon )を合わせた混成語である。
というだけあって、hackしながらマラソンのように駆け回る期間でした。ちなみに私の参加していたハッカソンは１か月間ありました（長いような気がする）
期間中に自分たちでチームビルディング+課題設定(アイディア出し）+仮説検証+デモ作成など行わないといけないです。
テーマが設定されていたり、プラットフォームが限定されていたりもしますが、今回はプラットフォームの制限はありませんでした。
ハッカソンで使いそうな（使えそうな）技術
モックアップツール
実際のアプリを作るわけではなく、実物のように動きのある見本（模型？）を作ってみることで、
- 使用者がイメージしやすい
- 使用感のフィードバックを得やすい
などの利点があります。
Adobe DX
Adobeが提供するUI/UXデザイン/プロトタイピングツールです。
結構オンラインの教材が充実しているのと、1ドキュメントまでは無償で利用できます。
何より驚いたのは、作成したプロトタイプを実機（iPhoneなど）で試せることです。
MacにiPhoneをLightningケーブルで接続し、専用アプリをダウンロードして起動するだけで
作成したプロトタイプを実機で動作確認できます。面倒な設定は不要でした。
エミュレータも便利ですが、やはりタッチする体験は実機ならではなので、その体験がメインのプロダクトにはもってこいかもしれません。
Prott
こちらはWebベースで使えるプロトタイピングツールです。
iOSアプリ/Androidアプリも用意されているそうです。
クラウドサービス
IaaS/PaaSなどのクラウドサービス全般
どれか１つぐらいクラウドサービスが使えると便利です。
AWSでもGCPやHerokuなど、どれか１つは準備しておいたほうがいいと思います。
どのサービスも大体無償使用枠があるので、その枠を超えない範囲で使うことをお勧めします。
Azure Cognitive Service
Microsoftのクラウドサービス Azure上で提供される、AIサービスです。
各種SDKやAPIが用意されており、AI機能を組み込み利用することができます。
主にハッカソンで使いそうなのは、
- 「言語」・・・自然言語処理、質疑応答など
- 「音声」・・・音声の読み取り、テキストの読み上げなど
- 「視覚」・・・映像や動画からコンテンツを読み取る、顔や表情の検出など
作るプロトタイプに応じて、さまざまなAIサービスを組み合わせることもできます。
Azure以外にも、他社クラウドにも同様のサービスがありますので、使い慣れたもの・使いやすいもの（すでにアカウントを持っているなど）を使用してみるのが良いかもしれません。
Google Form/Microsoft Forms
よくイベントなどに出るとアンケートの回答に使われていたりしますが、アレです。
何に使うかというと、仮説検証や課題設定時に本当にその課題は世の中に存在しているのか？我々の思い違いではないか？を調べるためにアンケートなどをしたりします。
その時にオンラインで、多くの人にアンケートを取るために使います。
今回のハッカソンはオンライン開催だったこともあり、直接人と会うことが一度もなかったので、このようにオンラインでアンケートをとれるのは非常に便利だと思います。
オフラインの場合でも、紙に書いて配るよりもいいかなと思ってます。
フロントエンド開発ライブラリ
デモサイトやアプリを実際に作るときに使用するライブラリ達です。
今回はWebアプリを作ったので、その際に使用したライブラリ達や、こんなのが使えたら便利だな・・・と思ったものをあげておきます。
Vis.js
グラフ描画用ライブラリです。ネットワーク図や3D/2Dグラフをウェブサイト上に表示したりするのに使います。
今回は、ネットワーク図の描画で使用しました。
D3.jsというもののほうがポピュラーなようですが、vis.jsのほうが非常にグニャグニャ動いて気持ち悪かった（誉め言葉）ので、こちらを採用しました。
見てください。気持ち悪いでしょう？
CSSフレームワーク/コンポーネントライブラリ
やっぱりデモとかでそれっぽい画面を作って見せるなら、それっぽいデザインにしたいですよね。
Windows Formみたいなダサい画面では出したくありません。
そんなときに役に立つのがCSSフレームワークや、React/Angularなどのフロントエンドフレームワークと一緒に使えるコンポーネントライブラリ達です。
bootstrap
Bootstrapは結構使い古されている感はありますが、いまでも結構使える（と思っている）CSSフレームワークです。
各種コンポーネント（ボタン/Card/Menubarなど）を駆使すればそれっぽい画面も作りやすいですし、グリッドレイアウトを使えばレスポンシブなサイト構築もできるため、スマートデバイス/PC問わずユーザ体験ができます。
さすがに使い倒されているだけあって、日本語情報も充実しています（ただし、古い情報には注意！）。
公式ページより引用
現在の最新バージョンのBootstrap4系ではjQueryが必要な機能も多いですが、
現在開発中のBootstrap5ではjQueryの依存が完全に取り除かれるようです（awesome！）
簡単なサイトを作るにはいまだにjQueryは便利ですが、ReactやVueなどのフレームワークと組み合わせるにはちょっと不安なので、早く正式版が出るといいですね！
ただ、ハッカソンで使うレベルなら、jQueryで十分！という場合にはそのまま使うのもアリです。
ただ、jQuery公式サイトに載っているjQueryはSlim版なので、ajaxなど一部機能を使えなくなっているため、必要に応じてfull版のjQueryに入れ替えてあげてください。
MATERIAL-UI
Googleのマテリアルデザインをベースに開発されている、React用のUIコンポーネントライブラリです。
今回はjQueryとBootstrapだけでいろいろ済ませてしまったため、Reactなどを使うことはなかったです。
ただ、もし使うなら候補の一つになってたかなーという感じ。
MATERIAL-UIの公式ページより引用
自分で実装すると面倒なアコーディオンメニューやModelなど、様々なコンポーネントをサポートしています。
コミュニケーション/チームビルディング
ハッカソンではどれだけチームメンバーとコミュニケーションをとって、スムーズにぶつかり合いながらも物事を進めていくことが求められると感じました。
共同作業や、オンライン会議をスムーズに進められるツールについても、ある程度使いこなせる必要があるでしょう。
Zoom/Slack
いわずと知れたオンライン会議/チャットツールですね。
SlackはSalseforceに買収されるなんていう話もありますが、
これまで同様使いやすいツールでいてほしいものです。
ちなみにZoomは有償版を使用しました。
40分で会議が切れてしまうのは結構面倒だったので、思い切って契約してみましたが非常に便利でした。
Miro
オンラインホワイトボードツールです。
ハッカソン以外でもディスカッションや、スプリント計画などでも使えると思います。
オフラインだったので集まってアイディア出しをしたり、議論をしたりするときにホワイトボートが欲しいな。となる瞬間は常にこれを使ってました。もっといいツールがあったら教えてください。
最終的なドキュメント作成や、デモ作成の時には使いませんでしたが（Miroを使いこなしてデモしてるチームはいました！）、ファジーな状況でこそ真価を発揮するツールだと思います。特に立ち上がりの時には何でも残して置けるスクラップ帳のように使ってました
GitHub/GitLab
ハッカソンならコードを書くことが確実にあると思います。
そのコードを共有するならとりあえずリポジトリ作ってOrganizerにメンバー突っ込んで・・・みたいなことをすべきだと思います。
今回は主催者がリポジトリを用意してくださっていたのでそちらを使いましたが、なければGitHub/GitLabなどのGitホスティングサービスを利用すればよいでしょう。
もしできたら、CI/CDも準備しておけば最終日当日のぎりぎりまでデプロイが間に合うかもしれません 
GitHub ActionsやGitLab CIを使って、実行環境へのデプロイは自動化しましょう。
自動化したら、残った時間はとにかくコーディングやアイディアの深堀に使いましょう。
最後に
先にも述べた通り、結局ハッカソンで入賞することはできませんでしたが、貴重な体験をさせていただいたとともに、
さまざまなコンテキストだったり、知識・経験を持ったメンバーとのつながりや、ハッカソンを通じて出会った皆様との
関係性が非常に得難いものだったと感じています。
そして、なによりハッカソンで感じたのは技術のある/なしではなく、アイディアが出たらそのアイディアに向かって突き進む行動力が必要ということに気付かされました。(当事者意識？)
結構消極的になりがちなタイミングもあったのですが、やはり全員が自分からどうにかしよう！と動き出さないと何事も進んでいきません。この気持ちを、これから自分がかかわっていくすべての人に伝えられるよう、努力していきたいと思っております。
初めてのハッカソンでしたが、別のハッカソンにも出てみたいですし、面白い分野・テーマがあれば自分でもハッカソンを主宰してみたいなーと思うくらい刺激的な1か月でした。
みんなもハッカソンをしよう！！！