オブジェクト指向の中核となる概念
ほとんどのプログラミング言語でクラスを実装できる
お菓子のクッキーで例えると、クラスはクッキーの金型でインスタンスは金型を使って作った、クッキー
星型、ハート型、動物型のクラス（金型）を定義しておいて、
実際に使うときにはnewしてインスタンスを作る。
言語によってはインスタンスをオブジェクトとも言ったりする。
プロパティ（属性、データ）とも言う
メソッド（関数）とも言う
private、public
インスタンス変数、インスタンスメソッド
implements)、抽象クラスWindows10、Laravel 7.30.4、PHP 7.2.33、MySQL 5.7.30
まずは、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
して、
にアクセスする。
以下のように、画面右上に、LOGINとREGISTERが表示される。
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 をし直して、
にアクセスする。
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']),
]);
}参考サイト
Javascriptのフレームワーク
node.js、npmのインストールが必要
Vue.jsだけでも十分に利用できる。
でも、SPA（シングルページアプリケーション）なので、ルーティングがちょっと面倒。
そこで、Nuxt.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>上記の方法だと、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>参考文献：
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();参考文献：
入門書のサンプルコードのような、ちょっとしたJavaScriptのソースコードの実行結果はブラウザの開発者ツールで確認するのが手っ取り早いです。
2. F12キーを押して、開発者ツールを表示する
3. コンソールにJavaScript ソースコードを記入し、Enterを押す
※ Console.log()、Alert()で結果を出力を確認する
関数名を持たず、使い捨てにするもの
(引数)=>{ 実行する処理}のように記載する
例）
function hello(getname) {
alert('こんんちわ、' + getname() + 'さん!');
}
hello(()=>{ return "太郎"; });
hello(()=> "花子" );function hello(name){
alert('こんにちは、' + name + 'さん！');
}
hello('たろう');例）
function a(){
return "A";
}
function b(){
return "B";
}
let x = a() + b();
console.log(x); //ABと出力されるvar hello = function () {
alert("hello");
}例）
function a(){
return "hello";
}
var b = a;
console.log(b); //関数a()の内容が出力される
let c = a();
console.log(c); //関数ｱ()の戻り値 hello が出力される参考文献：