the industrial

ブログと言うより自分のためのメモ以外の何モノでもないです。でも読んでくださってありがとうございます。

SR サイタマノラッパー

SR サイタマノラッパー

本当に嫌なのだけど、これでもサイタマ県民の端くれ。

数年前におすすめされたこの映画を見なきゃダメだなと思い鑑賞。

これがオススメどおりなかなかおもしろい。

前編通して主人公が痛いのだけど、それがだんだん心地よくなってくるというか、応援したくなるというかw

クリミナル

クリミナル 2人の記憶を持つ男(字幕版)

ロンドン駐在のCIAエージェント・ビルが任務中に死亡した。彼はアメリカ軍の核ミサイルを遠隔で操作することが可能なハッカー・ダッチマンの居場所を知る唯一の人物だったため、CIAは大きな衝撃を受ける。 CIAはダッチマンの脅威から世界の危機を救うための次なる手段として、ビルの記憶を脳内へ移植する手術をした他人を任務に充てることを検討する。 その移植相手として選ばれたのは、死刑囚のジェリコ・スチュワートだった。移植手術を受けたジェリコは、凶悪犯である自身とエージェントのビルの2つの人格が脳内でせめぎ合う中、記憶が消える48時間以内にダッチマンを探し出してテロを防ぐため、孤独かつ壮絶な闘いに身を投じていく。

主演、ケビン・コスナー

他にはゲイリー・オールドマントミー・リー・ジョーンズライアン・レイノルズガル・ガドットというアホみたいに豪華な出演陣。

そして、めっっっっちゃ面白かった。

とにかくケビン・コスナーがいい味出しすぎている。

ストーリーもそうだし、映画のテンポも良い感じ。

ただ、惜しむらくはゲイリー・オールドマン演じるCIAがアホすぎてちょっと寒かったこと。

だって国家の危機なのに、そのアホさ加減どうにかならんですか?とw

ピクセル

ピクセル (字幕版)

シリアスな映画かと思ったけど、そうだよね、「宇宙人がゲームキャラクターとして侵略してくる」といえば、もはやギャグだよね。

期待とは裏腹にギャグ映画だったのだけど、最近映画で声を出して笑うことが無い俺が”さらに裏切られるほど”腹抱えて笑ったw

素直に面白い一本。

タイムシャッフル

タイムシャッフル(字幕版)

タイムスリップかと思ったけれど、そうではなく未来を映し出すカメラが引き起こす若者たちのバカさ加減を題材にした映画。

バカさといっても、おそらくどんな人間でもやってしまいそうなこと(つまり金儲け)が原因でアクセクスルわけだけど、まあラストのオチが良くも悪くも・・・な感じ。

ドリーム

ドリーム (字幕版)

1961年のアメリカ南東部バージニア州ハンプトン。アメリカ南部において、依然として白人と有色人種の分離政策が行われていた時代。優秀な黒人女性のキャサリンは、同僚のドロシーとメアリーと共にNASAのラングレー研究所で計算手として働いていた。 ソ連人工衛星スプートニクの打ち上げ成功を受けて、アメリカ国内では有人宇宙船計画へのプレッシャーが強まっていた。そんな中、キャサリンは上司のミッチェルからスペース・タスク・グループ(英語版)(STG)での作業を命じられた。図らずも、キャサリンはグループ初の黒人でしかも女性スタッフとなったのだが、人種差別的な環境に苦しめられることとなった。

ドリーム (2016年の映画) - Wikipedia

素直に面白かった。

時代背景もあり、衣装もオシャレ。オシャレだけじゃなくて、人種差別ってこんなにひどかったんだと。

実話を元にしてはいるものの、結構脚色されているらしい。しかし、主人公の「キャサリン・ゴーブル・ジョンソン」なんかは「よく出来た映画でした」とおっしゃっているほど。

#Nuxt.jsのComponentをどの単位で分けるか悩んだ話

この記事は、空いていたので Nuxt.js #2 Advent Calendar 2018 の21日目の記事としました。

20日目は同僚である@ryamakuchiNuxt.js と Firebase(Firestore)を使って認証と DB 保存を実装するでした。

TL;DR

Nuxt.jsのComponentをどの単位で分けるか悩んだ話

  • Componentはページ自体を構成するComponentと、部品としていくつかのページで再利用できるComponetの2種類が存在すると定義。
  • ページ自体を構成するComponentはSectionsComponent、部品としていくつかのページで再利用できるはPartsComponetとして呼ぶように。
  • それぞれcomponents/sections/ディレクトリとcomponents/parts/ディレクトリに配置。

また、Vue.jsのオフィシャルスタイルガイドを受け

  • BaseとなるComponet(BaseButton.vueなど)は、PartsComponentに分類することに。
  • よくあるTheHeader.vueなどは、SectionsCopmonetに分類。
  • SectionsComponetの中だけで利用する子Componentを定義する場合(密結合となるComponent)は、親のComponentの名前をPrefixとして受け継いだSectionsComponentとしてcomponents/sections/に配置。

以上は実験的で今後変更があるかもしれませんが、今の所一番しっくり来ています。

NuxtのComponentどうしていますか?

弊社のNuxt.jsプロダクト開発において、ページを構成するComponentと、部品として再利用するComponentが混在しており、規模が大きくなるに連れてカオス化しそうでした。

そのため、同僚である@ryamakuchiといろいろ相談して、下記の様に決めました。

例えば

(細かい要素は抜きにして)こういった構造のページがあるとします。

f:id:omiend:20181227193940p:plain

このページの中では、ページ自体を構成するSection(あるいはHeaderやFooter)要素があり、それぞれをComponentに切り出すことがあるかもしれません。

f:id:omiend:20181227194154p:plain

同様に、他のページでも再利用できる要素(あえてdiv要素で定義してみました)についても、Componentに切り出したいでしょう。

f:id:omiend:20181227194351p:plain

すると、components/ディレクトリはこの様になるでしょう。

components/
├── ADiv.vue
├── ASection.vue
├── BDiv.vue
├── BSection.vue
├── CDiv.vue
├── CSection.vue
├── TheFooter.vue
└── TheHeader.vue

まだComponentは少ないので良いかもしれませんが、Componentが増えるにつれて確実に見通しが悪くなりそうだと思いました。

そこで、components/配下にディレクトリを切り出し、それぞれのComponentの責務(ページ自体を構成するComponentなのか、部品としていくつかのページで再利用できるComponetなのか)を明確にすることで、少なくとも見通しは良くなるのではないかと考えた次第です。

components/
├── parts
│   ├── ADiv.vue
│   ├── BDiv.vue
│   └── CDiv.vue
└── sections
    ├── ASection.vue
    ├── BSection.vue
    ├── CSection.vue
    ├── TheFooter.vue
    └── TheHeader.vue

また、当初は下記の様にcomponent/parts/だけ切り出そうかとも考えたのですが、ディレクトリの階層を揃えるという意味でcomponents/sections/を切り出しました。

components/
├── ASection.vue
├── BSection.vue
├── CSection.vue
├── TheFooter.vue
├── TheHeader.vue
└── parts
    ├── ADiv.vue
    ├── BDiv.vue
    └── CDiv.vue

ディレクトリを切るかどうか

ディレクトリを切らずに、直列で見れるほうが良いという方もいるそうです。

もしディレクトリが増えまくるとimport時が辛くなりそうな側面もあるかもしれません。

もちろん好みの問題もあるので、その際はファイル名SectionsComponent/PartsComponentを切り分けて工夫する感じですかね。

おわり

こういった地味だけど設計思想にも直結する話は、かなり大事なことだと認識しています。

話が逸れそうですが、そういった話をメンバーとできて、統一見解として内部で共有できることは、とても幸せだと感じました。

しばらく運用してみて、何か不都合があったらまたメンバーと一緒に考えて、ブログにするつもりです。

お読みくださいましてありがとうございました。

以上です。