読者です 読者をやめる 読者になる 読者になる

I'm kubosho_

思想の固まり

2016年買ってよかった・よくなかったものまとめ

雑記

完全に主観で買ってよかった・よくなかったものをまとめていきます。

買ってよかったもの

ErgoDox EZ

ErgoDox EZ: An Incredible Mechanical Ergonomic Keyboard

自然な体勢と好きなキーバインドで入力できる喜び。

Robin

Robin. The smarter smartphone. – Nextbit

何より外見が良いです。カメラも結構きれいです(起動時間は一呼吸置く感じでちょっと遅い)。 Android 6.0.1もだいぶいい感じでした。あとOSがそこまでカスタマイズされていなくて良いです。 液晶が弱いのか割とすぐに光ムラができてしまったのが残念です…

傘立て ネコ ブラック 2359

山崎実業 傘立て ネコ ブラック 2359

山崎実業 傘立て ネコ ブラック 2359

かわいい。傘がまとめられて便利です。

PLEMO 長傘 雨の雫 ブラック (124センチ)

サイバーマンデーセールで衝動買いしたものの折れ方が独特だったり、自立できたりして結構便利かつ面白かったです。

ポケットモンスター サン

孵化と準伝説ポケモンの厳選に時間をとられるのが難点ですが楽しいです。

パナソニック セラミックヒーター ホワイト DS-F1206-W

パナソニック セラミックヒーター ホワイト DS-F1206-W

パナソニック セラミックヒーター ホワイト DS-F1206-W

作業部屋の足元が暖かくなってよいです。

ラブライブ! μ's Final LoveLive! 〜μ'sic Forever♪♪♪♪♪♪♪♪♪〜 Blu-ray Memorial BOX

ラブライブ! μ's Final LoveLive! 〜μ'sic Forever♪♪♪♪♪♪♪♪♪〜  Blu-ray Memorial BOX

ラブライブ! μ's Final LoveLive! 〜μ'sic Forever♪♪♪♪♪♪♪♪♪〜 Blu-ray Memorial BOX

尊かった(小並感)

買ってよくなかったもの

mornin'

めざましカーテン mornin’

まずAndroidだとBluetoothの接続が不安定でした。あと開閉時間が30秒ごとでしか設定できず10秒単位など細かく設定できないので、開閉どちらも足りないかやりすぎるかという状況です…

ニンテンドークラシックミニ ファミリーコンピュータ

ニンテンドークラシックミニ ファミリーコンピュータ & 専用ACアダプター

結局あまり遊んでいないです…あとコントローラーが着脱不可なのとケーブルが短いのがつらい。

Pokémon GO Plus

Pokémon GO Plus

あまりPokémon GOを遊ばなくなってから買ったのでそこまで使わなかったです… 配信と同時に出てくれればもっと使っていたかもしれないです。

CSSを破綻させない

Advent Calendar CSS 登壇

12/3(土)にCSSを破綻させないということをbuilderscon tokyo 2016で話しました(動画見ましたが「えっと」や「なんか」とか言い過ぎなのと、髪の毛触りすぎですね)。

そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14日目の記事として公開します。

CSSは破綻しやすい

OOCSSの提唱者Nicole Sulliban氏も"CSS is too fragile"と2008年のイベントで言いました。 なぜ破綻しやすいのか。それはCSSの特性が絡んでいます。

CSSの特性

CSSの特性としておもに3つあります。

はじめに、記述を間違えてもエラーにならないことです。ブラウザで表示確認をおこなって初めて見た目がおかしいことに気づきます。

次に、スタイルが適用される条件としてルールセットを書く順序は関係ありますが、常に関係があるわけではない点です。

ちなみにルールセットはCSSのセレクタ・プロパティ・値の定義をまとめたものです。 分かりやすい図としてCSS ルールセット構造図 · terkel.jp内の画像があるので引用します。

f:id:kubosh0:20161211114240p:plain

最後に、ルールセット間で同じプロパティが定義されている場合、順序・詳細度・重要度にもとづいて適用されるスタイルが決定されます。CSSをややこしくしているのはここですが、意識して書かないと容易に破綻します。

ここからは実際にCSSが破綻した例を見ていきます。

CSSの破綻

CSSの破綻はいくつか種類があります。これらの要素のうち2つ以上が複合して起きていると手がつけられないCSSになります。

スタイルの上書きが複数ある

スタイルの上書きはBootstrapなどCSSフレームワークを使うときに独自の見た目を実現しようとすると起こりがちな問題です。 スタイルの上書きが多くなるとどんな見た目になるのか予測できなくなり破綻します。

.button {
  border: 1px solid #ccc;
}

/* ...長いコードの後や別ファイルなど... */

.button {
  border: 1px solid #666;
}

/* ...長いコードの後や別ファイルなど... */

.article .button {
  border: 1px solid #00c;
}

前に書いたセレクタの詳細度が高い

前に書いたセレクタの詳細度が高くてスタイルが上書きできないことも破綻の一因になります。 先ほどのスタイルの上書きを多くしていると起こりがちな問題です。 これがもたらす結果としては !important の濫用です。

 /* 詳細度はa=0, b=4, c=0なので0.4.0となる */
.container .form .form-group .form-submit-button {}

/*
  詳細度はa=0, b=1, c=0なので0.1.0となる
  上書きできない。つらい
*/
.form__submit-button {}

命名規則がバラバラ

よくあることとして単語の区切りがケバブケース・キャメルケース・スネークケースのようにバラけていると、どの規則に合わせればいいのか分からずいつまでも命名規則が統一されません。

.account-login-button {}

.commentSubmitButton {}

.form_submit_button {}

CSSの破綻 まとめ

ここまでCSSが破綻する理由について書きました。まとめると次のとおりです。

  • 詳細度が管理されていない
  • ルールセットの分割粒度が明確ではない
  • 命名規則が決まっていない

CSSを破綻させない

ここからはCSSを破綻させないためにはどうすればいいのかを書いていきます。

詳細度を管理する

CSSなどのファイルを分割するときはファイル内で下へ行くにつれて詳細度が高くなるようにします。またセレクタ定義やIDセレクタを書きすぎないようにするのも重要です。

例を挙げるとフォーム共通のスタイルを適用するときにセレクタを定義しすぎないことです。 これにより少ないセレクタ定義で適用したスタイルを上書きできて秩序が保つことができます。

 /* 詳細度はa=0, b=2, c=0なので0.2.0となる */
.form .form-button {
  margin: 0;
}

/* ... */

/*
  詳細度はa=0, b=2, c=0なので0.2.0となる
  記述の順序が後なので値が上書きされる
*/
.comment-form .form-button {
  /* 上書きできる */
  margin: 10px auto;
}

ルールセットの分割粒度を明確にする

スタイルの上書きを減らすためにルールセットの分割粒度を明確にすることも重要です。 これはさまざまな方法が提案されていて、たとえばFLOCSSSMACSSECSSなどがあります。

これは作るものによって適しているものが違うため一概にどれがいいか言えません。 スタイルを適用したいときにルールセットをどこに置けばいいのかチーム内で迷わないようにするのが重要です。

命名規則を決める

命名規則もMindBEMdingECSSSMACSSなどさまざまなものがあります。これもチーム内で使う命名規則を一致させることが重要です。

CSSを破綻させない まとめ

ここまでCSSの破綻を起こさないためにどうしたらいいか書きました。まとめると次のとおりです。

  • 詳細度を管理する
  • チーム内でルールセットの分割粒度を明確にする
  • チーム内で命名規則を決める

しかしこれらを実践する前により大事なことが1つあります。 それはデザイナーとの認識合わせです。

これはデザインの意図を正確に理解した上で書かれたCSSは破綻しないという言葉があります。

デザイナーが作ったSketchやPhotoshopのファイルを見て質問や提案をおこない、デザイナーとUIを実装する人で意図の認識を合わせることが重要です。 もっと言うならSketchやPhotoshopなどで作る以前のプロトタイピングの段階から関わるとお互い意図の認識がしやすくなると思います。 プロトタイピングツールはPrott(ステマ)やInVisionが代表的です。

これを踏まえてまとめると、チームで議論して良いCSS設計を考えようになります。

CSSがすでに破綻している場合は?

buildersconのQ&Aで「途中から入ったプロジェクトのCSSが破綻していた場合どう改善したらいいのか?」というのがあったのですが、今のところチームで話し合って設計指針を決めて1から書き直すしかないと考えています。

参考資料

若者?がCSSを覚えた方法

雑記

もうちょっと書こうかなと思って結局放置してしまったので公開していきます。


1年前、こんな記事を見ました。

若者はどうやってCSSを覚えたのか

どうやってCSSを覚えたのか、その方法について書かれている記事をあまり見たことがない気がしたなと思ったので、自分の覚え方を誰に言われたわけではないですが、書いていきます。

自分がCSSを書き始めたのは2006年1月からでした。当時はPCを持っていなかったため、フィーチャーフォンからWebサイトを作り、テンキーを使ってCSSを書いていました。

エムペ!やモバイルスペース、フリースペースやmono spaceといったものが通じる人とはだいたい友達です。

Goodpatchのギークガール☆趣味はプログラミング!だから、仕事外でもアウトプットしていたい|CodeIQ MAGAZINEで「HTMLのタグは、単語登録をして作っていました。これでHTMLとCSSを覚えたんです」と書いてあって「ああ、やったやった」と頷いてしまいました。

そこからはずっと趣味として、Webサイトを10個くらい作っては閉鎖してということをしていくうちに、HTMLとCSSが体に染み付きました。

新卒で入った会社をやめた後に、職業訓練校に行きHTMLとCSS(とPHPやMySQLもほんの少し)を改めて学びました(といってもHTMLとCSSに関しては学ぶ内容はなかった)。

そして、初めてPCを使ってサイト(foursquareの日本語情報サイト)を作った結果、それが元でソーシャルゲームやWebサイトの受託制作を主の業務としている会社に入社することができました。

その会社を退職した後も引き続きHTMLやCSS、JavaScriptを仕事で書いてます。

CSSをリファクタリングするためのテストツール選定

CSS テスト

この記事は今年のはじめに公開しようと思っていたのですが、体裁を整えないままずっと下書きに残ってしまっていたので供養の意味も込めて公開します。

もしかしたら間違ったことが書かれているかもしれないのと、情報も若干古くなってしまったのでそれらを承知の上でお読みください。


何をテストするのか

  • 肥大化したCSSを整理したい
  • 見た目は変えないようにする
  • CSSを整理した後に見た目が変わっていないことをテストで保証したい

ツールを検討する上での前提条件

  • 基本テストはVisual Studioのタスクランナーエクスプローラー上から行いたい
  • testタスクをクリックしたらでテスト実行したい
  • グローバルインストールさせたくない
    • タスクランナーエクスプローラーは依存しているパッケージで足りないものがあると、自動的にnpm installしてくれる
    • グローバルインストールが必要なものまではnpm install -gしてくれない

ツールの検討

まずRuby製のツールはNode.js一本でやりたい身としてはパスしたい。 Node.jsの他にインストールさせたくない…

BackstopJS

まずは何をテストするのか | CodeGridで紹介されていたBackstopJSを使ってみることにしました。

使ってみた結果が以下のリポジトリになります。 kubosho/sandbox-backstopjs

自分(達)がダメだと感じたところ

  • ページのキャプチャを取って差分画像をするまでの時間が長い
    • 作業効率が落ちる
  • npm i -g gulp casperjs phantomjs@1 する必要がある
    • グローバルインストールはさせたくない
    • devDependenciesに含めたい
  • node_modules/backstopjs 以下でGulpのタスクを実行する必要がある
    • node_modules 以下は極力触りたくない
    • Visual Studioのタスクランナーエクスプローラーと相性が悪い

PhantomCSS

OS XはCasperJS 1-1betaを別途インストールしないといけないが、Windows向けには.batファイルとしてCasperJSが添付されている。

Huddle/PhantomCSS

PhantomCSSのダメなところ

  • PhantomCSS/testsuite.jsを見ると分かるように依存しているCasperJSのことも考えないといけない構造になっており、PhantomCSSも微妙なのではという思いが募った
  • PhantomJSに対するNightmareのようにラップしたライブラリが欲しいと思った

エンジニア立ち居振舞い: 信用できる情報を見る

雑記

お題「エンジニア立ち居振舞い」

普段プログラミングをするときや、なにか記事や原稿を書くとき、信用できる情報を見ることを心がけています。

たとえばコンポーネントの構造を考えるとき、この要素で本当に良いのかと疑問に思ったときには、HTML 要素リファレンス - HTML | MDNHTML Standard 日本語訳などを見ています。 日本語の情報で納得がいかない場合は英語の情報も見ます。

あと自分はAngular ver1系を仕事で使っていますが、Angular関連の情報を見るときはlaco0416armorik83Quramy(敬称略)あたりが書いている記事を見ています。

Atomic Designの考え方と利点・欠点という記事を書いたときは、Atomic Designを提唱したBrad Frost氏が書いた本を見つつ、当時まだ少なかった実案件への導入をしたygoto3氏の記事を見て、Atomic Designの概念を自分の中に落とし込んだ上でチーム(特にデザイナー)に説明して実案件に導入して、そして記事を書いたという経緯があります。

信用できる情報を見るために以下の心がけが必要だと思っています。

人生に悩んでいる20代後半〜30代前半は夏アニメのReLIFEを見たほうがいい

アニメ

録りためていた夏アニメのReLIFEをこの休日を使って一気見したのですが、ストーリーが自分にぶっ刺さり、また自分の人生を見つめ直し、これから後悔しない人生にするためにはどうしたら良いのか考えるきっかけになったので、ReLIFEは何がいいのかを一応ネタバレをさけつつ書いていきます。

あらすじ

公式サイト内のイントロダクションから引用するとこんな感じです。

海崎新太(27歳)は、新卒として入社した会社を3ヶ月で退職。その後の就活もうまく行かず、親からの仕送りも打ち切られ田舎に戻ることを迫られる。悩みを打ち明けられる友達も彼女もいない……途方に暮れる海崎の前に謎の人物・夜明了が現れる。

夜明は海崎にニートを対象にした社会復帰プログラム「リライフ」への参加をもちかける。その内容は、謎の秘薬で見た目だけ若返り、1年間高校生として高校に通うことだった――。

と、設定自体は現実にはあり得ないですが、主人公の海崎が周りの高校生と交流して影響を与えつつ、自身も忘れていたものを取り戻すという青春アニメです。

「ある程度社会人経験を積んだ人が、自分と照らし合わせたりしてもどかしさを覚えつつニヤニヤして見る」感じです。

なぜ良いと思ったのか

まずストーリーで引き込まれ、その次にED曲でさらに引き込まれました。 また登場人物やセリフ(主にヒロインの日代のセリフ)も刺さりました。

ストーリー

1・2話で続きが気になるような伏線を入れてきて、この伏線がどうなるか見続けたくなり、またその後もきっちりと続きが気になるところで終わらせていて、構成が上手いと感じました。

主人公の海崎はあらすじにもあるように新卒で入った会社をとある事情で3ヶ月で退職し、その後コンビニのバイトで食いつなぐも仕送りを打ち切られ、路頭に迷いそうになります。まずこの設定が現在の自分と合わさって少し感情移入し見ようという気になりました。

また、1話のタバコが見つかり先生に反省文の提出を求められる場面で、過去に海崎の身に何かあった描写や、2話で小野屋が海崎と一緒に大神をからかうのですが、海崎と同じくリライフしてきたのでは?と思わせる描写があり、この伏線はどうなるのかが気になりました(結局違う方向でしたが)。 同じく2話では、一見とっつきづらそうな日代が実は友達がほしいという思いを発露したのも意外な展開でした。

ただ3話ではその友達が欲しいというのが、バレー部の狩生にとって誤解される結果になり確執につながってしまいます(そののち解消しますが)。

また、両思いなのになかなか成就しない恋を見ては「早くお前らくっついて末永く爆発してほしい」ともどかしさを覚えたりしました。これは自分が学生時代に同じ経験をした結果、告白ができなかったということが関係しているかもしれません。

ED曲に使われる曲が20代後半〜30代前半にものすごく刺さる

ReLIFE - Wikipediaの主題歌を見ると分かりますが、「イージュー★ライダー」「HOT LIMIT」「タイミング」など、1990年代後半〜2000年代前半の間に小学〜中学生だった人にとってはものすごく刺さる選曲となっています。

特に第3話の「タイミング」はその後の展開を考えるとまさにタイミングが良かったり、第12話の「夏祭り - Whiteberry」はED曲が流れ始めたときの状況も合わさって「選曲した人は神か!」となりました。

登場人物

海崎は、その生い立ちから今の自分と重なるところがあり、感情移入して見てました。そして海崎の行動を見て、今までの自分が後悔した点を振り返り、そして今後後悔しないで生きるにはどうしたらいいのか考えるきっかけになりました。 また全体を通して、受け身の態勢ではなく積極的に自分の周辺を変えていこうという姿勢は見習おうと思いました。 ただ最終回でヘタレ感が半端なかったのが残念ですが…

日代も、一見愛想がなく無口ですが、2話でネコのスタンプに似ていると言われたときに「にゃあ」と返したり、3話で海崎から借りた1,000円札をターバンを巻いた形に折って返したりと、どこか変わっている部分もあり憎めない性格になっています。むしろかわいい。あと、後述するセリフがグサグサと自分の心に刺さりました。

狩生は、真っ直ぐで頑張りすぎるところがあるがそこがいいのと、最終回で急激にその魅力が増したように思えます。ツンデレ乙といった感じでしょうか。

セリフ

5話では、海崎が狩生に対して「人を貶そうとする行為は結局自分を貶す。今まで積み重ねてきた努力や信頼を自分で踏みにじるな」というのが、改めてそういうことをやらないようにしようと思いました。 5話はそれ以外にも名ゼリフがあってとてもよいです。

9話では、日代が海崎に対して「いつまでも失敗を引きずっている自分を倒したいんです。失敗は忘れてはいけないと思います。でも、悪い思い出のまま引きずっていて逃げ続けていたら、いつまでも変われないと思うんです。失敗があったからこそできるようになることもあると思うんです」というのが、自分の最近の振る舞いを考えてここから何を変えたらいいのか、どのような行動指針で動けばいいのか考えさせられました。

また、10話ではとある理由で試合に来なかった狩生に対して日代が説得するのですが、経験則から説得して「本当にこれでいいんですか?本当はどうしたいんですか?」というのが、自分の過去を振り返ってこれでよかったのかと考えさせられました。

見た結果

全体をとおして青春を感じたり海崎の積極性を見て、もどかしさや焦り、また自分の学生時代を思いだして、海崎のように積極性があったらとあのときはこうできたと思いました。 そして直近で自分があまり上手くいってなかったということもあり、はたしてこのままで良いのだろうかと思考を重ねていたところでこのアニメを見た結果、改めて自分の行動指針はなんだったっけと振り返るきっかけになりました。

ここまで書いて、なんだか自己啓発本やセミナーを受けた後の感想みたいと思いましたが、それは自分がこのアニメがきっかけで自分の人生を振り返って後悔した点と、これから後悔しないためにどう行動すればいいのか考えたのが関係しているかもしれません。

また、今までは自分が若いと思っていた節もあったのですが、もうおっさんになってしまったと自覚しました。

見てみる

Amazonプライムビデオで全話配信されているのと、comico内の「ReLIFEチャンネル」でも1話無料、その後はcomico内のポイントを消費で見られるようです。

あともちろんcomicoでも連載しているのと、紙やKindle版もあります。 今回のアニメは夏休み中までを描いていましたが、comico上だと2学期の文化祭のストーリーもあります。ここでも日代さんがかわいい。 また漫画版だと、アニメと展開が違ったり端折られている部分が描かれていたりしているため、アニメを見た状態でも1話から見たほうがいいです。

ReLIFE | 夜宵草 - 話題沸騰中のアニメ「ReLIFE」の原作をタダ読み!!

ReLIFE (アース・スター コミックス)

ReLIFE (アース・スター コミックス)

ReLIFE コミック 1-5巻セット (アース・スターコミック)

ReLIFE コミック 1-5巻セット (アース・スターコミック)

ReLIFE6 (アース・スターコミック) (アース・スターコミックス)

ReLIFE6 (アース・スターコミック) (アース・スターコミックス)

Atomic Designの考え方と利点・欠点

Atomic Design

この記事はAtomic Designの概要やAtomic Designを実際に適用して気づいた利点・欠点について書きます。

Atomic Designとは

Atomic Designはデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。

日本だとAbemaTV(アベマTV)で使われています。 (Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより)

Atomic Designは今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。

Atomic Designはコンポーネントの単位を5つに分けています。 その5つの単位はAtoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)です。 各コンポーネントの詳細は次のとおりです。

Atoms(原子)

Atoms(原子)は、UIを構成する基礎的な要素が該当します。

フォームでいうと、画像で示すようにラベル・入力部分・ボタンの各要素がAtomsとなります。 他の要素では、カラーパレットやフォント、アニメーションがAtomsに入ります。

f:id:kubosh0:20160707184103p:plain

Atomsに振り分ける基準としては、対象の要素が機能的にそれ以上分割できない 場合、Atomsへ振り分けます。 フォームで例えると、ラベルはそれ以上機能的に分割できません。 また入力フォームやボタンもそれ以上機能的に分割できません。

Atoms単体だと抽象的でどういう意味を持つかは分からないです。 入力フォームだけ見ても、それがアカウント登録フォームもしくはコメント入力フォームという情報は読み取れません。

Atomsはコンポーネントの基礎部分になります。 それは、Atomsを組み合わせてより大きなコンポーネントを構成するという点から言えることです。

またAtomsを俯瞰できるページを用意しておくことで、そのページがどのようにデザインされたかという雰囲気を感じ取ることができます。 それによりページデザインに一貫性を持たせることができます。

Molecules(分子)

Molecules(分子)は、Atomsを組み合わせて作る要素です。 このAtomsを組み合わせてMoleculesを作るというのは「単一責任の原則」やUNIX哲学の「1つのプログラムは1つのことをうまくやる」に基づいているようです。

Moleculesになることで意味を持つ要素となります。 たとえば、Atomsであるラベル・入力フォーム・登録ボタンという3つのコンポーネントがあってもそれら単体は意味をなしません。 しかし、これらの要素を組み合わせることにより「ラベルで示したことに応じて、入力フォームに何かを書いて、登録ボタンを押す」という意味が示せるようになります。

f:id:kubosh0:20160707184113p:plain

Moleculesはできるだけ単純にして、再利用性やUIの一貫性を高めます。

Organisms(有機体)

Organisms(有機体)は、AtomsやMolecules、また他のOrganismsを組み合わせて作る要素です。今までのAtomsやMoleculesとは違い複雑な要素になります。 ヘッダーやフッターと呼ばれる要素はこのOrganismsになります。

たとえば画像で示すようなヘッダーは「タイトル」というAtomsと、「ナビゲーション」「SNSのボタン群」というMoleculesが組み合わさって、ヘッダーというOrganismsになっています。

f:id:kubosh0:20160707184106p:plain

Organismsからそのページの特色が出やすくなります。

Templates(テンプレート)

ここからAtoms(原子)・Molecules(分子)・Organisms(有機体)といった化学的なものに例えることをしなくなります。 これは仕事の依頼元や上司・同僚に見せるものということを明確にするため、より一般的な言葉を使います。

Templates(テンプレート)の説明に移ると、Templatesはページ構造を説明するものです。 TemplatesはMoleculesやOrganismsを組み合わせて作ります。

Templatesの段階ではページ内容がまだ仮となります。Templatesを言い換えるなら「ワイヤーフレーム」になります。

Pages(ページ)

Pages(ページ)は、Template内へ実際の文章や画像などが入ったものとなります。

ここまで5つの要素について概要を書きました。 要素の振り分けかたについて、どのように考えたらいいかはAtomic design is for user interfaces内のInstagramで例えたものが分かりやすいと思います。

Atomic Designの利点

さて、Atomic Designを実際に適用した結果、次に挙げる3つの利点があると感じました。

名前がついている

Atomic Designはコンポーネントの大きさによって、それぞれAtoms・Molecules・Organisms・Templates・Pagesという名前がついています。 この名前がついていることで、Atomsは「それ以上分割できないコンポーネント」ということや、Moleculesの「Atomsを組み合わせた意味があるコンポーネント」という特徴が共有されやすくなると思います。

デザインの変更に対応しやすくなる

Atomic Designの考え方でコンポーネントを作ると、デザイン変更に対応しやすくなり再利用性も高くなります。 特にAtomsやMoleculesへ振り分けられるような細かいコンポーネントはデザイン変更にも強いです。

今回適用したページはそこまでデザイン変更が起こりませんでした。 それでもデザイン変更があったときはいつもと比べて他コンポーネントへの影響を考えずに対応できました。

セレクタの詳細度が平坦に近づく

Atomic Designを適用するとセレクタの詳細度が平坦になるようです。

次の画像は今回Atomic Designの考え方を使って作ったCSSの詳細度を示したグラフですが、割と平坦なグラフになっています。

f:id:kubosh0:20160707184110p:plain

また、Atomic Designを採用しているAbemaTVのCSSも、突然詳細度が上がることなく平坦なグラフです。

f:id:kubosh0:20160707184828p:plain

Atomic Designの欠点

利点ばかりではなく、Atomic Designの欠点も見えました。

デザイナーがどのようにデザインしていけばいいか分からない

Atomic Designは「小さい単位でコンポーネントを作り大きいコンポーネントにしていく」というデザイン手法です。そのため、フロントエンド実装では利点があります。

しかしデザイナーからすると、Atomic Designの考え方でデザインすることは難しいかもしれません。 実際、今回デザイナーへAtomic Designについて説明しました。 ただ、デザインしてもらうときはコンポーネント単位ではなくページ単位でデザインしてもらう従来の方法をとりました。

デザイナーによるページデザインの段階でAtomic Designを取り入れることに関しては、どうしたらいいのかまだ分かりません。

欠点に対しての対応

今回はコンポーネントリストを作りました。以下のjsfiddleではかなり簡略化したリストですが、以下のようにAtoms・Molecules・Organismsとコンポーネントを分けて見せるようにしました。

デザイナーには通常通りページ単位でデザインカンプを作ってもらいました。 そして、自分のほうでそのデザインカンプを見つつ、Atomic Designの各単位に要素を切り出し、コンポーネントを作りました。

作ったコンポーネントリストをプランナーやデザイナーに共有しておくことで、実機でどのように表示されるか分かりやすくなることと、開発者にも共有しておくことでコンポーネントを使うことを促し、結果としてコード量や実装の工数を減らすことを目論みました。 また、コンポーネントリストは作っておくと、どのようにコンポーネントを分割するか意識することができます。

まとめ

今回初めてAtomic Designの考え方でページを作ってみました。 結果としては、思ったより良い感じにハマった感があります。 今後もAtomic Designの考え方に照らし合わせてコンポーネントを作り、良い感じに変更に強く分割されたコンポーネントを作っていきたいと思います。

出典