Ruby・Railsで作ったポートフォリオをPHP・Laravelでリメイクしてみた

15280 ワード
Laravel AWS Rails ポートフォリオ Docker Rails テキストリンク

目次

番号 項目
1 はじめに
2 URL
3 2つの言語を学習した理由
4 工事現場情報サイト（PHP、Laravelで作成）
5 Construction-Technologies-Site（Ruby、Railsで作成）
6 2つの言語を学習した感想
7 さいごに

1.はじめに

はじめまして！
ご覧いただき、ありがとうございます。
Ruby・Railsで作成したポートフォリオをPHP・Laravelで新たにリメイクしてみましたので、紹介させていただきます。

2.URL

工事現場情報サイト（PHP、Laravelで作成）

AWSデプロイ：https://koujigenba.site （公開停止しました。）
Herokuデプロイ：https://koujigenba.herokuapp.com （起動に数秒時間がかかります。）
GitHub：https://github.com/yuuhei-koutoku/cts-remake

Construction-Technologies-Site（Ruby、Railsで作成）

Herokuデプロイ：https://construction-technologies-site.herokuapp.com （起動に少し時間がかかります。）
GitHub：https://github.com/yuuhei-koutoku/cts

3.2つの言語を学習した理由

最初はRuby、Railsをメインに学習しました。
Rubyは日本人が開発した言語ということもあり、日本語の情報が多いから学習しやすいと考えこの言語を選択しました。
一つ目のポートフォリオ（Construction-Technologies-Site）が完成した後、他の言語で同じような機能・処理を実装したらどのような違いがあるのか気になりました。
そこで、PHP・Laravelを学習し、2つ目のポートフォリオ（工事現場情報サイト）を作成しました。

4.工事現場情報サイト（PHP、Laravelで作成）

概要

工事現場で役立つスキルやテクニックなどの知識・情報を互いに共有するサイトです。

制作背景

現在私は建設業で働いております。
工事現場で働いている人にとって、現場で活かせるスキルやテクニックは非常に有益で貴重なものです。
しかし、このような情報はあまりインターネット上では出回らないので、情報共有できるWebアプリを作成しました。

目的

現場で働いている人が互いにWeb上で情報共有することで、新たな知見や視点を得ることにより、普段働いている現場に役立てることを目的としています。

使用画面のイメージ

使用技術、バージョン

  • フロントエンド
    • HTML / CSS / MDBootstrap
    • vue.js 2.6.12
  • バックエンド
    • PHP 7.4.1
    • Laravel 6.20.26
  • インフラ、その他
    • git / GitHub
    • MySQL 8.0.25
    • Docker 17:03:37 / docker-compose 1.29.1
    • nginx 1.18.0（開発環境） / Apache 2.4.48（本番環境）
    • AWS（VPC、EC2、Route 53、RDS、S3、Certificate Manager）

機能

  • ユーザー関連
    • ユーザー登録機能
    • ログイン機能
    • ゲストログイン機能
  • 記事投稿関連
    • 新規作成
    • 編集
    • 削除
    • 画像投稿機能(AWS S3)
    • タグ(Vue.js)：各記事にタグを付けることが可能。記事に表示されているタグを押すと、そのタグが付けられた記事一覧が表示される。
  • キーワード検索機能：タイトルと本文より部分一致検索を行う。
  • コメント関連：各記事に対して、コメントを入力することができる。
    • 新規作成
    • 編集
    • 削除

工夫点

  • ユーザーが知りたい情報をすぐに得られるようアプリの設計し、機能を実装（検索機能、タグ機能）しました。
  • 全体的に色彩を明るくしたり、アイコン・イラストを用いることで、ユーザーインターフェースを向上しました。

苦労した点

  • AWS EC2へのデプロイが特に大変でした。Webサーバーにcomposerなどをインストールしたり、ドキュメントルートの設定を行ったりと、色々やることが多くてややこしかったです。laravelをAWS EC2にデプロイするを参考にしました。
  • AWS S3バケットへ画像ファイル保存も難しかったです。躓いた点は[Laravel]AWS S3に画像をアップロードする際に発生したエラーにてアウトプットしております。
  • 常時SSL化（URLをhttpからhttpsに変更）に関しては、参考になる情報が少なかったので苦戦しました。URLをhttpsに変える方法はLaravelを常時SSL化する（初心者向け）にまとめてみました。
  • 【後日追記】このポートフォリオはAWSへデプロイしていましたが、Herokuへの移行を行いました。頑張って作ったアプリなので今後も見れる形で残したいけど、AWSで公開し続けると料金が発生してしまうので、無料で利用できるHerokuへデプロイし直しました。Herokuデプロイ経験は2回目（1回目はRuby・Railsで作成したポートフォリオ）なので、簡単かなと予想していたのですが、実際にやってみると想像以上に大変でした。躓いた点はAWSにデプロイしたポートフォリオをHerokuへ移行しようとしたらかなり苦労したに記載しております。LaravelアプリケーションをAWSからHerokuへデプロイし直す方は参考になると思います。

ER図

テーブル概要

テーブル名 概要
users ユーザーを管理する。
articles 記事を管理する。
comments コメントを管理する。
tags タグ名を管理する。
article_tag 「どの記事に」「何のタグが」付いているかを管理する。articlesテーブルとtagsテーブルを紐付ける中間テーブル。

インフラ構成図

5.Construction-Technologies-Site（Ruby、Railsで作成）

概要

建設業界で働いている方をターゲットとした、建設関係の技術情報を投稿し共有するCGMサービスです。
（建設業界の技術情報はかなりマニアックなもので、IT業界の方々にとってはわかりにくいと判断したため、2つ目のポートフォリオではコンセプトを変更しました。）

制作背景

建設業界では自分たちの保持している情報を外部に発信する場が少ないので、気軽にWeb上に公開できるようなサービスがあったら面白いと考え作成しました。

目的

ユーザーが様々な技術情報に触れることで、新たな気づきを得たり知見を広めることを目的としています。

使用画面イメージ

使用技術

  • フロントエンド
    • HTML、CSS、Bootstrap
  • バックエンド
    • Ruby 2.5.3
    • Ruby on Rails 5.2.4.4
  • インフラ、その他
    • git / GitHub
    • MySQL 5.5.62
    • Heroku

機能

  • ユーザー関連
    • ユーザー登録機能
    • ログイン機能
    • ゲストログイン機能
  • 記事投稿関連
    • 新規作成
    • 編集
    • 削除
    • 画像投稿機能(AWS S3)
  • コメント関連：各記事に対して、コメントを入力することができる。
    • 新規作成
    • 編集
    • 削除

工夫点

  • gemのbulletをインストールし、N+1問題を解消して、パフォーマンスの向上を図りました。
  • gemのRuboCopをインストールして、コーディングの規約に沿っているかチェックを行いました。

苦労した点

  • そもそもプログラミングの独特な概念や考え方になかなか慣れませんでした。
  • 膨大なデータを保存していたコミットが消失する事象が発生し、消失したデータを書き直す作業が大変でした。それをきっかけにgitの重要さを学び、コミットやプッシュをこまめにするよう心がけています。

ER図

6.2つの言語を学習した感想

  • Ruby・Railsを学習した後にPHP・Laravelを学習したため、PHP・Laravelの方が比較的簡単に学ぶことができました。基本的な考え方（オブジェクト指向、MVCなど）は似ている部分が多いからだと思います。
  • 言語ごとの癖や違いを知ることができました。例えば、下記のコードは両方ともコメント機能におけるdestroyアクションについて記載しています。若干異なる部分もありますが、だいたい同じ処理を行っております。（じっくり読み解く必要はありません。さらっと流し読みで差し支えありません。）
app/controllers/comments_controller.rb
class CommentsController < ApplicationController
  before_action :set_technology, only: %i[create edit update destroy]
  before_action :correct_user, only: %i[edit destroy]

  def destroy
    @comment.destroy
    redirect_to technology_path(@technology)
    flash[:success] = '正常に削除されました'
  end

  private

  def set_technology
    @technology = Technology.find(params[:technology_id])
  end

  def correct_user
    @comment = current_user.comments.find_by(id: params[:id])
    unless @comment
      redirect_to technology_path(@technology)
    end
  end
end
app/Http/Controllers/CommentController.php
<?php

namespace App\Http\Controllers;

use App\Comment;
use App\Http\Requests\CommentRequest;

class CommentController extends Controller
{
    // ポリシーをコントローラーで使用
    public function __construct()
    {
        $this->authorizeResource(Comment::class, 'comment');
    }

    public function destroy(Comment $comment)
    {
        $comment->delete();

        return redirect()->route('articles.show', $comment->article);
    }
}

Rubyの場合インスタンス変数に@を使用していますが、PHPの場合は$を使用しています。また、Rubyの関数はdefを使用していますが、PHPの場合はfunctionを使用しています。このように、言語ごとの相違点を知ることが出来たのは面白かったです。

7.さいごに

アプリ実装中は何度もエラーで躓きましが、その度に【状況把握→情報収集+仮説を立てる→検証】を繰り返して解決していきました。
エラーが解消されて、自分の想定通りに動いたときは、本当に嬉しくて一人でガッツポーズしていました（笑）

2つの言語を学んだこと自体は面白い試みでしたが、遠回りをしてしまったとも思っています。
他の方には特別な理由がない限りあまりオススメしません......
初学者は1つの言語に集中して学習することを推奨します。

最後まで読んでいただき、ありがとうございました！