クリミナル
ロンドン駐在のCIAエージェント・ビルが任務中に死亡した。彼はアメリカ軍の核ミサイルを遠隔で操作することが可能なハッカー・ダッチマンの居場所を知る唯一の人物だったため、CIAは大きな衝撃を受ける。 CIAはダッチマンの脅威から世界の危機を救うための次なる手段として、ビルの記憶を脳内へ移植する手術をした他人を任務に充てることを検討する。 その移植相手として選ばれたのは、死刑囚のジェリコ・スチュワートだった。移植手術を受けたジェリコは、凶悪犯である自身とエージェントのビルの2つの人格が脳内でせめぎ合う中、記憶が消える48時間以内にダッチマンを探し出してテロを防ぐため、孤独かつ壮絶な闘いに身を投じていく。
主演、ケビン・コスナー
他にはゲイリー・オールドマン、トミー・リー・ジョーンズ、ライアン・レイノルズ、ガル・ガドットというアホみたいに豪華な出演陣。
そして、めっっっっちゃ面白かった。
とにかくケビン・コスナーがいい味出しすぎている。
ストーリーもそうだし、映画のテンポも良い感じ。
ただ、惜しむらくはゲイリー・オールドマン演じるCIAがアホすぎてちょっと寒かったこと。
だって国家の危機なのに、そのアホさ加減どうにかならんですか?とw
ドリーム
1961年のアメリカ南東部バージニア州ハンプトン。アメリカ南部において、依然として白人と有色人種の分離政策が行われていた時代。優秀な黒人女性のキャサリンは、同僚のドロシーとメアリーと共にNASAのラングレー研究所で計算手として働いていた。 ソ連の人工衛星スプートニクの打ち上げ成功を受けて、アメリカ国内では有人宇宙船計画へのプレッシャーが強まっていた。そんな中、キャサリンは上司のミッチェルからスペース・タスク・グループ(英語版)(STG)での作業を命じられた。図らずも、キャサリンはグループ初の黒人でしかも女性スタッフとなったのだが、人種差別的な環境に苦しめられることとなった。
素直に面白かった。
時代背景もあり、衣装もオシャレ。オシャレだけじゃなくて、人種差別ってこんなにひどかったんだと。
実話を元にしてはいるものの、結構脚色されているらしい。しかし、主人公の「キャサリン・ゴーブル・ジョンソン」なんかは「よく出来た映画でした」とおっしゃっているほど。
#Nuxt.jsのComponentをどの単位で分けるか悩んだ話
この記事は、空いていたので Nuxt.js #2 Advent Calendar 2018 の21日目の記事としました。
20日目は同僚である@ryamakuchiのNuxt.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といろいろ相談して、下記の様に決めました。
例えば
(細かい要素は抜きにして)こういった構造のページがあるとします。
このページの中では、ページ自体を構成するSection(あるいはHeaderやFooter)要素があり、それぞれをComponentに切り出すことがあるかもしれません。
同様に、他のページでも再利用できる要素(あえてdiv要素で定義してみました)についても、Componentに切り出したいでしょう。
すると、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
を切り分けて工夫する感じですかね。
おわり
こういった地味だけど設計思想にも直結する話は、かなり大事なことだと認識しています。
話が逸れそうですが、そういった話をメンバーとできて、統一見解として内部で共有できることは、とても幸せだと感じました。
しばらく運用してみて、何か不都合があったらまたメンバーと一緒に考えて、ブログにするつもりです。
お読みくださいましてありがとうございました。
以上です。