php artisan make:controller ArticleController<\/strong><\/pre>\n\u3059\u308b\u3068\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u4e2d\u8eab\u3092\u6b21\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
app\/Http\/Controllers\/ArticleController.php<\/strong><\/p>\n<?php\n\nnamespace App\\Http\\Controllers;\n\nuse App\\Models\\Article;\nuse Illuminate\\Http\\Request;\n\nclass ArticleController extends Controller\n{\n public function index()<\/strong>\n {<\/strong>\n return view('article.index');<\/strong>\n }<\/strong>\n\n public function list()<\/strong>\n {<\/strong>\n return Article::select('id', 'title', 'content')->paginate(10);<\/strong>\n }<\/strong>\n\n public function store(Request $request)<\/strong>\n {<\/strong>\n \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u307e\u3059<\/strong>\n\n $article = new Article();<\/strong>\n $article->fill($request->only(['title', 'content']));<\/strong>\n $result = $article->save();<\/strong>\n\n return ['result' => $result];<\/strong>\n }<\/strong>\n\n public function update(Article $article, Request $request)<\/strong>\n {<\/strong>\n \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u307e\u3059<\/strong>\n\n $article->fill($request->only(['title', 'content']));<\/strong>\n $result = $article->save();<\/strong>\n\n return ['result' => $result];<\/strong>\n }<\/strong>\n\n public function destroy(Article $article)<\/strong>\n {<\/strong>\n \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u307e\u3059<\/strong>\n\n $result = $article->delete();<\/strong>\n\n return [ 'result' => $result];<\/strong>\n }<\/strong>\n}<\/pre>\n\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h2>\n
\u5148\u307b\u3069\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4e2d\u3067\u30bb\u30c3\u30c8\u3057\u305f\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308a\u307e\u3059\u3002<\/p>\n
resources\/views\/article\/index.blade.php<\/strong><\/p>\n<html><\/strong>\n<head><\/strong>\n <link href=\"https:\/\/unpkg.com\/tailwindcss@^2\/dist\/tailwind.min.css\" rel=\"stylesheet\"><\/strong>\n<\/head><\/strong>\n<body><\/strong>\n<div id=\"app\" class=\"p-5\"><\/div><\/strong>\n<script src=\"{{ asset('js\/app.js') }}\"><\/script><\/strong>\n<\/body><\/strong>\n<\/html><\/strong><\/pre>\n\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h2>\n
\u305d\u3057\u3066\u3001\u30eb\u30fc\u30c8\u3067\u3059\u3002<\/p>\n
routes\/web.php<\/strong><\/p>\nuse App\\Http\\Controllers\\ArticleController;<\/strong>\n\nRoute::get('article', [ArticleController::class, 'index']);<\/strong>\nRoute::get('article\/list', [ArticleController::class, 'list']);<\/strong>\nRoute::post('article', [ArticleController::class, 'store']);<\/strong>\nRoute::put('article\/{article}', [ArticleController::class, 'update']);<\/strong>\nRoute::delete('article\/{article}', [ArticleController::class, 'destroy']);<\/strong><\/pre>\nSvelte \u306e\u90e8\u5206\u3092\u3064\u304f\u308b<\/h2>\n
\u3067\u306f\u3001\u30e1\u30a4\u30f3\u306eSvelte<\/code>\u90e8\u5206\u3067\u3059\u3002
\n\u4eca\u56de\u4f5c\u6210\u3059\u308b\u306e\u306f\u4ee5\u4e0b\uff13\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002<\/p>\n\n- App.svelte\uff1a \u30da\u30fc\u30b8\u306e\u57fa\u672c\u306b\u306a\u308b\u90e8\u5206\u3002\u3053\u306e\u4e2d\u304b\u3089\u4ee5\u4e0b\uff12\u3064\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u547c\u3073\u51fa\u3057\u307e\u3059<\/li>\n
- ArticleList.svelte\uff1a \u8a18\u4e8b\u30c7\u30fc\u30bf\u306e\u4e00\u89a7\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u4eca\u56de\u306f\u30b7\u30f3\u30d7\u30eb\u306a\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u3051\u307e\u3059<\/li>\n
- ArticleInput.svelte\uff1a \u767b\u9332\u30fb\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u5165\u529b\u30d5\u30a9\u30fc\u30e0\u3067\u3059<\/li>\n<\/ul>\n
\u3067\u306f\u3001\uff11\u3064\u305a\u3064\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
resources\/js\/svelte\/components\/App.svelte<\/strong><\/p>\n<script><\/strong>\n\n import ArticleList from \".\/article\/ArticleList.svelte\";<\/strong>\n import ArticleInput from \".\/article\/ArticleInput.svelte\";<\/strong>\n\n let params = {<\/strong>\n id: '',<\/strong>\n title: '',<\/strong>\n content: ''<\/strong>\n };<\/strong>\n let articleList; \/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981<\/strong>\n\n const onEdit = e => {<\/strong>\n\n params = e.detail.article;<\/strong>\n\n };<\/strong>\n\n<\/script><\/strong>\n\n<div><\/strong>\n <h1 class=\"text-3xl mb-4\"><\/strong>\n Svelte \u306eCRUD\u30b5\u30f3\u30d7\u30eb<\/strong>\n <\/h1><\/strong>\n <div class=\"grid grid-cols-2 gap-7\"><\/strong>\n <div><\/strong>\n <ArticleList bind:this={articleList} on:article-edit={onEdit}><\/ArticleList><\/strong>\n <\/div><\/strong>\n <div><\/strong>\n <ArticleInput params=\"{params}\" on:article-saved={articleList.getArticles}><\/ArticleInput><\/strong>\n <\/div><\/strong>\n <\/div><\/strong>\n<\/div><\/strong><\/pre>\n\u3053\u306e\u4e2d\u3067ArticleList<\/code>\u3068ArticleInput<\/code>\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\u307e\u305f\u3001\u91cd\u8981\u306a\u306e\u304cbind:this={articleList}<\/code>\u306e\u90e8\u5206\u3067\u3001\u3053\u308c\u306fArticleList.svelte<\/code>\u5185\u306b\u3042\u308b\u30e1\u30bd\u30c3\u30c9getArticles()<\/code>\u3092\u547c\u3073\u51fa\u3059\u305f\u3081\u306b\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002\uff08Svelte<\/code>\u304c\u521d\u898b\u306a\u306e\u3067\u3082\u3063\u3068\u30b9\u30de\u30fc\u30c8\u306a\u65b9\u6cd5\u304c\u3042\u308b\u306e\u304b\u3082\u30fb\u30fb\u30fb\ud83d\ude05\uff09<\/p>\nresources\/js\/svelte\/components\/article\/ArticleList.svelte<\/strong><\/p>\n<script><\/strong>\n\n import { onMount, createEventDispatcher } from 'svelte';<\/strong>\n\n const dispatch = createEventDispatcher();<\/strong>\n let articles = [];<\/strong>\n let page = 1;<\/strong>\n let hasPrevPage = false;<\/strong>\n let hasNextPage = false;<\/strong>\n\n export const getArticles = () => {<\/strong>\n\n const url = `\/article\/list?page=${page}`;<\/strong>\n axios.get(url)<\/strong>\n .then(response => {<\/strong>\n\n articles = response.data.data;<\/strong>\n hasPrevPage = response.data.prev_page_url !== null;<\/strong>\n hasNextPage = response.data.next_page_url !== null;<\/strong>\n\n });<\/strong>\n\n };<\/strong>\n const onEdit = article => {<\/strong>\n\n dispatch('article-edit', { article: article });<\/strong>\n\n };<\/strong>\n const onDelete = article => {<\/strong>\n\n if(confirm('\u524a\u9664\u3057\u307e\u3059\u3002\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f')) {<\/strong>\n\n const url = `\/article\/${article.id}`;<\/strong>\n axios.delete(url)<\/strong>\n .then(response => {<\/strong>\n\n if(response.data.result === true) {<\/strong>\n\n getArticles();<\/strong>\n\n }<\/strong>\n\n });<\/strong>\n\n }<\/strong>\n\n }<\/strong>\n const onMovePage = mode => {<\/strong>\n\n if(mode === 'next') {<\/strong>\n\n page++;<\/strong>\n\n } else if(mode === 'prev') {<\/strong>\n\n page--;<\/strong>\n\n
![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2021\/06\/no_4.png\")
\u300c\u3044\u3089\u306a\u3044\u30e2\u30ce\u3092\u3042\u3052\u305f\u9014\u7aef\u3001![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/01\/laravel_svelte_1.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/01\/laravel_svelte_2.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2021\/11\/laravel_livewire_crud_2.png\")
<\/p>\n