要素の高さや幅を決める際の%とvwとvhの使い分けについて。

%　は親要素に対しての比率
vwとvh　はブラウザ画面に対しての比率

.side-bar {
  width: 100vw;
  height: 100vh;
}

.side-bar {
  width: 100%;
  height: 100%;
}

widthは%を使うことが多く、
hightはvhを使うことが多い。

webページは縦に長く、下へスクロールして閲覧することが多く、
横幅はどの媒体でも全て映しているため、上記の様な傾向があるのだと思う。

どうも7noteです。よく見ると半角スペースみたいなのが入ってる現象を解説

私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。

結論：インライン要素とインライン要素の間に改行を入れてはいけない

HTMLを記述する際、このような書き方はNGです。

index.html

<div>
    <span>あいう</span>
    <span>えお</span>
</div>

--結果--
あいう えお

問題点として、エディタでインライン要素とインライン要素の間に改行を入れてしまうと実行結果側で半角分の余白ができてしまいます。
※inline-blockでも同じ。

対策方法

改行を入れない

index.html

<div>
    <span>あいう</span><span>えお</span>
</div>

改行している範囲をコメントアウトする

index.html

<div>
    <span>あいう</span><!--
    --><span>えお</span>
</div>

閉じタグの位置を変える（汚くなるのでオススメしません）

index.html

<div>
    <span>あいう</span
    ><span>えお</span>
</div>

まとめ

調べたところcssを使って開いた余白を詰める方法などもありましたが、私はあまりオススメしません。予期せぬ箇所へのcssの影響が出るかもしれないので。
今回紹介した書き方であれば、HTMLを綺麗に書くことを意識するだけでいいですし、他の人がソースを見たときにも見やすいのでオススメです。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

はじめに

HTTPヘッダーのCache-Controlには色々パラメーターがあり、どうやって指定するのか？
この記事でまとめます。

Private キャッシュ VS Shared キャッシュ

キャッシュには様々の種類がありますが、大まかにPrivate キャッシュとShared キャッシュに分類できます。

Private キャッシュ

単独のユーザーに利用されるキャッシュ。基本はユーザー使用されるブラウザー側で保持します。
一度ブラウザーキャッシュに保存される内容は、再び訪問（リクエスト）する際、サーバーに再度アクセス必要がなくなります。これである程度サーバーへの負荷を分散できるでしょう。
Cache-Controlヘッダーに関連のパラメーター：private
主な利用シナリオ：ウェブページの戻る/進む操作

Shared キャシュ

名前の通り、複数ユーザがシェアできるためのレスポンスを保存するキャッシュ。主にプロクシーサーバーで保持します。
Cache-Controlヘッダーに関連のパラメーター：public
主な利用シナリオ：ホットリソースを再利用して、ネットワークのトラフィックやオリジナルサーバーへの負荷を減らす

※ 上記ブラウザーキャッシュとプロクシーキャッシュ以外に、ゲートウェイ、CDN、ロードバランサーキャッシュもございます。

Cache-Control ヘッダー主なパラメータ

no-store

キャッシュの中、クライアントのリクエストとサーバーのレスポンスについての内容何も保存しません。毎回必ずオリジナルサーバーにアクセスして、レスポンスをとります。

no-cache

キャッシュした内容を渡す前に、オリジナルサーバーに検証します（キャッシュは未だ有効するかどうかを）。

max-age

max-ageというパラメータはキャッシュの有効期限と関われます。デフォルト単位は秒です。

キャッシュの更新：オリジナルサーバー側のリソースが更新した場合、キャッシュも更新すべきです。HTTPのクライアントサーバープロトコルより、リソースを変更した時にサーバーがキャッシュやクライアントに連絡しませんので。サーバーは、リソースの有効期限を伝えなければなりません。

「リソースが陳腐化していないと考えられる最長期間を表す。。。変更しない予定のアプリケーションのファイルには、たいてい積極的なキャッシュを行います。これは例えば画像、CSS ファイル、JavaScript ファイルといった静的なファイルが含まれます」

max-ageを100に設定した場合は以下の図解の通り、

出所：MDN - HTTP キャッシュ

• Client 1はリクエストする時、未だキャッシュがないため、オリジナルサーバーからのレスポンスはキャッシュに保存され、レスポンスします。
• Client ２は10秒後リクエストする時、キャッシュが未だfreshのため、オリジナルサーバーにアクセスせず、キャッシュからレスポンス内容を取ります。
• Client ３は100秒後リクエストする時、キャッシュがはstale（陳腐化）になったため、 If-None-Match （またはIf-Modified-Since）を付加してリクエストをオリジナルサーバーに転送します。もしキャッシュは新鮮であれば、サーバーは 304 (Not Modified) ヘッダーを返します。要求されたリソースはキャッシュより送信するため、オリジナルサーバー→キャッシュ間の帯域を節約します。

では、これらのパラメータどう設定しますか？
次のフロー図をご参考ください。

最適な Cache-Control ポリシーの定義

出所：Google Developers - Web Fundamentals, HTTP Cache

具体例

リソースベースのセッティングの考え方を見ていきましょう。
開発用のリソースファイルのHTML、JS、CSS、ImagesなどのCache-Control設定例とその理由：

HTML

設定：private, no-cache
意味：単独のユーザーのみに利用され、キャッシュした内容を渡す前に、オリジナルサーバーに検証します。
理由：アプリのプライマリーリソースとして、毎回リクエストの時サーバーに検証する必要があります。

JS, CSS, Images

設定：public, max-age=31536000
意味：複数ユーザー利用でき、有効期限は１年間
理由：JS, CSS, Imagesというような静的なファイルはほぼ変更しませんので、直接キャッシュから読み込んでも構いません。

参考

[1] MDN - HTTP caching
[2] Google Web Fundamentals - HTTP Cache
[3] Google Chrome Developersチャネル - Caching Headers

この記事でわかること

• n以上の整数だけを認める入力ボックスの実装方法がわかる
• m以下の整数だけを認める入力ボックスの実装方法がわかる

そもそもバリデーションとは

記述に用いた言語の文法や、そのプログラムに要求される仕様（書の記述）に則って正しく記述されているかを検証することを表す。
IT用語辞典 e-Words

背景

『グラブルダメージ上限計算機』というものを制作したのですが、その中にはテキストボックスが含まれています。

<input type="txt" size="8" id="other" value="0"/>%

このテキストボックスには本来、半角で 0以上の整数 を入力してほしいのですが、
例えば数字以外のもの、"hoge"を入力すると意図しない出力（NaN）がなされます。

0以上の整数の入力だけを受け付ける入力ボックスを作ろう！というのが今回の目的です。
しかもややこしそうな正規表現は使いたくないという条件で。

（正規表現は難しくないよ、という意見もあるかもしれませんが、ここでは割愛させてください。）

正規表現を使わないで済ませるには

input要素のtype属性をnumberに指定し、
さらにmin属性を使って、その最小値を0にします。
最小値を0以外にしたい場合は、この数値を任意に変更します。

補足として、n以下の数字だけを認めたい！という場合は、min属性をmax属性に置き換えればよいです。

その他、idやsizeなども適宜、変更や追加・削除してください。

<input type="number" size="8" id="other" value="0" min="0" />%

おわりに（注意書き）

今回取り扱ったものはHTML, CSS, JavaScriptだけで構成されたWebページであるので、
こういったバリデーションで十分なのですが（というかそれしかできなさそう）、

データベースを利用した動的なWebアプリケーションなどの場合、
サーバーサイド側でもバリデーションを実装する必要があります。

自分の想定できる範囲でも、GoogleChromeのデベロッパーツールなどを利用すればバリデーションは解除できますし、
他にバリデーションをかいくぐる手段はたくさんあると思います。

危険！

参考

• 正の整数のみのHTML入力（Type = number）
• HTML5タグリファレンス

地味に面倒くさい、textareaの高さ自動調整。

$("textarea").height( $("textarea")[0].scrollHeight );

※ 適時イベントハンドリングすること。

これぐらい、デフォルト仕様になればいいのにね。

Vuejs CLI環境下で一部をhtmlで実装したい時

Vuejs CLIでvue拡張子のファイル内で一部をhtmlファイルを読み込んで実装したい時がある方、
その方々に、試行錯誤を経て分かった方法を共有します。

参考

• Vue.jsで外部HTMLファイルをinclude(っぽく)する

環境の整理

• 開発環境：Vuejs CLIでインストールしたばかりの環境

方法

1. Vuejs CLIをインストールする。

2. HelloWorld.vueが生成される、その中を以下のように変更。

   HelloWorld.vue

   <template>
     <div class="hello">
       <p>Practice</p>
       <div v-html="htmlContent"></div>
     </div>
   </template>
   
   <script>
   export default {
     name: "HelloWorld",
     data() {
       return {
         htmlContent: "",
       };
     },
     mounted: function () {
       this.loadHtml();
     },
     methods: {
       loadHtml() {
         fetch("./html/sample.html").then((res) => {
           res.text().then((html) => {
             this.htmlContent = html;
           });
         });
       },
     },
   };
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   h3 {
     margin: 40px 0 0;
   }
   ul {
     list-style-type: none;
     padding: 0;
   }
   li {
     display: inline-block;
     margin: 0 10px;
   }
   a {
     color: #42b983;
   }
   </style>
   

   肝は
   ＊v-htmlを使用
   ＊dataにv-htmlで使用しているデータhtmlContentを紐づける
   ＊mountedにて、fetch使用のメソッドloadHtmlを読み込む
   ＊methodsにて、メソッドloadHtmlを定義し、fetchで外部htmlを読み込んで、
   　htmlをデータhtmlContentに格納する。

3. fetchメソッドに書いたパス（./html/sample.html）に
   sample.html（＝今回対象となる一部htmlファイル）を格納する。
   ＊publicフォルダの中となる。
   

4. sample.html中は以下のようにstyle, htmlタグを書くことができる。

   sample.html

   <style>
     .text {
       color: red;
     }
   </style>
   
   <div class="text">Hello ! External.htmlだよ！ </div>
   

5. npm run serveコマンドを実行、ブラウザーで確認すると、以下が確認できる。
   

＊npm run buildコマンドを実行しビルドした場合、
　distフォルダ内にhtmlはそのまま格納される。
　（このsample.htmlを直した場合もブラウザーに問題なく反映された。）