→はじめから

”社会人”を”はじめから”した人のあしあと

【技術】プログラミングを初めて6ヶ月 サービス紹介と所感

こんにちは!Ted(@tatsuya_ruby)です!

プログラミングを初めて6ヶ月が経とうとしています

progateから始まり、初学者なりに独学や個別トレーニングを受けながら学習を進めてきました。

そしてこの度ruby on rails を使った自作のサービスが出来上がりました!
cssによるデザイン、レスポンシブデザイン 等は工事中ですので最低限の見た目になっています。)

私の場合こんなサービスができたよと一例としてご紹介したいので初学者のかたの参考になればと
思います!

それから学習としてサービス作成しましたので苦労したところやつまづいたところを共有できると
良いと思います。

サービスについて

概要

今回作ったのは趣味共有アプリケーション
ShumiShare
です!

ShumiShareは趣味共有アプリケーションで
趣味を持っている人は自分のもつ趣味を共有することで
一緒に楽しむ人を見つけたり
逆に趣味がなくて困っている人は誰かの投稿をみて新しい趣味を見つけるために
作ったアプリケーションです。

作った動機

私は前職では度重なる長期出張+長時間残業でプライベートの時間を定期的に
取れていませんでした。

かたやFacebook,twitter,instagramでは自分の友達や同級生が楽しそうに遊ぶ
姿がよく見られました。
なので自分も負けじと余暇を楽しんでやる!っと思っていました。

しかし休みになると

「あれ?自分って何にハマってたんだっけ?そもそも何かにハマってたのか?」

と気づきました。そしてそんな過去があったのでサービスを作るときに
みじかな問題を解決する手助けになる物を作りたいと思い、その時のことを思い出し

「きっと同じように趣味を見つけることに苦労している人がいるはず!」

という動機の元、ShumiShareを作ることになりました。

ターゲット

サービスを通じて新しい趣味を探す人と趣味をすでに持っているが
趣味を通じてたくさんの人と繋がりたい人が繋がること

機能
  • ユーザー登録、ログイン昨日(devise)
  • 趣味投稿
  • 投稿検索
  • ユーザーフォロー
  • JOIN!(いいね)
  • 投稿のCSV出力

投稿機能についてはタイトルや詳細に並びカテゴリ、タグ、複数イメージ画像の投稿(サムネイル付き)
を投稿できるようになっています。

ユーザーは投稿をみて参加したくなったときにJOIN!ボタンを押すことで投稿主に通知が届きます。
参加の意思を伝えてコミュニケーションをとり、実際に趣味に参加しているようになります。

制作期間と当時の状況

サービスの大元は2ヶ月ほどフルタイムで勤務していた仕事終わりに毎日3時間ほど寝る前まで独学
を続けており、その後同じペースで半月ほどでプロトタイプを作り上げました。

ShumiShare プロトタイプ(完全独学バージョン)

私がプログラミングの個別トレーニングを受けるために上京しこのサービスを題材に学習を進めたので
コードがまるっきり再構築されたバージョンが今のサービスになります。

関西の山奥に住んでいるのでオフラインであって質問できるコミュニティもなく質問サイトでも
質問下手で回答が来なかったのでプロトタイプまでは完全独学です。

今後の目標

こちらのサービスは大規模集客やマネタイズを目的としていません。
あくまで私がruby on rails を使ったサービス作りやスキル習得のための学習のスペースとしての
アウトプットの一環になっています。(デザインに注力指定なのはそのためです)

こんなイメージ↓
肥大化したActiveRecordモデルをリファクタリングする7つの方法(翻訳)

  • ユーザー間のメッセージ機能
  • 投稿した趣味の次回開催日をイベント形式でタイムラインに表示
  • デザインを強化(JSキャッチーな感じにする)
  • 外部サービスとの連携
  • SQLを用いた処理を用いた機能

現在思いつくだけでこれくらいです。モデルに処理が増えれば処理を切り出して
リファクタリングの学習になるのですが・・・

githubでバージョンをセルフ管理しながら学習を進めていければと思います。

これを読まれている読者の方々からの要望やアドバイスやご指定大歓迎でっす!

どんな実装に苦労したか

ここでコードを書いて説明すると冗長になるので別のエントリでまとめますので簡単に。

コメントのバリデーションエラー表示

投稿にリレーションを組んだコメントフォームを投稿詳細内に実装する際にコメントがバリデーションエラーが
出たときにエラーをだすことができない。
こんな感じ。よくSNSで見るやつです。

f:id:travy:20180814194157p:plain

※ドットインストール投稿とコメントのリレーションを組んだ実装は後悔されているがコメントフォームの
エラー表示は難しいためか割愛されているので参考なしに実装するときに苦労しました。

複数モデルの同時保存

各投稿が1で投稿に対するイメージ画像が多の1対多の関係を持っている状態で
投稿フォームで投稿するときに送信ボタンをポチッとすると両方のモデル情報が
一気に保存される処理の実装にも苦労しました。

accepts_nested_attributes_for

なるものをモデル上に定義するとviewでやりたいことができるとか
調べたら出てきそうだけど見かけてもそれが自分の欲しかった機能ではなかったりだとか
そもそもツールが存在しているかどうかもわからないので「知らない」という点で
いろんなところで苦労しました。

投稿時に複数の画像を同時にアップロードしサムネイルを用意する

先ほどの内容と似ていますが下記のようなことがしたかったのです。

f:id:travy:20180814222448p:plain

よくありそうなやつじゃないですか?w
こちら私の作ったサービスの投稿画面の一部です。
3つの画像を同時に投稿または編集できるようになっており新規投稿時はサムネイルには
何も表示されないが、編集時には既存のものを表示しなければいけない。
フォームは表示できてもDBから画像データを取り出してフォームと一緒に表示?

ん?

これでもしばらく悩みました。
結局必要なことは先ほどにも登場した

accepts_nested_attributes_for
を定義することで使えるviewのヘルパーメソッド
fields_forでなんと初期値を設定できるらしい

そしてググった結果がこれなので先生のおっしゃる通りにやると

できた!!

こちらは公式っぽいページを見てもよくわからず(ていうかそんなこと書いてなかった?)
誰かのブログを見て解決に至りました。

rspecを書いて見る司令

個別トレーニング時にrspecを書いてみましょう!というissueをいただいたので
モデルとコントローラーのテストを書いてみました。

かの有名なバイブル
everyday railsを読んでrspecを書いてみました。

テキストの内容はわかるけど自分のコードのどこの何をテストしたらテストらしくなるのだろうか
とモヤモヤしながらテストを書きました。
(サークルアラウンドさんのトレーニングではこの辺りもしっかりカバーしてくれます)
テストは実際にサービスが動く言わばシュミレーションのように機能が間違いなく動くことを担保する
ように書くので実際のコードとは大きく書き方が異なる。(他にも意識することはありますが)

テストの流れは大きく分けて
前提条件、本処理、後処理
と3つのセクションに別れています。前提条件はbeforeやlet!みたいな処理が走る前にすでに定義されている
もので本処理は主にexampleに当たる部分ですね。そして後処理は私自身あまり馴染みがないので割愛で。

この辺りの感覚が全くないままやるわけですからかなり時間がかかりました。
(テスト中のDBの中身をみるツールとかあったらなぁ・・・)

gitの使い方

こちらもトレーニングが始まってgithub上で開発上のやりとりをするようになってからですが、
なんども失敗しました。

リモートにプッシュしてpull requestを出した後にローカルで先に編集結果をマージして
file changeが編集部分だけじゃないとか
masterで編集して「ああ!」ってなって編集した部分を全て元に戻して新たにブランチ作って
全部やり直したりとかpushするたびにコンフリクト(一人でやっているのに)出まくったりとか
一般的に初学者がやっちまうトラブルを1周して今ではそれなりに自分のやりたいようにgitを
支えていると思います(最初に比べて)

何回も「もうだめだ・・・」と全部ひっくり返したくなりましたがそんなこんなも学習の記録に
なるのがgithubのとても良いところ。

最近ではレビュワーがいかにレビューしやすいかを研究しながらgitを使っているくらいの余裕が
出始めました。

学習の題材として

travy.hatenablog.com

こちらの記事にもありますがこちらのサービスは私が通ったサークルアラウンドさんでの
個別トレーニングの題材としても使われています。
githubをみていただけるとわかりますが
メンターの佐藤氏(@ms2sato)とpull requestとレビューで
打ち合った(学習の)形跡が残っています。
スペシャルサンクスってやつですね。

今後の学習計画

  • 書籍を交えてコーディング脳を構築していく(体、脳共にプログラミングにもっと慣れていく)
  • ruby, ruby on rails の知識をさらに蓄えて新しいアプリを開発する(できればSNSっぽくないやつ)
  • SQLの学習を進める(logにでるSQLやDBの検索をより効率よくできるようになるため)
  • もくもく会セミナーに参加する(やりたいことがあるのでパスをどんどん作っていきたい)

最後に

ここまで読んでいただいてありがとうございます。
初めて作ったサービスでワクワクしながら作る半面エラーやバグにぶち当たり
苦労する場面も少なくなかったです。webサービスを開発するほんの小さな縮図と思って
どんなエラーにも立ち向かっていきました。その結果学習を始めた当初に比べるとはるかに成長できていることが
わかります。
サービスについて改善点やご指摘をいただけると今後の学習の良い機会になります。

それでは!