#React初心者達が40日で作ったアプリ『戦国経営者診断』ができるまで

CodeBeginというプログラミングコミュニティの中で参加者を募り、自分で作って覚えるReact教室を主催している「いっちさん」が講師となられて全10回の「React講座」が開催されました。8回目から講義と並行して卒業制作となる診断アプリを作られたそうです。

今回はその卒業制作でもある「#React初心者達が40日で作ったアプリ『戦国経営者診断』」について、作成過程のエピソードなどをお伺いしました！

「Reactで飯を食う」

皆さん、本日はお時間いただきありがとうございます。
「React講座」の講師「いっちさん」と、受講生10名の中から6名（忍さん・とこさん・いしたかさん・ともさん・うえのきさん・ゆみさん）にお集まりいただきました。

まずは、「React講座」を主催されたいっちさんにお伺いします。

・「React講座」をやろうと思ったのはなぜですか？

いっち：
僕自身がReactを使って仕事をしていて、案件を抱えるようになり、Reactを書ける人に手伝ってもらいたかったからです。

クラウドソーシングで発注したりもしましたが、都度都度は大変で。
継続的にやってもらえる人と一緒に仕事ができたらいいなと思いました。

やり方を覚えればReactはそんなに難しくありません。
やる気のある人たちと始めから組んでいった方がのちのち楽かなと考えました。

最初は他の人が企画したプロジェクトに便乗しようと思ったんですが、短期で終わってしまったので、じゃあ自分でやるか！となり講座を開きました。

・受講生の皆さんが「React講座」に参加しようと決めた理由は？

忍：
僕はある程度Web制作ができるようになって、新しく成長できるものが欲しいなと思っていたので（その時にReactの募集がかかり）速攻で飛びつきました！

いしたか：
いっちさんがコミュニティに加入してすぐに「React講座」をやりますってなったのは、ちょっと怪しいなって気持も正直ありました。笑

でも講座の内容が『超実践主義』で「頭ではなく手を動かしてやっていこう」という雰囲気だったので、そこに魅力を感じて参加を決めました。

とこ：
募集案内の中で「Reactで飯を食う」というフレーズがあり、これでご飯を食べていけるくらいの技術を実践的に身につけることができる講座って、どんなのだろうという好奇心と興味が沸いて参加を決めました。

とも:
参加を決めたのは、フロントエンドの領域を広げたいと思ったからです。
自分は、プログラミングを勉強していく中でフロントエンドの部分を触るのが好きだなと感じていました。

それでReactにもともと興味を持っていたんです。
Reactやってみようかなと思っていたタイミングで募集があったので、即応募って感じでした。

うえのき：
普段はコミュニティのSlackを開かないんですが、たまたま開いてみたら丁度「React講座」の募集がされていて、ビビッときて一目ぼれで参加しました。

自分はフリーランスのコーダーとして活動しているので、単価を上げるために技術を身につけようと思いReactに目を付けていたんです。

ゆみ：
私もフリーランスのコーダーとしてお仕事させていただいています。
仕事をしていくうちに自分の強みが必要だなと思い、フロントエンドの技術を身につけて差別化できたらなと思ったのがきっかけです。

「React講座」の募集の前にいっちさんのお話を聴ける機会があり、その時にいっちさんが自信を持って「Reactで飯を食えるようになりましょう！」と言っていたのが印象的でした。

その自信がキラキラと見えて、私もその自信にのっかりたいと思って飛び込みました。

全員が横並びのチーム（講師と受講生からワンチーム化へ）

講師と受講生という立場だとある程度距離ができると思いますが、「React講座」に参加された皆さんと講師のいっちさんの関係性がワンチーム化したように見えます。

・関係性が作り上げられていく過程で、距離が縮まったきっかけなどがあったのでしょうか？

ゆみ：
何をしても否定されなかったことですかね。同じ質問をしてしまっても許されるし、質問をすると「良い質問ですね」と言ってくれたりとか。

講師の先生となると遠慮しがちですが、いっちさんってちょっと抜けてるところがあって、それでコチラも遠慮しなくていい雰囲気になったのが良かったかなと。笑

忍：
そういうところですよ！笑

うえのき：
そういうところですね！笑

・いっちさんの人柄が、愛されるべき存在だったってことですね

いっち：
僕自身は皆さんに感謝しています。

全員が横並びのチームっていうのは僕の中でも理想でした。
プロの集団にしたい。プロ同士の関係って上も下もない完全にイコール。
そうでないとプロ同士って付き合えないと思うんですよね。

自然とそういう関係性になってくれてたのは感謝しています。
逆に聞きたいくらい。なんで皆さんこんなにうまくできたんですか？って。

忍：
わからないことをわからないと素直に言いやすい環境だったのが良かったと思います。
気軽に聞けるし、がんばろうって思える。些細な事だと思うけれど、その環境があるとないとではサロンやコミュニティってすごく差があると思いますね。

いしたか：
忍さんに同意です。いっちさんって「皆さんもできます！」って言うんですけど、やってみると難しくて、聞ける環境とかできないことはできないと言える環境は大切。

メンバー同士でもわからないと話していると、（いっちさんみたいにズバっとでなくても）ヒントをもらえて前に進めたりしました。

それが自然と回を増すごとにできてきたのかなって思います。 最初の頃ってメンバー同士の会話は少なかったです。

後半は自然とこれは誰々に聞いてみようっていうのが出てきて、それが楽しくなっていきました。
やらされているというよりは、もっとやりたいという感じになってきたと思います。

「React講座」の魅力

・「React講座」のココが良かったということを教えてください。

ゆみ：
自分がどこをやるか決まっていなくても卒業制作のアプリ作りまで上手くいったのは、皆さん、すごくがんばるんですよ。 皆さん、すぐやってくれるんです。

そうなると関わる部分が無くなってしまうので、「自分ができるところは自分がやりたい！」という感じで、それぞれ自分が一番得意なところをどんどんやっていったのが良かったんじゃないかなって思います。

忍：
自分が苦手と思うところもチャレンジしやすい環境が良かったと思います。

ゆみ：
それ、私も思いました！

いっち：
まんべんなく苦手なものでもチャレンジしてくれるっていうのはいいですよね。

ゆみ：
チャレンジしてできなかった時も、絶対誰かが助けてくれるってわかっているからやりやすかったです。

・いっちさん講師として「React講座」をやってみていかがでしたか？

いっち：
素晴らしい空間があるんだと教えてもらえたのが僕の一番の利益でした。

1期生の関係性がとても良いモデルケースになったので、これからのミッションとして人数を増やしつつ、1期生のクローンを作る感じでいい空間を作って行きたいです。 自分の中で大きな成功体験でした。

「#React初心者達が40日で作ったアプリ『戦国経営者診断』」ができるまで

Reactを使って卒業制作としてアプリにするかホームページにするかというのもメンバーの皆さんが話し合って決められたと聞きました。 ここからは「#React初心者達が40日で作ったアプリ『戦国経営者診断』」について教えてください。

・アプリの制作工程で前半と後半に分けられていたそうですが、前半部分はいっちさんが担当を振り分けたとのことでしたが、どんな理由から選ばれたのですか？

いっち：
人によって得手不得手があるので、それを合わせる感じで選びました。

・講座の中で皆さんとコミュニケーションをとっているから、いっちさんの中でメンバーさんの特徴がみえていたということですか？

いっち：
おっしゃるとおりですね！

・どんなところをみられていたのですか？

いっち：
皆さんから課題を提出いただいたことで、それぞれの得意分野がとてもよくわかるようになりました。

実は最初、課題はなかったんです。1回目に皆さんが自主的にやってくれました。
素晴らしい！と2回目からは僕の方から課題を出し、できる人はやってくださいということになりました。

・皆さん課題を提出されていたんですね。課題はいかがでしたか？

ゆみ：
私課題1しか出していないかも 笑。でも自分のなかで納得してやっていました。

とこ：
私は6回目を飛ばして7回目の課題を出しています。6回目が難しくてあっという間に一週間が経ってしまいました。 笑

忍：
当時は何がわからないのかもわからない。そんなレベルでした。
今現在みたら、全くわかっていないと思っていたところが、少しわかるようになっているので良かったなと思います。

・アプリ制作の後半は立候補で担当が振り分けられたとのことでしたが、その作業に立候補した理由やどんな担当かなどを教えてください。

うえのき：
僕は、後半に仕事が忙しくなってしまって同じパートならできるかなと思って、前半と同じ担当に立候補しました。
皆さんのデータを格納する「入れ物」を作った感じです。

できないところも誰かがフォローしてくれる環境だったので安心でした。

とも:
僕はResult画面を担当しました。入力していった先の結果画面のデザイン全般です。
前半で決めていただいたのもデザイン部分でした。

自分はどちらかというとデザインが得意とは思っていなかったんです。
いっちさんに言われてやってみたら、皆も褒めてくれるし、自分でもよりいい形にしていきたいと思えました。

今ではデザインとコーディング両方やっていきたいと思うようになりました。

とこ：
私は各武将のデータ的なものを数値化する作業をやっていました。アプリの表には直接は見えてこない部分なんですけどね。

コーディングは苦手意識があったので、自分がいままでやってきた中で、できることがあるかなと考えた時に、数値化したりするのはしっかりできるかなと。

いしたかさんにもたくさんアドバイスいただきながら、皆さんに書いてもらった文章や選択肢が経営者にどう影響するか考えていきました。

忍：
あるビジネス本を参考に、タイプ別のパラメーターを計算してまとめて振り分けるところをとこさんがしてくれたんです。素晴らしいです。
僕は後半、いつの間にかまとめ役になってました。いっちさんが誘導うまいんですよ。

後半は皆さんのアシストしつつ、自分のできるところはやり、デザインなども見つつでした。

ゆみ：
私は主にCSSでスタイルをあてる作業でした。今までやってきた経験を活かせたなって思います。
実は担当を決める時に私、お休みしていたんですけど、私がやりたいなって思っていた部分を皆さんがいい感じに決めてくれてました。わかっている！

いしたか：
結果をチャートで表示する部分を他のメンバーとやりました。担当わけは決まったけれど、やれる人がやるって環境だったなと思います。
多分ゆみさんとかが時間がある時に進めてくれていたのかな。

作業をしていて力尽きると自然とそこから先を他の人がやってくれるという連携ができていて、それが面白かったです。

無理しない。できる人がやる。できてなくても恥ずかしくないし、やれる人がやればいいよねっていう環境だったなと思います。

課題の解決は共有ツールが鍵

・アプリを作成していく過程で困ったことや難しかった課題などはありますか？　

忍：
最初アプリ制作をやっていてすごく思ったのは各担当のタスクの共有がとりずらかったことです。
各担当のタスクの明確化が大変でした。
共有の工夫をし始めてからやりやすくなりました。

・共有の工夫とは？

忍：
Miro（ミロ）という管理ツールを使ってタスクや作業内容、期限などの内容を細かく見れるようにしたんです。
各々やっている中で連絡がとりやすくなりました。

とも:
Gather（ギャザー）（オンライン空間）に行くと、だいたい酔ったいっちさんがいらっしゃるので、気軽に相談できるのも良かったです。
詰まった時に行くと聞けて、気が付いたら一緒にお酒を飲んでいるっていうね。笑

忍：
それも良かったですよね。

講師の方って忙しいじゃないですか。
時間を奪っちゃいけないというのがWeb業界ではセオリーというか。遠慮しちゃいますよね。

いっちさんがGather（ギャザー）にいてくれることで気軽に話せるのが良かったですね。

・いっちさんがGather(ギャザー)にいらっしゃったのは狙いがあったのですか？

いっち：
狙いとかではなく、逆に僕の方が皆さんに惹かれてGather（ギャザー）に行っていた感じですね。
皆さん一生懸命やってくださっていました。

いしたかさんや忍さんがチラッとおっしゃっていましたが、役割はそれぞれあるのだけれど、役割関係なく手が空いている人がやるという流れが自然発生的にできていました。

やっている人たちがGather（ギャザー）にいて、作業を共有できる場になっていたっていうのがありましたね。

お酒を飲んじゃったのは、ある意味事故みたいな……笑

ゆみ：
泥酔してます！笑

いっち：
それガチ事故じゃないですか！笑

話は変わるんですけど、Miro（ミロ）も最初はまともなこと書いてなかったんですよ。
そういうのも僕の中では斬新で面白かったです。

忍：
ふざけながらも、しっかりと意識していて、やるべきことはやるっていうところが良かったですよね。

いっち：
得意な人が得意なところをやる雰囲気や、時間管理や期限なども自然発生していったようなところが多くて、僕の中では40日で作り上げられるってスゴイことだったなと思っています。

結果的に40日で作り上げることができた

・40日で作り上げるという予定ではなかったのですか？

いっち：
最初、40日で完成できるって思った人は誰もいなかったんじゃないですかね？
結果として40日で完成できたんです。

完成したアプリを使ってもらう歓び

・アプリが完成した時の皆さんのお気持ちはいかがでしたか？

忍：
素直に「あれ!?できてる‼」って感じですね。

うえのき：
「動いたスゲー!」って思いました。

いしたか：
実際にメンバー以外の人に使ってもらえたのが楽しかったですね。お披露目ができた！って。

とも：
僕もいしたかさんと同じこと思いました。

Twitterでシェアできる機能をつけていたので、他の人が結果をシェアしてくれているのを目にして嬉しかったです。

Web制作と違って、アプリはユーザーの感想が直で見れるっていうのが面白いなと思いました。

ゆみ：
私も人に使ってもらえるってこんなにうれしいんだ！って思いました。

Web制作はあまりお客さんの感想を直接聴けないので、Twitterでアプリの感想とかを見るとすごく嬉しくて、アプリ開発いいなって思いました。

・自分がきっかけで皆さんがReactを学習し、アプリをリリースできたという事に関していっちさんはいかがですか？

いっち：
皆さんのがんばりをみていて、前半が終わった時点でこれは絶対ものになるなと確信していたので、リリースできて当然という感覚でした。

アプリを使ってもらって嬉しかったっていう皆さんの反応が僕は嬉しいです。

・最後にどのようにアプリを楽しんで欲しいですか？

いしたか：
自分たちはアプリを作ることでお互いを知ることができ、良いチームができました。
ユーザーの皆さんも診断アプリを使うことで周りの人のことを知り、仲間が増えるきっかけになればいいなと思います。

とこ：
Twitterで診断結果を載せていると、それに対してコメントをいれてくれたりする方がいらっしゃるんですよね。

リアルで知っている人ではないかもしれない人たちが、一緒に同じアプリを楽しんでみたり、診断結果を通してお互いを知ったりすることで、会話が広がるきっかけとなったらいいなと思います。

皆さん貴重なお時間をいただきありがとうございました。

編集後記

「React講座」のメンバーの皆さんからあふれ出る楽し気な雰囲気の理由がわかったように思います。
「React講座」にご興味のある方は「いっちさん」へお問い合わせください。

「React講座」の皆さんが卒業制作として40日で作ったアプリ『戦国経営者診断』
私は直江兼続タイプでした！

自分が信じた人、自分を信じてくれた人には「義」を尽くす人です。
(診断結果から一部引用)

「義」を尽くす人！当たっていると思います！笑
あなたは誰タイプですか？ぜひ試してみてくださいね！
診断結果をTwitterでシェアして繋がりを増やしていきましょう♪