blogシタテルの技術やエンジニアの取り組みを紹介するテックブログです。投稿を表示しています。投稿を表示しています。2019こんにちは、シタテルの茨木です。cssは、特にVue.jsにおいては、css設計のスタンダードと言っていいのではないかと思います。*1」という、シンプルで管理しやすい設計指針を打ち立てることができ、実に理にかなった手法ですね。プロジェクト全体でのcss命名規約の統制問題は依然としてありますが、コンポーネントベースでの設計手法自体がコンポーネントを書き捨てる運用と親和性があるため、そこまで大きな問題にはならないのかなと思います。cssだけで、コンポーネント内にcss的な関心事を完全に閉じ込められるかというとそうではなく、当然ながら例外もあります。代表的な例としては、cssの仕様上継承されてしまう属性ですね。font-sizeなど、属性自体が子孫要素に継承されるものとして定義されていますので、セレクタレベルでscopedにしたところで、子孫要素への影響を避けることはできません。この辺は書いていても直感的に理解しやすいのでそこまで問題になりにくいのですが、個人的に危ないなと思うのは「z-index」「重ね合わせコンテキスト」です。z-indexの管理cssをざっくり理解したつもりになっているエンジニアが犯しがちな間違いの一つが、z-indexがグローバルだと思いこんでしまうことだと思います。コンテキストメニューのコンポーネントはz-index1000番台、モーダルダイアログのコンポーネントはz-index500番台といった管理です。(モーダル上でコンテキストメニューを開くかもしれない。その場合はコンテキストメニューがモーダルの下に回り込んでほしくない、なんてことを考えているわけですね)この方式は重ね合わせコンテキストがページ内で1つであるうちは上手く機能しますし、ルール自体はおそらく間違いでもないです。重ね合わせコンテキストに関する考慮を漏らしていると、「z-indexで勝っているはずなのに、なぜか後ろに回り込んでしまう要素」が出てくる可能性があり、「なぜか動かない」という状況に見舞われます。実際には仕様理解が足りていないだけなのですが。理解すべき仕様「重ね合わせコンテキスト」の詳細についてはMDNを読んでください。absoluteなど)が指定された要素は自身が重ね合わせコンテキストを形成する」ということです。これもfont-sizeなどと同じで、親要素で指定された属性が(たとえscopedであろうとも)、子孫要素に影響を与えうる、ということですね。cssとコンポーネントベースでの部品化は、確かに今までのcssの不便さや複雑さの大部分を解決しているように見えますが、z-indexの件を一つの例として考えると、「デザイン・見た目・UIは、どこまで部品化しても文脈依存から逃れられない」ということを示している気がします。重ね合わせ「コンテキスト」ですしね。z-indexをpropsで渡せば...みたいな発想はもちろんあるのですが、結局その先にあるのはinput要素の再発明だったりするわけです。input要素をwrapしてたはずがinput要素を作っていた...みたいな。どんなコンテキストでもデザイン破綻せず使うことのできるUI部品の実装は、相当な労力を要します。(まあ、実際にUI部品系のnpmパッケージの中を覗いてみると、普通にz-indexがハードコードされていて変更できなかったりすることが多く、みんなほどほどに手を抜いているんだと思いますが)プロジェクト内でのデザイン統一・再利用を想定してコンポーネントを分割設計する際に、デザイン的な汎用性を求めるのはほどほどにしておくべきなのかな、と思った次第でした。他コンポと疎結合に作るとか、ステートレスに作るとか、そちらに労力を割いたほうが実りが大きいんじゃないかな。UIの寿命は短いので、捨てやすいように疎結合に書くのが一番大事かな、と個人的には思います。usシタテルのミッションはテクノロジーとイマジネーションで「ひと」と「衣服」の新しい未来をつくること。クラウドシステムを使うように服作りのリソースを誰でも好きなときに好きだだけ使えるプラットフォームを目指しています。(1)どうも朝野です。Storage移行記:バリデーション編こんにちはあさのです。Storageに移行したときの話を書こうと思います。Paperclipはファイルアップロード用のGemです。https://...SQLite3でWindow関数を試してみた!はじめまして、DevOpsチームの甲斐です。何かブログのネタはないかなーと思っていたところ、たまたま以下のニュースを発見しました。ECSに自動デプロイする(おまけで環境面の切り替えも)こんにちは、シタテルの茨木です。ECR/ECSにデプロイする為の設定例を紹介します。Nuxt.jsアプリ用に作ったものですが、言語やAPサーバが違っても共通の部分がほとんどです。