開発合宿でReact×Laravel(API)×Dockerを利用したWebサービスを作ったお話

## はじめに
初めまして、大阪でWebエンジニアをしているかっぽと申します。
今回、主催者の[並里氏](https://twitter.com/namizatork)のお誘いもあり大阪で行われた一泊二日のエンジニア合宿に参加してきたのですが
思っていた以上に刺激的で有意義な時間を過ごせましたので記事にしようと思い書いている次第です。
こちらの記事は合宿についての自分チーム主体の偏見の塊のような個人的共有レポートです。

## 第１回大阪エンジニア開発合宿(OsakaDevelopmentCamp)とは
2020/02/22(土) 〜 2020/02/23(日) に大阪の難波周辺で行われた**エンジニアの開発合宿**
Laravelのもくもく会や勉強会、ハンズオンなど多くのエンジニアのイベントを企画している[ナミザト氏](https://twitter.com/namizatork)の今度開発合宿やってみたいな〜というぽっとでのツイートをきっかけに賛同したフットワーク軽めのエンジニア9人が集まり、3人1チームとなって前日から次の日の朝まで眠らずにひとつWebサービスを開発するというエンジニアにとって夢のような合宿です

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2/22 ~ 2/24の連休を利用して二泊三日（または一泊二日）の開発合宿したい！！<br>ここならご飯込みで5,000円くらいで借りれそう！！<br><br>知り合い6人くらい求む<a href="https://t.co/uu599eYUyC">https://t.co/uu599eYUyC</a></p>&mdash; ナミザト👨‍🚀Laravel (@namizatork) <a href="https://twitter.com/namizatork/status/1215113282723311616?ref_src=twsrc%5Etfw">January 9, 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">ぽんこつ枠キボンヌ</p>&mdash; かっぽ@新世界のWebEngineer (@kappon_world) <a href="https://twitter.com/kappon_world/status/1215138389873156096?ref_src=twsrc%5Etfw">January 9, 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">いえす！！</p>&mdash; ナミザト👨‍🚀Laravel (@namizatork) <a href="https://twitter.com/namizatork/status/1215149214113513472?ref_src=twsrc%5Etfw">January 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 前置き
### 今回の開発合宿の参加者
#### チームサイトウ
 - [ナミザト](https://twitter.com/namizatork)
 - [Saito Takashiさん](https://twitter.com/7_asupara)
 - [Yuiさん](https://twitter.com/MayForBlue)

#### チームアマゾネス
 - [Daiyaさん](https://twitter.com/flowphantom)
 - [アマゾネスいけばたさん](https://twitter.com/k191k)
 - [やまき〜さん](https://twitter.com/yamakeyyang)

#### チームじゃけぇ
 - [フリーランス-じゃけぇ-@ノーマウント勉強会主催](https://twitter.com/bb_ja_k)
 - [はるさん](https://twitter.com/k_haru_it)
 - [かっぽ](https://twitter.com/kappon_world)

### 合宿日時
2020/02/22(土) 16:00 〜 2020/02/23(日) 10:00

### 当日の予定
当日はチームで一つの成果物（web/アプリ問わない）を23日の7時までに作成して、
23日の8時にはみんなの前でそれぞれ成果物を発表する

## 合宿のルール

- 技術選定はチームで話し合い決定する
- 成果物はチームで話し合い決定する
- 開発終了後の成果物の所有等はチームで話し合い決定する（自由）


今回の合宿、開始日までに環境構築や事前準備はOKですが、実装は開始日の16:00からしか行ってはいけないという暗黙のルールがありました。
しかし、なんと3チーム中2チームが16:00以前から実装を進めていたとの情報が！！(ずるい)



## 16:30~ 合宿開始
そんなこんなで始まった開発合宿ですが、さすが有名なエンジニアさんが多く集まっているだけあって、始まったとたんからバリバリと実装を開始しました。(私のチーム以外は。)
![IMG_0706.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590750/db78bc3c-0472-680b-05b3-1afff589f42f.jpeg)

ふんわりとしか役割を決めていなかった私のチーム、チームじゃけぇはその姿を見て呆然とし、

「え、あ、フロントする？サーバする？」
「...どっちやりたい？」
「どっちでも...」

とスタートから挙動不審
幸先の悪いスタートとなりました。

### 今回チームじゃけぇが開発合宿で開発した成果物と選定した技術スタック

今回チームじゃけぇが開発合宿で開発したのは...
#### React×Laravel(API)×Dockerを利用したある分野に特化した専用掲示板!!

※正式な公表のタイミングがあると思うので名前はあえて控えます




フロントエンド： **React (じゃけぇ担当)**
サーバサイド: **Laravel API (はる・かっぽ担当)**

今回のソースコードのフォルダ構成ですが、ReactとLaravelを同じ階層のリポジトリに置き、開発環境はDockerを利用、本番環境のデプロイ先はフロント・サーバそれぞれのサーバという構成でWebサービスを作りました。(この構成、個人的にすごくやりやすかったです)
余裕があればGitHub共有したいと思います！

#### Dockerについて
フロントのDockerは[create-react-app](https://github.com/facebook/create-react-app)を参考に
サーバのDockerは[php-for-everyone](https://github.com/Laravel-shibuya/php-for-everyone)を参考に
フロント・サーバの各々のDockerの良さを引っ張ってきて、つなぎこんでガッチャンコした
今回特別に作ったDockerを使用しました。
GitHubについては、落ち着いたらリポジトリとは別に**React×Laravel(API)×Docker**の環境構築用としてDocker環境を共有する予定です。
（[Facebook](https://github.com/facebook)の皆さん、[Laravel-shibuya](https://github.com/Laravel-shibuya)の皆さん 参考にさせていただきました。ありがとうございます。）


#### 本番サーバについて
Reactは[Now](https://zeit.co/)
Laravelは[Herku](https://jp.heroku.com/)
のサーバを利用しました。
Laravelは完全にAPIとし、DBの値やビジネスロジックでゴニョゴニョした値をJSON型で返す処理のみで、データ表示はReactにすべてお任せました。
デプロイは、masterブランチにmergeされたと同時に自動で本番反映されるように設定致しました。


## 17:00~ チームじゃけぇ始動
それぞれの役割も決まり、チームじゃけぇもいざ開発スタートです！

当日までに、はるさんがWebサービスのデザインを[Figma](https://www.figma.com/)で作成していただいていたのと、じゃけぇさんの技術力でフロントは初速充分でバリバリ進みます。

肝心のサーバサイドはというと...

私自身、普段PHPのSymfonyを使用しており、Laravelの業務経験はありましたが約一年ぶりに触ります。
はるさんも普段はJavaを使った開発が多いとのことで 

「ヤベェ、どうします？w」

「まずはAPIの設定から？」

とあたふた。

しかし、人間の記憶とは素晴らしいもので、一度触り始めると１年前のLaravelの記憶がどんどん蘇ってきました。
まさに、「書けるっ！書けるぞっ！！」状態

はるさんも吸収力がナプキンレベル、１つ進めると後は自走状態に。

そこからは３人とも、時間を忘れるように開発に没頭しました。

## 20:00~ 晩御飯
今回の合宿の晩御飯は豪華!
**宅配のピザLsize３枚(チーズ・照り焼き・マヨポテト)**
**寿司を５人前（サーモンセット３人前・マグロセット２人前）**
お寿司の注文にはUberEatsを利用しました。

20:00過ぎに全ての注文が届き、支払いも済ませたので食事にしましょうと皆さん一休み。
いざ食べようと広げてみると...

「あれ？マグロセット２人前なくね？」

どういうことか、支払いはお寿司５人前分したのに注文したマグロセット２人前が配達されませんでした。
なにしとんねんUberEats
![IMG_0702.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590750/5e9a6aea-b453-5099-035d-3ad27105779d.jpeg)


## 21:00~ 再び事件
ご飯も食べ終えたので開発する人部屋に残り、銭湯行く人は行きましょうということになりました。
私とはるさんは再び開発を進め、じゃけぇさんは銭湯に。

ここでまたまた事件発生

**なんと、突然フロントが表示されない！！！**

しかも、フロント担当のじゃけぇさんが銭湯に行ってしまっていません。

ドヤ顔で
「yarn install したら治るでしょ」 と高を括っていました。

が、インストールしても

「あれ？治らない、、、」

結局、はるさんと１時間ほど格闘しました。

じゃけぇさんが帰ってきて解決しましたが、
結論、yarn install の場所を間違えていました。

**しょうもないことで時間取られてしまう**　エンジニアあるあるですよね。

これにより、フロント頼りの開発を辞め、API開発時に便利なGoogleChromeの拡張ツール[Talend Api Tester](https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm)
を使いこなせるようになりました。（いや、使ってなかったんかい！）

## 22:00~6:00 空白の8時間

ふと時計を見るともう６時。

ほとんど記憶がございません。
意識朦朧の中、必死で実装しまくってました。

結果的には、
フロント側は基本的なフォーム作成やデザイン実装から、ストレージを利用したデータ保存機能まで。
サーバ側はAPIでのRouting・基本的なCRUD処理からLaravelのEloquentを利用したソート切り替え処理まで。

難なくクリアし、どちらともキリの良いところで実装を終えられました。万歳。

## 8:00~ 成果物発表

やはり、一晩で３人で１つのWebサービスを作り上げるのは至難の業。
結論を言うと、３チームとも時間の問題もあり、完成に至らずでした。
しかし、**全員が触ったことのない新しい技術に挑戦するといった目標を掲げ最後まで諦めずに頑張るチーム**や
**Laravelの認証周りの理解に苦しみながらも様々な記事から豊富な知識を蓄えたチーム**等、
どのチームも開発に没頭し、誰一人脱落することなく開発合宿を終えることができました！





成果物発表が終わったあとは眠さの限界でチェックアウトの時間まで床で爆睡。
私一人だけ、昨日の残りのピザの残飯処理をすると言うカオスな光景となりました。
![IMG_0704.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590750/d1713046-ddda-7c5e-889a-3c86abc10c23.jpeg)


## まとめ
以上、今回の大阪エンジニア開発合宿(OsakaDevelopmentCamp)の個人的レポートでした。
個人的には、様々なトラブルを乗り越えぶっ通しで久々にLaravel触れることができて大変嬉しかったです！
貴重な体験をさせていただきまして、主催者の並里氏をはじめ参加された皆様、ありがとうございました！
そしてお疲れ様でした！
次回開催はいつになるかわかりませんが大いに楽しみですね🤗
![IMG_0709.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590750/b4e4e066-f779-47a4-4697-d3ec5d41d191.jpeg)
(疲れ切った表情の皆さんを載せるのは心が痛かったのでマンウィズっぽく)





## 有志ですがプロダクト参加者募集してます
今回実装した掲示板Webサービスですが **React×Laravel(API)×Docker** で環境構築されており、プロダクト自体も初学者に大変わかりやすく勉強になるプロダクトだと自負しております。
３人とも完全に趣味の範囲でやっておりますので、お給料等をお支払いすることはできませんが、もしこのプロダクトに参加して一緒にLaravel・Reactの勉強をしたり自分のポートフォリオの一つとして利用したいというエンジニアの方(実務未経験でも可)いらっしゃいましたら気軽にDM・リプでご連絡くださいませ〜
一緒に楽しくWebサービスを作りましょう😊

**最後までお読みいただきありがとうございました〜😘**