2023-11-22

【Git】Gitのブランチ運用について

はじめに

Gitのブランチを作成する際にfeature/〇〇などのブランチ名をつけたことがあると思うのですが、正直意味を理解していないまま使っていたりしませんか？意外と知らないブランチの知識をまとめてみました！！

ブランチについて

作業履歴を枝分かれさせていきバージョン管理していくためのもの。切り取ったブランチは他ブランチの影響を受けないため複数の作業を同時に進めることが出来ます。チームで開発する際は、それぞれが他のメンバーの作業の影響を受けずに開発が可能で、個人開発する際も作業履歴を綺麗に管理して見やすくなるので、利用しない選択肢は無い。

ブランチの種類

mainブランチ

Gitでリポジトリを新規作成するとデフォルトで作成されるブランチのこと。 git-flowでは、mainブランチに直接コミットすることはなく、マージを行うだけのブランチになります。 例 : main

developブランチ

開発の中心となるブランチのこと。開発中は、developブランチからブランチを切って、作業完了後に再びマージするという作業を繰り返します。リポジトリを新規作成したときに、masterブランチからdevelopブランチを切って作成します。 例 : develop/[バージョン番号など]

featureブランチ

機能の追加や変更、バグ修正などを行うブランチのこと。ブランチの名前は、変更の内容が分かるような名称にします。developブランチから派生させ、作業完了後に再び developブランチにマージします。そして、マージ完了後に削除します。 例 : feature/[機能名など]

releaseブランチ

製品をリリースするために使うブランチのこと。製品のリリース時には、関連する作業が必要になる場合が多いでしょう。 developブランチからreleaseブランチを切って、そのブランチでリリース作業を行います。リリース作業が完了したら、masterブランチと developブランチにマージし、masterブランチのマージコミットにリリースタグ（バージョンなど）を打ち、その後、release ブランチは削除する。 例 : release/[バージョン番号]

hotfixブランチ

製品のリリース時に重大な不具合が見つかった際に使うブランチのこと。 masterブランチからhotfixブランチを切って、緊急の修正を行う。修正完了後には、masterブランチとdevelopブランチにマージして、リリースタグ（マイナーバージョンなど）を打ち、その後、hotfixブランチは削除します。 例 : hotfix/[バージョン番号]/[バグ識別名] or hotfix/[バグ識別名]

supportブランチ

旧バージョンの保守とリリースを行うブランチのこと。サポートが必要なバージョンのmaster ブランチのコミットから派生させ、サポートを終了するまで独立してバグフィックスやリリースを行う。 例 : support/[バージョン番号]

終わりに

個人で使っているだけだとあまり使い分けることがないと思います。実際に実務で使う際にはこのような内容でブランチ運用が重要になってくるので参考になればと思います。

2023-11-19

【Git】Gitのブランチ運用について

プログラミング

はじめに

ブランチについて

ブランチの種類

mainブランチ

developブランチ

featureブランチ

releaseブランチ

hotfixブランチ

supportブランチ

終わりに

2023-11-04

【Laravel】Font Awesome を使用する方法(npmでインストール)

プログラミング PHP Laravel

本記事はLaravelプロジェクトFont Awesomeをインストールして使用する方法をまとめたものです。もし、間違えている点などがあれば教えていただければと思います。

環境

PHP 8 Laravel 10 npm 9 node 20

インストール

※npmが使用できることを前提としています。

① @fortawesome/fontawesome-freeをインストール

npm install @fortawesome/fontawesome-free --save

② インストールしたパッケージの使用

以下内容をapp.jsに記載してFont Awesomeを使用できるようにします。

import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/brands";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";

③ 再度実行する

npm run dev

④ viewにFont Awesomeを追加

<i class="fab fa-apple"></i>
<i class="fas fa-shopping-cart"></i>
<i class="far fa-heart"></i>

補足

パッケージの種類

Font Awesomeには大きく以下の2つのパッケージがある。

@fortawesome/fontawesome-free 全アイコンをインストールしすぐに使える
@fontawesome-svg-core 指定のアイコンのみインストールしAPIで詳細に制御できる

2023-11-01

【Laravel】paginationの実装

ページネーションを実装しよう

LaravelはPHPベースのウェブアプリケーション開発フレームワークで、データのページネーションを簡単に実装できる多くの機能を提供しています。
この記事では、Laravelでページネーションを実装する方法について詳しく説明します。

ページネーションの基本

ページネーションは、大量のデータを複数のページに分割し、ユーザーに分かりやすく表示するための方法です。
Laravelでは、Eloquentモデルやクエリビルダを使用してデータベースからデータを取得し、paginateメソッドを使用してページネーションを有効にすることができます。

$items = DB::table('items')->paginate(10);

このコードでは、itemsテーブルから10個のアイテムを1ページに表示するためのページネーションが有効になります。
ページネーション結果は、Bladeビューで表示することができます。

Bladeビューでページネーションを表示する

Bladeビューを使用して、ページネーションを表示します。
以下は、簡単な例です。

@foreach ($items as $item)
    <!-- アイテムを表示 -->
@endforeach

{{ $items->links() }}

$itemsはページネーションされたデータを表しており、linksメソッドを呼び出すことでページネーションリンクを表示します。
デフォルトでは、ページネーションはBootstrapスタイルのリンクとして表示されますが、カスタマイズも可能です。

カスタマイズ

Laravelのページネーションはカスタマイズ可能で、アプリケーションのデザインに合わせてスタイルを変更できます。
カスタマイズするためには、BladeビューでPaginatorファサードを使用することができます。

{{ $items->onEachSide(2)->links('pagination.custom') }}

この例では、onEachSideメソッドを使用して、現在のページの前後に2つのページリンクを表示するようにページネーションを設定しています。
さらに、linksメソッドの引数としてカスタムページネーションビューを指定しています。

ページネーションのカスタムビュー

カスタムページネーションビューを作成するには、resources/viewsディレクトリにpaginationディレクトリを作成し、その中にカスタムビューファイルを配置します。
例として、custom.blade.phpファイルを作成することができます。このファイルには、ページネーションリンクのHTML構造を定義します。

<div class="pagination">
    <span class="pagination__prev">{{ $paginator->previousPageUrl() }}</span>
    <span class="pagination__next">{{ $paginator->nextPageUrl() }}</span>
</div>

まとめ

Laravelのページネーションは、大量のデータを効果的に表示するための強力なツールです。
基本的なページネーションの実装からカスタマイズまで、さまざまな方法でページネーションを活用できます。
アプリケーションのデザインに合わせてページネーションを調整し、ユーザーエクスペリエンスを向上させましょう。
Laravelのページネーションに関する詳細な情報は、公式ドキュメントを参照してください。

2023-11-01

【Laravel】Laravel SocialiteでGoogleログインを実装

プログラミング Laravel PHP

ランキング参加中

プログラミング

本記事では、Laravel SocialiteでGoogleログインを実装する方法について紹介しています。

環境

PHP 8 Laravel 10 npm 9 node 20 OS mac

動作イメージ

Googleのログインボタンを押す
LoginWithGoogleControllerでGoogleの認証画面にリダイレクト
認証成功したら、LoginWithGoogleControllerで指定したルート(auth/google/callback)へリダイレクト
auth/google/callbackに来たら、LoginWithGoogleControllerのhandleGoogleCallback()でユーザを新規作成してDBへ登録
登録完了後にダッシュボード画面にリダイレクト

設定手順

Laravel Breezeをインストール

composer require laravel/breeze
php artisan migrate
php artisan breeze:install blade
npm install & npm run dev

Socialiteをインストール

composer require laravel/socialite
npm install && npm run dev
php artisan migrate

APIとサービスのメニューから認証情報を作成
OAuth クライアント ID の作成を選択
認証情報を取得する。URIをそれぞれ(認証リクエスト送信元・送信先)設定
.envの変更

GOOGLE_KEY="xxxxxxxxxx"
GOOGLE_SECRET="xxxxxxxxxx" 
GOOGLE_REDIRECT_URI="http://localhost:8000/auth/google/callback"

services.phpの変更

'google' => [
  'client_id' => env('GOOGLE_KEY'), 
  'client_secret' => env('GOOGLE_SECRET'), 
  'redirect' => env('GOOGLE_REDIRECT_URI'), 
],

ユーザーテーブルにgoogle_idカラムを追加

php artisan make:migration add_google_id_to_users_table

<?php


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;


class AddGoogleIdToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table("users", function (Blueprint $table) {
            // 追加
            $table->string("google_id")->nullable();
        });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table("users", function (Blueprint $table) {
            // 追加
            $table->dropColumn('google_id');
        });
    }
}

マイグレーションの実施

php artisan migrate

Userモデルのホワイトリストにgoogle_idを追加

 protected $fillable = [
        "name",
        "email",
        "password",
        // 追加
        "google_id",
 ];

ルーティング設定

<?php 
// 追加
use App\Http\Controllers\LoginWithGoogleController;

// 追加
Route::get("auth/google", [
  LoginWithGoogleController::class,
  "redirectToGoogle",
]);

// 追加
Route::get("auth/google/callback", [
  LoginWithGoogleController::class,
  "handleGoogleCallback",
]);

コントローラの作成

php artisan make:controller LoginWithGoogleController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// 追加
use Laravel\Socialite\Facades\Socialite;
// 追加
use App\Models\User;
// 追加
use Illuminate\Support\Facades\Auth;
// 追加
use Exception;

class LoginWithGoogleController extends Controller
{
    // 追加
    public function redirectToGoogle()
    {
        return Socialite::driver("google")->redirect();
    }

    // 追加
    public function handleGoogleCallback()
    {
        try {
            $user = Socialite::driver("google")->user();
            $finduser = User::where("google_id", $user->id)->first();

            if ($finduser) {
                Auth::login($finduser);
                return redirect()->intended("dashboard");
            } else {
                $newUser = User::create([
                    "name" => $user->name,
                    "email" => $user->email,
                    "google_id" => $user->id,
                    "password" => encrypt("123456dummy"),
                ]);

                Auth::login($newUser);

                return redirect()->intended("dashboard");
            }
        } catch (Exception $e) {
            \Log::error($e);
            throw $e->getMessage();
        }
    }
}

ログイン画面にGoogleのログインボタン追加 resources\views\auth\login.blade.php

<div class="flex items-center justify-end mt-4">
  <a href="{{ url('auth/google') }}">
    <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" style="margin-left: 3em;">
  </a>
</div>

2023-10-29

【個人開発】個人開発のプロダクト案の設計

個人開発プログラミング ChatGPT

誰もまずはつまずく部分だと思いますが何かを作りたいけど何を作るかアイディアがないってなると思います。私も今回そこでまずつまずいたのでその際にどのように対応をしたかをまとめます。同じことでつまづいた人いれば参考になればと思います。

何を使って解決したのか

「ChatGPT」です。本当に優秀です。。

解決手順

「ChatGPT」にどのような個人開発があるのかを聞いてみる
これによりまずはどのようなサービスがあるのかを調査
今自分が必要としているものやサービスを箇条書きで伝える
その中から「ChatGPT」にサービスとして作成する場合のおすすめを聞いてみる
選んでもらったサービスを深掘りしていく
サービスとして必要な機能を提案してもらう

まとめ

個人開発(収益などは考えていない場合)の設計は重要ですがアイディア出しに時間をかけずに、この後の設計・実装に時間をかける必要だと思っています。 ※みなさんそうだと思いますが学習のためならなおさら実装の時間を増やしたいですよね

2023-10-27

個人開発で地元を盛り上げたい

個人開発プログラミング

作成目標

私の地元である香川県を盛り上げるためのサービスです。

盛り上げると言っても何をするかというと、やはり香川=うどんだと思うので美味しいうどんのお店やイベント情報がまとめられているコミュニティサービスを作ろうと思いました。

使用技術

PHP
Laravel
Tailwind.css
MySQL

今回は私のLaravelの勉強兼私が香川に帰ったときに食べたいうどんを見つけるために作ろうと思いました。

今後はこちらの進捗や作成していく上で学んだことを発信していきます。