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

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

B05baacb6000fe55fe558ce75aa9bc74?s=128

Haruki Tazoe

November 24, 2019
Tweet

Transcript

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

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

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

  4. Laravelͱ͸

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

  6. ϑϩϯτʹ͓͚ΔLaravel

  7. 1.BladeςϯϓϨʔτ

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

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

  10. ͳʹ͕ศརͳͷʁ

  11. 2.ςϯϓϨʔτͷܧঝ

  12. 2-1.ϨΠΞ΢τఆٛ

  13. αϯϓϧίʔυ <!—- 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>
  14. @section͸໊લ͕ࣔ͢ͱ͓Γʹίϯςϯπͷη ΫγϣϯΛఆٛ͠ɺҰํͷ@yield͸ࢦఆͨ͠η Ϋγϣϯͷ಺༰Λදࣔ͢ΔͨΊʹ࢖༻͠·͢ɻ

  15. 2-2.ϨΠΞ΢τ֦ு

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

  17. αϯϓϧίʔυ <!-- resources/views/child.blade.phpͱͯ͠อଘ --> @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @@parent

    <p>͜͜͸ϝΠϯͷαΠυόʔʹ௥Ճ͞ΕΔ</p> @endsection @section('content') <p>͕͜͜ຊจͷίϯςϯπ</p> @endsection
  18. sidebarηΫγϣϯͰ͸ɺϨΠΞ΢τͷαΠυ όʔͷ಺༰Λίϯςϯπʹ্ॻ͖͢ΔͷͰ͸ͳ ͘௥Ճ͢ΔͨΊʹ@@parentΛ࢖༻͍ͯ͠·͢ɻ @@parent͸ϏϡʔΛϨϯμ͢Δͱ͖ʹɺϨΠ Ξ΢τͷ಺༰ʹஔ͖׵ΘΓ·͢ɻ

  19. 3.σʔλදࣔ

  20. αϯϓϧίʔυ Route::get('greeting', function () { return view('welcome', ['name' => 'Samantha']);

    }); Hello, {{ $name }}. BladeςϯϓϨʔτʹ౉͢ʹ͸…
  21. Bladeͷ{{ }}ه๏͸XSS߈ܸΛ๷͙ͨΊɺࣗಈత ʹPHPͷhtmlspecialcharsؔ਺Λ௨͞Ε·͢ɻ Ϗϡʔʹ౉͞Εͨม਺ͷ಺༰Λදࣔ͢Δ͚ͩʹ ݶΒͣɺPHPؔ਺ͷ݁ՌΛecho͢Δ͜ͱ΋Ͱ͖ ·͢ɻ The current UNIX timestamp

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

  23. 4.੍ޚߏจ

  24. 4-1.Ifจ

  25. αϯϓϧίʔυ @if (count($records) === 1) ̍Ϩίʔυ͋Δʂ @elseif (count($records) > 1)

    ෳ਺Ϩίʔυ͋Δʂ @else Ϩίʔυ͕ͳ͍ʂ @endif
  26. ifจͷߏจʹ͸ɺ@ifɺ@elseifɺ@elseɺ@endif Λ࢖༻͠·͢ɻ͜ΕΒͷ࢖͍ํ͸PHPͷߏจͱ ಉ͡Ͱ͢ɻ

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

  28. 4-2.Switchจ

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

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

  31. 4-3.܁Γฦ͠

  32. αϯϓϧίʔυ @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
  33. 5.ϑΥʔϜ

  34. 5-1.CSRFϑΟʔϧυ

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

    </form>
  36. 5-2.MethodϑΟʔϧυ

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

    </form>
  38. 5-3.όϦσʔγϣϯΤϥʔ

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

  40. αϯϓϧίʔυ <!-- /resources/views/post/create.blade.php --> <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
  41. 6.αϒϏϡʔͷಡΈࠐΈ

  42. Bladeͷ@includeΛ࢖͑͹ɺϏϡʔͷத͔Β؆ ୯ʹଞͷBladeϏϡʔΛऔΓࠐΊ·͢ɻಡΈࠐΈ ݩͷϏϡʔͰඞཁͳม਺͸ɺऔΓࠐΈઌͷ ϏϡʔͰ΋ར༻ՄೳͰ͢ɻ <div> @include('shared.errors') <form> <!-- ϑΥʔϜͷ಺༰ -->

    </form> </div>
  43. ·ͱΊ

  44. Blade͸ศརʂʂ

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