What's New Qiita

20201129のlaravelに関する記事は13件です。

  • 投稿日：2020-11-29T21:47:46+09:00

Herokuに直接ログインしてコマンドを実行する

以下のコマンドでHerokuに直接ログインしてコマンドを実行できます。
your_app_name の部分は自分のHerokuアプリケーションの名前に変更してください。

heroku login

heroku ps:exec -a your_app_name

参考
Key generation for Heroku deployments
https://github.com/laravel/passport/issues/267#issuecomment-392222152

自分の場合、ローカル環境ではLaravel passportの実装が上手く動いていたのですが、本番のHerokuでは上手く動作せず、直接ログインしてコマンドを実行する事でエラーを解決することができました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T21:47:46+09:00

Herokuにsshログインしてコマンドを実行する

以下のコマンドでHerokuにsshログインしてコマンドを実行できます。
your_app_name の部分は自分のHerokuアプリケーションの名前に変更してください。

heroku login

heroku ps:exec -a your_app_name

参考
Key generation for Heroku deployments
https://github.com/laravel/passport/issues/267#issuecomment-392222152

自分の場合、ローカル環境ではLaravel passportの実装が上手く動いていたのですが、本番のHerokuでは上手く動作せず、sshログインしてコマンドを実行する事でエラーを解決することができました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T18:26:41+09:00

[PHP]composerダウンロードの流れとLaravelインストール

composerダウンロードの流れとLaravelインストール

MacOS

https://getcomposer.org/download/
上記にアクセスし、ページ下の方のManual Downloadから最新バージョンのリンクをクリックしダウンロードする
989089038158fb8d7206e1467abbdd32.png
(ここでいうと2.0.7という部分)

コンソールでもできる(多分)

ターミナル
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

私はコンソールでしました

バージョンの設定

ターミナル
chmod a+x /usr/local/bin/composer

composerのバージョンチェック

ターミナル
composer -V

正しくインストールできていればインストールした日付やversionが表示される

Laravelインストール

ターミナル
composer global require Laravel/installer

こちらは多少時間がかかる場合もございます

環境変数の設定

ターミナル
echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.bash_profile
source ~/.bash_profile

これでLaravelコマンドが認識されるようになりました。ターミナル終了後もLaravelコマンドが使えるようになります

以上！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T14:18:02+09:00

使用しているブラウザのバージョン、ちゃんと把握していますか？

概要

Laravel Duskの公式に沿ってphp artisan duskを実行時、下記エラーが発生

Facebook\WebDriver\Exception\SessionNotCreatedException: session not created: This version of ChromeDriver only supports Chrome version 87
Current browser version is 86.0.4240.198 with binary path C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

内容を簡単にまとめると、ChromeDriverとChromeのバージョンが一致していませんとのこと。

  • ChromeDriver：87.0.4280.20
  • Chrome：86.0.4240.198

しばらくChromeのバージョン更新を放置していたので、その付けが回ってきました

解決方法

解決方法は下記の2通り
1. ChromeDriveのバージョンをChromeに合わせる
2. ChromeのバージョンをChromeDriverに合わせる

解決方法 ①ChromeDriveのバージョンをChromeに合わせる

Chromeのバージョンに合わせて、ChromeDriveのバージョンをインストール

// 〇〇には指定のバージョンを設定
php artisan dusk:chrome-driver 〇〇

解決方法 ②ChromeのバージョンをChromeDriverに合わせる

Chromeのバージョン更新は、下記を参考にすればいけると思います
Google Chrome を更新する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T14:18:02+09:00

【Laravel Dusk】ChromeDriverとChromeのバージョン不一致で生じるエラーの解決方法

概要

Laravel Duskの公式に沿ってphp artisan duskを実行時、下記エラーが発生

Facebook\WebDriver\Exception\SessionNotCreatedException: session not created: This version of ChromeDriver only supports Chrome version 87
Current browser version is 86.0.4240.198 with binary path C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

内容を簡単にまとめると、ChromeDriverとChromeのバージョンが一致していませんとのこと。

  • ChromeDriver：87.0.4280.20
  • Chrome：86.0.4240.198

解決方法

解決方法は下記の2通り
1. ChromeDriveのバージョンをChromeに合わせる
2. ChromeのバージョンをChromeDriverに合わせる

解決方法 ①ChromeDriveのバージョンをChromeに合わせる

Chromeのバージョンに合わせて、ChromeDriveのバージョンをインストール

// 〇〇には指定のバージョンを設定
php artisan dusk:chrome-driver 〇〇

解決方法 ②ChromeのバージョンをChromeDriverに合わせる

Chromeのバージョン更新は、下記を参考にすればいけると思います
Google Chrome を更新する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T13:12:56+09:00

Laravel Duskでエラー「Facebook\WebDriver\Exception\UnknownErrorException: unknown error: net::ERR_CONNECTION_REFUSED」が発生した場合の対処方法

エラー発生したタイミング

php artisan duskを実行時に、タイトルにあるエラーメッセージが表示

原因

.envファイルのAPP_URLパラメータで指定されている値が原因

解決方法

公式にも明記されているが、APP_URLには、ブラウザでアプリケーションにアクセスするために使用するURLを設定する必要がある。

アプリケーションのURLが下記の場合
Starting Laravel development server: http://127.0.0.1:8000

APP_URL=http://localhost //（デフォルト）
↓
APP_URL=http://localhost:8000 //（変更後）
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T13:11:02+09:00

Laravel「php artisan migrate」でエラー「could not find driver」が発生したときの解決方法

原因

エラーメッセージに書いてある通り、driverが見つからないのが原因

解決方法

php.iniのextension=pdo_mysqlのコメントアウトを外す

// 変更前
;extension=pdo_mysql

// 変更後
extension=pdo_mysql
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T09:21:45+09:00

LaravelのBladeテンプレートをVue.jsっぽく書いてみた

はじめに

Vue.jsを学習した時に、Vueコンポーネントのコード構成が非常に気に入りました。
そこで、LaravelのBladeテンプレートでも同様のコード構成ができるか検討してみたんですよね。
すると、自分の中では割と納得のいく形にできたんですよ。
なので、今回は私がLaravelのBladeテンプレートで採用したコード構成の例を紹介します:grinning:
※Vue.jsのベストプラクティスということではないので、誤解しないようにお願いします。

この記事の対象者

  • Laravelを学習されている方
  • Bladeテンプレートの書き方のサンプルが欲しい方

作業環境

コンピュータ ： Mac mini(2018)
OS ： macOS Catalina バージョン10.15.7
仮想基盤 ： Docker version 19.03.8
ベースイメージ ： AmazonLinux2
言語 ： PHP7.4.11
フレームワーク ： Laravel Version 6.20.5

Vue.jsのコード構成について

Vue.jsでは、コンポーネント（構成要素や部品の意）を作成する際に、HTML、CSS、Javascriptを１つのファイルに記述します。

page_titleコンポーネント

page_title.vue
<!-- HTML記述部-->
<template>
  <h1>{{title}}</h1>
</template>

<!-- Javascript記述部-->
<script>
export default {
    data(){
        return {
            title: "ページの大見出しだよ"
        }
    }
}
</script>

<!-- CSS記述部-->
<style>
  h1{ color: red; }
</style>

page_titleコンポーネントを呼び出す親コンポーネント

body.vue
<template>
    <!-- ここでは、読み込んだコンポーネントをタグとして利用しています -->
    <PageTitle></PageTitle>
    <!-- コンポーネントの読み込みは下のscriptタグ内で行っています -->
</template>

<script>
// ここで、pageタイトルコンポーネントを読み込んでいます。
import PageTitle from 'page_title.vue'

export default {
  components: {
    PageTitle
  }
}
</script>

表示されたページ

スクリーンショット 2020-11-29 6.29.19.png

Laravel(Bladeテンプレート)のコード構成

Laravelでは、Bladeテンプレートでディレクティブと呼ばれる記述方法を使用できます。
今回は、@include、@yield、@section等のディレクティブを利用してVueコンポーネントの用にBladeテンプレートを作成します。

page_title.vueの代替

page_title.blade.php
<!-- HTML記述部 -->
@section('page_title_template')
  <h1 id="page_title">title</h1>
@endsection


<!-- Javascript記述部 -->
@section('page_title_js')
  <script type="text/javascript">

    // windowロード時に呼び出す関数のセット
    window.onload = setH1InnerText;

    // windowロード時にh1タグのテキストを書き換える
    function setH1InnerText(){
      let h1_tag = document.getElementById('page_title');
      h1_tag.innerText = "ページの大見出しだよ";
    }

  </script>
@endsection


<!-- CSS記述部 -->
@section('page_title_css')
  <style>
    h1{ color: red; }
  </style>
@endsection

body.vueの代替

body.blade.php
<!-- ここでpage_title.blade.phpを読み込み -->
@include('page_title')
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">

        <!-- CSSの呼び出し -->
            @yield('page_title_css')

    </head>
    <body>
        <!-- HTMLの呼び出し -->
        @yield('page_title_template')

        <!-- Javascriptの呼び出し -->
        @yield('page_title_js')
    </body>
</html>

Laravelでは、親ファイルで子コンポーネントのCSSも明記する必要はありますね。

ホームを部品化してみよう！！

試しに、この構成を利用してLaravelのデフォルトホーム(Welcomeページ)を部品化してみます。

LaravelのWelcomeページのコード

welcom.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
             html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

正直、長いですよね:sweat_smile:

ブラウザで表示

スクリーンショット 2020-11-29 8.14.37.png

部品化した場合のWelcomeページのコード

welcome.blade.php
<!-- コンポーネントの読み込み -->
@include('view_components.common_all_page_css')
@include('view_components.title')
@include('view_components.links')
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">

        <!-- Styles -->
            <!-- 全てのページ共通のCSS -->
            @yield('common_all_page_css')

            <!-- タイトル部分のCSS -->
            @yield('title_css')

            <!-- リンク部分のCSS -->
            @yield('links_css')
    </head>
    <body>
        <div class="flex-center position-ref full-height">

            <div class="content">
                <!-- タイトル部分のHTML -->
                @yield('title_template')

                <!-- リンク部分のHTML -->
                @yield('links_template')

　　　　　　　　　　
　　　　　　　　　<!-- Jarascript -->
                @yield('title_js')
            </div>
        </div>
    </body>
</html>

次の３つのコンポーネントに分割しました

全ページ共通のCSSコンポーネント

common_all_page_css.blade.php
@section('common_all_page_css')
  <style>
    html, body {
      background-color: #fff;
      color: #636b6f;
      font-family: 'Nunito', sans-serif;
      font-weight: 200;
      height: 100vh;
      margin: 0;
  }

  .full-height {
      height: 100vh;
  }

  .flex-center {
      align-items: center;
      display: flex;
      justify-content: center;
  }

  .position-ref {
      position: relative;
  }

  .top-right {
      position: absolute;
      right: 10px;
      top: 18px;
  }

  .content {
      text-align: center;
  }
  </style>
@endsection

タイトル部分のコンポーネント

title.blade.php
@section('title_template')
  <div id="page_title" class="title m-b-md">

  </div>
@endsection

@section('title_js')
<script type="text/javascript">
  // windowロード時に呼び出す関数のセット
  window.onload = setPageTitleInnerText;

// windowロード時にタイトルのテキストを書き換える
function setPageTitleInnerText(){
  let page_title = document.getElementById('page_title');
  page_title.innerText = "Laravel";
}
</script>
@endsection


@section('title_css')
  <style>
    .title {
        font-size: 84px;
    }
    #page_title{
      color: green;
    }
  </style>
@endsection

ついでなので、CSSでタイトルの文字色を緑色にしてみました。
まぁ、タイトル文字をJSで代入することはありませんが、あくまでコード構成の例ですのでそこは参考程度に。

リンク部分のコンポーネント

links.blade.php
@section('links_template')
<div class="links">
    <a href="https://laravel.com/docs">Docs</a>
    <a href="https://laracasts.com">Laracasts</a>
    <a href="https://laravel-news.com">News</a>
    <a href="https://blog.laravel.com">Blog</a>
    <a href="https://nova.laravel.com">Nova</a>
    <a href="https://forge.laravel.com">Forge</a>
    <a href="https://vapor.laravel.com">Vapor</a>
    <a href="https://github.com/laravel/laravel">GitHub</a>
</div>
@endsection


@section('links_css')
<style>
  .links > a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
  }
</style>
@endsection

ブラウザで表示

スクリーンショット 2020-11-29 9.18.57.png

無事、タイトルが緑色のWelcomeページが表示されました。

最後に

LaravelのBladeテンプレートでは、１ファイル内に1つの@sectionを使用するのが基本のように見受けられます。
なので、今回のコード構成はパフォーマンス面で不都合があるのかもしれません。
とはいえ、恐らく、Laravelだけでサービスを開発する場合は、あまり影響がないと思っています。
そこまでパフォーマンスを求めるサービスをLaravelだけで開発することは珍しいでしょうからね:sweat_smile:

この記事が誰かのお役に立てると嬉しいです。
それでは、最後まで読んでいただきありがとうございます:blush:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T04:58:46+09:00

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～Vue.js × axios編～

制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

前回のつづきになります。

関連記事

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × FetchAPI編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × FetchAPI編～

今回作成するもの

Vue.jsとaxiosを利用し非同期通信を行い、自動で仕入れ先が入力される機能を実装します。

以下作成条件

  • Vue.jsを使用し通信にはaxiosを使用します。
  • 数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
  • 検索するのにクリック操作を必要としません。inputに入力されたら検索します。
  • スクリプトの読み込みにはLaravel-mixを使用します。
  • 前回作成したtest.jsは使用しません。

app.jsの編集

今まで使用してきたtest.jsは今回使用しません。

resources>js内のapp.jsを開き、読み込みがされないように以下の内容をコメントアウトするか、削除してください。

app.js
require('./test');

続けてVue.jsの記述を行います。
app.jsの下の部分に記載があるconst app = new Vueを以下の用に修正します。

app.js
// 変数appにVueクラスをインスタンス化(実体化)して代入します
// その際引数で初期設定を渡します
const app = new Vue({
    // id="app"のDOM要素に対しVueインスタンスを与えます
    // このidをもつ要素の範囲がVue.jsが使える範囲(仮想DOM)になります
    el: '#app',

    // キーと値の初期値を設定します
    data() {
        return {
            code: '',
            supplier: '',
        }
    },
    // メソッド(機能)を作成します
    methods: {
        // 新たにgetSupplierというメソッドを作成し、処理を記述します
        getSupplier() {

            // bladeテンプレートipnutの値をtraderCodeに代入します
            let traderCode = this.code

            // 業者コードが4桁未満の場合は検索させないようにします
            if (traderCode.length < 4) {
                return
            }

            // アクセス先のURLを作成し、urlに代入します
            let url = '/form_search?trader_code=' + traderCode

            // 次の処理の中ではthis.supplierのように、thisを使えないため
            // 任意の変数に代入することで使えるようにします
            var that = this

            // axiosで指定したURLにGETでアクセスします
            // .thenで通信に成功した場合の処理を記述します
            // 引数に変数をいれることで、コントローラからのデータ(検索結果)を受け取れます
            // ここでは変数responseでデータを受け取っています
            axios.get(url).then(function(response) {
                // 受け取ったデータから必要なものだけ取り出し変数に代入します
                let data = response.data
                // 受け取ったデータ(検索結果)が仕入れ先のvalueに反映されるよう
                // supplierに値を代入します
                that.supplier = data[0].trader_name
            })

        }
    }
});

コンパイル

ターミナルを起動し、以下を実行してください。
※node.jsが必要です。インストールされていない方は、インストールを行ってください。

node.js
https://nodejs.org/ja/

npm run dev

ビューの修正

resources>views内のindex.blade.phpを開き、以下の部分だけ修正します。

index.blade.php
<div>
    <label>業者コード: <input type="text" id="code" v-model="code" @input="getSupplier()"></label>
    <label>仕入れ先: <input type="text" id="supplier" name="supplier" v-model="supplier"></label>
</div>

v-model

v-modelを記述するだけで、双方向データバインディング(Two-way Data Binding)を実装できます。

以前記事を投稿しているので、詳しくはこちらを確認してください。
https://qiita.com/Charry/items/a1e6a93f05c7f686b505

@input

@inputはv-on:inputの省略型です。
今回は業者コードが入力されたら検索処理を行うので、@input="getSupplier()"とすることでgetSupplierメソッドを呼び出しています。

Vue.jsの場合データの受け渡し方法がわかっていないと、ちょっとわかりづらいですね。

以上で終了です。
お疲れさまでした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T02:28:47+09:00

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × axios編～

制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

前回のつづきになります。

関連記事

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～Vue.js × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × FetchAPI編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × FetchAPI編～

今回作成するもの

axiosを利用し非同期通信を行い、自動で仕入れ先が入力される機能を実装します。

以下作成条件

  • 基本的な記述にはjQueryを使用し通信にはaxiosを使用します。
  • 数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
  • 検索するのにクリック操作を必要としません。inputに入力されたら検索します。
  • スクリプトの読み込みにはLaravel-mixを使用します。
  • 前回作成したtest.jsを編集して使用するで、必要ならtest4.js等コピーを作成してバックアップしてください。

スクリプトの作成

resorces>js内のtest.jsを開き、以下のように記述します。
前回の内容は全て削除してください。

test.js
// ここから先は前回のjQuery編の記述と同じため詳細は割愛します。
$(function() {

    $('#code').on('input', function() {
        let traderCode = $('#code').val();

        if (traderCode.length < 4) {
            return;
        }
// ここまでは前回のjQuery編の記述と同じ

        // アクセス先のURLを作成し、urlに代入します。
        let url = '/form_search?trader_code=' + traderCode;

        // ここから先は前回のJavaScript × axios編の記述と同じため詳細は割愛します。
        axios.get(url).then(function(response) {
            let data = response.data;
        // ここまで前回のJavaScript × axios編の記述と同じ

            // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
            $('#supplier').val(data[0].trader_name);
        })
    })
})

コンパイル

ターミナルを起動し、以下を実行してください。
※node.jsが必要です。インストールされていない方は、インストールを行ってください。

node.js
https://nodejs.org/ja/

npm run dev

確認

その他の内容は前回と変わらないので、ここまでできたら動作を確認してください。

以上です。
次回に続きます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T02:03:26+09:00

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～

制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

前回のつづきになります。

関連記事

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～Vue.js × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × FetchAPI編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × FetchAPI編～

今回作成するもの

axiosを利用し非同期通信を行い、自動で仕入れ先が入力される機能を実装します。

以下作成条件

  • 基本的な記述にはJavaScriptを使用し通信にはaxiosを使用します。
  • 数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
  • 検索するのにクリック操作を必要としません。inputに入力されたら検索します。
  • スクリプトの読み込みにはLaravel-mixを使用します。
  • 前回作成したtest.jsを編集して使用するで、必要ならtest3.js等コピーを作成してバックアップしてください。

完成イメージ

image2.jpg

スクリプトの作成

resources>js内のtest.jsを開き、以下のように記述します。
※前回の内容は削除してください。

test.js
// ここから先はJavaScript編の記述と同じなので、詳細は割愛します
window.onload = function() {

    document.getElementById('code').addEventListener('input', function() {
        let traderCode = document.getElementById('code').value;

        if (traderCode.length < 4) {
            return;
        }

        let url = '/form_search?trader_code=' + traderCode;
// ここまではJavaScript編の記述と同じ

        // axios.get()メソッドを使い、引数のアドレスにGETアクセスします
        // then()で通信が成功した場合の処理を記述します
        // コントローラからのデータ(検索結果)は指定した引数で受け取ることができます
        // ここではresponseにデータを代入していますが、変数の名前はなんでもいいです
        axios.get(url).then(function(response) {

            // データの中から必要なものだけ取り出します
            let data = response.data;

            // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
            document.getElementById('supplier').value = data[0].trader_name;
        })

    })

}

コンパイル

ターミナルを起動し、以下を実行してください。
※node.jsが必要です。インストールされていない方は、インストールを行ってください。

node.js
https://nodejs.org/ja/

npm run dev

確認

その他は前回のままで問題ありません。
実際に4桁の業者コードを入力し、検索できるか確認してください。

thenの返り値について

以下はconsole.log(response)の値です。

axios.data.jpg

主に以下の値が返ってきます。
もちろん引数の変数名をsample等にした場合は、responseの部分がsampleになります。

// レスポンスデータ
response.data

// ステータスコード
response.status

// ステータステキスト
response.statusText

// レスポンスヘッダ
response.headers

// コンフィグ
response.config

エラーの対応について

通信させるのに必要な最低限の書き方しかしてないので、通信エラー時の処理は別途必要です。
.catch(function(error) {} でエラー時の処理ができます。
.finally(function() {} とすると成功しても失敗しても行う処理ができます。

以上です。
次回に続きます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T00:07:07+09:00

[PHP]クラスメソッド

PHPクラスメソッド

コンストラクタを活用

$countの初期値を0として、コンストラクタ内でクラスプロパティ$countの値に1を足すことで、生成されたインスタンスの数（メニュー数）を数えることができる
1468306056981.png
1467970306991.png

self

クラスの中で使うとそのクラス自身のことを指し示し、「self::$クラスプロパティ名」のように使う
1467970318544.png
1468306046915.png

クラスメソッド

個々のインスタンスのデータに関係ない処理を行いたい時には「クラスメソッド」を用いる。クラスメソッドは「static」を用いて定義し、「クラス名::クラスメソッド名」のように呼び出す
1467685129795.png
1468306069777.png

以上！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-29T00:04:24+09:00

ずぼらなLaravel職人生活の一部始終

はじめに

めんどくさいことが嫌いです。

めんどくさいことを避けるために、日々努力を怠らず生きてきました。

Laravelを触り始めて１年半くらいになったので、その生活の一部始終を紹介したいとおもいます。

LaravelのVersionは6系です。

1. migrationの変更がめんどくさい

migrationでテーブル定義を変更するとき、変更用のmigrationを作るのがめんどくさい。
migrations以下のファイルが爆裂的に増えてしまうし、いちいちxxxxx->change()とか書きたくない。

1-A. 解決策

変更したいmigrationを直で編集する。

編集後は下のコマンドを実行する。

path/your/project
php artisan migrate:fresh --seed // db:seedも必要な場合
php artisan migrate:fresh // db:seedが要らない場合

これで一旦DBが削除されて(php artisan db:wipe)、もう一度migrateされるため、変更が反映されます。

ちなみに、refreshだと一旦ロールバックするため、履歴を正しく管理していない場合怒られるのでfreshを使っています。

2. php artisan config:cacheがめんどくさい

configを変更するたびにコマンドを入力しなきゃいけないだなんて。。

2-A. 解決策

キャッシュを使わない。

すでにキャッシュがある場合は下のコマンドで削除する。

path/your/project
php artisan optimize:clear

キャッシュはなければ読みに行ってくれます。
configだけではなく、routesについても同様です。

開発中は些細なパフォーマンスを気にする必要がないので、このほうがいいですね。
キャッシュなんて要らなかったんや。。

本番環境ではちゃんとキャッシュを使いましょう。

path/your/project/production
php artisan optimize

OPcacheも導入したほうがいいみたいですね。
参考：OPcache導入してみた！（速さ検証もあるよ！） - Qiita

3. php artisan make:XXXXXがめんどくさい

平凡なCRUD作るのにも、

  • Model
  • Controller
  • migration
  • seed
  • factory

など、たくさんファイルを作らなかきゃいけないのでだるい。

3-A. 解決策

以下のコマンドで一撃作成できる。

path/your/project
php artisan make:model Models/HogeHoge -a // ModelsフォルダにModelを設置している
php artisan make:model Models/HogeHoge -a --api // API用のコントローラーが欲しい場合

# 以下が作成される
app/Http/Controllers/HogeHogeController.php
app/Models/HogeHoge.php
database/factories/HogeHogeFactory.php
database/migrations/2020_12_25_000000_create_hoge_hoges_table.php
database/seeds/HogeHogeSeeder.php

あとはルーティングを追加するだけで準備OKですね。

route/api.phpなど
Route::resouce('hogehoges','HogeHogeController'); 
Route::apiResouce('hogehoges','HogeHogeController'); // API用

どかんと初期投入or複数追加したいときはLaravelDB.comを使わせてもらっています！
参考：Laravel DB.com 操作マニュアル。 〜コード書かずに超スピード開発（DEMO動画あり）〜 - Qiita

4. テスト用データのdb:seedがめんどくさい

モデル数が増えてくるとdb:seedも結構な時間がかかってしまうのでダルい。。

4-A-1. 解決策１

テスト用データを分けずにDatabaseTransactionsトレイトを使う。

tests/TestCase.php
...
use Illuminate\Foundation\Testing\DatabaseTransactions; // 追加

...
abstract class TestCase extends BaseTestCase
{
    ...
    use DatabaseTransactions; //追加
    ...
}

DatabaseTransactionsトレイトを使うと、テストコード中に含まれるDB操作がテスト終了後に戻される。
※ 内部的にはテスト内の処理がトランザクションで囲われる

DBが汚れることがなくdb:seedをやり直す必要がなくていいですね。

4-A-2. 解決策２（テスト用データを分けたい場合）

テスト用データを分けたい場合は、必要なときだけmigrate:fresh --seedしてからやはりDatabaseTransactionsトレイトを使う。

※ 以下、テスト用データの分け方。

config/database.php
        ...
        'mysql' => [
            ...
        ],
        'mysql_testing' => [
            // 'mysql'の内容をCopyして以下のみ変更 （※ mysqlを使う場合）
            'database' => 'hogehoge_testing',
        ],
phpunit.xml
<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true">
    <testsuites>
        <testsuite name="Unit">
            <directory suffix="Test.php">./tests/Unit</directory>
        </testsuite>

        <testsuite name="Feature">
            <directory suffix="Test.php">./tests/Feature</directory>
        </testsuite>
    </testsuites>
    <filter>
        <whitelist processUncoveredFilesFromWhitelist="true">
            <directory suffix=".php">./app</directory>
        </whitelist>
    </filter>
    <php>
        <env name="APP_ENV" value="testing"/>
        <env name="DB_CONNECTION" value="mysql_testing"/> <!-- 追加 -->
        <env name="CACHE_DRIVER" value="array"/>
        <env name="SESSION_DRIVER" value="array"/>
        <env name="QUEUE_DRIVER" value="sync"/>
    </php>
</phpunit>
path/your/project
php artisan migrate:fresh --database=mysql_testing --seed # テスト用データを用意
./vendor/bin/phpunit --testdox # テスト実行

RefreshDatabaseトレイトを使うと毎回空になっちゃってめんどいのです。

5. とにかくコマンド打つのががめんどくさい

  • composer dump-autoload
  • php artisan migrate:fresh --seed
  • ./vendor/bin/phpunit --testdox

などのコマンドを打つ場面があり、だるい。

5-A. 解決策

gulpで対象フォルダの変更を監視して、トリガーされたら必要なコマンドを実行する。

path/your/project
# インストール
npm i -D gulp gulp-shell
gulpfile.js
var gulp = require('gulp');
var shell = require('gulp-shell');

gulp.task('default', function() {
  // database以下の変更を監視
  var dbWatcher = gulp.watch(
    [
      'database/**/*.php',
    ]
  );
  dbWatcher.on('change',shell.task('composer dump-autoload && php artisan migrate:fresh --seed'));

  // tests以下の変更を監視
  var testWatcher = gulp.watch(
    [
      'tests/**/*.php',
    ]
  );
  testWatcher.on('change',shell.task('./vendor/bin/phpunit --testdox'));
});
path/your/project
# 監視タスクのスタート
npx gulp

これなら編集後にいつも勝手に必要なコマンドを実行するのでよいです。

無理やりすぎですが。

(番外編) POSTMANでリクエストを作るとき、AcceptやTokenの編集がめんどくさい

Laravelではないですが、APIサーバー用のリクエストを作るときに、

  1. HeaderのAcceptをapplication/jsonにするのがめんどくさい。

  2. ログインしたときに、返ってきたTokenをAuthorizationに設置するのがめんどくさい。

といった問題があります。

番外編1の解決策

コレクションフォルダのEDIT COLLECTIONで以下のPre-request Scriptを記述

pm.request.headers.upsert({key: "Accept", value: "application/json"})

これでコレクションフォルダごとHeaderのAcceptをapplication/jsonにできる。

なんか、設定の仕方を知らないだけな気がしていますが。。

番外編2の解決策

リクエストのTestsに以下のコードを記述し、環境変数を使う。

リクエストのTests
// bearerがheaderで返ってくる場合。それぞれの認証方式に合わせて編集してください
pm.test("Set access token", function () {
    var auth = pm.response.headers.get('Authorization');
    var bearer = auth.split(' ');
    pm.environment.set("user_access_token", bearer[1]);
});

ログインが必要なリクエストのAuthorizationを以下のようにする。
スクリーンショット 2020-11-28 23.16.37.jpg

返ってきたTokenを環境変数user_access_tokenに入れて、ログインが必要なリクエストのAuthorizationでそれを使っています。

Tokenの有効期限をなくすだけだとユーザーを変えられないが、これなら変えられるので開発が楽になる！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧