バックエンド

【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内削除。

追加

<link rel="stylesheet" type="text/css" href="{{mix('css/app.css')}}">
body内 <div id="app"></div>
script type="text/javascript" src="{{mix('js/app.js')}}"></script>

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

ここまで約2分50秒。

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

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

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

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

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

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

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

class="card-row"
class="card-item" v-for
class="card-inner"
class="card-title"
class="card-value"
class="card-chart"

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

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

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

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

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

// Flexboxの箇所 抜粋
display:flex;
frex-wrap:wrap;

flex-grow:1;
flex-basis:33.33%;
アオキ
Flexboxは慣れるとかなり簡単に書けますね。

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

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

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

<script>
import { Cartesian, Area } from 'laue'

components: {
    LaCartesian: Cartesian,
    LaArea: Area
},

return{
    values: [
        {value: 0},
        {value: 1},
        {value: 10},
        ]
        
template内
<la-cartesian :width="275" :height="40" :data="values">
    <la-area animated prop="value"></la-area>
</la-cartesian>

ここまでで約9分。

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

続いてサーバー側。

Sponsored link

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

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

web.phpの方に

Route::get('api/dashboard', 'DashboardController@index');

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

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

//DashboardController

indexメソッド

$cards = [];

return response()
->json{['cards' => $cards]};

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

// App.vue

import axios from 'axios'

mounted(){
    axios.get('/api/dashboard')
    .then((res) => {
        this.$set(this.$data, 'cards', res.data.cards)
    })
    },

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

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

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

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

php artisan make:model Contact -m
php artisan make:model Item -m
php artisan make:model Invoice -m
php artisan make:model Payment -m
php artisan make:model Opportunity -m
アオキ
この辺りは教科書通りかな。
Sponsored link

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

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

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

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

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

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

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

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

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

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

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

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

'value' => Item::count()
とか
'value' => Invoice::where('status', 'sent')->count();
とか
'value' => $this->getChart(Opportunity::where('status', 'lost'), 'created_at')
など。

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

略

return collect(array_values($all))->map(function($item){
    return ['value' => $item];
});
}

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

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】マルチログイン対応ECサイトの講座をリリースしました【Udemy】

2. 【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】

3. 【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【techpit】

4. 『Carbon』でよく使うパターンをまとめてみた【Laravel向け】

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

6. 【Laravel】フロントエンドをわかりやすくまとめてみた【初心者向け】

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

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

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

10. 【Laravel】Webアプリ環境構築の仕方【Vue.js】【初心者向け】

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

12. 【Laravel】マルチログイン(ユーザーと管理者など)機能を設定してみた【体験談】

13. 【Laravel】フォトギャラリーを作るための画像アップロード方法【php】

14. 【Laravel】多対多テーブルを複数つくる方法【ちょっとコツがいります】

15. 【Laravel】【Slack】に通知する方法をまとめてみた【自作ファサード】

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

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

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

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  2. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  3. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  4. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  5. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock