2019-01-31

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もおすすめ

2019-01-24

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

laravel composer

結論

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 して目的パッケージの詳細情報を見る

ダメだった方法は２つは， - 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-master と 2.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-11-12

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

雑記

直近（〜2018.10）

業務

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

個人

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

１年後（2018.11〜2019.6 = 26歳）

業務

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

個人

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

３年後（2019.7〜2021.6 = 29歳）

業務

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

個人

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

５年後（2021.7〜2023.6 = 31歳）

業務

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

個人

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

あじちゃんの備忘録。

〜ここはメモ帳です