文字を装飾するCSS 【font-size】 用途：フォントの大きさを変更する 使用例：font-size: 2.5px;　font-size: 2.5em; px：端末の設定が変わっても大きさが一定 em：端末の設定によって大きさが変わってくる 【font-family】 用途：フォントの種類を変更する 使用例：font-family: serif; 【font-weight】 用途：フォントの太さを変更する 使用例：font-weight: 100;(数字が大きいほど太くなる) 【color】 用途：フォントの色を変更する 使用例：color: #1b1b1b;(色はカラーコードで指定) 【text-align】 用途：文字の左寄せ・右寄せ・中央寄せを変更する 使用例：text-align: center; text-align: right; text-align: left; 画像や要素の縦幅、横幅調整 【width】 用途：横幅を変更する 使用例：width: 100%; width: 150px; 【height】 用途：縦幅を変更する 使用例：height: 100%; height: 150px; 画像や文章の位置調整 【margin-top】 用途：上との間隔を変更する 使用例：margin-top: 10px; margin-top: 15%; 【margin-left】 用途：右との間隔を調節する 使用例：margin-left: 10px; margin-left: 15%; 【margin-right】 用途：左との間隔を調節する 使用例：margin-right: 10px; margin-right: 15%; 【margin-bottom】 用途：下との間隔を調節する 使用例：margin-bottom: 10px; margin-bottom: 15%; 【margin】 用途：上下左右との間隔を一括で調節する 使用例：margin: 1px; margin: 10% 0% 10% 0%; 値が1つ指定された場合、上下左右に同じ値が適用される。 値が2つ指定された場合、1つ目の値は上下、2つ目の値は左右の辺に適用される。 値が3つ指定された場合、1つ目の値は上、2つ目の値は左右、3つ目の値は下に適用される。 値が4つ指定された場合、値はそれぞれ上、右、下、左の順 (時計回り) に適用される。 【padding-top】 用途：上部の余白を調節する 使用例：padding-top: 10px; padding-top: 15%; 【padding-left】 用途：左部の余白を調節する 使用例：padding-left: 10px; padding-left: 15%; 【padding-right】 用途：右部の余白を調節する 使用例：padding-right: 10px; padding-right: 15%; 【padding-bottom】 用途：下部の余白を調節する 使用例：padding-bottom: 10px; padding-bottom: 15%; 【padding】 用途：上下左右の余白を一括で調節する 使用例：padding: 1px; padding: 10% 0% 10% 0%; 値が1つ指定された場合、上下左右に同じ値が適用される。 値が2つ指定された場合、1つ目の値は上下、2つ目の値は左右の辺に適用される。 値が3つ指定された場合、1つ目の値は上、2つ目の値は左右、3つ目の値は下に適用される。 値が4つ指定された場合、値はそれぞれ上、右、下、左の順 (時計回り) に適用される。 【top】 用途：ページの最上部からの位置を調節する 使用例：top: 10px; top: 15%; 【left】 用途：ページの最左部からの位置を調節する 使用例：left: 10px; left: 15%; 【right】 用途：ベーシの最右部からの位置を調節する 使用例：right: 10px; right: 15%; 【bottom】 用途：ページの最下部からの位置を調節する 使用例：bottom: 10px; bottom: 15%; ※margin-topとtopの違い margin-top：上にある要素との間隔を調節する →縦に2つ並んだ画像の間隔を開けたい場合に使用する top：ページ全体での上からの位置を調節する

「ブロックレベル要素とインライン要素ってどう違うの？」 ということを聞かれた時、 ブロックレベル要素は親要素の横幅いっぱいに広がって改行が入る。他の要素を中に入れられる。高さや幅を自由に変更できる。 インライン要素は、改行が入らない。他の要素は中に入らない。高さや幅は要素の長さ次第で、変更はできない。 というような答え方をしたら、 「それは本質的じゃない。もっと概念から考えるといいよ」 とアドバイスをもらいました。 それから、本質ってなんやねん？と思いながら色んなサイトを巡って考え、 自分の言葉にできた時に、初めてこの二つの要素を理解できた気がしたので、自分なりの考え方をまとめてみました。 対象 HTMLやってるけどブロックとインラインがうまく理解できない初学者 ブロックとインラインについて、自分なりにしっくりくる説明が見つかっていない人 参考サイト 私は以下のサイトでブロックレベル要素とインライン要素を理解しました。 すごくわかりやすいです。ここで理解できればここから下はスクロール不要です。 MDN：ブロックレベル要素 MDN：インライン要素 WebMedia：【基礎知識】ブロックレベル要素・インライン要素の性質と違い ブロックレベル要素・インライン要素とは 私はブロックレベル要素とインライン要素を以下のように考えています。 ブロックレベル要素 ブロックレベル要素は、他の要素を格納するための大きな箱。 インライン要素 インライン要素は、箱の中で機能する小さな部品。 なぜブロックレベル要素は箱なのか ブロックレベル要素の役割は、他の要素を格納することです。 家で例えればタンスや本棚といったところでしょうか。 これらの箱には明確な役割があります。 タンスには服を。本棚には本を。 その辺りが雑になると汚い部屋になるのはイメージしやすいと思います。 HTMLも同じです。 bodyやarticle、tableなど、ブロックレベル要素にも様々な種類がありますが、 その箱の役割に合わせて、適切に他の要素を格納することで、コンテンツにまとまりが生まれ、綺麗に整理されたWebページを作ることができます。 なぜインライン要素は部品なのか 一方、インライン要素はそれ自体が機能を持った単体の部品です。 家の例で言えば前述した服や本、時計やペンなどが該当しそうです。 箱であるブロックレベル要素の中で、その箱の持つ役割に合わせて配置することで、Webページを装飾したり、様々な機能を加えることができます。 ブロックレベル要素とインライン要素の違いはどこから生まれる？ ボックスレベル要素 = 箱 インライン要素 = 部品 として考えると、冒頭の機能の違いが生まれる理由について、しっくりくるんじゃないかと思います。 ブロックレベル要素 箱だから他の要素を格納できる。 箱の内外を区別しているため前後には改行が入る。 他の要素を格納するため、高さや幅を自由に設定できる必要がある。 インライン要素 単体の部品だから他の要素は格納できない。 単体の部品のため改行が入らない。だから他の部品（インライン要素）と横並びにできる。 それ自体で完結しているため、高さや幅は決まっている。 最後に 自分自身が初学者なので、本当に伝わるのかいまいちピンと来ませんが、誰かの役に立てば嬉しいです。 インライン要素の「部品」という言い方について、もっとうまい言い回しはないかなーと思いながらここまで書きました。うまい表現があればぜひ教えてください。 備考 HTML5では「ブロックレベル要素」「インライン要素」という区分はなくなり、「コンテンツカテゴリー」という分類になっているようです。それぞれの分類の中で、ブロック要素にあたるもの・インライン要素にあたるもの、があるようです。

虎の穴ラボの古賀です。 Tailwind CSS v2.1.0 で、 Just-in-Time Mode が新しく導入されました。 今回、v2.2.0 にビルド時間やファイルサイズの問題で、今まで Tailwind CSS には導入されなかった便利な機能が Just-in-Time Mode 専用で追加されたので、 v2.1.0 で使える記述も含めて、ご紹介しようと思います。 Just-in-Time Mode を、さらに活用したいと考えている方の参考になれば、、、と思います。 環境 macOS Big Sur Node.js v14.15.1 利用したライブラリの紹介 Tailwind CSS とは ユーティリティ・ファーストの低レベルな CSS ライブラリです。 Bootstrap や Vuetify、 ElementUI の様に決まった UI ではなく オリジナルの UI を爆速で作れます。 設定ファイルを変更することで、 Tailwind CSS のほぼ全てをカスタマイズできます。 Just-in-Time Mode とは Tailwind CSS v2.1.0 から新たに追加された機能です。 Just-in-Time Mode は、全ての Tailwind CSS のユーティリティを事前にビルドするのではなく、 テンプレート（ HTML や JS、 Vue ）で利用されているユーティリティのみを、Tailwind CSS で検出して事前にビルドして生成するモードです。 メリット ビルド時間が 3 〜 5 秒から 1 秒未満に短縮 開発、本番の両方で、ビルド結果のファイルサイズが自動的に最小になる w-[100px] や m-[10px] などの指定をすることで、カスタム CSS を作成せずに、微妙な調整が Tailwind CSS のみでできる 先頭に ! をつける（ !w-1 ）ことで !important の指定ができる 設定を変更しなくても、全ての Tailwind CSS のバリアントが指定できる バリアントは CSS の擬似クラスや、レスポンシブの指定を簡単に指定できる Tailwind CSS の機能です。 デメリット @apply に自分で作成した css を使う時は、 @layer が必要になる 前提条件 Tailwind CSS は v2.2.0 以降が必須です。 1. Just-in-Time Mode の有効化 tailwind.config.js に、mode: 'jit' を追記して、purge の設定を正しく行うことで有効に出来ます。 Just-in-Time Mode は、purge に記載されているテンプレート（ HTML や JS、 Vue ）に記載されている Tailwind CSS のクラスを検出して CSS を生成します。 そのため、下記のように purge にすべてのテンプレート（ HTML や JS、 Vue ）のパスを、ワイルドカードで指定する必要があります。 tailwind.config.js module.exports = { mode: 'jit', purge: [ './public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}', ] } ちなみに purge が未指定の場合は、CSS は空になります。 2. Just-in-Time Mode の新機能について v2.1.0 と v2.2.0 の Just-in-Time Mode のみで使用できる、14 の機能になります。 2-1. 任意の値 一部のユーティリティは、新しい角括弧表記を使用して任意の値を指定できます。 使用できる任意の値の例 <!-- サイズや位置を任意の値で指定する --> <img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" /> <!-- 色を任意の値で指定する --> <button class="bg-[#1da1f1]">共有する！！</button> <!-- グリッドを任意の値で指定する --> <div class="grid-cols-[1fr,700px,2fr]"></div> v2.2 以降は、長さや色、角度、リストも任意の値で指定できます 長さや色、角度を任意の値で指定する <div class="col-start-[73] placeholder-[#aabbcc] object-[50%] ..."></div> CSS 変数を指定する場合は、text-のようにフォントサイズか色か Tailwind CSS が判別がつかないことがあります。 その場合は、型（length、color、angle、list）を指定する必要があります。 テキストのフォントサイズと色を指定した場合 <div class="text-[length:var(--my-fontsize-var)]">あああ</div> <div class="text-[color:var(--my-color-var)]">あああ</div> CSS変数の指定 :root { --my-color-var: #aa00cc; --my-fontsize-var: 100px; } 2-2. important 修飾子 Tailwind CSS クラスの先頭に!文字を追加すると、!important指定にすることができます。 important修飾子 <p class="font-bold !font-medium"> 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩 </p> <div class="sm:hover:!tw-font-bold"> 2-3. 最初または最後の子要素の擬似要素（before、after）のサポート Tailwind CSS クラスの先頭にbefore:やafter:を指定することで、最初または最後の子要素の擬似要素にユーティリティを指定できます。 before: は要素の最初の子要素、after:は要素の最後の子要素です。 before、after擬似要素の記述例 <div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div> contentで、要素の中のテキストを指定する事もできます。 contentに'hello'を指定した記述例 <div class="before:content-['hello'] before:block ..."></div> また、contentは、指定の属性値を要素のテキストを指定する事もできます。 contentにbefore属性の値を指定した例 <div before="hello world" class="before:content-[attr(before)] before:block ..."></div> 2-4. 先頭文字/行の擬似要素（first-letter/line）のサポート Tailwind CSS クラスの先頭にfirst-letter:または、first-line:を指定することで、ブロックレベル要素の最初の行や、最初の文字のスタイルを指定できます よくある、一文字目だけ大きいスタイルを Tailwind CSS のみで指定できます。 先頭文字のみ文字サイズを大きくした例 <p class="first-letter:text-4xl first-letter:font-bold first-letter:float-left"> 木曾路はすべて山の中である。 あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む </p> 2-5. 選択した文章の擬似要素（selection）のサポート Tailwind CSS クラスの先頭にselection:を指定することで、文字を選択した時のスタイルを指定できます。 選択した文字の背景色をピンクにした例 <p class="selection:bg-pink-200"> 木曾路はすべて山の中である。 あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む </p> 2-6. リスト項目の箇条書き記号ボックスの擬似要素（marker）のサポート Tailwind CSS クラスの先頭にmarker:を指定することで、リスト項目の箇条書き記号ボックスのスタイルを指定できます。 番号付きリスト項目を大きめにした例 <h1>WrestleMania XII Results</h1> <ol role="list" class="list-decimal list-inside marker:text-gray-500 marker:font-medium marker:text-3xl"> <li>日本国民は、正当に選挙された国会における代表者を通じて行動し、</li> <li>われらとわれらの子孫のために、諸国民との協和による成果と、</li> <li>わが国全土にわたつて自由のもたらす恵沢を確保し、</li> <li>政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、</li> <li>ここに主権が国民に存することを宣言し、この憲法を確定する。</li> <li>そもそも国政は、国民の厳粛な信託によるものであつて、</li> </ol> 2-7. 兄弟要素を選択するバリアント（peer） チェックボックスやラジオボタンなどをチェックしたときに、他の兄弟要素も連動してスタイルを変更できるようになりました。 下記の例では、チェックボックスのchecked擬似クラスをpeer-して、peer-checkedにした例です。 チェックボックスにチェックを入れると、spanのスタイルも変わる例 <label> <input type="checkbox" class="peer sr-only"> <span class="h-4 w-4 bg-gray-100 peer-checked:bg-blue-500 peer-checked:text-blue-50">チェックボックスだよ！</span> </label> checkedになる要素（チェックボックス）には、peerクラスを設定しておきます。 peerは、checked以外の擬似クラスも対応できるため、フォーム部品などのカスタマイズが捗ります。 2-8. 擬似クラス（バリアント）の追加 下記の表の擬似クラスが使えるように、バリアントに追加されました。 これで、 Tailwind CSS で擬似クラスが不足している場合に困ることが少なくなると思います。 擬似クラス名 概要 only 兄弟要素がない要素を選択 (only-child) first-of-type 兄弟要素のグループの中でその種類の最初の要素を選択 last-of-type 兄弟要素のグループの中でその種類の最後の要 only-of-type 兄弟要素のグループの中で同じ型の兄弟要素がない要素 target URL のフラグメントに一致する id を持つ固有の要素 (対象要素) 、表示し たフラグメントの項目を強調するために利用される default デフォルトで選択(selected、checked)されている要素や、規定のフォ ームを送信するボタン(submit、image)の要素 indeterminate 1. 未確定の状態にあるフォーム要素 (JavaScript で、チェックボックスの indeterminate プロパティが true に設定されている([ー]表示の)要素) 2. フォーム内の同じ name の値を持つすべてのラジオボタンが未選択の要素3. progress 要素で、中間の状態 placeholder-shown プレイスホルダー文字列が表示されている input または textarea 要 素 autofill input 要素の値がブラウザーによって自動補完されている場合 required input, select, textarea 要素のうち required 属性が設定されてい るものを表します。 valid 内容の検証に成功した input 要素 や、その他の form 要素 invalid input 要素や form 要素のうち内容が検証に失敗したもの in-range 現在の値が min および max 属性による制限範囲内にある input 要素 out-of-range 現在の値が min および max 属性で指定された範囲を外れている input 要素 下記は、placeholder-shownを使用した例です。 placeholder-shownを使用した例 <div class="relative"> <input id="name" class="peer" placeholder="placeholder" /> <label for="name" class="peer-placeholder-shown:top-0 peer- focus:top-[-1.75rem] absolute block">プレースフォルダーだよ！</label> </div> テキストボックスのプレースホルダーが表示されているとき（初期表示）は、テキストボックスのプレースホルダーが重なって見えない位置（top-0）にラベルのテキストを表示します。 テキストボックスにフォーカスを合わせると、テキストボックスの真上（top-[-1.75rem]）の位置にラベルのテキストを移動します。 2-9. 透明度と色の同時指定 透明度と色を、より短い構文（色/透明度）で指定できるようになりました。 透明度と色の同時指定を使用しない例 <div class="bg-red-500 bg-opacity-25"> 透明度と色の同時指定を使用する例 <div class="bg-red-500/25"> グラデーションの色など、色全般に使用できます <div class="bg-gradient-to-r from-red-500/50"></div> 透明度には小数点も使用できます <div class="bg-red-500/[0.31]"></div> bg-[#aabbcc]/25の様に、任意の値と透明度と色の同時指定を併用すると、v2.2.0 では適用されないため、注意してください。 （bg-[#aabbcc/25]でも不可でした。） 2-10. カーソルの色を指定 <input> または contenteditable属性のついた要素などの中で、 次に入力された文字が挿入される位置を示す、カーソルの色を指定できる様になりました。 inputタグのカーソルの色を指定する <input class="caret-red-500" /> 2-11. transform と filter 指定の簡略化 transform、filter、backdrop-filterのクラスは、「有効化」するための指定が不要になりました。 transformとbackdrop-filterの簡略化を使用しない例 <div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm"> transformとbackdrop-filterの簡略化を使用する例 <div class="scale-50 grayscale backdrop-blur-sm"> transformの簡略化を使用しない例(hoverした時のみ変形する) <div class="scale-105 -translate-y-1 hover:transform"> transformの簡略化を使用する例(hoverした時のみ変形する) <div class="hover:scale-105 hover:-translate-y-1"> 2-12. 片側の境界線の色を指定 片側の境界線の色のサポートが追加されました 片側の境界線の色の指定を使用した例 <div class="border-2 border-t-blue-500 border-r-pink-500 border- b-green-500 border-l-yellow-500"> <!-- ... --> </div> 2-13. セーフリストに指定して、purge されないようにする 特定のクラスがデータベースなどの外部のコンテンツで使用されていて、 purgeによって、Tailwind CSS の CSS が削除されないようにしたい場合に使用します。 組み込みのセーフリストを指定する例 // tailwind.config.js module.exports = { purge: { content: ['./src/**/*.html'], safelist: [ 'bg-blue-500', 'text-center', 'hover:opacity-100', 'lg:text-right', ], }, } 2-14. コンテンツを変換して、クラス名を検出する方法 Tailwind CSS がコンテンツをスキャンして潜在的なクラス名を探す前に、そのままではスキャンできないファイル拡張子のコンテンツを変換できます。 これは、Markdown のように HTML にコンパイルされる言語で書かれたテンプレートがある場合に使用します。 *.mdファイルを、remarkでhtmlに変換する例 // tailwind.config.js let remark = require('remark') module.exports = { purge: { content: ['./src/**/*.{html,md}'], transform: { md: (content) => { return remark().process(content) }, }, }, // ... } まとめ v2.2.0 で新しく Tailwind CSS に導入された Just-in-Time Mode 専用の便利な機能をご紹介してみました。 生で CSS を使う頻度が下がり、快適な Tailwind CSS ライフが送れるようになりました。 また、爆速でビルドが実行され、生成される CSS も最小限なので快適に開発が可能になります！ ぜひ、一度、お試しください ? 最後まで読んでいただき、ありがとうございました。 他の Tailwind CSS 関連の記事 参考文献

1. はじめに フロントエンドを始めたばかりの頃、参考書や参考サイトで当然のように使われているものの、特に說明がないような「慣習」や「テクニック」に困惑したり、その理由が気になった経験を思い出したので、その一部を簡単にまとめてみました。 2. HTML 2-1. iタグでアイコン <i class="icon"></i>テキスト HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。 <i>: 興味深いテキスト要素 - HTML: HyperText Markup Language | MDN 仕様上は適切な使用方法ではなさそうですが、「Bootstrap Icons」や「Font Awesome」などでも採用されているように、普及している印象があります。 ちなみにHTML4.01ではテキストを斜体（イタリック）にするものとして定義されていました。 2-2. ボタンのマークアップ <a href="#">こちらをクリック！</a> <button type="button">こちらをクリック！</button> そのボタンがリンク機能を持つ場合はaタグで、それ以外はbuttonタグを使用することが多いです。 inputタグにもtype="button"がありますが、デザイン調整のしづらさ（疑似要素が使えない）からあまり使われることはありません。 divやspanでも作成できますが、フォーカスが効かない、エンターキーやスペースキーでの操作ができない、スクリーンリーダーに対応していないなどのデメリットがあり、別途対応の手間がかかってしまいます。 ちなみにbuttonタグのtypeを明記しない場合はsubmitが既定値になります。 ボタンは<button>で実装しよう - Qiita 2-3. 一部分だけタグが改行されていない or タグ間の謎のコメントアウト <ul> <li>hoge</li><li>fuga</li><li>piyo</li> </ul> <ul> <li>hoge</li><!-- --><li>fuga</li><!-- --><li>piyo</li> </ul> display:inline-block;は横並び時に不要な隙間ができてしまうので、それを防止するテクニックのひとつです。 他者が作成した上記のようなHTMLをメンテする際、その意味を確認せず整形したりコメントアウトを除去してしまうと、デザイン崩れを引き起こす可能性があります。 そのため基本的にはCSSでの対応がおすすめです。 inline-blockの隙間をなくす方法 - Qiita 2.4. scriptタグをbody閉じタグ直前に設置 <body> ... <script src="hoge.js"> </body> scriptタグはhtmlのどこにでも記述可能ですが、JavaScriptの読み込み中はレンダリングがストップしてしまい表示が遅くなってしまうということと、JavaScriptでDOM操作をする場合、DOM構築が完了している必要があるため、scriptタグをbody閉じタグ直前に設置するという慣習が生まれました。 ちなみにheadタグ内にscriptタグを記述した場合でもdefer属性をつけることで上記の問題は解決できます。 <script>: スクリプト要素 - HTML: HyperText Markup Language | MDN 3. CSS 3-1. クリアフィックス .clearfix::after { display: block; clear: both; content: ""; } 最近では要素の横並びはFlexboxを使用する機会が増え、floatを使うことは少なくなりましたが、これはfloatを解除するためのテクニックです。 float適用要素もしくはそのラッパー要素のafter疑似要素で解除することで、次に続く要素の先頭での解除を不要にします。 overflow: hidden;でも解除できますが、内包要素が親要素からはみだすようなデザインの場合には不向きです。 IEが非対応ならdisplay: flow-root;という方法もあります。 Clearfix · Bootstrap v5.0 3-2. 表示上は何も変わらないtransform設定 transform: translate3d(0,0,0); transform: translateZ(0); backface-visibility: hidden; これらの設定によりCSSアニメーションにGPU処理が取り入れられるようになり、アニメーションがスムーズになるケースがあります。 また、最近では以下のようなプロパティによる設定方法もあります。 will-change - CSS: カスケーディングスタイルシート | MDN しかしこれらはいずれも乱用すべきテクニックではないため使用には注意が必要です。 CSS アニメーションについて深く知る - Qiita 3-3. ズーム率を等倍 zoom: 1; IE7までは内部にhaslayoutという値をもっており、これがデフォルトでfalseだったため、レイアウトが崩れるという事象がありました。 上記コードによりtrueへと変更することで、レイアウト崩れを直せるケースがありました。 目にすることはあっても、もう自分で書く機会はないと思います。 4. JavaScript 4-1. for文のカウンタ変数「i」 for (let i = 0; i < 9; i++) { console.log(i); } FORTRANという世界最初の高水準プログラミング言語があり、その言語では変数名は一文字だけしか使用できず、そのうち整数をあらわすものはI～Nの６個だけだったことによる慣習らしいです。 Index,Iterator,Integerなどの頭文字というわけではなかったんですね。 iのほかにもそれに続くj,kなどが使用されたりします。 なぜループカウンタ変数のほとんどに “i”が使用されるのか？ - Qiita 4-2. $から始まる変数 const $hoge = $('.hoge'); 先頭に「$」を付与することで、ひと目でjQueryオブジェクトが格納されていることがわかります。 4-3. that, _this, selfという変数名 const that = this; thisの参照を保存するためによく使われる変数名ですが、Airbnbのスタイルガイドでは アロー関数かFunction#bindを利用すること が推奨されています。 4-4. アンダースコアから始まる変数・関数名 const _hoge = 'hoge'; function _doSomething() {…}; JavaScriptには仕様上、アクセス修飾子（public,private,protected,static）がないため、プライベート（ローカルスコープ内だけでの使用を想定）であることを明示したいときなどに使われることがあります。 また「_this」のように予約語を回避するために使用されることもあります。 ちなみにAirbnb JavaScript スタイルガイドでは、 JavaScriptは、プロパティやメソッドについてのプライバシーの概念を持っていません。先頭のアンダースコアは「非公開」を意味する一般的な規則ですが、実際にはこれらのプロパティは完全に公開されているため公開APIの一部です。この規約により、開発者は変更が壊れているとは見なされない、またはテストが必要ではないと誤って考える可能性があります。 として、「末尾または先頭のアンダースコアを避ける」ことが推奨されていました。 4-5. クラス名はアッパーキャメル class HogeFuga {...} const hogeFuga = new HogeFuga(); ちなみにAirbnb JavaScript スタイルガイドにも オブジェクト、関数、インスタンスにはキャメルケース（小文字から始まる）を使用すること。 クラスやコンストラクタにはパスカルケース（大文字から始まる）を使用すること。 と明記されています。 クラス名をアッパーキャメル（パスカルケース）にしておくと、インスタンス化する時にローワーキャメル（キャメルケース）にするだけでいいという利便性もあります。 4-6. 定数は大文字 const HOGE_FUGA = 42; 定数は大文字をアンダースコアでつないだアッパースネークケースで書かれることがあります。 MDNには 定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。 と書かれておりますが、Airbnb JavaScript スタイルガイドでは、 ファイル内の定数には大文字を使用しないでください。ただしエクスポートされた定数には使用する必要があります。 となっています。 4-7. 即時関数によるスコープ ;(function() {...})(); 即時関数（即時に実行される関数式）により、スコープを作るテクニックです。 スコープとは「変数の名前や関数などの参照できる範囲を決めるもの」です。 functionの前に「(」があるのは、これがないと関数式ではなく関数宣言だと構文解析されエラーになってしまうから（+や!などが使われているパターンも）。 先頭に「;」が付けられていることもありますが、これはファイル結合された場合、直前のファイルの最後にセミコロンが抜けていると構文エラーになってしまうことを防止するためです。 (function($){…})(jQuery);のように引数が渡されている場合もありますが、これは変数$の衝突を回避するためです。 4-8. 名前空間パターン const Hoge = window.Hoge || {}; Hoge.Fuga = function() {...}: グローバル空間に公開するオブジェクトを最小限にし、予期せぬ名前の衝突を防ぐテクニックです。 「||」は論理和演算子で、左辺と右辺のいずれかがtrueの場合trueとなり、その値を返却します。 つまり「もし変数Hogeがすでに設定されていたならそれを流用し、未使用なら新規オブジェクトを代入する」ことにより、すでにある変数の上書きを回避します。 5. その他 5-1. ほげ const ary = ['hoge','fuga','piyo']; メタ構文変数（メタこうぶんへんすう、metasyntactic variable）はプログラミング言語の記述で使われる識別子の一種。サンプルプログラムなどで意味のない名前が必要な場合に利用される、「意味のない名前」であることが広く知られた識別子のことである。 メタ構文変数 - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0#hoge%E3%81%A8piyo 日本で主に使用されているメタ構文変数です。 由来についてはいくつか仮説があるものの、よくわかっていないようです。 使用する順番が決まっており、たとえばいきなりfugaから使用するということはありません。 ちなみに英語圏ではfoo,bar,bazなどが採用されています。 5-2. 英文のダミーテキスト「Lorem ipsum」 <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。 lorem ipsum - Wikipedia https://ja.wikipedia.org/wiki/Lorem_ipsum もとは古代ローマの政治家・哲学者キケロの『De finibus bonorum et malorum』（善と悪の究極について）という著作から取られているそうです。 デザインよりも文章の内容に意識が集中しないようにするための工夫です。 ちなみにHTMLやCSSを省略記法で簡潔に記述するためのツール「Emmet」に対応したエディタで、「lorem」と入力し変換すると、毎回、ランダムなlorem ipsumを生成してくれるので便利です。 5-3. TODOというコメントアウト // TODO: totalはオプションパラメータとして設定されるべき。 // FIXME: グローバル変数を使用するべきではない。 アノテーションコメントといい、問題を指摘して再考を促す場合や、問題の解決策を提案する場合に使用されます。 上記以外にも種類があり、エディタによってはこれらをハイライトや一覧で見ることができます。 TODO: 以外のアノテーションコメントをまとめた - Qiita 5-4. READMEファイル名を大文字にする README.md リードミー（Readme）とは、ソフトウェアを配布する際の添付文書のひとつ。配布物の一般的な情報を記載したファイルである。多くの場合、そのソフトウェアをインストールし使用する前に読むべきものとされている。 リードミー - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%BC%E3%83%89%E3%83%9F%E3%83%BC なぜ大文字なのかということについては、「目立つから」「並び順が小文字よりも先になるから」といった理由が散見されました。 6. おわりに まだまだ挙げればキリがありませんが、あらためて感じたことは、たいていの慣習にはなんらかの理由や目的があるということでした。 このような慣習に対する深い理解は、応用や発展に向けて有用だと思いました。 7. 参考サイト Bootstrap · 世界で最も人気のあるフロントエンドフレームワーク 開発者向けのウェブ技術 | MDN Airbnb JavaScript スタイルガイド() { | javascript-style-guide javascriptイディオム集 JavaScript イディオム集

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。