スタイル修正で注意すること
何を隠そうこのブログのスタイルをいじっていた時にハマった原因を記します。
- 追加の思考に偏った
- 要件認識の視野が狭かった
こんなHTMLがあったとします。
<body> <div class="link-box"> <div><a>LinkBox</a></div> <div class="link-box-contents"> <a>home</a> <span class="link-box-first-child"> <a>blogs</a> </span> <span class="link-box-second-child">about</span> </div> </div> </body> <style> a { color: green; cursor: pointer; } .link-box-contents, .link-box-contents>a { color: blue; } </style>
表示するとこうなります。
blogsの文字色も青にしたい場合どうしたら良いでしょうか？
ひとまずblogsの親要素のクラス、.link-box-first-childを追加。
.link-box-contents, .link-box-contents>a, .link-box-first-child { color: blue; }
結果：
あれ、ダメなのか。じゃあ愚直に書いてやんよ。
ということで直下のaタグを決め撃ち指定。
.link-box-contents, .link-box-contents>a, .link-box-first-child>a { color: blue; }
結果：
できたけどスタイルの冗長感なんとかしたい。。。
ということで、やりたいことを今更整理してみる。
→.link-box-contents内のaタグを全部青にする。
とシンプルに考えると、だいぶスッキリ。
.link-box-contents, .link-box-contents a { color: blue; }
結果：
所感・覚書
プロジェクトのスタイルシートがなぜ冗長になりがちなのか分かった気がしました。
以下、覚えとこうと思います。
- 見た目を修正するとき、追加の思考に偏りがち
- プログラムと同じく、今あるものを再利用・活用できないか？という視点も必要
- 視野を広げてやりたいことを整理してみるとヒントになるかも
- 今回なら「blogsを青にする」→「
.link-box-contents内のaタグを全部青にする」
- 今回なら「blogsを青にする」→「
Vue3のテレポートを使ってモーダルを作った時に、ん？となったとこ
職場でNuxt3を使っていて、モーダル画面を作ることになりました。
で、普通にモーダルを作る時と同じ感覚で作ってたら、ファイルの切り出し方で混乱したので整理しときます。
まず、テレポートとは？
頑張って公式の文章から理解しようとしましたが無理でした。。。
サンプルコード見たり、色々調べる中で以下の説明が一番簡潔でわかりやすく感じました。
定義したコンポーネントが属するDOMツリーとは別の場所に、まるでテレポートしたかのようにコンポーネントを移動できる機能です。
その後このビデオを見ながら一緒にサンプルを作ると、とりあえず機能の理解はしっかりできるかと。
モーダルを作ろう
まず、普通に1つのファイルでモーダル表示ができるページを作ろうとするとこんな感じになるかと思います。
<!-- app/pages/main.vue --> <template> <div> <button @click="showFlg = !showFlg">モーダル開閉</button> <!-- メインページのコンテンツ 省略 --> : <!-- モーダル --> <div :v-show="showFlg"> <!-- 中身省略 --> : </div> </div> </template> <script> export default{ data(){ return { showFlg: false, } } } </script>
じゃあこのモーダル部分を別ファイルに切り出そうとしたとき、どう分けるでしょうか？？
Nuxt2・Vue2までのモーダル
- メインページ：モーダル開閉のフックになる要素を配置
- モーダルコンポーネント：モーダル画面
他の言語でもこういう感じで分けるかと思います。
<!-- app/pages/main.vue --> <template> <div> <button @click="showFlg = !showFlg">モーダル開く</button> <!-- メインページのコンテンツ 省略 --> : <!-- モーダル --> <Modal :v-show="showFlg" /> </div> </template> <script> export default{ data(){ return { showFlg: false, } } } </script>
<!-- app/components/Modal.vue --> <template> <div> <!-- 中身省略 --> : </div> </template>
テレポート使ってモーダルを作ってみる
- メインページ：モーダルを表示させるためのテレポート先を用意
- モーダルコンポーネント：モーダル開閉のフックになる要素＋モーダル画面
ほぉ。テレポートは記載箇所にとらわれず、指定した場所にまるっとごっそり移動できる機能でした。
つまり記載と表示を意図的にずらせるため、モーダル関連を一括りのファイルにしても、 テレポート先の記載位置が合っていれば、正しく表示できるってわけなのでした。
<!-- app/pages/main.vue --> <template> <div> <Modal /> <!-- メインページのコンテンツ 省略 --> : <!-- テレポート先を用意してあげる --> <div id="modal-display"></div> </div> </template>
<!-- app/components/Modal.vue --> <template> <div> <button @click="showFlg = !showFlg">モーダル開く</button> <teleport to="#modal-display"> <div :v-show="showFlg"> <!-- 中身省略 --> : </div> </teleport> </div> </template> <script> export default{ data(){ return { showFlg: false, } } } </script>
所感
DOM要素を機能ごとにまとめられるのが新鮮。
今までvueやnuxtでモーダルを作ろうとするとパッケージを入れるか、頑張って自作するしか無かったが、サクッとできるようになったのは良い。
でも記載と表示がずれるので、慣れるまで引っかかりそう。
今まで表示部分に手を入れる場合、ブラウザの開発者ツールを頼りにしていたが、テレポートを使ってそうだったらコードベースで読んだ方がいいのかなと思う。
モーダル以外でテレポートの使い所が思いつかないので、一旦Vue3、Nuxt3以降、モーダル作るときはテレポートに注意！と覚えておこう。
コマンドのサンプルプログラムの先頭についてる$って何？
とずっと思っていました。
$ cd hoge_dir
みたいなやつの先頭の$です。
答えは rootユーザーじゃない一般のユーザーでログインしてるよ という意味らしい。
$ cd ~ $ pwd /Users/user_name
ちなみにrootユーザーでログインすると#になるんだって。へぇー。
ってことは職場でいつもログインしてるのはrootユーザーだったのか。怖。
1行コメントアウトも#なので、サンプルを読み書きする時はちょっとわかりづらいなと思いました。
あんまりrootユーザーのサンプルってないからまぁいいのかな。
$ sudo su Password: # cd ~ # pwd /var/root
ついでに、使用頻度は低そうですが、複数行コメントアウトは<< 任意の文字列で開始、
任意の文字列で終了だそうです。
<< comment ここはコメントだよ まだコメントだよ comment $ cd hoge_dir
参考
