carolina04のブックマーク / 2023年10月15日

carolina04 id:carolina04

2023年10月15日のブックマーク (3件)

Scoped CSSにおけるCSS設計手法 - ICS MEDIA
Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC（シングル・ファイル・コンポーネント）でScoped CSSを利用しているものを想定しています。 CSS設計とは基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。そこで登場するのがCSS設計です。BEMやSMACSS、
carolina04 2023/10/15
“Scoped CSSになったことによりCSS設計を辞めるという選択をしたとしても、ある程度のルールがないとCSSはどんどんとカオスになっていきます”

Vue
リンク
MVVMパターンをVue.jsのコードから理解してみる。 - Qiita
MVVMパターンでは、ViewModelとViewはデータのやりとりを行なっているのではなく、データバインディングが行われている。そのため、ViewModelで値が変更されると、自動的にViewでの表示も変わる。 (出典) Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離さて、抽象概念の次は具体的なコードを考えてみよう。 vue.jsのコードとMVVMの対応サンプルアプリの解説 The Movie Database(TMDB)のapiにアクセスし、タイトルから映画を検索し、気に入った映画をお気に入り登録することができるSPA。フォルダ階層ちなみに、実際にはviewが複数存在しているため、各ViewModelから別のViewModelに紐づくModelへアクセスしたりするVMとMの配線問題が発生してしまう。そのため、全てのModelをまとめて、一つの巨大なS
carolina04 2023/10/15
“MVVMのVとVMの関係においては、"データバインディング"がなされている。データのやりとりを行うのではなく、データを共有している、というイメージ”

Vue
リンク
【Vue.js】v-ifとv-showの使い方と違いについて！
野中やすおフリーランスのWebエンジニアです。IT系雑記を中心に、自分の活動のことや趣味のことを書いていきます。【技術スタック】Python / TypeScript(Next.js・Nuxt.Js) / PHP(Laravel) / AWS / Dockerなど【関心事】環境問題 / デジタル化など【関わっている団体】国際環境NGO350 Japan / ヤンググリーンズジャパン【趣味】将棋 / 読書 / 旅行【GitHubはこちら】
carolina04 2023/10/15
“v-ifは要素の表示を切り替えるため非表示になった場合はDOMから完全に削除されます。一方でv-showの要素は常にレンダリングされて DOMに残り続けます。v-ifを使用した場合は、v-showと比べてリソースを節約することがで”

Vue
リンク
- 2023年10月16日
- 2023年10月15日
- 2023年10月14日