概要

今回は、2019年のGW期間（10日間）を全て費やして取り組むポートフォリオの製作過程を
取りまとめた内容を投稿させて頂きます。（投稿は毎日行う予定）

対象読者

• ポートフォリオ作りに迷っている方
• 新人がどの様にポートフォリオ作りに取り組むのか興味のある方

実際にポートフォリオ作成に取り組まれている方の参考になればと考えています。

注意点

私は、プログラミング歴「５ヶ月」で、実務「１ヶ月」の新人です。
なので、スキルはまだまだ未熟なので、ここで紹介した方法が、全て正攻法とは限りません。

しかし、私が犯した失敗というのは、全てがレアケースという訳では無いはずなので、ここで紹介する失敗例に、もし自身が遭遇した時に、どの様に対処するか？という観点で参考にして頂ければ、有用な情報になると考えています。

また、スキルというのは個人差もありますので、同じキャリアでも、私以上に出来る方や、困難な方もいらっしゃると思います。
なので、スキルの優劣を比較する必要は無いと考えています。

なお、サーバーサイドには「Ruby(Ruby on Rails)」を利用しております。

アプリケーションの概要

今回は「技術者向けの知見を、気軽に投稿して共有し合えるWEBサービス」を作る事にしました。
このサービスでは『非技術記事』も、気軽に投稿出来ます。
『非技術記事』とは、体験談・学習法・面白ネタ・コミュニティへの注意喚起など、技術との関連性が低い内容です。もちろん「技術記事」も投稿可能です。

今日一日の作業内容

ここからは、今日1日で取り組んだ作業内容をご説明します。

要件定義

まず、一からアプリケーションを開発するという事で、仕様を固める必要があります。
そこで、必要な機能・実装したい機能をリストアップして行きました。
それが、こちらです。

機能一覧

• アカウント認証機能（devise）
• 記事のCURD機能（一覧、新規作成、編集、削除）
• 記事へのコメントのCRUD機能（新規作成、編集、削除）
• 記事一覧のページネーション（kaminari）
• 画像のアップロード機能（Shrine）
• CKEditorによる記事の編集機能
• 記事の検索機能（ransack）
• 記事へのいいね機能（別ユーザーのみ）
• 記事のストック機能（自身の記事も可）
• 別ユーザーのフォロー機能
• Googleアナリティクスの導入
• AWSへデプロイ
• HTTPS化
• 通知機能（メール配信）
• トレンド機能（バッチ処理）
• Twitterとの連携：１（記事を引用ツイート出来る）
• Twitterとの連携：２（いいね数が一定を超えたら、公式垢が記事をツイート）
• ソーシャルログイン（Twitter、Facebook、Google）
• テストアカウントのリセット（バッチ処理）
• 画像をCDNで配信
• Docker/CircleCIでCI/CDパイプラインを構築
• レスポンシブ対応（Bootstrap）
• フロントをリッチにしたい（Vue.js）

※その他

• 非ログインでも「記事の投稿・いいね・ストック・フォロー機能」以外は利用可
• 全機能、単体テスト・統合テストを書く
• Qiitaライクな感じで！

要件というより、もはや「やりたい事リスト」の様になってしまいました😓

全てをGW期間中に完成させるのは不可能なので、未完成の部分については、それ以降の期間で取り組みたいと思います。

ガントチャート作成

次にこれらをタスクに落とし込み、ガントチャートを作成しました。
それがこちらです。

ガントチャート

オリジナルのスプレッドシートはこちら

本当はちゃんとしたタスク管理ツールを使った方が良いかもしれませんが、誰かに共有するでもなく、規模も小さいアプリという事もあり、スプレッドシートでざっと作りました。

なお、後半のタスクは実際に試した事が無い機能の実装なので、工数はかなり大雑把に見積もっています。

必須機能だけであれば、10日間で十分間に合うと思われるので、それ以降は、出来る範囲で実装して行ければと考えています。

ER図の作成

先程の機能一覧を参考に、ER図を作成します。
作成した物が、こちらです。

ER図

作成に当たっては、draw.ioというツールを利用しました。

これで過不足が無いか？と問われるとちょっと微妙なので、その辺りは開発を進めて行く中で、適宜修正して行きたいと考えています。

「rails new」

ここまで出来たら、いよいよアプリケーションの開発に移ります。
今回の開発環境は以下の通りです。

• Rails 5.2.3
• ruby 2.5.3
• MySQL 5.7
• bundler 2.0.1

アカウント認証機能（devise）

まずは、アカウント認証機能（ユーザーのサインアップ・サインイン）を実装しました。
実装には、gemの「devise」を利用しています。

#deviseを導入
rails g devise:install
#デバイスに関連付けたuserモデルを作成
rails g devise user
#devise用のビューファイルを作成
rails g devise:views

記事のCURD機能（一覧、新規作成、編集、削除）

次に記事のCURD機能（一覧、新規作成、編集、削除）を実装して行きます。
なお、記事の詳細は、postテーブルと分けていますが、この時点では一緒にして、CKEditor導入時に分けようと考えています

各リンクの文言などは、辞書ファイルから引用するようにしています。
辞書ファイルはmodel・view単位で分割しています。
なお、文言は仮で、フロント実装時に修正します。

#日本語の辞書ファイルを読み込むコード
config.i18n.default_locale = :ja
#分割した辞書ファイルを読み込むコード
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

ja:
  common:
    button:
      submit: 送る
      show: 詳細を開く
      edit: 編集しますか？
      delete: 削除する
    message:
      confirm_delete: ほんまにえぇんやな？ワイは知らんで！
      post_create: 作ったで！
      post_update: 更新したで！
      post_destroy: 消えてもうたわ！！！

今日の失敗

ここからは、本日取り組んだ内容で、個人的に失敗だったと感じた内容をまとめました。

記事投稿機能から実装しようとした

ER図を見て頂くと分かると思いますが、記事のデータを保存するpostsテーブルにはusersテーブルの外部キーが含まれています。

usersテーブルが無い状態で、usersテーブルの外部キーを持たせる事は出来ないので、記事投稿から作り出す場合、postsテーブルは外部キー無しで一旦機能を作成する必要があります。

しかし、その場合、二度手間が多々発生します。
例えば、下記のコードです。

  def new
    @post = current_user.posts.build
  end

これをUsersテーブルが無い状態で実装しようとすると、こうなります。

  def new
    @post = Post.new
  end

ここだけなら良いのですが、postインスタンスを生成している箇所は、他にも複数存在する為、それら全てに変更を加える必要があります（置換すれば一発かもしれないですが・・・）

また、今回は一覧・詳細表示の閲覧は非ログインでも可能な場合分けをする前提なので、アカウント認証機能がなければ、そのテストも行う事が出来ません。

以上の事から、機能の前提となるアカウント認証機能から実装すべきだったと考えています。

マイグレーション後にマイグレーションファイルを削除してしまった

上記の記事投稿機能をアカウント認証機能の前に実装しようとした兼ね合いで、作業フローがごたついてしまい、本来deviseと紐付けるべきUserモデルを普通に作成してしまいました。

それを削除するコマンドを打つ時に、誤まってrails d model postを実行してしまい、既に実行済みのマイグレーションファイルも削除されてしまいました。

schemaファイルには、マイグレーションの記録が残っている為、実行済みのマイグレーションファイルが無いと、マイグレーションでエラーが発生します。

#DBを削除
$ bundle exec rake db:drop
#DBを作成
$ bundle exec rake db:create
#マイグレーション実行
$ bundle exec rake db:migrate

開発以外の事に気を取られてしまった

諸々あって、中々開発に集中ができませんでした。

開発中は、ポモドーロでのタスク管理を徹底させるなどして、集中力が持続する取り組みが必要だと改めて感じました。

明日の予定

ページネーションを導入しようにも、フロントの実装が皆無なので、適当なCSSフレームワークでフロントを形にしたいと考えています。

• 記事一覧のページネーション（kaminari）
• 画像のアップロード機能（Shrine）
• CKEditorによる記事の編集機能

CKEditorまで導入出来たら、一気にテストを書いていく。

※追記：二日目の記事を投稿しました
【10日間でポートフォリオ作成に挑戦】2日目：アクセス制限〜コメントのCRUD機能