2020/03/15

Laravel + Vue.js 環境において、Vue コンポーネントを利用してみます。

プロジェクト作成

Laravel プロジェクトを作成します。


$ composer create-project --prefer-dist laravel/laravel laravel-vuemix
$ cd laravel-vue-mix
$ chmod 777 storage
$ chmod 777 bootstrap/cache/

Laravel Vue UI 追加

Vue に対応した Laravel UI を作成します。


$ composer require laravel/ui --dev
$ php artisan ui vue
$ npm install

ファイルを確認する

Webpack Mix

webpack.mix.js が作成されています。


const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js') 
    .sass('resources/sass/app.scss', 'public/css'); 

デフォルトでは、以下が作成&設定されています。

  • resources/js/app.js
  • resources/sass/app.scss

resources/js/app.js


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
}
});

サンプル Vue コンポーネント

Vue UIを作成すると、「resources/js/components/ExampleComponent.vue」が作成されています。

このコンポーネントファイルは、app.js で設定されています。


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

第1引数に「タグ名」、第2引数にコンポーネントを設定します。


Vue.component('タグ名', require('.vueファイルパス').default)

コンテンツ作成

コントローラー、ビュー(レイアウト、ページ)を作成し「app.js」「app.css」も読み込むようにします。

Controller

SampleController 作成


$ php artisan make:controller SampleController --resource

SampleController.php の index() を修正


    public function index()
    {
        return view('sample.index');
    }

Route 追加

sample/index にアクセスできるように、route/web.php に追記します。


Route::get('/sample', 'SampleController@index')->name('sample');

ビュー作成

レイアウトファイル

resources/views/layouts/app.blade.php を作成

head タグに app.js 用の scriptタグと app.css 用の linkタグを blade で追記します。


src="{{ asset('js/app.js') }} //script タグで head などに追記
href="{{ asset('css/app.css') }}  //link タグ head などにで追記

ページファイル

resources/views/sample/index.blade.php を作成し、ExampleComponent.vue を読み込みます。

app.js で設定した example-component タグで利用可能です。

カスタム Vue コンポーネント作成

「resources/js/components/」に MessageComponent.vue コンポーネントを作成します。

template 部分

script 部分

script タグで以下を記述します。


export default {
    data: function() {
        return {
            message: "Message Component Message!",
        }
    }
}

app.js

app.js に「MessageComponent.vue」の設定を追記します。


Vue.component('message-component', require('./components/MessageComponent.vue').default);

ビルド

npm または yarn でビルドし、app.js を書き出します。

書き出し先は、「webpack.mix.js」で設定した通りです。


$ npm install
$ npm run dev
//または
$ yarn install
$ yarn run dev

watch で監視

毎回、run dev するのは面倒なので、watch を使ってファイル修正を監視します。


$ npm run watch
//または
$ yarn run watch

Laravel で確認

実際に、Laravel にアクセス(SampleController@index)すると、 「example-component」「message-component」に対応して表示されます。

  2020/03/15

Laravel 環境で Nuxt.js を利用してみたいと思います。
npm など基本的な環境がインストールされていることを前提とします。

基本的な情報は、以下のサイトを参考にすると良いでしょう。

https://ja.nuxtjs.org/guide/installation

nuxt インストール


$ npm install nuxt@2.11.0

Vue ファイルのサンプル確認

Nuxt.js のデフォルトは、同一ディレクトリに展開するため、Laravel プロジェクトと混在しないように、別途作業ディレクトリを作成します。

今回は「」」ディレクトリを作成します。


$ mkdir client

設定ファイル

「nuxt.config.js」ファイルを作成し、「client」を作業ディレクトリに設定します。


module.exports = {
  srcDir: 'src/',
}

プロジェクト作成

Nuxt.js プロジェクトを以下設問を答えながら作成します。


$ yarn create nuxt-app client ./client

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in client
? Project name client
? Project description My top-notch Nuxt.js project
? Author name Yohei Yoshikawa
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
...
  • Axios:サーバとAPI通信できるモジュール
  • ESLint:JavaScript 検証ツール
  • Prettier:JavaScript フォーマッター
  • Universal (SSR):サーバ側でレンダリング

ディレクトリ構成

プロジェクトが作成されると、ディレクトリも自動的に作成されます。
各ディレクトリは以下のようなファイルを配置します。

  • assets:CSS や JavaScript ファイル
  • components:vue のコンポーネント
  • layouts:vue レイアウトファイル
    default.vue がデフォルトのレイアウトとなります。
  • middleware:共通処理をする場合に利用するミドルウェアファイル
  • node_modules:モジュールのパッケージファイル
  • pages:各ページ用の vueファイル
  • plugins:プラグインファイル
  • static:イメージファイルなど
  • store:データファイルなど

Nuxt 動作確認

Nuxt サーバ起動

nuxt コマンドでサーバを起動できます。


$ nuxt

nuxt のパスは「./node_modules/.bin/nuxt」です。

vue ファイルの作成

ブラウザ確認

デフォルトで「3000」ポートで起動確認できます。

http://localhost:3000/

index.vue に記載されたテンプレート「Hello World」が表示されることを確認します。

Laravel と Nuxt.js でAPI通信

Laravel でテストAPIを作成

routes/api.php に今回のテスト用の API (/api/test)を追加します。


Route::get('test', function() {
    return 'Lalavel Api Test';
});

API 動作確認

ブラウザで「Lalavel Api Test」が表示されるか確認します。

http://localhost/larablog/api/test

Axios モジュール

Nuxt.js で通信するために Axios モジュールを利用します。

nuxt-community/axio-modules

Next.js のプロジェクト作成でインストールしていますが、個別でインストールすることもできます。


$ npm i @nuxtjs/axios
//または
$ yarn add @nuxtjs/axios

Proxy モジュールインストール

Docker 環境で Nuxt.js + axios を利用するとポートの関係で通信ができません。 よって、Proxy を利用して通信ポートを設定します。


$ npm i @nuxtjs/proxy
//または
$ yarn add @nuxtjs/proxy

nuxt.config.js 設定

nuxt.config.js に 「axios」「proxy」モジュールを設定します。


module.exports = {
  srcDir: 'src/',
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    baseURL: 'http://localhost:3000'
  },
  proxy: {
    '/api': 'http://localhost/',
  },
}

Docker 環境で動作させると「http://localhost/」のリクエストがリジェクトされるため、プロキシを設定が必要です。


 ERROR  connect ECONNREFUSED 127.0.0.1:8000    

上記では、axios のベースURLを「http://localhost:3000」(Nuxt.jsサーバのデフォルト)を設定します。

そして、proxy は /api を検出したら「http://localhost/」(ポート80)にアクセスできるようにします。

index.vue

まず、template タグのデータ部分を vue変数に修正します。

templateタグの下に、script タグで以下を追記します。


export default {
  async asyncData({app}) {
    const url = 'http://localhost/api/test' //Laravel の API URI
    const message = await app.$axios.$get(url)
    return {
        url,
        message
     };
  }
}

Nuxt サーバで動作確認


$ nuxt

Nuxt サーバを起動して、http://localhost:3000 にアクセスしてみます。

index.vue で設定した API URL 「http://localhost/api/test」でリクエスト、Laravel API の「Lalavel Api Test」がレスポンスされれば成功です。

  2020/03/12

Dockerイメージとコンテナの関係

Dockerイメージ

Dockerコンテナを作成するための元となるテンプレート
Dockerfile を作成して設定する

Dockerコンテナ

Dockerイメージを元に複数作成して、システム、アプリケーションを構成・実行されます。

Docker イメージをダウンロード

Docker イメージはDocker Hub で検索できます。
※ユーザ登録はしておいた方が良いです

利用したいイメージやバージョンを「イメージ名:バージョン」でダウンロードできます。


$ docker image pull alpine:latest

latest は文字通り最新版なので、明示的にバージョンを指定する場合は、Docker Hub に記載されているバージョンを利用します。

Dockerfile と docker コマンドを使う

確認用シェルスクリプト「hello.sh」の作成

Dockerイメージを作成する前に、Dockerコンテナ内で動作させるシェルスクリプトにサンプルを作成してみます。


#!/bin/sh
echo "Hello Shell Script"

Dockerfile でイメージ作成

次にDockerイメージを作成しますが、一般的に Dockerfile ファイルを利用しして設定します。

※今回は「ubuntu:18.04」イメージを利用します。


FROM ubuntu:18.04

COPY hello.sh /usr/local/bin
RUN chmod +x /usr/local/bin/hello.sh

CMD ["hello.sh"]

インストラクション(命令)

Dockerfile は DSL(ドメイン固有言語)を利用して、イメージを作成します。
その際、でてくるのがインストラクションです。

FROM

Dockerイメージ(OS)を指定(ビルド前)

COPY

ホスト側(Mac)から、Dockerコンテナの指定パスにコピーします。
上記はイメージビルド前に、ホスト側の「hello.sh」を「/usr/local/bin/」にコピーします。

類似的にリモート追加や自動解凍できる ADD インストラクションもある。

RUN

Dockerコンテナ内で、指定のコマンドを実行します。
上記は、コンテナにコピーした「/usr/local/bin/hello.sh」に実行権限を与えます。

CMD

完成したDockerイメージに対して、コマンドを実行します。
「,」で区切って引数を与えることもできます。
RUN との違いは、CMDはイメージビルド後に実行します。

Dockerイメージビルド

hello:latest とラベルをつけて Dockerイメージをビルドします。


$ docker image build -t hello:latest .

引数はイメージ名と Dockerfile の配置したパスを指定します。


$ docker image build -t イメージ名:タグ名 Dockerfile配置パス
タグ名は、一般的にバージョンとして利用されます。

Dockerコンテナ起動


$ docker container run hello:latest
Hello Shell Script

「hello:latest」コンテナが起動後に、shell.sh が実行されました。

Docker イメージの確認


$ docker images
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
hello                latest              05e3eb5ff03b        5 minutes ago       64.2MB
...

リポジトリが「hello」、タグ「latest」、イメージID「05e3eb5ff03b」で作成されています。

Docker コンテナの確認


$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
62faba8c4477 hello:latest "hello.sh" 8 minutes ago Exited (0) 8 minutes ago admiring

hello:latest コンテナが、コンテナID「62faba8c4477」で作成されていることがわかります。

Dockerイメージのタグ変更

実際に運用する場合、Github のように namespace や バージョンをつける必要がでてきます。
例えば、イメージ名「hello」は、namespace(空間名)をつけて「sample/hello」、 バージョンは「:」で区切って、「hello:latest」、「hello:0.1.0」のような書き方ができます。

namespace をつける


$ docker image tag hello:latest example/hello:latest

バージョンをつける


$ docker image tag hello:latest example/hello:0.1.0

$ docker images
REPOSITORY                                                 TAG                 IMAGE ID            CREATED             SIZE
example/hello                                              0.1.0               ca00cb953947        2 hours ago         64.2MB
example/hello                                              latest              ca00cb953947        2 hours ago         64.2MB
...

不要になったコンテナ&イメージの削除

Docker を利用しているとイメージやコンテナを作りすぎて、パソコンの容量を圧迫しがちです。

また、イメージやコンテナリストが大量になり確認もしづらくなるので、リスト検索して不要なものは削除しましょう。

  • コンテナIDの一覧「docker ps -a」
  • イメージIDの一覧「docker images」

Docker コンテナ一覧


$ docker container list

Docker コンテナ削除


$ docker rm コンテナID

Docker イメージ一覧


$ docker image list
//または
$ docker images

Docker イメージ削除


$ docker rmi イメージID

  2020/03/11

Docker もう一度を最初から学ぶ為に、シリーズで書いていきます。

今回は、

  • Docker for Mac インストール&起動
  • docker コマンドを確認

Docker For Mac をインストール

Mac で Docker を始めるには「Docker For Mac」を利用するのがお手軽です。

公式のページの Docker For Mac から dmgファイル(※2020-03-02時点:version 2.2.2.0)をダウンロードします。

Docker for Mac

Docker for Mac のメニュー

Docker for Mac の基本設定

Docker の自動起動

Start Docker when you log in

自動アップデート

Automatically check for updates

CPU・メモリ設定

個人差がありますが、デフォルトで使用してみて足りないようなら変更してみると良いでしょう。

ホストOS側のマウント

「File Sharing」で、Dockerコンテナ側がマウントするディレクトリを設定できます。
差し当たり、デフォルトのままで良いと思います。

ネットワーク

Dockerコンテナが利用する、IPアドレスの範囲をしていします。
自分でカスタマイズしても構いませんが、差し当たりデフォルトにしておきます。

docker コマンドを使ってみる

Docker for Mac がインストールできたら、Mac のターミナルで docker コマンドを実行してみます。

Docker バージョン確認


$ docker --version
Docker version 19.03.5, build 633a0ea

Docker Getting Started コンテナ起動

今度はあらかじめ作成されている Dockerコンテナを起動してみます。

docker/getting-started というコンテナが Docker Hub に用意されているので、これを起動してみます。


$ docker run -dp 80:80 docker/getting-started

色々とオプションが入ってますが、わかりやすく書くと以下の通りとなります。


$ docker run オプション コンテナ名

run:コンテナを起動

今回の場合、docker/getting-started​ がコンテナイメージとなります。

-d:バックグラウンド起動

通常はこのバックグラウンドで起動します。

-p:ポート番号マッピング

ホスト側のポート番号と、コンテナ側のポート番号をマッピングします。


ホストポート番号:コンテナポート番号

コンテナ起動のオプションは、


$ docker run --help

で調べることができます。

起動中のコンテナ確認

コンテナを起動したら、コンテナの起動状況(プロセス)を確認します。


$ docker ps
CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS              PORTS                NAMES
4abe131793c6        docker/getting-started   "nginx -g 'daemon of…"   31 minutes ago      Up 31 minutes       0.0.0.0:80->80/tcp   unruffled_roentgen

上記は、コンテナIDが「4abe131793c6」、コンテナイメージが「docker/getting-started」で起動しています。

Docker Getting Started をブラウザで確認

Mac側のポート80 と Docker側のポート80 がマッピングされているため、

http://localhost/

にアクセスすると、Webサーバを介してチュートリアルが表示されます。

Docker Getting StartedイメージのWebサーバは「nginx」が起動しているようです。

Docker Getting Started コンテナを停止

コンテナを停止します。


$ docker stop 4abe131793c6

引数は docker ps で記載されたコンテナIDを指定して


$ docker stop コンテナID

Docker For Mac は遅い?

Docker を利用する場合、Mac(ホスト) と Dockerコンテナ 間でディスク共有します。
ディスクマウントの仕様上、Docker For Mac は他のDocker環境に比べて速度が遅い(レイテンシー)傾向があります。
これは個人差があるので一概に言えませんが、開発できないレベルではありません。

  2020/03/03

何年振りかに MySQL を設定するためメモ

Homebrew でインストール


$ brew update
$ brew install mysql

MySQLバージョン確認


$ mysql --version

$ mysql  Ver 8.0.19 for osx10.14 on x86_64 (Homebrew)

MySQL 起動


$ mysql.server start

MySQL ログイン(root)


$ mysql -u root

MySQL 操作

MySQL バージョン


$ show variables like 'version'; 
+---------------+--------+
| Variable_name | Value  |

ユーザ確認


mysql> select user();
+----------------+
| user()         |
+----------------+
| root@localhost |
+----------------+

ユーザ権限確認


mysql> show grants;

ユーザ作成 & パスワード設定


mysql > create user `ユーザ名`@`localhost` IDENTIFIED BY 'パスワード'

パスワード変更

MySQL5.7以上は PASSWORD 関数が使えません。


mysql > ALTER USER 'ユーザ名'@'localhost' identified BY 'パスワード'

ログイン(パスワード付き)


mysql> -u ユーザ名 -p

 

データベース一覧


mysql> show databases;

MySQL Workbench

Mac の MySQL クライアントツールは、Oracle の「MySQL Workbench」を利用しました。
(Sequel Pro などのサードパティーはリリースが不安定なので)

Oracle: MySQL Workbench

  2020/03/02

composer update したところ、ext-dom がないから PHPUnitが入れられないようです。


$ composer update
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - phpunit/phpunit 8.5.x-dev requires ext-dom * -> the requested PHP extension dom is missing from your system.
...

php-xml をインストール


# aptitude update
# aptitude install php-xml

再度 composer update する

今度は、インストールが進み、vendor もインストールされた。


$ composer update
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 87 installs, 0 updates, 0 removals
As there is no 'unzip' command installed zip files are being unpacked using the PHP zip extension.
This may cause invalid reports of corrupted archives. Besides, any UNIX permissions (e.g. executable) defined in the archives will be lost.
Installing 'unzip' may remediate them.
  - Installing symfony/polyfill-ctype (v1.14.0): Loading from cache
...

  2020/03/01

Eloquent で DBから日付を扱う場合、$date にカラム指定することで自動キャストされます。
(ただし、DBデータの日付フォーマットには注意が必要です)

日付カラム指定


    protected $dates = [
        'created_at',
        'updated_at',
        'posted_at',
    ];

Carbon フォーマット

$datesで指定したカラムは、DB取得データで Carbon にキャストされているため、以下のように Blade でも読みやすい記述ができます。

 
@foreach ($values as $value)
{{ $value->posted_at->format('Y/m/d') }}
@endforeach

フォーマット指定

日付フォーマットも指定できる。


protected $dateFormat = 'Y-m-d H:i:s.u'; 

が、DBデータフォーマットと不整合があると、Exception(Carbon の Create.php)が発生するので注意が必要です。

個人的には「Y-m-d H:i:s」にした方が無難な気がします。

PostgreSQLの場合

  • created_at は CURRENT_TIMESTAMP
  • timstamp without time zone
  • timestamp(0) 

明示的に指定する場合は、


$table->timestamp('created_at')->default(DB::raw('now()::timestamp(0)'));

  2020/02/27

最近では必須となりつつある webpack4 を npm で構築してみました。
下記を参考にしましたが、かなりわかりやすくおすすめです!

参考:最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ

webpack の特徴

「webpack」 は「gulp」「Grunt 」「Browserify」のようなタスクランナーですが、最大の特徴は「モジュールバンドラ」です。

  • 複数のjsファイルを1つのファイル(main.js や bundle.js)にまとめる
  • まとめることで、HTTPリクエストの数を減らす
  • 「React」「Vue.js」をはじめとしたサードパティの JavaScript と連携して開発できる
  • CSSやリソース(画像など)もバンドルできる

 

gulp で開発してきた場合は、gulp + webpack で運用してるようですが、新規ならば webpack で十分みたいです(開発者の好みか?)。

node.js の確認

node.js のバージョンは13以上


$ node -v
v13.6.0

プロジェクト作成

webpack のテストサンプルを利用するロジェクトを作成する。
また、npm init で package.json も作成しておく。


$ mkdir webpack-test
$ cd webpack-test
$ npm init -y
$ mkdir src

webpack のインストール

devDependencies(-D) で webpack webpack-cli をインストールする


$npm i -D webpack webpack-cli
...
+ webpack-cli@3.3.11
+ webpack@4.41.6
...

JavaScript をモジュールで実装

現時点で、「モジュール方式」で JavaScript を実装することが推奨されている。
※ECMAScript Modules(ES Modules、ESM)

webpack4 では明示的に指定しない場合、以下の設定となります。

  • 「src/index.js」がエントリーポイント
  • 「dist/main.js」が出力ファイル

JavaScript ファイル記述

src/index.js


import { say } from "./module1";
say();

src/person.js


export function say() {
    alert("module1 hello!");
}

webpackビルド

手っ取り早く npm 5.2.0 で追加された「npx」コマンドで webpack ビルドしてみる。
(npm run build で webpack を動作させた方が応用が効くが) 


$ npx webpack
Hash: 58e8f21bff04a84f6d5c
Version: webpack 4.41.6
Time: 247ms
Built at: 2020/02/27 20:49:44
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 96 bytes {0} [built]
    | ./src/index.js 42 bytes [built]
    | ./src/person.js 54 bytes [built]

src/index.js に src/person.js が統合され dist/main.js が書き出される

HTML実装&確認

index.html を作成し「dist/main.js」を読み込む

npm でビルド

npx webpack でなく package.json を設定して npm ビルドする

package.json の設定

  • scripts の build に「webpack」
  • devDependencies に 「webpack」「webpack-cli」のパッケージを記述

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "build": "webpack"
  }
}

npm ビルド

npm run build で webpack ビルドされる


$ npm run build
> webpack-test@1.0.0 build /Users/yoo/docker/projects/webpack-test
> webpack
...

webpack.config.js を設定してビルド

webpack.config.js を作成して、「entry」「output」を設定することで、エントリポイント、出力先ファイルをカスタマイズできます。

※前述の通り webpack4 では「src/index.js」「dist/main.js」がデフォルト


module.exports = {
  entry: `./src/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  },
  mode: "development"
};

$ npm run build 

modeを「development」にすると、出力ファイル(main.js)が圧縮されずに書き出されます。

ウォッチを利用するビルド

webpack-dev-server をして、JavaScriptの実装をリアルタイムにブラウザ確認することもできるが、一般的なウォッチを利用してビルドする。

package.json に watch を設定


  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },

watch を起動


$ npm run watch

これで、JavaScript を保存すると自動でビルドされます。

  2020/02/14

MacBook Pro 256 で開発やクリエイティブ作業していくと容量が厳しくなってきた。

自分の場合

  • Xcode(iOSシミュレータ含む)
  • Homebrew
  • VirtualBox & Vagrant
  • Docker
  • Adobe Creative Cloud
  • DAW、音楽ライブラリ
  • 写真ライブラリ

がかなり容量を圧迫しています。

ファイルを検索

5G以上のファイル検索


$ sudo du -gxd 5 / | awk '$1 >= 5{print}'

1G以上のファイル検索(現在のディレクトリ)

$ sudo du -gxd 1| awk '$1 >= 1{print}'

これらをもとに、手動で削除

Xcode 端末シミュレータの削除

Xcodeの場合、ツールコマンドを利用する

端末リスト確認


$ xcrun simctl list devices
== Devices == 
-- iOS 13.3 
-- iPhone 8 (69D4A89A-704C-43E0-8C71-6437C551DEB6) (Shutdown) iPhone 11 (DC5B21DE-21CA-4624-8C1C-7CDC349B9DDA) (Shutdown) ... 
-- Unavailable: com.apple.CoreSimulator.SimRuntime.iOS-10-1 
-- iPhone 5 (CE4E79DC-CE71-47A9-B2C8-5F77EE73196F) (Shutdown) (unavailable, runtime profile not found) iPhone 5s (C94451DC-A342-46AE-8E69-52D6DF928E77) (Shutdown) (unavailable, runtime profile not found) 

不要端末削除


$ xcrun simctl delete unavailable

Docker

Dockerは不要なコンテナー、イメージが溜まりがち

イメージ一覧情報を表示


$ docker image ls

不要(none)の情報を表示


$ docker images -f dangling=true

不要(none)の情報を削除


$ docker image rm $(docker image ls  --filter "dangling=true" -aq)

イメージ・コンテナー・ボリュームの情報を表示


$ docker system df TYPE TOTAL ACTIVE SIZE RECLAIMABLE Images 85 0 18.97GB 18.97GB (100%) Containers 0 0 0B 0B Local Volumes 24 0 80.44MB 80.44MB (100%) Build Cache 0 0 0B 0B

停止中(exited)のイメージ・コンテナー・ボリュームを削除


$ docker system prune

全てのイメージ・コンテナー・ボリュームを削除


$ docker system prune -a

GrageBand 削除

別途DAWを入れているので、Garageband は削除


$ sudo rm -rf /Applications/GarageBand.app
$ sudo rm -rf /Library/Application\ Support/GarageBand
$ sudo rm -rf /Library/Application\ Support/Logic
$ sudo rm -rf /Library/Audio/Apple\ Loops
$ sudo rm -rf /Library/Audio/Apple\ Loops\ Index

  2020/02/08

DIについては、DI(依存性注入) を参照

DIコンテナは、DIのインスタンス生成を、別のファイルでコンテナ化して解決しようという設計パターンです。

共通クラスを用意

まず、共通で使う Animalクラスを用意します。
手っ取り早くファイル分割せず Animal.php にクラス(Dog、Cat)を記述しました。


interface Animal {
    public function bow();
}

class Dog implements Animal {
    public function bow() {
        echo 'wan! wan!'.PHP_EOL;
    }
}

class Cat implements Animal {
    public function bow() {
        echo 'nya-! nya-!'.PHP_EOL;
    }
}

DIでない例

下記のサンプルはコンストラクタ内で Dog を生成して鳴きます。


class AnimalConsole {
    protected $dog;

    public function __construct() {
        $this->dog = new Dog();
    }

    public function bow() {
        $this->dog->bow();
    }
}

$animal_console = new AnimalConsole();
$animal_console->bow();

この場合、コンストラクタで new Dog() するため、Dogが実装できるまで AnimalConsole が実装できません。

DI(?)の場合

コンストラクタの引数に、Dog、Cat インスタンスを注入します(コンストラクタインジェクション)
他の記事をみているとこれで「DI」となってますが、まだ Dog に依存しているため Cat に修正したい場合に手間がかかります。


require_once 'Animal.php';

class AnimalConsole {
    protected $dog;

    public function __construct(Dog $dog) {
        $this->dog = $dog;
    }

    public function bow() {
        $this->dog->bow();
    }
}

$animal_console = new AnimalConsole(new Dog());
$animal_console->bow();

インターフェイス(モック)を引数にしてみる

今度は Dog、Cat 両方扱えるように Amimal を引数とします。


require_once 'Animal.php';

class AnimalConsole {
    protected $animal;

    public function __construct(Amimal $animal) {
        $this->animal = $animal;
    }

    public function bow() {
        $this->animal->bow();
    }
}

$animal_console1 = new AnimalConsole(new Dog());
$animal_console1->bow();

$animal_console2 = new AnimalConsole(new Cat());
$animal_console2->bow();

これで、Dog、Cat どちらでも注入できるようになりました。

pimpleでDIコンテナを作成する

インスタンスを直接渡すのではなく、コンテナ(箱)内でインスタンスを作成して処理するのが、DIコンテナです。

今回は、composerのContainerライブラリ「pimple」を利用しています。

Pimpleインストール


$ composer require pimple/pimple ~3.0

PimpleによるDIコンテナ

下記の場合、Dog、Cat のインスタンスをコンテナ化しています。

また、$container['animal'] では、インスタンスを簡単に切り替えることができます。


require_once 'Animal.php';
require_once __DIR__.'/../vendor/autoload.php';

use Pimple\Container;

class AnimalConsole {
    protected $animal;

    public function __construct(
        Animal $animal
        ) {
        $this->animal = $animal;
    }

    public function bow() {
        $this->animal->bow();
    }
}

$container = new Container();

$container['dog'] = function($c) {
    return new Dog();
};

$container['cat'] = function($c) {
    return new Cat();
};

$container['animal'] = function($c) {
    return $c['dog'];
};

$container['animalConsole'] = function ($c) {
    return new AnimalConsole($c['animal']);
};

$container['animalConsole']->bow();

Container の部分はファイル分離する必要はあります。

<< 最初 < 前ページ 次ページ > 最後 >>
カスタムのペジネーションを作る
2020/03/30
node-sass を使って sass をコンパイルする
2020/03/30
Log ファサードでSQLログを分離して書き出す
2020/03/29
いちから始める Docker - 複数のコンテナを使う - (2020年)
2020/03/28
いちから始める Docker - docker-compose を使う - (2020年)
2020/03/28
AWS ECR を使ってみる
2020/03/26
Laravel7 でマルチ認証
2020/03/24
Mac に AWS Client を設定する
2020/03/22
Laravel 7 リリース
2020/03/19
v-html でHTML表示する
2020/03/17
Laravel で Vue コンポーネントを使う
2020/03/15
Laravel で Nuxt.js を使ってみる(Docker環境)
2020/03/15
いちから始める Docker -コンテナをビルド- (2020年)
2020/03/12
いちから始める Docker -起動してみる- (2020年)
2020/03/11
Mac で MySQL(8系)
2020/03/03
composer で vendor がインストールできない
2020/03/02
Eloquent の日付を Carbon で扱う
2020/03/01
webpack 4 入門(npm編)
2020/02/27
[Mac]容量を減らす
2020/02/14
DIコンテナはじめ
2020/02/08
freee SDKを Laravel で使ってみる
2020/02/06
freee API を使ってみる
2020/02/06
Segueを利用しない画面遷移
2020/02/01
Xcode11.3 で XVim2 を利用する
2020/01/31
Codable で JSONを読み込み
2020/01/30
Webpack入門(yarn編)
2020/01/24
MacからLaradock PostgreSQLで接続エラー
2020/01/21
Dockerで不要なコンテナ・イメージを削除
2020/01/18
Mac で Laradock の構築
2020/01/18
yarn インストール&プロジェクト作成
2020/01/12
Laravel 6.x 構築(Homestead編)
2020/01/12
Composer インストール
2020/01/12
nvm インストール
2020/01/12
npm install が Mac でエラー
2020/01/05
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
2020/01/04
DI(依存性注入)
2019/12/30
[Ubuntu]Let's Encryptで無料の証明書を利用する
2019/12/22
[Apache]Apache2.4のアクセス制限が変更
2019/12/22
[Ubuntu]rootのログインとsudo権限追加
2019/12/22
タミヤ マイコンロボット工作セットをMacに接続してみた
2019/12/21
pgAdimn4 でブラウザで開けなくなる
2019/09/28
Java8 を HomebrewとjEnvで構築
2019/09/28
Android Studio環境構築 2019
2019/09/24
ロケールの再構築
2019/08/27
vagrant グループに Apacheを追加
2019/08/27
Linux2 Apache2 + PHP7.3 + PostgreSQL10
2019/08/25
Anadondaの削除
2019/08/25
[Mac]初期設定メモ(CentOS)
2019/08/21
[Mac]PostgreSQL起動
2019/08/20
[Debian]Node.js安定板インストール
2019/08/09