【CSS】要素の高さを100vhとしたときの問題点とは？3つの解決方法について解説 - WEBCAMP MEDIA
100vhとは？100%と何が違う？ そもそも、100vhとはどういう指定なのでしょうか？ vh（viewport height）は、要素のサイズを指定する単位の1つで、100vhはビューポートの高さ全体を示しています。 ビューポート（Viewport）は、ウェブページが表示される領域のことを指します。 具体的には、ユーザーがブラウザでウェブページを見る際に表示される画面の領域を指します。 ビューポートはウィンドウやデバイスに依存し、そのサイズはデバイスやブラウザの設定によって変わります。 ビューポートのサイズは、ウィンドウのサイズやデバイスの画面サイズによって異なります。ウィンドウをリサイズしたり、デバイスの向きを変えたりすると、ビューポートのサイズも変化します。 以下のように指定します。 div { height: 100vh; } これに対して、100%とは親要素の高さいっぱいという
React hooksを基礎から理解する (useEffect編) - Qiita
React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) React hooksを基礎から理解する (useEffect編) 今ここ React hooksを基礎から理解する (useContext編) React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) useEffectとは useEffectを使うと、useEffectに渡された関数はレンダーの結果が画面に反映された後に動作し
Reactのレンダリングと描画の違いを整理する
DOMの種類 DOMはリアルDOMと仮想DOMがあります。 また、そもそもDOMとはHTMLを操作するためのAPIです。 DOMの紹介 リアルDOM 実際に表示されているDOM 変更すると画面がそのまま変わる 変更しようとする場合、負荷が大きい処理になる VDOM 単なるデータ 変更しても画面が変更されない 負荷が小さい処理で変更できる レンダリングとは state(props)変更前のVDOMと変更後の差分を比較し、差分を検知することでVDOMを再構築すること レンダリングフロー 変更前と変更後の差分を比較するための仮想DOMを二つ用意する 変更を反映させるため、VDOMをJavascriptで操作(一般的にリアルDOMを操作するより速い) 変更前と変更後のVDOMの差分を比較 差分だけをリアルDOMに反映する リアルDOMを操作するよりなぜ早いか DOMを操作するより負荷の小さい処理だ
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
配列とオブジェクトでデータをまとめる
オブジェクト JavaScriptの場合、オブジェクトというのは変数や配列と同じく、データの管理の方法です。簡単なデータを一時的に入れておくには変数が便利でした。データをまとめて扱うには配列が便利でしたね。 オブジェクトも、簡単に言えば、その延長線上にある、データを扱うのに便利なものなのです。オブジェクトの特長は、「名前」でデータを管理できることです。 さっそく、実際にオブジェクトを作ってみましょう。 <html> <body> <script type="text/javascript"> var seito=new Object(); seito.namae="山田太郎"; seito.seiseki=95; document.write(seito.namae+"："+seito.seiseki+"点"); </script> </body> </html> JavaScriptでオ
JavaScriptにおけるシャローコピーとディープコピーについて - よちよち開発の日々
JavaScriptにおけるシャローコピー(shallow copy)とディープコピー(deep copy)について簡単にまとめました。 shallowは日本語で「浅い」という意味になります。 シャローコピー シャローコピーはざっくり言うと参照元のオブジェクトとコピー先のオブジェクトどちらも同じメモリを参照していることをいいます。 簡単な例 const obj = { name: "hoge", age: 24 } const obj2 = obj obj.name = "fuga"; console.log(obj2.name) // fuga console.log(obj.name) // fuga 同じメモリを参照しているのでobj2のnameを変更するobjのnameも変更されてしまいます。 ディープコピー ディープコピーとは、オブジェクトのみのコピーではなく、オブジェクトとメモ
【JavaScript】 Iterator(イテレーター)とは？避けて通りたいけど説明してみる
条件1: next() というメソッドを持つ 条件2: next()を呼び出すたびに、順番に値を返す 条件3: 値は次のオブジェクトで返す { value: 値, done: false } 条件4: 返す値がない（終了した）場合、次のオブジェクトを返す { value: 戻り値, done: true } （戻り値はイテレーターの実行結果です。なくても問題ありません。）
UTF-8（ユーティーエフエイト）とは？文字コードの仕組みを知れば文字化けでも慌てない
PC、スマートフォンを扱っている人であれば、一度は「文字コードって何だろう？」と思った経験があるのではないでしょうか。 文字コードには様々なものがありますが、その中でもスタンダードなのがUnicodeの「UTF-8」です。日頃、文字コードを意識している方は少ないかと思いますが、コンピューター上で文字を扱うための重要な要素ですので、基本的なことはぜひ知っておきたいものです。 そこで今回は、「UTF-8」の基本知識から各ブラウザにおいての確認方法までをまとめてご紹介します。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 UTF-8（ユーティーエフエイト
UTF-8（ユーティーエフエイト）とは？文字コードの仕組みを知れば文字化けでも慌てない
PC、スマートフォンを扱っている人であれば、一度は「文字コードって何だろう？」と思った経験があるのではないでしょうか。 文字コードには様々なものがありますが、その中でもスタンダードなのがUnicodeの「UTF-8」です。日頃、文字コードを意識している方は少ないかと思いますが、コンピューター上で文字を扱うための重要な要素ですので、基本的なことはぜひ知っておきたいものです。 そこで今回は、「UTF-8」の基本知識から各ブラウザにおいての確認方法までをまとめてご紹介します。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 UTF-8（ユーティーエフエイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWKのトリッキーな配列＆連想配列の仕組み・動作と目からウロコのテクニック
JSのスプレッド構文を理解する - Qiita
VS Codeでエンコーディングを変更、自動判別するには