あじちゃんのブログ。備忘録。

〜SEもOLなんですかね?

削除した/移動したはずのファイルを探して「No such file or directory」でサーバーが起動しない!autoloadファイルが更新されていない時の対処方

git mv *** を頻繁にやっていると、autoloadファイルが更新されずにサーバーが起動できなかったりすることがあるのでメモ


例えばこんな感じでパスを変更したとして

git mv /aaa/bbb/ccc.php /aaa/ddd/ccc.php

このようなエラーが出たとする

$ php artisan serve

In ClassLoader.php line 444:
                                                                                                                                                     
  include(/aaa/bbb/ccc.php): failed to open stream: No such file or directory   

この場合、 [~/vendor/composer/autoload_classmap.php] の設定が正常に書き換わってくれていないので自動で治してやる。

composerのコマンドを使う。以下のどちらでも良い。

  • dump-autoload
  • dumpautoload
$ composer dump-autoload

Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> php artisan package:discover
Discovered Package: barryvdh/laravel-ide-helper
Discovered Package: fideloper/proxy
Discovered Package: intervention/image
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Package manifest generated successfully.

これでもう一度サーバーを起動してやれば直っているはず。

rabbitmq.cluster.confのrabbit@xxxのxxxはコンテナ名っぽい

rabbitmq.cluster.conf に設定していたこの辺

# cluster_formation.peer_discovery_backend     = rabbit_peer_discovery_classic_config
#
cluster_formation.classic_config.nodes.1 = rabbit@hostname_01
cluster_formation.classic_config.nodes.2 = rabbit@hostname_02
# cluster_formation.classic_config.nodes.3 = rabbit3@hostname
# cluster_formation.classic_config.nodes.4 = rabbit4@hostname

てっきりhostnameを見てクラスタリングしてくれるものと思っていたけど、実はコンテナ名を見ていたみたい。
なので、 docker-compose.yml に↓を追加してやると解決した。

container_name: hostname_01    # またはhostname_02

特定のポートを開いているプロセスを殺す

特定のポートで実行中のプロセスを調べる

$ lsof -i:3314
COMMAND      PID   USER       FD   TYPE   DEVICE              SIZE/OFF  NODE  NAME
com.docke    771   user_name  20u  IPv4   0x6e99dd572d5a95e7  0t0       TCP   *:uohost (LISTEN)
com.docke    771   user_name  21u  IPv6   0x6e99dd572593ae5f  0t0       TCP   localhost:uohost (LISTEN)

lsof コマンドを使います
今回つけているオプションは -i:xxxx で、これはポート番号を指定しています

結果に出てくる項目は

COMMAND:プロセスが実行しているコマンド(プログラム)  
PID:そのポートを利用しているプロセスのID  
USER:プロセスの実行ユーザー  
FD:ファイルディスクリプター  
TYPE:ファイルの種別  
DEVICE:デバイスID  
SIZE/OFF:ファイルのサイズまたはオフセット  
NODE:プロトコル  
NAME:ポート名  

という感じ
NAMEについている (LISTEM) は待ち受け状態であることを表している

特定のプロセスを殺す

$ kill -9 771

kill コマンドを使います
基本は kill PID です
-9 コマンドは強制終了

ちなみに、 -0 オプションをつけるとプロセスを殺さずに存在確認だけができます
プロセスが存在すると出力はなく、プロセスが存在しないとエラーメッセージがかえってきます

web components のすすめ

勉強会に行った時のメモです


web components の近況

  • IEは基本ダメ2020.01でもうWin7のサポートが切れるので考えなくてよいでしょう
  • EdgeもDevelopingになりました
  • どうしてもIEで使いたい場合はポリフィル入れればよいよ(ケアは必要
  • モダンなものだとpolyfillsなしでOK

基本

  • 新たにESModulesが追加された
  • HTML Templates,HTML Importsは使わない
  • 逐一callBackが呼ばれているだけなのだけどね
  • attachShadow mode:open
    • styleの要素なんかが外に出ない隠蔽しちゃう
    • shadowDOMを持つ要素は子要素を持たなくなる
    • 入れると消えた子要素がslotの要素として割り当てられる
      • 要素名で部分を指定が可能

使い所

  • プロジェクトを超える共通コンポーネント
  • コンポーネントライブラリを使う
    • iron-autogrow-textarea とか pinch-zoom とか
    • webcompoonents.org, googlechromelabs
  • マイクロフロントエンド
    • マイクロサービスをフロントエンドに持ち込む
      • e.g. Reactを隠蔽する(webComponentsだけど中身はReactで動いてるとか)
      • ページの関心毎と技術的関心毎を分離できる
  • SSL
    • Shadow DOMとslotを利用した Hydrate不要のSSRがつくれる
    • 標準仕様なので使えるところで使いましょう

現実的な開発

  • バニラでかく(疲弊しちゃう〜)
  • lit-htmlを使う
    • lit-htmlアプリをwebComponentsにする
  • lit-elementを使う
  • Angular/Vueを使う

    • FWの機能によってFWからwebComponentsを作る
  • バニラで書く→疲弊する→なぜ?

    • ゼロ依存なので軽くて見通しがいい
    • DOM APIを使うことになるので複雑なテンプレートには不向き
    • 属性値は文字列になるのでプリミティブなタグを作る目的の方が相性が良い
  • lit-html

    • polymer
    • テンプレートだけをlit-htmlで書く
      • 更新があるときは勝手に差分更新してくれるので便利
      • webComponentsとして定義する以上はある程度のプリミティブさは求められるよ
  • lit-element
    • litElementをextendsすることで色々良いね
    • typescriptnative!!!
    • lit-htmlのベネフィットを持ち込める
    • property({type:x})で柔軟な属性値を扱える(関数とかも
    • RxJSとの相性が良い
    • ライブラリ
      • fit-htmlとかもある
    • 全てが関数,全てが型付き!!!
    • HTMLと親和性が高い

余談

  • htm
    • tagのテンプレートで書くライブラリ
    • htm自体はテンプレートを解釈しない
    • JSXに似たシンタックス
      • ただし,型検索できない…
    • preach, vhtml と組み合わせて使う

*文法は似ているがフォーカスが異なるのでプロジェクトに合わせて考える FPが好きならlit-htmlもおすすめ

Composerでdev-masterを指定しているpackageの正確なバージョンの確認方法

結論

composerのパッケージのバージョンを調べるときは composer show -i packagename する.
packagenameつけなかったりcomposer.lock見ても dev-master で使っているパッケージの正確な名前はわからないので気をつけよう.

経緯

例えばこんな感じの composer.json があったとして,

{
    "name": “test”,
    "description": “this is test server",
    "keywords": ["framework", "laravel"],
    "license": "",
    "type": "project",
    "require": {
        "intervention/image": "dev-master,
    },
}

この部分 "intervention/image": "dev-master”, の, dev-master について.

dev-master とは,このpackageのmasterブランチのことで、このバージョンを指定するとmasterの最新コミットが適用される.
つまり,最新機能が入っているけど不安定なものがインストールされてしまう.
この状態は障害を生みやすいので,動いている状態で一旦固めてしまうのが良い.

というわけで,このパッケージ intervention/image の正式バージョン名を調べる.

バージョンを調べる

ダメだった方法

  • composer.lock を見る
  • composer show -i から目的パッケージを探して見る

よかった方法

  • composer show -i packagename して目的パッケージの詳細情報を見る

ダメだった方法は2つは, - composer.lock を見る

{
    "name": "intervention/image",
    "version": "dev-master",
    "source": {
        "type": "git",
        "url": "https://github.com/Intervention/image.git",
        "reference": "e82d274f786e3d4b866a59b173f42e716f0783eb"
    },
    ...略...
},
  • composer show -i から目的パッケージを探して見る
$ composer show -i
…略…
intervention/image                    dev-master e82d274 Image handling and manipulation library with support for Laravel integration

という感じで,composer.jsonに書ける形式のバージョンはわかりませんでした.

よかった方法は, composer show -i intervention/image する方法.

$ composer show -i intervention/image
name     : intervention/image
descrip. : Image handling and manipulation library with support for Laravel integration
keywords : gd, image, imagick, laravel, thumbnail, watermark
versions : * dev-master, 2.4.x-dev
type     : library
…略…

versionsのところに, * dev-master2.4.x-dev が書かれている.
これの 2.4.x-dev がいまインストールされているバージョンとわかる.

固定バージョンを適用する

バージョンがわかったらcomposer.jsonを以下のように書き換える.

{
    "name": “test”,
    "description": “this is test server",
    "keywords": ["framework", "laravel"],
    "license": "",
    "type": "project",
    "require": {
        "intervention/image": "2.4.x-dev,
    },
}

あとは $ composer update すればOK!

2018.07に考えたキャリアプランメモがあったので忘れないように書いておく

直近(〜2018.10)

業務

  • PHP,JS のスキルを伸ばす → 基礎の復習と実装の正確性

個人

  • PHPで作成したwebアプリケーションのβ版リリース(〜7月16日まで)
  • 画像処理講座の修了(7月中)

1年後(2018.11〜2019.6 = 26歳)

業務

  • React.js, TypeScriptを業務で使用できるレベルまで引き上げる

個人

  • AWSの機能いくつかを理解できるようになる
  • 勉強会等での登壇
  • プレゼン(軽いLT)などを抵抗なくできる

3年後(2019.7〜2021.6 = 29歳)

業務

  • その時業務で使っている、フロントエンド技術の習得(緊急の対応時に呼んでもらえるくらい)
  • リーダーとして小さめのチームのマネジメントができること
  • バックエンド系の習得(webエンジニアとして、インフラ以外を一通り回せる)
  • テクニカルディレクターへの足がけになるようなことができるといいな……

個人

  • やりたいことを人にプレゼンできること
  • 自分の専門技術を他の人に教育できること
  • 今後の方針を決めること

5年後(2021.7〜2023.6 = 31歳)

業務

  • チームマネジメントができること(中心に立ち、方向性を示していく役割が概ねできること)
  • 会社では産休とか育休中の予定...

個人

  • 自宅でできる仕事を取りながら職場復帰時に技術の遅れが出ないようにしたい

npm で TS2304 (Cannot find name '***') というエラーが出る時の原因と対処

エラー

  • npm -i したらこんなエラーが.
node_modules/@types/superagent/index.d.ts:29:29 - error TS2304: Cannot find name 'Blob'.

29 type MultipartValueSingle = Blob | Buffer | fs.ReadStream | string | boolean | number;
                               ~~~~

node_modules/@types/superagent/index.d.ts:116:14 - error TS2304: Cannot find name 'XMLHttpRequest'.

116         xhr: XMLHttpRequest;
                 ~~~~~~~~~~~~~~

原因

  • それぞれを呼ぶライブラリが足りなかったせい

解決

  • オプション --lib dom を付けてインストールし直すことで,不足している標準ライブラリを一緒にインストールしてくれる
$ npm i --lib dom
npm notice created a lockfile as package-lock.json. You should commit this file.
+ dom@0.0.3
added 1 package and audited 10248 packages in 4.722s
found 0 vulnerabilities

参考

@types/superagent error TS2304: Cannot find name 'XMLHttpRequest'. #12044