値オブジェクトの配列から値の配列を取り出す
クリーンアーキテクチャだと$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');
PhpStormメモ
矩形選択:Alt+Shift+ドラッグ
メソッドの呼び出し元へジャンプ:Alt+F7
右クリック→生成→テスト
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/
{ "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');
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>
になって、スーパーリロードする必要がなくなる。