皆さんは、個人開発って好きですか？
個人開発をやってみると、時間が足りなかったり、モチベーションが続かなかったりして、なかなか継続するのが難しいですよね。
私自身、「もっと簡単にアプリが作れたらなあ…」 と、よく感じています。
そんな中、Googleが5月20日（火）に発表した新AIツール「Stitch」 を使ってみたところ、UIデザインの作成時間を大幅に短縮し、サクッと個人開発に取り組めました！
この記事では、その体験をシェアしたいと思います。
「そもそもStitchって何？」という方は、以下の記事で詳しく解説しているので、ぜひチェックしてみてください！
今回作成するアプリは、シンプルなToDoアプリ「TaskMaster」です。
誰でも簡単に個人開発に挑戦できるよう、手順に沿って進めるだけで完成する内容になっています！
ぜひ、皆さんの環境でも一緒に作ってみてください。
この記事の目的は「個人開発の楽しさ」を体験してもらうことなので、Laravelの詳細な解説は省略します。
なお、Laravelを使って開発を進めていきますので、事前にLaravelプロジェクトを作成してください。
まだLaravelのローカル開発環境をお持ちでない方は、以下の記事を参考にセットアップをお願いします。
それでは、始めましょう！
まずは、ユーザーに見せる画面部分であるビューを作成します。
さっそくStitchにアクセスして、ToDoアプリのUIデザインを作ってみましょう！
Webアプリケーションを作成するので、「Web」を選択し、「Make me a ToDo app.」とだけ入力して、デザインを生成してもらいます。
やることはこれだけです。
20秒ほど待つと、ToDoアプリのタスク一覧画面、タスク追加・編集画面、タスク詳細画面が、このように自動生成されました！
いい感じですね！
では、Stitchが生成したUIデザインのコードを、ビュー用のファイルに貼り付けましょう。
以下のコマンドでファイルを作成してください。
mkdir resources/views/layouts && touch resources/views/layouts/app.blade.php
mkdir resources/views/tasks && touch resources/views/tasks/{ create,edit,index,show} .blade.php
作成できたら、以下の折りたたみセクションを開いて、それぞれのファイルにコードを貼り付けてください。
.blade.php ファイルに貼り付けるため、生成されたコードの一部をLaravel Blade向けに調整しています。
resources\views\layouts\app.blade.php
rel= "preconnect" href= "https://fonts.gstatic.com/" crossorigin= "" />
rel= "stylesheet"
as= "style"
onload= "this.rel="stylesheet""
href= "https://fonts.googleapis.com/css2?display=swap&family=Inter%3Awght%40400%3B500%3B700%3B900&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
/>
rel= "icon" type= "image/x-icon" href= "data:image/x-icon;base64," />
"https://cdn.tailwindcss.com?plugins=forms,container-queries" >
class= "relative flex size-full min-h-screen flex-col bg-white group/design-root overflow-x-hidden" style= 'font-family: Inter, "Noto Sans", sans-serif;' >
class= "layout-container flex h-full grow flex-col" >
class= "flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f5] px-10 py-3" >
class= "flex items-center gap-4 text-[#111418]" >
class= "size-4" >
viewBox= "0 0 48 48" fill= "none" xmlns= "http://www.w3.org/2000/svg" > d= "M6 6H42L36 24L42 42H6L12 24L6 6Z" fill= "currentColor" > class= "text-[#111418] text-lg font-bold leading-tight tracking-[-0.015em]" > TaskMaster class= "flex flex-1 justify-end gap-8" >
href= "{{ route('tasks.index') }}" class= "flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 bg-[#f0f2f5] text-[#111418] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5" >
class= "text-[#111418]" data-icon= "ListBullets" data-size= "20px" data-weight= "regular" >
xmlns= "http://www.w3.org/2000/svg" width= "20px" height= "20px" fill= "currentColor" viewBox= "0 0 256 256" >
d= "M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"
>
class= "bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
style= 'background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCg_qeL1_wnaNazznUbHCt6jqnmY_Tjtv0YoWu9OpTPfQlLmYMiOuKFDisAsnjRLkvoy9QI8ZhxE6EsvyLTZKHHg7S9WnYcjx20N1DrS1RpOCPR3O3sadstYTgSz68Iv3JdbKAMF1tmzKyi64EwV5IBQn3f2dzxf8qtEOXo4iFxpm6ss6xqiKLJjuROusBeVUrVblJU-2Ka3yRAnwApUxrdQnLiS3xRsd-T4fhTdeIvEtCFFSOHtIQUJYcbljjsZEA229tdZQq-J-I");'
>
class= "px-40 flex flex-1 justify-center py-5" >
@yield('content')
resources\views\tasks\create.blade.php
@extends('layouts.app')
@section('content')
class= "layout-content-container flex flex-col max-w-[960px] flex-1" >
class= "flex flex-wrap justify-between gap-3 p-4" > class= "text-[#111418] tracking-light text-[32px] font-bold leading-tight min-w-72" > Add Task
resources\views\tasks\edit.blade.php
@extends('layouts.app')
@section('content')
class= "layout-content-container flex flex-col max-w-[960px] flex-1" >
class= "flex flex-wrap justify-between gap-3 p-4" > class= "text-[#111418] tracking-light text-[32px] font-bold leading-tight min-w-72" > Edit Task
resources\views\tasks\index.blade.php
@extends('layouts.app')
@section('content')
class= "layout-content-container flex flex-col max-w-[960px] flex-1" >
@foreach ($tasks as $task)
class= "flex items-center gap-4 bg-white px-4 min-h-[72px] py-2 justify-between" >
class= "flex items-center gap-4" >
class= "flex flex-col justify-center" >
class= "text-[#111418] text-base font-medium leading-normal line-clamp-1" > {{ $task->name }}
class= "text-[#60758a] text-sm font-normal leading-normal line-clamp-2" > {{ $task->due_date }}
@endforeach
resources\views\tasks\show.blade.php
@extends('layouts.app')
@section('content')
class= "layout-content-container flex flex-col max-w-[960px] flex-1" >
class= "flex flex-wrap justify-between gap-3 p-4" > class= "text-[#111418] tracking-light text-[32px] font-bold leading-tight min-w-72" > {{ $task->name }}
class= "flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-2" >
class= "flex flex-col min-w-40 flex-1" >
class= "text-[#111418] text-base font-medium leading-normal pb-2" > Due Date
class= "flex w-full min-w-0 flex-1 overflow-hidden rounded-lg text-[#111418] border border-[#dbe0e6] bg-white h-14 p-[15px] text-base font-normal leading-normal" > {{ $task->due_date }}
class= "flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-2" >
class= "flex flex-col min-w-40 flex-1" >
class= "text-[#111418] text-base font-medium leading-normal pb-2" > Notes
class= "flex w-full min-w-0 flex-1 overflow-hidden rounded-lg text-[#111418] border border-[#dbe0e6] bg-white h-14 p-[15px] text-base font-normal leading-normal whitespace-pre-line" > {{ $task->note }}
貼り付けて保存したら、ビューの作成は完了です。
こんなに早くUIデザインが完成するのは、本当にありがたいですね！
続いて、データベースの処理を担当するモデルを作成します。
以下のコマンドで、タスクの追加・取得・更新・削除を担当する Task モデルと関連リソースを一括生成しましょう。
./vendor/bin/sail artisan make:model Task -mcr
今回のToDoアプリでは、タスクに「名前」「メモ」「期限」を設定できるようにしたいので、app/Models/Task.php の Task クラスに以下のコードを追記します。
protected $fillable = [ 'name' , 'note' , 'due_date' ];
次に、マイグレーションファイル database/migrations/XXXX_XX_XX_XXXXXX_create_tasks_table.php の Schema::create() メソッドに、以下のコードを追記します。
マイグレーションファイルの XXXX_XX_XX_XXXXXX には、作成日時が自動的に入ります。
$table -> string ( 'name' );
$table -> text ( 'note' ) -> nullable ();
$table -> date ( 'due_date' ) -> nullable ();
以下のコマンドを実行すると、マイグレーションファイル（データベースの設計図）に基づいて、テーブルが作成されます。
./vendor/bin/sail artisan migrate
これでモデルの作成は完了です。
アプリの完成までもう一息ですね！
最後に、ユーザーのリクエストに応じてデータ処理や画面表示を指示するコントローラを作成します。
app/Http/Controllers/TaskController.php の既存コードを削除し、以下のコードを貼り付けてください。
app/Http/Controllers/TaskController.php
namespace App\Http\Controllers ;
use App\Models\Task ;
use Illuminate\Http\Request ;
class TaskController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index ()
{
$tasks = Task :: all ();
return view ( 'tasks.index' , compact ( 'tasks' ));
}
/**
* Show the form for creating a new resource.
*/
public function create ()
{
return view ( 'tasks.create' );
}
/**
* Store a newly created resource in storage.
*/
public function store ( Request $request )
{
Task :: create ( $request -> all ());
return redirect () -> route ( 'tasks.index' );
}
/**
* Display the specified resource.
*/
public function show ( Task $task )
{
return view ( 'tasks.show' , compact ( 'task' ));
}
/**
* Show the form for editing the specified resource.
*/
public function edit ( Task $task )
{
return view ( 'tasks.edit' , compact ( 'task' ));
}
/**
* Update the specified resource in storage.
*/
public function update ( Request $request , Task $task )
{
$task -> update ( $request -> all ());
return redirect () -> route ( 'tasks.index' );
}
/**
* Remove the specified resource from storage.
*/
public function destroy ( Task $task )
{
$task -> delete ();
return redirect () -> route ( 'tasks.index' );
}
}
次に、ウェブページのURLと処理を結びつけるため、routes\web.php に以下のコードを追記します。
use App\Http\Controllers\TaskController ;
Route :: resource ( '/tasks' , TaskController :: class );
これでToDoアプリは完成です！
それでは、以下のURLから完成したToDoアプリにアクセスしてみましょう！
同じ手順で開発した方は、アクセスすると以下のようなタスク一覧画面が表示されるはずです。
現在はタスクがないので、さっそく追加してみましょう！
「New Task」ボタンを押してタスク追加画面へ移動し、「企画プレゼン資料の作成」というタスクを追加してみます。
おお、ちゃんと追加されましたね！
先ほど追加したタスクに期限とメモを設定し忘れたので、「Edit」ボタンから編集してみましょう！
編集内容を入力したら「Edit Task」ボタンを押します。
無事に反映されましたね。
「Details」ボタンでタスクの詳細も確認しましたが、メモもきちんと追加されています！
最後に、複数のタスクを作成したので、タスク名の左にある「〇」ボタンからタスクを完了してみます。
「企画プレゼン資料の作成」を選択してみましたが、ちゃんと消えましたね！
1日でサクッと作ったアプリですが、思った以上にいい感じに仕上がりました…！
今回は、Googleの新AIツール「Stitch」を使って、UIデザインからToDoアプリの開発までを体験してみました。
もちろん、多少の修正は必要ですが、UIデザインで悩まずに開発に集中できるというのは、大きなメリットだと感じました！
ぜひ皆さんも、プロトタイプの作成や個人開発を始めるきっかけとして、一度試してみてください！
