カテゴリー
プログラミング

クラスとは

クラスとは

オブジェクト指向の中核となる概念

ほとんどのプログラミング言語でクラスを実装できる

クラスとインスタンス

お菓子のクッキーで例えると、クラスはクッキーの金型でインスタンスは金型を使って作った、クッキー

星型、ハート型、動物型のクラス(金型)を定義しておいて、

実際に使うときにはnewしてインスタンスを作る。

言語によってはインスタンスをオブジェクトとも言ったりする。

クラスはプロパティとメソッドを持つ

プロパティ(属性、データ)とも言う

メソッド(関数)とも言う

カプセル化(隠蔽化)

private、public

継承

オーバーロード

クラス変数、クラスメソッド

インスタンス変数、インスタンスメソッド

オーバーライド

インターフェイス(implements)、抽象クラス

カテゴリー
Laravel

LaravelでLoginページを作る

確認環境:

Windows10、Laravel 7.30.4、PHP 7.2.33、MySQL 5.7.30

Loginページを作る

まずは、Laravelプロジェクト(ver 7.*)を新規作成する

composer create-project --prefer-dist laravel/laravel larademo01 "7.*"

以下のコマンドで、Loginページ(認証機能)を追加する

composer require laravel/ui
php artisan ui vue --auth

公式サイトによると、このコマンドは、プロジェクト新規作成直後に行うことを勧めています。

このように、コマンド1発で必要なものが準備できることを、スカフォールディングという。

多分、Ruby on Railsなんかでも、スカフォールディングという言葉は使うと思う。

php artisan serve

して、

http://127.0.0.1:8000

にアクセスする。

以下のように、画面右上に、LOGINとREGISTERが表示される。

DBの設定

REGISERページに移動して、ユーザー登録してみる。

エラーになる。

Illuminate\Database\QueryException
SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO) (SQL: select count(*) as aggregate from `users` where `email` = 0gravity000@gmail.com)
http://127.0.0.1:8000/register

原因はDB設定をしていないため。

なので、MySQLでDB設定をする。

.envファイルを編集する

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larademo01
DB_USERNAME=root
DB_PASSWORD=pass

MySQLのルートユーザーでログインする

ここでルートユーザーのパスワードを入力する

 mysql -u root -p

MySQLでデータベースを新規作成する。

create database larademo01;
use larademo01;

laravelでmigrateする

php artisan migrate

MySQLでテーブルが出来ているか確認する

show tables;

4つテーブルが出来ている。usersテーブルにユーザーが登録される。

+----------------------+
| Tables_in_larademo01 |
+----------------------+
| failed_jobs          |
| migrations           |
| password_resets      |
| users                |
+----------------------+
4 rows in set (0.00 sec)

php artisan serve をし直して、

http://127.0.0.1:8000

にアクセスする。

REGISERページに移動して、ユーザー登録する。

今度は成功する。

MySQL Workbenchで確認する。

usersテーブルに登録したユーザーが登録されている。

リダイレクトパスのカスタマイズ

認証に成功すると、

/home URIへリダイレクトします。

認証後のリダイレクトパスをカスタマイズするには、

RouteServiceProvider の中で

HOME 定数を定義する。

\app\Providers\RouteServiceProvider.php

    /**
     * The path to the "home" route for your application.
     *
     * @var string
     */
    public const HOME = '/home';

認証名のカスタマイズ

デフォルトでは、email フィールドを認証に利用している。

変更するには、LoginController で username メソッドを定義する。

\app\Http\Controllers\Auth\LoginController.php

public function username()
{
    return 'username';
}

ガードのカスタマイズ

???

バリデーション/保管域のカスタマイズ

\app\Http\Controllers\Auth\RegisterController.php

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

参考サイト

Laravel 7.x 認証

カテゴリー
Vue.js/Nuxt.js

Vue.js/Nuxt.jsとは

Javascriptのフレームワーク

node.js、npmのインストールが必要

Vue.jsだけでも十分に利用できる。

でも、SPA(シングルページアプリケーション)なので、ルーティングがちょっと面倒。

そこで、Nuxt.jsを使えば、ルーティングが簡単に使える。

参考サイト:

Vue.js 公式サイト

Nuxt.js 公式サイト

カテゴリー
Laravel

Laravelで非同期処理をする

参考サイト:

Laravel 7.x キュー

Laravel 7.x Redis

laravel非同期処理(キュー)をお手軽に使ってみた

カテゴリー
Laravel

Laravel ミドルウェア

参考サイト:

Laravel 7.x ミドルウェア

カテゴリー
JavaScript

JavaScriptのモジュール export default

JavaScriptのスクリプトファイル(.js)の読み込み方法

<script src="script.js">

モジュール

上記の方法は、あらかじめ読み込むファイルがわかっている必要がある。

わからない場合、動的に読み込む必要がある。

モジュールで読み込むことができる

export モジュール名;

「モジュール名」は、関数だったりオブジェクトだったりする。

exportに指定したものが、「モジュール」として外部から利用できるようになる。

例)

script.jsにモジュール MyObjを定義

export function MyObj() {
    return {
        red:255, green:125, blue:0,
        total:function(){
            return this.red + this.green + this.blue;
        }
    };
};

HTMLファイルで、モジュール MyObjを読み込む

<html><body>
<script type="module">
import {MyObj} from './script.js';

var ob = new MyObj();
document.getElementById("ob").textContent = ob.total();

</script>
<div id="ob"></div>
</body></html>

export default

上記の方法だと、script.jsにMyObjという名前で関数やオブジェクトが定義されていることがわかっている必要がある。

この問題を解決するのが、export default

名前は読み込んだ側で適当につけるという利用方法

exportする際に、関数やオブジェクト名を指定せず、「default」を指定する。

例)

上記をexport defaultに書き直し

script.jsにexport defaultを定義

export deault function () {
    return {
        red:255, green:125, blue:0,
        total:function(){
            return this.red + this.green + this.blue;
        }
    };
};

HTMLファイルで、モジュール myobjと名前をつけてを読み込む

<html><body>
<script type="module">
import myobj from './script.js';

document.getElementById("ob").textContent = ob.total();

</script>
<div id="ob"></div>
</body></html>

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門

カテゴリー
JavaScript

JavaScriptのオブジェクトとクラス

オブジェクト

HTMLのscriptタグにJavaScriptを記述する

obがオブジェクト

オブジェクトはプロパティを持つことができる

<html>
  <body>
	<script>
	let ob = {red:255, green:125, blue:0};
	document.write(ob.red + ob.green + ob.blue);
	</script>
  </body>
</html>

オブジェクトはメソッド(関数)を持つこともできる

let ob = {
    red:255, green:125, blue:0,
    total: function(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

オブジェクトのメソッド(関数)の省略形の記述

let ob = {
    red:255, green:125, blue:0,
    total(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

コンストラクタ関数

function MyObj(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }
}

let ob = new MyObj(255,200,200);
document.write(ob.total());

function MyObj(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }

    this.getHex = function(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }

    this.getStartP = function(){
        return '<p style="background-color:' 
            + this.getHex() + '">';
    }

    this.getEndP = function(){
        return '</p>';
    }

    this.writeP = function(){
        document.write(this.getStartP());
        document.write(this.total());
        document.write(this.getEndP());
    }
};

let ob = new MyObj(255,200,200);
ob.writeP();

let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

クラス

class MyObj {
    constructor(r, g, b){
        this.red = r;
        this.green = g;
        this.blue = b;
    }

    get total(){
        return this.red + this.green + this.blue;
    }

    get hex(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }

    get startP(){
        return '<p style="background-color:' 
            + this.hex + '">';
    }

    get endP(){
        return '</p>';
    }

    writeP(){
        document.write(this.startP);
        document.write(this.total);
        document.write(this.endP);
    }
};

let ob = new MyObj(255,200,200);
ob.writeP();

let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門

カテゴリー
JavaScript

var、let、constの違い(JavaScript)

参考サイト:

JavaScriptで書く「var,let,const」の違いと使い分け方法

カテゴリー
JavaScript

JavaScriptの実行確認

入門書のサンプルコードのような、ちょっとしたJavaScriptのソースコードの実行結果はブラウザの開発者ツールで確認するのが手っ取り早いです。

  1. Google Chromeで適当なページを表示する

2. F12キーを押して、開発者ツールを表示する

3. コンソールにJavaScript ソースコードを記入し、Enterを押す

※ Console.log()、Alert()で結果を出力を確認する

カテゴリー
JavaScript

アロー関数

関数名を持たず、使い捨てにするもの

(引数)=>{ 実行する処理}

のように記載する

例)

function hello(getname) {
	 alert('こんんちわ、' + getname() + 'さん!');
}

hello(()=>{ return "太郎"; });
hello(()=> "花子" );

関数の書き方 その1 一般的な宣言

function hello(name){
    alert('こんにちは、' + name + 'さん!');
}

hello('たろう');

例)

function a(){
    return "A";
}
function b(){
    return "B";
}

let x = a() + b();
console.log(x);	//ABと出力される

関数の書き方 その2 変数に代入

var hello = function () {
  alert("hello");
}

例)

function a(){
    return "hello";
}

var b = a;
console.log(b);	//関数a()の内容が出力される
let c = a();
console.log(c);	//関数ア()の戻り値 hello が出力される

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門