初めてのRailsオリジナルプロダクトでLINEを作ったらめっちゃ為になった
今回、初めてRailsを使ってオリジナルのプロダクトを作ってみたのですが、めちゃくちゃ為になったのでメモ程度に雑感を書いていきます。
プロダクトの内容としては、Rails5の新機能であるAction Cableを用いて一対一のダイレクトメッセージチャットアプリを作成しました。
きっかけ
Progate、Railsチュートリアルを終わらせてそろそろ実務経験を積みたいなーと思って某企業のサマーインターンに応募したところ、「1週間でLINEを作ってきてください」っていう無茶振りな選考課題を出されたことです。ちなみに、あとで気づいたのですが20卒向けのインターンでした笑(自分は休学するので恐らく22卒)
使った言語、技術など
言語はRails5とActionCableの所で一部jQueryを使いました。
主に実装した機能は、Deviseでのメール認証ユーザー登録機能とActionCableでのチャット機能です。後者はRails5の目玉機能らしいです。
できたやつ
スマホだと見辛いですがこんなのできました。初めてかつ作業時間限られてた割に満足
工程としてはこんな感じです
1日目：Actioncableでチャット機能実装
2日目、3日目：Deviseでユーザー登録機能実装(メール認証のみ)
4日目：用事があり何もせず
5日目：CSS実装でちょっとLINEっぽくする
6日目、7日目：Herokuにデプロイしようと苦戦する(結局できない)→提出
やってみてどうだったか
今回の作業を通してユーザー登録機能とダイレクトメッセージ機能の実装を実践的に学べたのですが、これ大抵のアプリには必要だと思うのですごく勉強になりました。また、DB設計も、Progateなどのuser,message(post)に加えて新しくroomテーブルを加える必要があったので、程よく発展的でbelongs_toやhas_manyと絡めつついい感じに学べました。HTML & CSS復習しつつSassとSlim勉強できたのも良かった。
とりあえずまとめると、
①結局独自のプロダクト作るのが一番力がつく
②ある程度基礎は勉強したけど作りたいプロダクトがないよ〜って人はとりあえずLINE作ってみるのオススメ
反省点は、上の工程の通りHerokuへのデプロイに一番時間費やしたのに結局うまくいかなかったことです。原因としては、時間が限られていてテストを書かなかったというのもありますが、基本ローカル環境で試して全て出来上がってからデプロイしたためどこでエラー起こしているか見当がつかなかったのが大きい気がします。Railsチュートリアルのように、デプロイは開発と同時進行でこまめにすべきだなーと感じました。
最後に
参考文献です。すごく良くまとまっているので、これらを見つつ適宜ググってオリジナルの機能を追加していけばある程度のクオリティのチャットアプリはできると思います。やっぱりRailsは日本語の情報が豊富で初学者に優しいのが良き。
というわけで、インターン先の選考課題やってみてすごく勉強になったよって記事でした。
採用されるかはこれを見ながらの面接で決まるらしいので頑張ります！
それでは〜！
Railsアプリの共同開発を始めました
こんにちは、サニーです！
プログラミングを始めて３ヶ月が経ち、今はProgateを卒業してRailsチュートリアルに励んでいます。
今回同級生二人とWebサービスを共同開発することになったので、後で自分達で見返せるように、また同じように今後共同開発をする人の参考に少しでもなるように過程や試行錯誤、気づきをブログに書き残していきたいと思います。
共同開発者との出会い
Progateでプログラミングが大好きになった僕は、四月に大きく躓いていました。Railsチュートリアルに移行したはいいものの、初めて出会うエラーの大海に歯が立たなかったのです。さながら、ぬのの服とたけのやりで魔王に挑む勇者のようでした。
挫折しかけていたそんな時春休みが明けて大学の授業が始まり、丁度「0からWebサービスを作る」という授業があったのでメンターを探そうと思い参加しました。
そこで別々に声をかけた二人がとても優秀で、メンターになってもらって一人で開発するよりも三人で一緒に開発する方が断然面白いと感じたので渋谷のシェーキーズに誘って顔合わせをした結果、正式にチームを組み共同で一つのWebサービスを作ることになりました。
正式に東大生三人でチーム組むことになりました！決起集会アツかった！
— サニー@Railsアプリ共同開発なう (@bokusunny) 2018年5月8日
制作期間2ヶ月で面白いWEBサービス作ります🔥 pic.twitter.com/0bUeYPI00M
メンバー
他の二人を便宜上エンジニアくんとデザイナーくんとします。
・エンジニアくん
高専からの編入でプログラミング歴はそれなりに長いです。専門はバックエンドでRubyは最近始めたようですがすでにRailsを使って仕事をしています(つよい)。チーム結成後わかったのですが、彼の家が僕の家と町名まで一緒(！)なのでプログラミングで詰まったら即歩いて聞きに行ったりしています。めっちゃありがたい。
・デザイナーくん
僕と同じく文系でプログラミングは未経験ですが、デザインを独学で勉強していてすごくセンスを感じます。あとで出てくるチームロゴも彼が20分くらいで作ってくれました(つよい)。UI/UX周りのことはほぼ任せるつもりです。
・ぼく
プログラミング初心者です。他の二人に明確な強みがあるのでチームにどう貢献しようか模索しています。サーバーサイドを手伝いつつ、一人でも多くの人にサービスを知ってもらい応援してもらえるように、Twitterやブログで発信していこうかなとか考えています。
使用言語・ツール
使用言語
・HTML & CSS(SlimとBootstrap導入予定)
・Javascript(フレームワークは未定)
・Ruby on Rails
共同開発ツール
・Github
・Sourcetree(Git作業の視覚化・簡略化)
・Slack(コミュニケーション)
・Trello(タスク管理)
・GoogleCalender
アプリの構想
同じ目標と違うスキルを持つ人同士(Webサービスを作りたいエンジニアとデザイナーとか)の横のスキル検索サービスを作りたいと思っています。
動機は自分たちの経験に立脚しています。
webサービス作ろうとして実感したけど、現状何か面白いことしたくても一人だと専門外のことも自分でこなさなきゃいけないこと多いよなあ。
— サニー@Railsアプリ共同開発なう (@bokusunny) 2018年5月23日
同じ目標と違うスキルを持っている人同士(webサービスの場合デザイナーとエンジニアとか)が手軽に苦手なことを頼みあい補完できるプラットフォーム作りたい https://t.co/wrpWIpL477
ドラクエで、魔王を倒すという目標を持つ勇者が魔法使いや僧侶を見つけるプラットフォーム、というと少しイメージしやすいかも知れません。勇者がベホマやメラゾーマを全部網羅して覚えるのは効率悪いよね、一々他の村(勉強会など)に行かなくてもネット上で仲間を見つけられるといいよねということです。ゲームではそんなの嫌ですが笑
クリエイターは自分のしたいことだけに集中できている時が一番強いと思うんですよね。それを手軽に掛け合わせることができればもっと効率的に質の高いものを生み出せると自分が共同開発をしていて実感していますし、周り(エンジニア界隈)を見ているとサクッとイケてるデザイナーと組んで面白いWebサービスやゲームを作りたいみたいな需要もあるんじゃないかと感じています。
もちろん、Webサービスに限らずそれこそボーカルとドラマーでバンド組んだりシェフとエンジニアで料理サービス作ったり'能力の掛け算'はものすごい可能性を秘めてるんじゃないかと推測しています。このサービスで出会った人からたくさんのプロダクトが生まれたら嬉しいなあ。
今までしたこと
これまでは、アプリの構想・設計や共同開発の環境整備をメインで行い、これからゴリゴリ開発して行く感じです。
とりあえず開発は週一デザイナーくんの家に泊まり込み、それ以外は各自で行うということになりました。
週一で泊まり込みで開発することになりました！
— サニー@Railsアプリ共同開発なう (@bokusunny) 2018年5月24日
こういうのちょっと憧れてたからテンション上がる😎 pic.twitter.com/2DgTdNoEb6
チームの一体感を促進するためチーム名決めたりチームロゴ作ったりもしました。（ただ楽しんでただけ）
今のところ共同開発は本当に楽しいです。やっぱり孤独な戦いじゃないってのは大きい。また、自分もチームに貢献したいから頑張る、というモチベーションにもなります。
また、プログラミングで困った事があったらいつでもエンジニアくんに聞ける、デザインのことはほぼ考えなくていいのでプログラミングに集中できるなどモチベーション以外の恩恵も受けています。
ただ、今後間違いなく良くない側面も出てくると思うので、そこは隠さず逐一書き残していけたらと思います。チーム内の温度差とかありそうで怖い…。
こんな感じで、これからも不定期に初心者の共同開発の進捗・成果・実態とかを書いて行けたらと思います。
開発自体はまだまだこれからですがこっからペース上げて行きます！Webサービス作ろうとしてる人、プログラミングを学んでいる人、切磋琢磨して頑張っていきましょう！
それでは〜
12万円費やしたTechAcademyそっちのけでProgateにハマってしまった話
突然ですが、みなさんコンコルド効果という言葉を聞いたことがあるでしょうか。
「埋没費用効果 (sunk cost effect)」の別名であり、ある対象への金銭的・精神的・時間的投資をしつづけることが損失につながるとわかっているにもかかわらず、それまでの投資を惜しみ、投資がやめられない状態を指す。超音速旅客機コンコルドの商業的失敗を由来とする。-wikipediaより
見に行った映画が死ぬほどつまらなかったけど、せっかくお金払ったのに途中退席はもったいなくて最後まで見てしまい結局後悔する時のアレです。
今回は僕がTechAcademyというプログラミングスクールに12万円投資したものの、コンコルド効果ガン無視で辞めてProgateにのめりこんでしまった話をしようと思います。
一笑に付すもよし、反面教師にするもよし
ここまで読んだ人は、これまでの10数秒を無駄にしないためにも、ぜひ最後まで読んで行って下さい。(僕が言うのもなんですが)
TechAcademyとは
TechAcademyは大手オンラインプログラミングスクールです。
ネット上では結構評判がよく、プログラミングスクールのオススメ記事でも推されている事が多いです。
特徴としては
・オンライン完結型(対面での授業やメンタリングはない)
・独自教材が用意されており、それを独学した上で分からないところをメンターに聞くシステム。節目節目で実践型の課題がある。
・基本的に15:00~23:00の間Slack上で質問し放題(返信超早い)。メンターは日替わり。
・それとは別に専属メンターが付き、週に二回スカイプのようなものをつないでSlackでは拾いきれない疑問や学習上の悩みを聞いてくれたり就職の相談に乗ってくれたりする。
・テキストはサポート期間終了後も半永久的に閲覧可能。
・最終課題はオリジナルアプリの製作であり、それをコンテストに出すことができる。
・エンジニアとしての就職・転職支援がある。
・値段は4週間だと13万円、8週間だと18万円くらい。(学生だとそれぞれ9万、12万)
このようなものが挙げられます。
TechAcademyと僕
忘れもしない2018年2月7日、プログラミングをマスターすると固く決意した僕は、ネットでスクールの比較記事を読み、その中で良さげだったTechAcademyに申込みをしました。
↑その辺りの経緯は上の記事に書いています
申込みをしたコースはAndroidアプリ作成の8週間コースでした。
iPhoneユーザーの僕がなぜこのコースを選んだのかはいまだに判明していません。笑
最初は簡単でサクサク進んだので、時間が立つのも忘れて8時間くらいやった覚えがあります。すごい楽しかった。
引用：フジテレビ「とんねるずのスポーツ王は俺だ」
しかし、三日目四日目くらいになるとだんだん分からないところが出てきました
ただ、この時点ではまだメンターさんに聞いたりググったりすればなんとか解決できていました。
引用：北斗の拳
そして時が過ぎ、一週間後...
もう全く太刀打ちできなくなっていました。メンターさんに聞こうにも分からないところがわからない。ていうかAndroidアプリ作ったところで俺使えないじゃん。(今更)
引用：https://wanchan.jp/osusume/detail/3932
こうしてどんどんTechAcademyから足が遠のいていきました
一週間に2回、専属のメンターさんにビデオチャットで直接相談ができるのですが、進捗がほぼないのでとても気まずかったです。お金払ってるのに行きたくなかった。
中学の三者面談ってこんな感じだったな...と懐かしい気持ちになったのが印象に残っています
しかし、12万円も投資したのだからやらなきゃやらなきゃと思いながら無為に時間が過ぎていきました
Progateとの出会い
TechAcademyの申し込みから約三週間後
基礎からやり直す必要性を感じていた僕はあるサービスに出会いました
それが、Progateでした
わかりやすいスライド、デバイス上で手を動かして学べる環境、モチベーションを刺激するTwitterコミュニティなどに魅了されどハマりしました。
最初はJavaの基礎固めのつもりだったのですが、いつの間にか言語もRubyに変わっており戻る気は無くなっていました。恐ろしい...
12万円をドブに捨てる罪悪感はありましたが、上達スピードが圧倒的に上がっている実感があったので今でも後悔はないです。親への借金は残りましたが十分回収できると確信しています。
Progateにかかればコンコルド効果なんてワンパンでした。
Progateがなかったら恐らく僕はプログラミングをやめているか、TechAcademyを無理やり続けて苦手意識と戦っていたと思います。
Progateの魅力については、二本立ての次の記事で詳しく書きたいと思います。
あとがき
最初は失敗した理由やプログラミングスクールの探し方などを真面目に検証しようと思っていたのですが、大分冗長になってしまったのでやめました。今後別記事で書くつもりなのでぜひそちらを読んでください！
その記事で詳しく言及するつもりですが最後に一つだけ補足しておくと、この記事で言いたいのはTechAcademyが劣っているとかやめておけばよかったとかそういう事ではないです。やる気のない僕に丁寧に教えてくださったメンターさんにはとても感謝しています。
全て僕のリサーチ不足が原因でTechAcademy自体は然るべき段階で然るべき目的を持って利用すればとても有用なサービスだと思います。
例えば、Progateで基礎を抑えた後のオリジナルアプリを作る段階でメンターが欲しい人にとっては最大限の効果を発揮してくれると思います。ここが初心者にとって一番つまずきやすいポイントなのでこれくらいのお金を投資する価値はあります。
この記事が、僕のようにミスマッチが原因で失敗してしまう人が一人でも減る一助になれば幸いです。
それでは〜
文系東大生がプログラミングを始めて3か月経ったので振り返ってみる
初めまして！サニーです
今日から、学習過程や考え方のポートフォリオとしてブログを始めようと思います
今回は、プログラミングを始めて3か月時点での学習の進捗、ぶつかった壁などを書いていきます
プログラミング始めたての方や、これからプログラミングを学びたい方、文系の方などの参考になれば幸いです
- 本格的に始めるまで
- TechAcademyに登録&挫折（2018/2）
- ProgateでRubyを始める(2018/3)
- Progate卒業・共同開発者探し(2018/4)
- 現状とこれから(2018/5)
- 自分がもし今プログラミングを始めるなら
本格的に始めるまで
僕は小中高とサッカー人間でした。サッカーはすごく楽しかったのですが、監督に言われたメニューや指示をひたすらこなしていく受動的なものでした。また、大学も周りが受けているから、という曖昧な理由で決めました。
大学でも当初体育会サッカー部に入部しようとしていたのですが、そうすると4年間(通算14年!)サッカー漬けの生活になるという事に気づき、漠然とした危機感を持ち断念しました。
そして、何か面白いことないかなと思っていた時に出会ったのがプログラミングでした。1回生の夏でした。
自分はコードを一行も書いたことがなかった上に理系科目に苦手意識を持つ典型的な文系だった為抵抗感がかなりあった覚えがあります。
アプリを作れたらカッコいいんじゃね!?という安易な理由で使用言語はJavaに決め、書籍で勉強し始めました。一番最初に'Hello World'を出力した時にものすごく感動したのが印象に残っています。
しかし、当時手伝っていた学生団体の仕事が忙しくなったのと、オブジェクト指向が理解できなかったのとで10日ほどでやめてしまいました。
TechAcademyに登録&挫折（2018/2）
再開したのは 半年後、期末試験が終わり冬休みに入った時でした。
当時僕は学生団体をやめたばかりでなにも長続きがしない自分に嫌気がさし、何か一つ腰を据えて取り組もうと思いました。
そこで半年前のあの感動を思いだしてプログラミングに決め、退路を断つために父親に直談判して12万円出資してもらい、大手プログラミングスクールのTechAcademyに登録しました。
TechAcademyは、用意された教材を独学しわからないところをメンターにチャットで質問するというシステムでした。しかし、教材がある程度の知識があることを前提に作られているのとJava自体がかなり難解な言語なのもあり、わからないところがわからない状態になってメンターにも質問できないという悪循環に陥ってしまいました。
そんな時、Progateというサイトを知り、そちらで基礎を学んでからTechAcademyの教材に移ろうと考えました。
しかし、初心者向けに整えられた環境、UXの素晴らしさ、レベルを上げる楽しさ等に魅了されいつの間にかTechAcademyそっちのけでProgateばかりやるようになっていました。この辺りの詳しい話は下の記事で書いています。
結局TechAcademyは途中で辞めることになりました。退路を断ってくれたという点で感謝はしていますが、手痛い出費でした。当然親に対する借金として残っています。
これはTechAcademyが悪いという話ではありません。お金をかければいいというものではなく、自分の進度に応じて適切なサービスを選ぶべきだということです。自分の場合、Progateである程度基礎を学んでからTechAcademyに移行していればもっとスムーズに学習が進められたと思います。僕は気づかなかったのですが、大抵のサービスは無料体験ができるので一度体験しておくことを強くお勧めします。
ProgateでRubyを始める(2018/3)
TechAcademyで挫折したのはJavaが難解だったのと、アプリを作るというところに実際そこまでモチベーションがなかったところが大きかったと思い、言語をRubyに変更しました。
今振り返るとこれは良い決断でした。Rubyは直感的でわかりやすかったし、Twitterで沢山の人がRailsを使って面白いサービスを作っていたので自分もやってみたいというモチベーションになりました。
レッスン完了をツイートするとたくさんいいねがつくのもすごく嬉しかったです。
Ruby 学習コース Ⅳを修了しました！ https://t.co/eWf6mnc7SZ #Progate
— サニー@5ヶ月Railsアプリチャレンジ (@bokusunny) 2018年3月12日
個人的に、プログラミング初学者はProgateでフロント言語(HTML & CSS)かRubyから始めるのがベストだと思います。とっつきやすさやモチベーション的な観点から見て。ちなみに有料会員になっても月額1000円しないのでコスパも最強です。
Progate卒業・共同開発者探し(2018/4)
Progateは順調に進み、一か月でHTML,CSS,JS,Ruby,Railsを終わらせることができました。この頃にはすっかりプログラミングの魅力にとりつかれていました。
とりあえず実践コースと同じものをAtomで一から作り終え公開！↓https://t.co/rj4yG40yUv
— サニー@5ヶ月Railsアプリチャレンジ (@bokusunny) 2018年4月27日
これでとあえずProgateはいったん卒業して、本格的にRails Tutorial進める。
マジでお世話になりました！@prog_8 pic.twitter.com/nayestc4gl
そこで、本格的にアプリ開発に着手するため、Progateを卒業してRails Tutorialに移行しました。しかし、ここで二回目の挫折を味わいました。エラーが出てもググり方がわからないし、ググっても出てきた情報が古かったりして解決に時間がかかる、Windowsでは環境構築が難しいなどの問題が続出し、ものすごい時間と気力を投資してやっと一番最初の画面にたどり着きました。
そこで悟りました。自分がいままでどれほどProgateに守られていたのか。プログラミングの世界がどれだけ残酷であるかを...
出典：進撃の巨人
モチベーションの維持やわからない所を聞くという意味でもメンター・共同開発者の必要性を痛感しました。しかし、文系学生だと周りにプログラミングをやっている人すらほとんどいない。
そこで、丁度学校が始まりWebサービスを一から作る授業があったので参加し、周りの人に積極的に声をかけることにしました。その結果、何人か面白い人を見つけることができました。
現状とこれから(2018/5)
そこで、その内の二人を誘って一緒に開発をすることになりました。
正式に東大生三人でチーム組むことになりました！決起集会アツかった！
— サニー@5ヶ月Railsアプリチャレンジ (@bokusunny) 2018年5月8日
制作期間2ヶ月で面白いWEBサービス作ります🔥 pic.twitter.com/0bUeYPI00M
二人ともとても優秀なのでお荷物にならないよう頑張ろうというモチベーションが湧く、わからないところがあったらすぐ聞ける、チーム名決めたりロゴ作るのが楽しいなど今のところは共同開発にしてとても良かったと感じています。
まだまだこれからですが、開発期間を二か月に設定し7月にWebアプリをリリースする予定なので、その時は是非一度使ってみてください。'能力の掛け算'をテーマに、Webサービスを作りたいデザイナーとエンジニア同士など異なるスキルを持つ人のマッチングサービスを作るつもりです。文系だと共同開発者が欲しいのに探す場所が限られているという自分の体験が元となっています。ここで出会った人がバンバン良質なサービスを出してくれるようになると嬉しいな～
その後はPythonで機械学習とかやってみたいと漠然と考えていますが、今はRailsの開発に専念しようと思います。
自分がもし今プログラミングを始めるなら
今自分がプログラミング未経験の時に戻るなら、以下の事に留意すると思います。
（※個人差が大きい所なので参考程度に考え、他の方法も検討した上で自分に合ったものをピックアップするのがお勧めです。）
・最初はProgateでRubyかHTML & CSSを学ぶ
→環境構築など初心者が躓きやすいところが極限まで切り落とされているので挫折する確率が下がります。
・Twitterをやる
→他の人のサービスを見たり、自分の成果をアウトプットしていいねなどでフィードバックを貰ったりすることでモチベーションの維持に寄与します。
・メンターや共同開発者を見つける
→Progateを離れるとエラーとのお付き合いが始まるのでほぼ必須。独力だと、本当にプログラミングが好きか優秀かでないと挫折します。学校のプログラミングの授業や、学外で開かれる勉強会やオフ会で見つけると良いかも。(Progateオフ会は敷居が低くおススメ)。友達で見つけられなかったらココナラやTechAcademyなどの有料サービスを使うのも一つの手です。
ココナラ - みんなの得意を売り買い スキルのフリーマーケット
TechAcademy [テックアカデミー] | オンラインのプログラミングスクール
Progateオフ会/勉強会 (東京都, 日本) | Meetup
振り返るともう少し効率的に学べたな、とかここでの挫折は回避できたな、とか色々思うところはあります。
しかし、自分も先人の記事を参考にしたおかげで大分順調にここまで来れました。
なので、これから学ぶ人にとってこの記事が少しでも参考になり役立ったと思ってもらえれば嬉しいです。
それでは。
