Laravel

LaravelとVue.jsのサンプル動画を見ながらさらりと解説してみる

ここ数年、ユーチューブで見れるプログラミング動画が増えています。

しっかり解説されているものもあれば(ほとんど英語だけど)、

たんたんとプログラミング風景を流しているものもあれば、

1.5倍速、2倍速でどんどん進んでいくものも。

さすがに前提知識がないとなかなかしんどいけれど、

ある程度知識がついている状態だと、

見ているだけでたくさんの知識をさーっと復習できたり、客観的に知ることができます。

今回はたまたま、

『Laravel』『Vue.js』を使った簡単な管理画面を作成する動画を教えていただき、

とてもわかりやすくためになったので、忘れないように記事にもおこしておこうと思います。

その動画がこちら。

トータル18分39秒の動画の中で、

  • Laravelインストール
  • Vue.js設定
  • Vue.jsコンポーネント設定
  • Laravelダミーデータ生成
  • Axiosを使ったAjax(非同期通信)
  • SCSS で Flexbox
  • 連想配列とEloquent
  • Laueを使ったグラフ描画

などの技術がまるっと含まれています。

『Laravel』『Vue.js』をちょっと触った事がある方ならなんとなくわかるのではと思います。

Sponsored link

『laravel』『vue.js』下準備 0:00〜

環境は『laravel Valet』を使っていますが、mac専用なのでValetにこだわる必要はないかなと思います。

『laravel』インストールして、
データベース接続して、
『package.json』から不要なパッケージを削除した後に、
『npm install』しつつ 『vue』や『axios』をインストールしています。

  • valetで作成 laravel new dashboard
  • データベース操作ツールは『Sequel Pro』(Macのみ)
  • 『dashboard 』名でデータベースを作成
  • .env のDatabase欄に『dashboard 』と書き換え
  • package.jsonからcross-envとlaravel-mix以外を削除 (バージョンが古いから?)
  • npm install (フロント側パッケージインストール)
  • npm install –save vue axios laue (laueはグラフ描画のライブラリ)

参考記事

『npm install』 でフロント側の必要なパッケージをインストールした後は、

お決まりのように 『resources』フォルダ配下のファイルを編集しています。

  • resources/js/app.jsの中身を空に
  • resources/js/bootstrap.jsを削除
  • resources/js/components/ExampleComponents.vueも削除
  • resources/sass/_variables.scss の フォントを Helvetica に変更
  • resources/sass/app.scss の fontとbootstrapの読み込みを削除
  • resources/sass/app.scss の .navbar-laravel -> .navbar に変更

実際の画面を表示する 『ビュー』ファイルに、

『CSS』と、『JavaScript』と、『Vue.js』で表示させるための<div id=”app”> を記載しています。

  • resources/views/welcome.blade.php

headerからフォント読み込み削除、style削除、htmlタグのロケール(言語設定)削除、body内削除。

追加

『npm run watch』 (変更をリアルタイムで反映させるコマンド)

ここまで約2分50秒。

アオキ
いや、倍速にしたって早すぎでしょ(汗)

フロント編集(下準備) 2:50〜

『Vue.js』のコンポーネントを作って、『SCSS』周りの下準備をしています。

SCSS・・CSSを効率よく書けるようにした書き方。

アオキ
個人的に、SCSSを書いてる動画って始めて見たかも・・
Sponsored link

フロント編集(カード周り) 5:00〜

今回はカード形式で表示させるようで、
『Vue.js』コンポーネント内にずらっとcard関連のdiv classを書いています。

この時点ではまだデータベースと接続していないので、
script export 内のデータは手打ちというのも勉強になりました。

アオキ
画面にどう表示されるか確認してからデータベースとつなぐんですね。

また、SCSSの調整では、レスポンシブデザインではメジャーになりつつある、

『Flexbox(フレックスボックス)』も使われています。

『Flexbox(フレックスボックス)』・・画面サイズに応じて表示方法を調整できる技術。CSSやSCSSファイルの中に書く

アオキ
Flexboxは慣れるとかなり簡単に書けますね。

フロント編集(グラフ描画) 8:00〜

『laue』というグラフ描画ライブラリは始めて知りました。

見ている感じ簡単そうだけどいろいろオプションあるようなので触る機会がでてきたら調べるということで。

ここまでで約9分。

アオキ
いやぁ、半端ない早さやわぁ。。

続いてサーバー側。

Sponsored link

サーバー側『Laravel』でJSON出力まで 9:00〜

まずは『route.php』を書いて、

web.phpの方に

コントローラー生成して、
php artisan make:controller DashboardController
(動画内では art make:controller だった)

コントローラーでとりあえずJsonデータ返すようにして、

『Vue.js』のコンポーネント内で、
『axios(Ajax用ライブラリ)』をインポートしてgetで取得。

axiosの書き方はこちらの記事も参考に。

Vue.js初心者向け:Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ

モデル作成(Laravel) 10:00〜

『モデル』と『マイグレーション』を作成して、
『マイグレーションファイル』の中にテーブル構成をつくっています。

アオキ
この辺りは教科書通りかな。
Sponsored link

ダミーデータ作成(Laravel) 11:05〜

『Laravel』ではダミーデータもさくっと作る事ができます。

『シーダーファイル』にモデルをuse、faker, factoryもuseしつつ、

php artisan migrate –seed でダミーデータ生成。

『Sequel Pro』でダミーデータがデータベースに入っている事を確認しています。

ダミーデータはこちらも参考にしてみてください。

ダミーデータがデータベースに入っている事を確認した後に、『コントローラー』の実装に入っています。

コントローラーの中身作成(Laravel) 12:50〜

$cards の中身は連想配列で記載されています。

連想配列やオブジェクトについてはこの記事も参考にしてください。


ちょいちょい 『Eloquent(エラクワント)』の書き方もありました。

Eloquent(エラクワント)・・『Laravel』で簡単にデータベースとやりとりできる仕組み

getChartメソッドの作成では『Laravel』ならではの『コレクション(配列の拡張版)』の書き方も。

『コレクション』はマニュアルが一番わかりやすいような。

Laravel 5.5 コレクション

api/dashboardにアクセスしてデータが出力されている事を確認しています。

Sponsored link

Vue側データベースから出力されたデータを表示するよう変更 17:35〜

はれて完成。

アオキ
思わず「お〜〜っ」っていっちゃうのは年のせいかしら。

さいごに

わずか18分ちょいの動画ですが、

  • Laravelインストール
  • Vue.js設定
  • Vue.jsコンポーネント設定
  • Laravelダミーデータ生成
  • Axiosを使ったAjax(非同期通信)
  • SCSS で Flexbox
  • 連想配列とEloquent
  • Laueを使ったグラフ描画

などたくさんの技術が含まれた動画で、個人的にはとってもためになりました。

同時に、これだけの技術・言語・書き方をさらっと書いていくあたり、

僕もまだまだ修行が足りんなぁと思わされました。

アオキ
日々これ精進あるのみ、ですね。

『Laravel』ではこんな記事も読まれています。

1. 【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【用語集も兼ねて】【初心者向け】

2. 【PHP】【laravel】CSVエクスポートの方法〜5つのポイント〜

3. 【PHP】CSVインポートの方法〜大量データもバルクインサートでバッチリ!〜【laravel】

4. 【laravel】ダミー(テスト)データを作る方法 シーダー(seeder)とfactoryとfaker【初心者向け】

5. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

6. LaravelとVue.jsのサンプル動画を見ながらさらりと解説してみる

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. #100DaysOfCode

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  2. #100DaysOfCode

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  3. Laravel

    【laravel】ダミー(テスト)データを作る方法 シーダー(seeder)とfactoryとfak…

    『PHPの現場』というポッドキャストの放送で、ひときわ印象に残…

  4. Laravel

    Laravel入門ならこの本一択! 今までの疑問点がどんどんスッキリしていった話

    PHPのフレームワークといえば、今ならなんといっても『Laravel(…

  5. Django

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心者向け】【体験談】

    さらに開発力を高めるべく、先日とあるサロンに入会しまして、…

  6. Laravel

    物流の受注・発送管理システムのつくり方を考えてみる【Laravel】

    プログラミングを上達するための秘訣は「何かをつくる」ということだと思っ…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. Django

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
  2. アルデュイーノ Arduino

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  3. PHP

    【PHP】配列や連想配列が覚えづらかったので学校に例えてみた【初心者向け】
  4. docker初心者向けdocker-composeからやったほうがいいかもよ

    Docker

    【Docker】初心者はdocker-composeから始めた方がいいかもしれな…
  5. Nuxt.js

    【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】
PAGE TOP