forget for get

覚えるために忘れる

値オブジェクトの配列から値の配列を取り出す

クリーンアーキテクチャだと$itemIdがintではなく、
ItemIdクラスみたいな値オブジェクト(ValueObject)になっている。

例えば、検索クエリに指定したいときはこんな感じに書く。

Item::where('item_id', $itemId->itemId)->get();

では、$itemIdListのときは、、

$itemIdValueList = [];
foreach ($itemIdList as $itemId) {
  $itemIdValueList[] = $itemId->itemId;
}
Item::whereIn('item_id', $itemIdValueList)->get();

こんな感じで書いていた。

もっと簡潔に書ける。

$itemIdValueList = array_column($itemIdList, 'itemId');
Item::whereIn('item_id', $itemIdValueList)->get();

ちなみにEnumだとこう。

$itemTypeValueList = array_column($itemTypeList, 'value');

PHPの列挙型(Enum)

test.php

<?php
enum Suit
{
    case Hearts;
    case Diamonds;
    case Clubs;
    case Spades;
}

$a = Suit::Spades;
$b = Suit::Spades;

var_dump($a); // Suit::Spades
var_dump($a === $b); // true
var_dump($a instanceof Suit); // true
echo $a->name; // Spades

test2.php

<?php
enum Suit: string
{
    case Hearts = 'H';
    case Diamonds = 'D';
    case Clubs = 'C';
    case Spades = 'S';
}

$c = Suit::Clubs;
echo $c->value; // C

$d = Suit::from('H');
var_dump($d); // Suit::Hearts

// $e = Suit::from('Z'); // 不正なデータはエラー
// PHP Fatal error:  Uncaught ValueError: "Z" is not a valid backing value for enum "Suit"
$e = Suit::tryFrom('Z') ?? Suit::Spades; // 不正なデータはnullが返る
var_dump($e); // Suit::Spades

var_dump(Suit::cases()); // [Suit::Hearts, Suit::Diamonds, Suit::Clubs, Suit:Spades]

 

Observerパターン

観察対象の状態が変化すると、通知する

 

Subject(被験者):NumberGenerator
 Observerを登録・削除するメソッド、現在の状態を取得するメソッドをもつ
具体的なSubject:RandomNumberGenerator
 状態が変化したらObserverに伝える
Observer(観察者):Observer
具体的なObserver:DigitObserver、GraphObserver
 updateが呼ばれると、Subjectの現在の状態を取得して何か処理をする

 

Observer.php

interface Observer {
  function update(NumberGenerator $generator): void;
}

NumberGenerator.php

abstract class NumberGenerator {
  private $observers = [];
  function addObserver(Observer $observer): void {
    $this->observers[] = $observer;
  }
  function deleteObserver(Observer $observer): void {
    foreach ($this->observers as $key => $val) {
      if ($val == $observer) unset($this->observers[$key]);
    }
  }
  function notifyObservers(): void {
    foreach ($this->observers as $observer) {
      $observer->update($this);
    }
  }
  abstract function getNumber(): int;
  abstract function execute(): void;
}

RandomNumberGenerator.php

class RandomNumberGenerator extends NumberGenerator {
  private $number;
  function getNumber(): int {
    return $this->number;
  }
  function execute(): void {
    for ($i=0;$i<3;$i++) {
      $this->number = rand(1, 20);
      $this->notifyObservers();
    }
  }
}

DigitObserver.php

class DigitObserver implements Observer {
  function update(NumberGenerator $generator): void {
    echo "DigitObserver:" . $generator->getNumber() . "\n";
    sleep(1);
  }
}

GraphObserver.php

class GraphObserver implements Observer {
  function update(NumberGenerator $generator): void {
    $str = "";
    $count = $generator->getNumber();
    for ($i=0;$i<$count;$i++) {
      $str .= "*";
    }
    echo "GraphObserver:" . $str . "\n";
    sleep(1);
  }
}

Main.php

require "../autoload.php";
$generator = new RandomNumberGenerator();
$dObserver = new DigitObserver();
$gObserver = new GraphObserver();
$generator->addObserver($dObserver);
$generator->addObserver($gObserver);
$generator->execute();

autoload.php

function autoload($className){
  require './'.$className.'.php';
}
spl_autoload_register('autoload');

 

Vue CLIチュートリアル

https://cli.vuejs.org/guide/prototyping.html

 

Docker環境構築

https://cli.vuejs.org/guide/prototyping.html を参考に

 

Dockerfile

FROM node:16
#ENV http_proxy http://xxx:3128/
#ENV https_proxy http://xxx:3128/
WORKDIR /app

docker-compose.yml
※commandのところをコメントアウトしておく

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
    - ./:/app
    #command: sh -c "cd hello-world && npm run serve"
    ports:
    - "8054:8080"

コンテナを起動してVueCLIをインストールしてサンプルプロジェクトをつくる

※ create時に色々聞かれるけど、読んで適当に選ぶ

docker-compose up -d
docker exec -it vuecli_docker_node_1 /bin/bash
npm install -g @vue/cli
vue create hello-world

起動!

cd hello-world
npm run serve

ブラウザからアクセスするとトップページが表示される

docker-compose.ymlのコメントアウトしてるところを戻すと、
次回起動時にvueも起動する

 

どんなファイルができてるか確認してみる。

public/index.html
src/main.js
src/App.vue
src/components/HelloWorld.vue

 

プロキシ下でのVagrant,Docker環境構築で色々ハマる

Vagrantfile

if Vagrant.has_plugin?("vagrant-proxyconf")
    config.proxy.http     = "http://xxx:3128"
    config.proxy.https    = "http://xxx:3128"
    config.proxy.no_proxy = "localhost,127.0.0.1,aaa,bbb"
end    

 

プロキシ設定するプラグインを入れてからvagrant upする
その前にプロキシ設定しないとプラグインが落ちてこない

set http_proxy=http://xxx:3128
set https_proxy=http://xxx:3128
vagrant plugin install vagrant-proxyconf
vagrant up

 

Dockerfile

ENV http_proxy http://xxx:3128/
ENV https_proxy http://xxx:3128/

 

vi /etc/docker/daemon.json

{ "insecure-registries":["aaa:5000","bbb:5000"] }

 

service docker restart
docker-compose up

LaravelMixチュートリアル Vue.js導入まで

LaravelMixを使ってみようとしたけど、Laravel公式のドキュメントだと全然わからず、、

https://readouble.com/laravel/8.x/ja/mix.html

LaravelMix公式のドキュメントを見ることに。

https://readouble.com/laravel/8.x/ja/mix.html

事前準備

Laravel + Docker環境

https://lightwill.hatenablog.com/entry/2022/01/20/150821

 

nodeJSが入ってないので入れる

docker exec -it laravel_docker-app-1 /bin/bash
curl -sL https://deb.nodesource.com/setup_16.x -o setup.sh
sh setup.sh
apt-get install -y nodejs
npm install -g npm

チュートリアル

npm install

途中で固まったり、、時間がかかる

JS、CSSを適当に編集

vi resources/js/app.js

alert('Hello World');

vi resources/css/app.css

body {
    color: red;
}
npx mix

以下が作成される
public/js/app.js
public/css/app.css
webpack.mix.jsに書いてある

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', []);

適当にviewをつくって、JSとCSSを読み込んで確認してみる。

<link rel="stylesheet" href="/css/app.css" />
<script src="/js/app.js"></script>

npx mix watch

で変更があったら自動でコンパイルして反映してくれる

 

Vue.js導入

LaravelMixのドキュメントだと説明が足りない、、

https://laravel-mix.com/docs/6.0/vue

事前にvue関連をインストール

npm install vue vue-router vuex vue-template-compiler vue-loader --save-dev

LaravelMixのドキュメントを参考にwebpack.mix.jsとapp.jsを編集、Alert.vueを作成

bladeに以下を追加

<div id="app">
    <alert></alert>
</div>

 

npx mix watchしてるのにJSやCSSの変更が反映されない!

ブラウザをスーパーリロードしないと反映されない、、

webpack.mix.jsに.version()を追記

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', []).version();

すると、
<link rel="stylesheet" href="{{mix('css/app.css')}}" />
<script src="{{mix('js/app.js')}}"></script>

<link rel="stylesheet" href="/css/app.css?id=709141171a3f4976580d" />
<script src="/js/app.js?id=184b0a397007d2da2e91"></script>
になって、スーパーリロードする必要がなくなる。