フロントにおけるLaravel Laravel.hiroshima

ϑϩϯτʹ͓͚ΔLaravel 2019/11/24 Laravel.hiroshima vol.2

Laravel.hiroshima ޿ౡͰLaravelΛ΋ͬͱ੝Γ্͍͛ͨͱ͍͏ؾ࣋ ͔ͪΒൃ଍ͨ͠ษڧձίϛϡχςΟͰ͢ɻ • ಺༰͸࠲ஊձɺ΋͘΋͘ձɺLTձͳͲ… • ࠓճͰ2ճ໨

Laravel.hiroshima ͜ͷษڧձ͸ϘϥϯςΟΞϕʔεͰߦ͓ͬͯΓɺ ஌ࣝͷγΣΞɾॿ͚߹͍Ͱ੒Γཱ͍ͬͯ·͢ɻ ࢀՃͷࡍ͸͝ཧղɾ͝ڠྗΛ͓ئ͍͍ͨ͠· ͢ɻ

Laravelͱ͸

2011೥6݄ʹϦϦʔε͞ΕͨɺΦʔϓϯιʔεͷ PHPϑϨʔϜϫʔΫɻ ιʔείʔυ͸GithubʹϗεςΟϯά͞Ε͍ͯ ͯɺGithubͰͷελʔ֫ಘ਺͕PHPϑϨʔϜ ϫʔΫͷதͰ΋࠷΋ଟ͍ɻ

ϑϩϯτʹ͓͚ΔLaravel

1.BladeςϯϓϨʔτ

BladeςϯϓϨʔτͱ͸ Blade͸γϯϓϧͳ͕ΒύϫϑϧͳLaravelͷς ϯϓϨʔτΤϯδϯͰ͢ɻଞͷਓؾͷ͋ΔPHP ςϯϓϨʔτͱ͸ҟͳΓɺϏϡʔͷதʹPHPΛ ௚઀هड़͢Δ͜ͱΛڐ͍ͯ͠·͢ɻ

BladeςϯϓϨʔτͱ͸ BladeϏϡʔʹ͸.blade.phpϑΝΠϧ֦ுࢠΛ ͚ͭɺ௨ৗ͸resources/viewsσΟϨΫτϦͷத ʹઃஔ͠·͢ɻ

ͳʹ͕ศརͳͷʁ

2.ςϯϓϨʔτͷܧঝ

2-1.ϨΠΞ΢τఆٛ

αϯϓϧίʔυ <!—- resources/views/layouts/app.blade.phpͱͯ͠อଘ —-> <html> <head> <title>αϯϓϧΞϓϦ - @yield(‘title’)</title> </head>
<body> @section(‘sidebar’) ͕͜͜ϝΠϯͷαΠυόʔ @show <div class=“container”> @yield(‘content’) </div> </body> </html>

@section͸໊લ͕ࣔ͢ͱ͓Γʹίϯςϯπͷη ΫγϣϯΛఆٛ͠ɺҰํͷ@yield͸ࢦఆͨ͠η Ϋγϣϯͷ಺༰Λදࣔ͢ΔͨΊʹ࢖༻͠·͢ɻ

2-2.ϨΠΞ΢τ֦ு

ࢠͷϏϡʔΛఆٛ͢Δʹ͸ɺʮܧঝʯ͢ΔϨΠ Ξ΢τΛࢦఆ͢ΔɺBlade@extendsΛ࢖༻͠· ͢ɻBladeϨΠΞ΢τΛ֦ு͢ΔϏϡʔ͸ɺ @sectionΛ࢖༻͠ɺϨΠΞ΢τͷηΫγϣϯʹ ಺༰Λૠೖ͠·͢ɻ·ͨɺϨΠΞ΢τͰηΫ γϣϯΛදࣔ͢Δʹ͸@yieldΛ࢖༻͠·͢ɻ

αϯϓϧίʔυ  @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @@parent
<p>͜͜͸ϝΠϯͷαΠυόʔʹ௥Ճ͞ΕΔ</p> @endsection @section('content') <p>͕͜͜ຊจͷίϯςϯπ</p> @endsection

sidebarηΫγϣϯͰ͸ɺϨΠΞ΢τͷαΠυ όʔͷ಺༰Λίϯςϯπʹ্ॻ͖͢ΔͷͰ͸ͳ ͘௥Ճ͢ΔͨΊʹ@@parentΛ࢖༻͍ͯ͠·͢ɻ @@parent͸ϏϡʔΛϨϯμ͢Δͱ͖ʹɺϨΠ Ξ΢τͷ಺༰ʹஔ͖׵ΘΓ·͢ɻ

3.σʔλදࣔ

αϯϓϧίʔυ Route::get('greeting', function () { return view('welcome', ['name' => 'Samantha']);
}); Hello, {{ $name }}. BladeςϯϓϨʔτʹ౉͢ʹ͸…

Bladeͷ{{ }}ه๏͸XSS߈ܸΛ๷͙ͨΊɺࣗಈత ʹPHPͷhtmlspecialcharsؔ਺Λ௨͞Ε·͢ɻ Ϗϡʔʹ౉͞Εͨม਺ͷ಺༰Λදࣔ͢Δ͚ͩʹ ݶΒͣɺPHPؔ਺ͷ݁ՌΛecho͢Δ͜ͱ΋Ͱ͖ ·͢ɻ The current UNIX timestamp
is {{ time() }} .

σʔλΛΤεέʔϓͨ͘͠ͳ͍৔߹͸ɺҎԼͷ ߏจΛ࢖༻͍ͯͩ͘͠͞ɻ Hello, {!! $name !!}.

4.੍ޚߏจ

4-1.Ifจ

αϯϓϧίʔυ @if (count($records) === 1) ̍Ϩίʔυ͋Δʂ @elseif (count($records) > 1)
ෳ਺Ϩίʔυ͋Δʂ @else Ϩίʔυ͕ͳ͍ʂ @endif

ifจͷߏจʹ͸ɺ@ifɺ@elseifɺ@elseɺ@endif Λ࢖༻͠·͢ɻ͜ΕΒͷ࢖͍ํ͸PHPͷߏจͱ ಉ͡Ͱ͢ɻ

@issetͱ@empty΋ɺಉ໊ͷPHPؔ਺ͷศརͳ γϣʔτΧοτͱͯ͠࢖༻Ͱ͖·͢ɻ @isset($records) // $records͸ఆٛࡁΈͰnullͰͳ͍ @endisset @empty($records) // $records͕ʮۭʯͩ @endempty

4-2.Switchจ

αϯϓϧίʔυ @switch($i) @case(1) ࠷ॳͷέʔε @break @case(2) ̎൪Ίͷέʔε @break @default σϑΥϧτͷέʔε
@endswitch

@switchɺ@caseɺ@breakɺ@defaultɺ @endswitchΛ࢖༻͠ɺSwitchจΛߏ੒Ͱ͖· ͢ɻ

4-3.܁Γฦ͠

αϯϓϧίʔυ @for ($i = 0; $i < 10; $i++) ݱࡏͷ஋͸ɿ
{{ $i }} @endfor @foreach ($users as $user) <p>͜Ε͸ {{ $user->id }} ϢʔβʔͰ͢ɻ</p> @endforeach @forelse ($users as $user) <li>{{ $user->name }}</li> @empty <p>Ϣʔβʔͳ͠</p> @endforelse @while (true) <p>ແݶϧʔϓத</p> @endwhile

5.ϑΥʔϜ

5-1.CSRFϑΟʔϧυ

ΞϓϦέʔγϣϯͰHTMLϑΥʔϜΛఆٛ͢Δ ৔߹ɺCSRFอޢϛυϧ΢ΣΞ͕ϦΫΤετΛݕ ࠪͰ͖ΔΑ͏ʹ͢ΔͨΊɺӅ͠CSRFτʔΫϯ ϑΟʔϧυΛؚΊΔඞཁ͕͋Γ·͢ɻ͜ΕΛ @csrfΛ࢖༻ͯ͠ߦ͍·͢ɻ <form method="POST" action="/profile"> @csrf ...
</form>

5-2.MethodϑΟʔϧυ

HTMLϑΥʔϜͰ͸ɺPUTɺPATCHɺDELETEϦ ΫΤετΛ࡞੒Ͱ͖ͳ͍ͨΊɺݟ্͔͚ͷHTTP ಈࢺΛࢦఆ͢ΔͨΊͷ_methodϑΟʔϧυΛ௥ Ճ͢Δඞཁ͕͋Γ·͢ɻ@methodͰ͜ͷϑΟʔ ϧυΛੜ੒Ͱ͖·͢ɻ <form action="/foo/bar" method="POST"> @method('PUT') ...
</form>

5-3.όϦσʔγϣϯΤϥʔ

@error͸ɺࢦఆͨ͠ଐੑͷόϦσʔγϣϯΤ ϥʔϝοηʔδ͕͋Δ͔Λ؆୯ʹ൑ఆ͢ΔͨΊ ʹ࢖༻͠·͢ɻ@errorͷதͰΤϥʔϝοηʔδ Λදࣔ͢ΔͨΊʹɺ$messageม਺ΛΤίʔ͢ Δ͜ͱ΋ՄೳͰ͢ɻ

αϯϓϧίʔυ  <label for="title">Post Title</label> <input id="title" type="text"
class="@error('title') is-invalid @enderror"> @error('title') <div class="alert alert-danger">{{ $message }}</div> @enderror

6.αϒϏϡʔͷಡΈࠐΈ

Bladeͷ@includeΛ࢖͑͹ɺϏϡʔͷத͔Β؆ ୯ʹଞͷBladeϏϡʔΛऔΓࠐΊ·͢ɻಡΈࠐΈ ݩͷϏϡʔͰඞཁͳม਺͸ɺऔΓࠐΈઌͷ ϏϡʔͰ΋ར༻ՄೳͰ͢ɻ <div> @include('shared.errors') <form> 
</form> </div>

·ͱΊ

Blade͸ศརʂʂ

ࢀߟ https://readouble.com/laravel/6.x/ja/blade.html

フロントにおけるLaravel Laravel.hiroshima

フロントにおけるLaravel Laravel.hiroshima

More Decks by Haruki Tazoe

Other Decks in Programming

Featured

Transcript