まえがき とっつきにくいオブジェクト指向ですが、 応用次第ではUIデザインにもcss設計にも使えるシンプルかつ優れた概念です。 今回は、そのオブジェクト指向をなるべく視覚的な視点から ざっくり解説しようと思います。 →という趣旨で社内のhtmlコーダー向けにQiitaに書いたものを転載してみます。 なお、途中でクラスだのインスタンスだのと単語が出てきますが、 今回はソースコードに沿った概念の説明に焦点を当てたいので単語の説明は一切省いています。 単語の意味については都度ggっていただけると助かります。 →というわけで、これ間違ってるんちゃう、って点に関しては、やさしーーーーーーくご指摘お願い致します。 オブジェクト指向プログラミングとは オブジェクト指向プログラミング（オブジェクトしこうプログラミング、英: object-oriented programming、略語:OOP）とは、互いに密接な関連性を持つデータ（変数またはプロパティ）とコード（関数またはメソッド）をひとつにまとめてオブジェクトとし、それぞれ異なる性質と役割を持たせたオブジェクトの様々な定義と、それらオブジェクトを相互に作用させる様々なプロセスの設定を通して、プログラム全体を構築するソフトウェア開発手法である。 オブジェクト指向プログラミング(wikipedia) オブジェクト指向三大要素 クラス ポリモーフィズム 継承 クラス クラスとは クラスは「まとめて。隠して、たくさん作る」仕組み 1) サブルーチンと変数を「まとめる」 2) クラスの内部だけで使う変数やサブルーチンを隠す 3) 一つのクラスからインスタンスを「たくさん作る」 オブジェクト指向でなぜ作るのか第2版 92p ※第三版でてるみたいっすね https://www.nikkeibp.co.jp/atclpubmkt/book/21/S00180/ ※サブルーチン=クラス内に含有される一通りの手続きのこと、ここでは主にクラス内関数。 表現してみる cssで表現してみる .u-button { line-height: 30px; width: 200px; &.-colorRed { //赤いボタン background: red; } &.-colorBlue { //青いボタン background: blue; } } .u-buttonクラスが存在し、 そのサブルーチンとして赤くするための.-colorRed、 青くするための.-colorBlueが存在する。 jsで表現してみる class Button{ constructor($wrapper, text) { this.$wrapper = $wrapper; this.$ele = this.$wrapper .append('<button class="u-button">'+text+'</button>') .find('button:last-child'); } colorRed() { this.$ele.addClass('-colorRed'); } colorBlue() { this.$ele.addClass('-colorBlue'); } } Buttonクラスが存在し、 そのサブルーチンとして赤くするためのcolorRed()、 青くするためのcolorBlue()が存在する。 上記html/css/jsがクラスの仕組みとどう関わっているか 1) サブルーチンと変数を「まとめる」 赤いボタンも青いボタンも両方「ボタン」に属するため、.u-buttonクラス、Buttonクラスにひとまとめにできる。 2) クラスの内部だけで使う変数やサブルーチンを隠す jsのButtonクラスに存在するthis.$wrapperやthis.$eleはクラス内スコープの変数であり、外からアクセスすることはできない。 cssの.-colorRedもそれだけでは機能を持たず、.u-buttonを合わせて初めて動作する。（※ただし外部からアクセスできるので厳密には隠蔽されていない） 3) 一つのクラスからインスタンスを「たくさん作る」 .u-button__wrapper button.u-button.-colorRed 赤いボタン一つ目 button.u-button.-colorRed 赤いボタン二つ目 button.u-button.-colorBlue 青いボタン一つ目 button.u-button.-colorBlue 青いボタン二つ目 1回定義したクラスを複数のインスタンス（※ここではhtmlのマークアップ）に複製し展開することができる。 上記のjsのButtonクラスが存在する上で以下のコードを実行しても、上記のようなhtmlが生成される。 See the Pen object1 by rockinruuula1227 (@rockinruuula1227) on CodePen. ポリモーフィズム ポリモーフィズムとは ポリモーフィズムはサブルーチンを呼び出す側のロジックルールを一本化する仕組み、すなわち共通メインルーチンを作る仕組みである。 オブジェクト指向でなぜ作るのか第2版 96p 表現してみる html/scssで表現してみる See the Pen Object2 by rockinruuula1227 (@rockinruuula1227) on CodePen. マークアップ（与えられている指示、メインルーチン）は同一だが、 付与されるクラス（指示の呼び先、サブルーチン）によって見た目が変わる。 jsで表現してみる See the Pen Obejct3 by rockinruuula1227 (@rockinruuula1227) on CodePen. メインルーチン内に同樣の引数によってインスタンスが作成され、同樣の手順で出力内容が違うNewsBoxとNewsListのサブルーチンが実行される。 継承 継承とは クラス定義の共通部分を別クラスにまとめて、コードの重複を排除する仕組みである オブジェクト指向でなぜ作るのか第2版 103p html/cssで表現してみる See the Pen Object4 by rockinruuula1227 (@rockinruuula1227) on CodePen. 元クラス.u-newsareaが.c-newsbox2に継承され、 .u-newsarea内のインスタンスが上書きされている。 jsで表現してみる See the Pen Object5 by rockinruuula1227 (@rockinruuula1227) on CodePen. ポリモーフィズムのjs例を参考に継承の形にした。 元クラスのNewsがあり、それを継承したNewsBox、NewsListクラスがある。 それぞれ共通処理はNewsに移し、差分のみをNewsBox、NewsListクラスに残している いかがでしたでしょうか と言うわけで、オブジェクト指向の三原則をhtml/css、そしてjsで表現してみました。 よくあるJavaのサンプルコードと比べてとっつきやすく感じていただければ幸いです。

はじめに サーバーサイドしか触ってこなかった私は 「とにかくサーバーの処理が早くなれば！当然ページの読み込みも早くなるだろう！」 という間違った考えをもっていましたが実際はそれ以外に気にするべき点が多くありました。 私と同じ轍を踏まないようここにざっくりと知識とキーワードを書き残しておこうと思います。 コアウェブバイタルとは Web Vitals：https://web.dev/vitals/ ↑googleが書いた記事であるこれがすべてです。 コアウェブバイタルは下記の要素で構成されています。 LCP：ページのメインとなるコンテンツを表示する FID：ユーザーの操作に素早く反応する CLS：（読込中〜後でおこる）コンテンツのズレ LCPではページのメインとなる要素が表示されるまでの時間を短くすることが期待されていて googleは2.5秒以内に表示するように言っています。1 メインとなる要素としては画像・文字・動画が挙げられます。 この指標を改善するテクニックの一例として下記のようなものがあります。 LCPとなる要素を先読み（preload） LCP以外を遅延読み込み（ネットワーク帯域の節約） これらの工夫をhtmlに施すことでLCPを改善することができます。 記事の最後にLCP改善に必要な技術をまとめています。 有名なサイトのLCPの例 https://web.dev/ のLCPは文字、 https://www.google.com/ のLCPは画像となっています。 LCPの確認方法 Chromeの検証モードからPerformance→下記画像の矢印部分を押下します。 すると下記の青枠にLCPという文字が見えると思うのでそれをクリックすると表示されます。 https://web.dev/ のLCP https://www.google.com/ のLCP CLSとは Web Vitals：https://web.dev/cls/ ↑googleが書いた記事であるこれがすべてです。 下記画像は上記のリンク先にある動画のスクショです。 ユーザーはキャンセルボタンを押下しようとします（青枠の広告は表示されていない状態) ユーザーの指がディスプレイに触れる寸前で青枠の広告が滑り込んできます。 滑り込んできた広告のせいで購入ボタンとキャンセルボタンの位置が下にずれてしまいユーザーは購入ボタンを押してしまった。。。 というストーリーです。 (https://web.dev/cls/) これを防ぐためimgタグを使用する際は必ずwidth,heightを入れておく必要があります。 そうすることで画像を読み込み中でもwidth, height分の場所を空けて表示してくれるためコンテンツのズレをなくすことができます。 Page Speed Insightsの見方 Page Speed Insights（https://developers.google.com/speed/pagespeed/insights/） では パフォーマンススコア と 以下の3つの結果が表示されます。 フィールドデータ Origin Summary ラボデータ パフォーマンススコアに目が行ってしまいますが、重要なのは上記３つの結果です。 このうちフィールドデータ,Origin Summaryは28日間実際に(Chromeでアクセスした)ユーザーから収集したデータです。 フィールドデータは入力したURLの結果、Origin Summaryはドメイン全体の結果となっています。 そのためコアウェブバイタルに関する変更を加えた結果をすぐに確認したい場合は3のラボデータを見る必要があります。 これを知らずにフィールドデータ,Origin Summaryだけを見ていると、 「頑張ってコアウェブバイタル対応してリリースしたのにスコアが全然変化ない...」 と勘違いしてしまうかもしれません。 実際のスマホユーザーやPage Speed Insightsの条件に近づけて開発をする 特にLCPの改善では読み込み速度を重視するためChromeのデベロッパーツールでNetworkやPerformanceを見ることになると思います。 しかし、何も設定をしないと開発用PCのCPUとネットワーク環境で開発することになるためPage Speed Insightsや実際のユーザーの環境とは大きく違って来る（良い結果になりすぎる）ことがあります。 ちなみにPage Speed Insightsではミッドレンジ端末（Moto G4）と3G回線で計測されるようになっています。 Lighthouse はページ読み込みのシミュレーションにどのような端末とネットワークを使用しますか？ 現在、Lighthouse はモバイル ネットワーク上のミッドレンジ端末（Moto G4）でページ読み込みをシミュレートします。 (https://developers.google.com/speed/docs/insights/v5/about?hl=ja) そのため開発する際は事前に下記の図の青枠部分でネットワーク帯域などを合わせる必要があります。 デベロッパーツール→Performanceをクリック 4G回線では数十ミリsecで読み込まれていたhtmlや画像が数百ミリsecになるかと思います。 こういった状況になると記事の最後に載せてあるキーワード（技術）が効いてきます。 SEO対策としてはChrome対応だけで良い Page Speed Insightsに表示されるフィールドデータはChromeを利用しているユーザーから収集しています。 https://developers.google.com/web/tools/chrome-user-experience-report/?hl=ja-JP また、検索結果のランキング要素（のうちコアウェブバイタル）にはフィールドデータを使用すると下記の動画では言及しています。 ですので例えば画像を遅延読み込みさせるloading属性はサポートしてないブラウザがあるので諦めて別途JSのライブラリを使うといった選択をしなくてもSEOの観点で言えば大丈夫です。 基本的にはPage Speed Insightsで提案された項目をこなしていく 特に 「レンダリングブロックとなる要素をなくす」 とか 「大きすぎる画像を小さくする・遅延させる・WebP化する」 といった効果の大きい項目は優先的にこなすと良いです。 ただ私が対応したサイトではABテストのため読み込み後数秒間画面を真っ白にするみたいなjsがGoogleタグマネージャーから差し込まれていてそれがかなりスコアを落としていたというようなケースもありました。 そのためレンダリングされたhtmlや検証モードのNetworkとPerformanceをしっかり確認することも必要かと思います。 知っておきたいキーワード 下記のキーワードはLCPのスコアの改善に必要な技術ですので 「下記キーワード　コアウェブバイタル」みたいな感じで検索すると近道です。 「WebP画像・Pictureタグ・loading属性・jsの非同期化・ファーストビューのcssの抽出、インライン化・preload・preconnect・prefetch・Gzip・CDN・ブラウザキャッシュ・http2」 Largest Contentful Paint (LCP)： https://web.dev/lcp/ ↩