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

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

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

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

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

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

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

今回はたまたま、

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

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

その動画がこちら。

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

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

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

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

『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はグラフ描画のライブラリ)

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

2 Users

16 Pockets

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

https://coinbaby8.com/laravel55-webapplication-vuejs.html

ロリポップやXサーバーなど、格安のレンタルサーバーでも運用できるプログラミング言語といえばやっぱり『PHP(ピーエイチピー)』。その『PHP』をフル活用したフレームワークで人気急上昇中の『Laravel(ララベル)』。『Laravel』をうまいこと使うと、物流管理システム勤怠管理システム予約システムといったシステムをインターネット上で使えるようになります。いわゆる『Webアプリケーション』を作ることができるようになります。『Laravel(ララベル)』だけでも『Webアプリケーション』はつくれてしまうのですが、実際に使う側にとって...

『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を書いてる動画って始めて見たかも・・

フロント編集(カード周り) 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分。

アオキ

いやぁ、半端ない早さやわぁ。。

続いてサーバー側。

サーバー側『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

アオキ

この辺りは教科書通りかな。

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

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

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

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

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

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

もんプロ～問題発見と解決のためのプログラミング〜

1 User

6 Pockets

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

https://coinbaby8.com/laravel-seeder-factory-faker.html

プログラミングってほとんどデータベースとのやりとりじゃないですか。データベースからのデータをどう表示させるかっていう。『PHPの現場』というポッドキャストの放送で、ひときわ印象に残ったこの言葉。そう言われると確かに、例えばゲームなら、アイテムの名前アイテムの数HPにMP敵の名前敵の種類画像/動画データ など、ありとあらゆるデータが『データベース』に保存されていてやりとりされています。データベース・・たくさんのデータが保存できるソフト。MySQLなど。仕事で使うような在庫管理、勤怠管理、予約管理なんかのシス...

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

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

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

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

もんプロ～問題発見と解決のためのプログラミング〜

1 Share

1 User

2 Pockets

【PHP】配列や連想配列が覚えづらかったので学校に例えてみた【初心者向け】

https://coinbaby8.com/php-how-to-learn-array.html

配列ってなんか覚えにくいんだよね〜、いくつもくっついてたりするし。うまい覚え方ないのかなぁ・・ググって見ても配列のわかりやすい記事があまりなかったので、小学校に例えてみることにしました。※わかりやすさ重視でいろいろ説明をはしょっています。PHPの配列の使い方〜わかりやすさ重視〜『PHP』に限らず、ほとんどのプログラミング言語には、『変数』という機能があります。『変数』というのはざっくりいうと『箱』の事で、『箱』をつくって、その中に好きな文字や数字を入れて、取り出しやすくしたものです。※『PHP』の『変数...

もんプロ～問題発見と解決のためのプログラミング〜

1 User

6 Pockets

【PHP】オブジェクトと連想配列の違いについて調べてみた【初心者向け】

https://coinbaby8.com/different-between-object-and-array.html

ある程度『PHP』などのプログラミング言語をやっていると必ずといっていいほど目にするキーワード。『オブジェクト』と『連想配列』。この2つの区別がなかなか曖昧で、わかってるようでわかっていなかったので、まるっとまとめてみることにしました。オブジェクトと連想配列の作り方『連想配列』ってこんなのです。//こっちは連想配列$array = ;『オブジェクト』ってこんなのです。//こっちはオブジェクトclass object{ public $like = "お好み焼き"; public $hobby = "ロードバイク";}ほとんど一緒やん・・...

ちょいちょい 『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にアクセスしてデータが出力されている事を確認しています。

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

はれて完成。

アオキ

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

さいごに

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

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

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

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

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

アオキ

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

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

アオキ

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