0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Ozzzagen(おざげん)

【ゼロから環境構築】Windows(WSL2)でLaravel + Filament環境構築からGitHub pushまで

Last updated at Posted at 2026-01-14

はじめに

Windows(WSL2)環境で、Docker (Laravel Sail) を使い、管理画面が簡単に作れる「Filament」を導入。さらにGitHubへSSH接続でPushするまでの全手順をまとめました。2026年現在の最新の作法に対応しています。

背景

「実務で開発経験はあるものの、プライベートでは久しく開発していない」
「優秀なエンジニアって業務以外でもコード書いたり、インプットしているイメージあるよなあ」
「生成AIが成長してきて、学習意欲がないエンジニアは淘汰されてしまわないだろうか」

そんなモヤモヤがあったので、思い切ってトライしてみました。

なお最終的には爆速で「環境構築から開発、デプロイまで」を目標にしていますが今回は開発段階までとなっています。デプロイは簡単そうな無料のものがなかったので断念・・・（初学者のためにもどうしてもすべて無料で簡単に行えるものにしたかったのです）

1. 環境構築 (WSL2 + Docker)

WSL2のインストール

  1. Windowsスタートメニューから「PowerShell」を管理者として実行。
  2. 次のコマンドを入力して実行（WSL2とUbuntuが自動インストールされます）。 
    $ wsl --install
  3. インストール完了後、Windowsを再起動。
  4. 再起動後、自動的にUbuntuのセットアップが始まるのでユーザー名とパスワードを設定。

VSCodeの準備

  1. VSCodeをインストール。

  2. 拡張機能から「WSL」をインストール。
    image.png

  3. VSCode左下の緑色アイコンをクリック ＞ WSLで新しいウィンドウを開きます。

  4. WSLのディストリビューション（Ubuntu）を選択します

  5. WSL内のターミナルが表示されるので、そこで作業するフォルダに移動します

2. Laravel Sailのセットアップ

WSL内のターミナル（Ubuntu）で作業します。
※VSCodeのメニューにあるTerminalもしくは Ctrl + Shift + ` (バッククォート) のシュートカットキーからターミナルを開くことができます。

Bash

# プロジェクトの作成（example-appは任意の名前）
$ curl -s "https://laravel.build/example-app" | bash

# プロジェクトディレクトリに移動
$ cd example-app

# Sailを使用してコンテナを起動
$ ./vendor/bin/sail up -d

sailコマンドのエイリアス設定

./vendor/bin/sail を sail だけで実行できるようにします。

.bashrc
# .bashrcに追記
alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)
Bash
# 設定の反映
source ~/.bashrc

3. Laravel Filamentの導入

Filament v3/v4系を導入し、管理画面の土台を作ります。

インストールとパネル設定

Bash
# Filamentのインストール
$ sail composer require filament/filament:"^4.5" -W

# 管理画面のセットアップ
# これを行わないと Call to a member function getCluster() on null エラーが出ます
$ sail artisan filament:install --panels

# ログイン用の管理ユーザー作成
$ sail artisan make:filament-user

モデルとリソースの生成

  1. モデルとマイグレーションの作成
Bash
$ sail php artisan make:model Post -m

database/migrations/xxxx_create_posts_table.php にカラム（title, contentなど）を追記します。

xxxx_create_posts_table.php
<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

2.モデルに追記
app/Models/Post.php に protected $fillable = ['title', 'content']; を追記します。

Post.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'content'];    //追加
}

3.Filamentリソースの生成

Bash
$ sail php artisan make:filament-resource Post

スキーマとテーブルに先ほど追加したものを定義します。
こちらはスキーマ↓
app/Filament/Resources/Posts/Schemas/PostForm.php

PostForm.php
<?php

namespace App\Filament\Resources\Posts\Schemas;

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class PostForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('title'),
                TextInput::make('content'),
            ]);
    }
}

こちらはテーブル↓
app/Filament/Resources/Posts/Tables/PostsTable.php

PostsTable.php
<?php

namespace App\Filament\Resources\Posts\Tables;

use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;

class PostsTable
{
    public static function configure(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content'),
            ])
            ->filters([
                //
            ])
            ->recordActions([
                EditAction::make(),
            ])
            ->toolbarActions([
                BulkActionGroup::make([
                    DeleteBulkAction::make(),
                ]),
            ]);
    }
}

4.ユーザ作成とマイグレーションの実行

Bash
# ユーザの作成
$ sail artisan make:filament-user
# マイグレーションの実行
$ sail php artisan migrate

コントローラを作成

Bash
$ sail php artisan make:controller ArticleController
  1. 生成されたコントローラに表示用の処理を追加する
    app/Http/Controllers/ArticleController.php
ArticleController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class ArticleController extends Controller
{
    public function index()
    {
        $posts = Post::orderBy('id', 'desc')->paginate(20);
        return view('articles.index', compact('posts'));
    }

    # 一件表示する用
    public function show($id)
    {
        $post = Post::findOrFail($id);
        return view('articles.show', compact('post'));
    }
}

ルーティングする

my-app/routes/web.php

web.php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArticleController;

Route::get('/', function () {
    return view('welcome');
});

Route::resource('articles', ArticleController::class)->only([
    'index', 'show'
]);

表示のための簡易な画面を用意する

下記にBladeファイルを作成します。
my-app/resources/views/articles/index.blade.php

index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article</title>
</head>

<body >
  <div >
    <h1>Article</h1>
    <ul>
      @foreach ($posts as $post)
      <li>
        <p>{{ $post->title }}</p>
        <div>
          {{ $post->content }}
        </div>
      </li>
      @endforeach
    </ul>
  </div>
</body>

</html>

実際に投稿して確認してみる

下記にアクセスしてログイン
http://localhost/admin/login

ログイン後はこのような管理画面が出てきます。
スクリーンショット 2026-01-15 013902.png

試しに投稿してみたいと思います。
image.png

右上のNew postをポチっと。
image.png

問題なく作成できてそうなので記事を確認してみます。
http://localhost/articles
image.png

問題なく機能してました！！！

4. GitHubの準備（SSH接続）

Githubのアカウント作成

SSHキーの作成

Bash
$ ssh-keygen -t ed25519 -C "your-email@example.com"

※３回質問がありますが何も入力せずエンターキーで大丈夫です。

GitHubへの公開鍵登録

1.鍵の中身を表示してコピーします。

Bash
$ cat ~/.ssh/id_ed25519.pub

2.GitHubの SSH and GPG keys 設定ページへ。
3.「New SSH key」をクリック。
4.Title: 「My PC」など。
5.Key: 先ほどコピーした文字列を貼り付けて「Add SSH key」。

5. GitHubへの初回Push

GitHub上で新しいリポジトリ（Private推奨）を作成
スクリーンショット 2026-01-15 020854.png
以下のコマンドを順に実行します。

Bash
# Gitの初期設定
git config --global user.name "あなたの名前"
git config --global user.email "登録したメールアドレス"

# ローカルリポジトリの初期化
git init
git add .
git commit -m "first commit"
git branch -M main

# リポジトリの接続先を「SSH」で登録（URLは自分のものに書き換え）
git remote add origin git@github.com:ユーザー名/リポジトリ名.git

# 送信
git push -u origin main

[!IMPORTANT]
Are you sure you want to continue connecting (yes/no/[fingerprint])? と聞かれたら、必ず yes と入力してエンターを押してください。

まとめ

これで WSL2 + Docker(Sail) + Filament でのWebアプリケーションの開発環境が整いました。
あとはここからGithubを用いてソースコード管理、テストやデプロイの自動化を行えばより効率的な開発環境が整うと思います。まだ試せてないですが、Claude Codeも使って中身を開発していくのも楽しそうです。

次はGitHub Actionsを利用した自動テスト（Pest/PHPUnit）だったり、デプロイ方法などを書いていけたらいいなと思います。本当はデプロイまでするつもりで進めていたのですが、無料のものがなくていったん断念（あるにはありそうだけど手間が・・・）

この調子で仕事以外もコードを書くようなエンジニアらしいエンジニアに成長していきたいです。

参考

【保存版】Laravel Sailで実現する3分間の爆速開発環境構築 – 完全ガイド2025
爆速CRUD管理画面作成パッケージ：Filamentの使い方
Laravel11で管理画面を作るのにFilamentをインストールしてみる
管理画面を簡単構築！Laravel Filamentで高速開発！
その他、Gemini 3とChat-GPT(どちらも無料版)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?