投稿日：2020-10-10T23:37:05+09:00

LaravelでExample.jsを表示させてみる

Reactを使う準備はできた
じゃあExample.jsの描画はどうやるんだ？ということで私的まとめ

環境

laravel 7.28.4

準備
npm run dev
これを実行する理由は以下

ブラウザで確認するためにnpm run watchコマンドを実行しておきます。npm run watchコマンドを実行しておくとファイルを更新するその更新を検知し自動でコンパイルを実行してくれます。
参考：初めてのLaravel6.xとReact入門

ファイルが変更されるたびにビルドをしてくれるってことですな
実行しておきましょう

表示

表示させるコンポーネントはこちら
公式のまま
Example.js
import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}
これを表示するViewを作成
/resources/views/sample.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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="example">
    <example-component></example-component>
</div>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
参考：LaravelでVue.jsを使って開発するファーストステップ

Example.jsではdivのid名appに描画するから,
表示用のViewにそのように設置する

後はルーティング
web.php
Route::get('/sample', function () {
    return view('sample');
});
これでlocahost:8000/sampleにアクセスすれば表示がされる

疑問

無意識にlocahost:8000/sampleにアクセスしたから表示されたもののポートの管理はどこでやっているのか

php artisan serveを実行していないのにlocalhost:8000につないだらLaravelのwelcomeページが表示されることからちゃんとルーティングがされているのはなぜか

参考

LaravelでVue.jsを使って開発するファーストステップ

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T22:13:47+09:00

Laravel

routesの設定

ここではRouteファサードのgetというメソッドに、2つの引数を渡しています。
Route::getの第一引数には、URLを文字列で渡します。
第二引数には、どのコントローラーで何のメソッドを実行するのかを文字列で渡します

controller作成

$ docker-compose exec workspace php artisan make:controller ○○Controller
でdocker利用したコントローラーが作成できます。
ちなみに、
Laravelでコントローラーのひな形を作成するためのコマンドそのものはphp artisan make:controller コントローラー名となります。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T22:05:38+09:00

laravelを旧バージョンでインストール

既存プロジェクトではなく
新規プロジェクト作成に関して
composer create-project laravel/laravel:^7.24 [プロジェクト名]
参考

Laravelのバージョンの指定方法

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T21:47:46+09:00

Laravelのファイル、フォルダの役割ついて

【概要】

1.Laravelのファイル

2.Laravelのフォルダ

1.Laravelのファイル

備忘録として残しておきます！
.editorconfig:エディタに関する設定ファイルです
.env:動作環境に関する設定ファイルです
.gitignore:Gitに関するファイルです
.artisan:php artisan serve(localhost:8000)等のコマンドです
.styleci.yml:コードチェッカーのファイルです
.composer.json:composerを利用関係です
.package.json:Javascriptのパッケージ管理ツールであるnpm利用関係です
phpunit.xml:テストプログラム関係です
server.php:サーバー起動時のプログラム関係です
webpack.mix.js:Javascriptのパッケージツールで使用
yarn.lock:yarnのパッケージマネージャが使うアプリが入っています

2.Laravelのフォルダ

app:アプリケーションのプログラムがまとめられています。アプリケーションを作成する際はここにscrpitファイルを作ります。User.php（ユーザー認証設定),Http(アプリケーションにアクセスした際に処理をし、Controllerファイルがあります。）
bootsrap:アプリケーションを起動する際に一番最初に処理が行われます。
config:設定関連ファイルです
database:データベース関連ファイルです
public:JavascriptやCSSなどブラウザで検証ツールで見れる部分になります
resources:リーソスファイルであり、テンプレートファイル等があります
routes:ルーティング設定はここになります。web.phpがrubyでいうroutes.rbファイルにあたります。このフォルダの中身には、api.php.channels.php、console.phpがあります
storage:ログファイルが保存されます
tests:単体テスト
vendor:フレームワーク（ここではLaravel）のプログラムが入っています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T20:12:48+09:00

【Vue.js + (laravel)】画像データをPOSTしたい

Vue.jsで画像データをPOSTしたかったのでformDataを使って実現しました

【画面側】
type="file" の入力欄と送信ボタンを用意
画像の選択(input)が行われたとき、送信ボタンが押されたときにそれぞれ処理を行う

 <template>
     <input @change="fileSelect" type="file" name="file">
     <button @click="upload" type="submit">送信</button>
 </template>

【js側】
この場合はTestViewという名前でコンポーネントを作っています。

<script>
    export default {
        name: "TestView",
        data: function () {
            return {
                selected_file: null
            }
        },
        methods: {
            //ファイル選択時の処理
            fileSelect: function(e) {
                //選択したファイルの情報を取得しプロパティにいれる
                this.selected_file = e.target.files[0];
            },
            //送信処理
            upload: function() {
                //formDataをnewする
                let formData = new FormData();
                //appendでデータを追加(第一引数は任意のキー)
                //他に送信したいデータがある場合にはその分appendする
                formData.append('file', this.selected_file);

                let config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                };

                axios.post('/product', formData, config)
                    .then(function(response) {
                        console.log('成功')
                    })
                    .catch(function(error) {
                        console.log('失敗')
                    })
            }
        }
    }
</script>

【Laravel コントローラ側】
サーバ側でのデータの受け取り方

 public function test(Request $request)
    {
        //js側で設定したキーを指定
        $file = $request->file('file');
    }

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T17:30:05+09:00

LaravelのSeederで混乱した話

はじめに

自分のスキル感

実務でLaravel,PHPを触り始めて4ヶ月程度
バリバリの駆け出しエンジニアです。

実務でseederを扱って混乱したことがあるので、メモ書き程度にまとめておきます。
同じような境遇に人の役に立てば幸いです。

独学で勉強している時はあまりなんとも思わなかったのですが、環境の差異で軽く混乱しました。
勉強しているは平気で本番環境のデータベースををmigrateしなおしたり、
データを流し直したりしまくっていましたが、実務ではそうはいきません。

(注)自分が経験した現場での話なので、やり方は多数あるかもしれませんので、その辺はご了承ください。

Laravelのseeder作成から反映させるまでの流れ

自分が実務で経験した本番環境のデータベースをデータを変更したりする場合の手順は以下の通り

データを変更するseeder(ここでは適当にExampleSeeder.phpとする)を作成+変更部分を記述

laravelの場合,DatabaseSeeder.phpへ作成したSeederファイルの追加(DatabaseSeeder.phpの中に含まれる元からあるSeederファイルを変更するという手もありますが、あまり良くないかも)

コードが良さそうであれば、マージした後に、以下のコマンドで変更を加えたSeederを本番環境で流す
$ php artisan db:seed --class=ExampleSeeder
雑にまとめるとこんな感じだろうか。

どこで混乱したか

上記の流れで厄介なのが、2の手順である。

もし仮に2の手順を飛ばしてマージされたとしたら、、、どうなるのか。。(ガクブル)

本番環境では単独でseederファイルを流します。

ローカルはどうなるかというと、、、
変更部分がマージされた後に、masterブランチpullしてきて、下記のコマンドを叩きます。
$ php artisan migrate:fresh --seed
すると、、、
本番環境では反映されているデータの変更が、ローカルには反映されません。(ここではExampleSeederが流れない)
なぜか。

php artisan migrate:fresh --seed

上記コマンドで流れるseederとはDatabaseSeeder.phpに記載しているseederファイルだからです。
このコマンドを叩いたから全てのseederファイルが流れるわけではありません

ここが注意すべきところです。

1と3だけでも本番環境には反映させることができます。

しかし、ローカル環境でも変更を反映させるためには変更を加えたseederファイルをDatabaseSeeder.phpへ追加する必要があるのです。

こういうのが積み重なり、本番環境とローカル環境,develop環境など、環境ごとに差異が出てきます。
そして本番環境でしか起こり得ないバグなど、ローカルでは調査しづらいバグの根本的な原因にもなってくるわけです。
恐ろしい

Seederを使う人は注意しましょう。。。。

終わりに

最後まで読んでいただいてありがとうございます。
何か間違っていることがあればぜひぜひご指摘ください!

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T16:38:26+09:00

Mass Assignment　とは(laravel)

Webアプリケーションのアクティブなレコードパターンが悪用され、パスワード、許可された権限、または管理者のステータスなど、ユーザーが通常はアクセスを許可すべきでないデータ項目を変更するコンピュータの脆弱性です。

以下引用
https://csword.net/2018/07/04/mass_assignment_vulnerability_%E3%81%A8%E3%81%AF/

Web上から入力されてきた値を制限することで、不正なパラメータを防ぐ仕組みらしいです

laravelではEloquentで　Mass Assignmentの対策されているとのこと

->パラメータ(パソコンの動作を変える為の外部から与える設定値)
->Eloquent(Laravelで提供されているデータ操作の為の機能)
Eloquentについての詳細↓
https://readouble.com/laravel/6.x/ja/eloquent.html
https://laravel.com/docs/6.x/eloquent#mass-assignment

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T11:24:09+09:00

【laravel】migrationでindexをつけたときのメモ

毎回調べるのが面倒になったのでまとめました
全てmigrationファイル上での記述です。
参考 : https://laravel.com/docs/5.8/migrations

1. 基本的なキー作成
Schema::create('members', function (Blueprint $table) {
    $table->integer('id')->primary(); //プライマリキー
    $table->string('email')->unique(); //ユニークキー
    $table->string('name')->index();  //indexキー
});
laravelではキーを作成するときに「テーブル名+カラム名+キー」の命名規則で自動で名前をつけてくれる。
(上記の例だとmembers_name_index, members_email_uniqueという名前になる)

名前を自分で付けたいとき

引数に任意のキー名を入れる
Schema::create('members', function (Blueprint $table) {
    $table->string('email')->unique('email_unique'); 
    $table->string('name')->index('name_index');
});
2. 複合キー

カラムの配列を渡す
(名前を自分でつけたいときは同じく第二引数で指定する)
Schema::create('members', function (Blueprint $table) {
    $table->integer('id'); 
    $table->string('email'); 
    $table->string('name');
    $table->unique(['email', 'name']); //複合ユニークキー
    $table->index(['id', 'email'], 'members_index'); //複合index(任意の名前をつける)
});
キーの削除

第一引数に削除するキーの名前を渡す
(laravelの命名規則に則っている場合は、カラム名の配列を渡して指定することもできる)
Schema::table('members', function (Blueprint $table) {
    $table->dropUnique('members_email_unique'); //キー名を指定して削除
    $table->dropIndex(['name']); //members_name_indexを削除
});

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T10:18:20+09:00

【Laravel】Collectionのpluckメソッド

はじめに

今回もLaravelのCollectionのメソッドについてまとめたいと思います。

pluckメソッドで指定したキーの配列を取得する

例えば、nameの値のみをを取得する場合下記のような実装になります。
$collection = collect([
    ['id' => 1, 'name' => '山田', 'age' => 18],
    ['id' => 2, 'name' => '佐藤', 'age' => 38],
    ['id' => 3, 'name' => '小林', 'age' => 25],
]);

$names = $collection->pluck('name');

print_r($names->toArray());
実行結果は下記になります。
Array
(
    [0] => 山田
    [1] => 佐藤
    [2] => 小林
)
pluck('id', 'name')のようにidとnameなど複数指定するとその指定した値のみを配列にして取得することもできます。

おわりに

いかがでしたでしょうか。
指定したキーの配列を取得をして試してみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T02:58:52+09:00

LaravelでAWS Elastic Cashe Redisを使ってみた

LaravelのSchedulerにてonOneServerを使用したかったので、共通のキャッシュサーバーとしてAWSのElastic Cache Redisを使った時のメモ。

先にキャッシュサーバー用のセキュリティーグループを作成しておく。

port6379を開け、ソースにプライベートサブネットにおいたEC2のセキュリティグループを選択し保存

ElasticCacheのダッシュボードから作成をクリック

redisを選択。ロケーションはクラウド

Redisの設定、エンジンバージョンの互換性とパラメータグループはデフォの設定
ノードのタイプは用途に合わせてサイズ選択。今回は極小。

配置するVPCサブネットを選択しサブネットグループを作成

以下はとりあえずデフォ



接続テスト

対象のEC２インスタンスに入り、ping
EC2
ping your-elastic-cache-host
環境変数設定
.env
REDIS_HOST=your-elastic-chache-host
REDIS_PASSWORD=null // 今回はAUTH設定していないため
REDIS_PORT=6379
laravelから接続テスト

適当なコマンドを作成して、操作可能かチェック
EC2
cd to/your/dir
php artisan make:command RedisConnectionSample
RedisConnectionSample.php
namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Redis;
class RedisConnectionSample extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'connect:redis';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        Redis::set('key', 'value');
        $data = Redis::get('key');
        var_dump($data);
    }
}
EC2
php artisan connect:redis
うまくいかない時には、phpredisかpredisが入っていないケースがあるので、その場合には入れる。amazon linux 2の場合にはextrasから入手可能。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-10T00:02:47+09:00

[Laravel] ユーザ登録時のリダイレクト先変更

概要

Laravelアプリでユーザ登録完了後のリダイレクトパスの変更方法をまとめた個人メモです。

設定

結論から、app/Providers/RouteServiceProvider.phpの以下箇所を変更することでリダイレクト先を変更することが可能です。
デフォルトでは/homeとなっています。
app/Providers/RouteServiceProvider.php
public const HOME = '/home';
ユーザ登録のコントローラである、app/Http/Controllers/RegisterController.phpから呼ばれています。
app/Http/Controllers/RegisterController.php
protected $redirectTo = RouteServiceProvider::HOME;
Laravel本体のソースを見ると、トレイトで実装されているRegisterUsersとRedirectsUsersにより処理が行われていることを確認できます。

https://github.com/laravel/framework/blob/6.x/src/Illuminate/Foundation/Auth/RegistersUsers.php
https://github.com/laravel/framework/blob/6.x/src/Illuminate/Foundation/Auth/RedirectsUsers.php
RegisterUsers.php
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

        return $this->registered($request, $user)
                        ?: redirect($this->redirectPath());
    }
RedirectUsers.php
    public function redirectPath()
    {
        if (method_exists($this, 'redirectTo')) {
            return $this->redirectTo();
        }

        return property_exists($this, 'redirectTo') ? $this->redirectTo : '/home';
    }

　 Tweet
Qiitaで続きを読む

20201010のlaravelに関する記事は11件です。

LaravelでExample.jsを表示させてみる

環境

準備

表示

疑問

参考

Laravel

routesの設定

controller作成

laravelを旧バージョンでインストール

参考

Laravelのファイル、フォルダの役割ついて

【概要】

1.Laravelのファイル

2.Laravelのフォルダ

【Vue.js + (laravel)】画像データをPOSTしたい

LaravelのSeederで混乱した話

はじめに

自分のスキル感

Laravelのseeder作成から反映させるまでの流れ

自分が実務で経験した本番環境のデータベースをデータを変更したりする場合の手順は以下の通り

どこで混乱したか

もし仮に2の手順を飛ばしてマージされたとしたら、、、どうなるのか。。(ガクブル)

終わりに

Mass Assignment とは(laravel)

【laravel】migrationでindexをつけたときのメモ

1. 基本的なキー作成

名前を自分で付けたいとき

2. 複合キー

キーの削除

【Laravel】Collectionのpluckメソッド

はじめに

pluckメソッドで指定したキーの配列を取得する

おわりに

LaravelでAWS Elastic Cashe Redisを使ってみた

接続テスト

環境変数設定

laravelから接続テスト

[Laravel] ユーザ登録時のリダイレクト先変更

概要

設定

日付別

タグ一覧

Mass Assignment　とは(laravel)