<form /> の送信ボタンで <input type="submit" value="送信" /> と <button>送信</button> でなんか動きが違うのかな？というのを軽く調べてみました。
結論から言うと多分送信ボタンとしての挙動自体に差はなさそう
少なくとも <input type="submit" value="送信" /> と <button>送信</button> の二つをおいてエンターキーを押したときのイベント発火順序は両方とも同じでした
codepen.io にサンプルコードをおいたので興味のある人はどうぞ

なんとなく、お前らのsubmitはもう古い！みたいなネタ風に書こうかと思いましたが、今回は興が乗らなかったのでやめました

ファイルの冒頭で「これはHTML文書ですよ」と宣言するために＜！DOCTYPE＞と書く。
このタグは閉じタグが必要ない。
その次に「ここからここまでがHTML文書ですよ」という意味で＜html＞タグを書く。
それから、htmlタグにはlang属性(追加情報)で「日本語の文書だよ」という意味で"ja"を付ける。

＜body＞=HTML文書のコンテンツ・内容を示す要素。

＜meta＞=ページを記述するコードを示す要素。(「メタ」とは‥他の語の前に付いて複合語を作り、超越した、高次の、意味を表す。)
昔は様々な文字コードがあったが、最近では「UTF-８」が主流になりつつある。

＜title＞=タブのタイトルにも反映される。

faviconの設定方法‥＜link＞を使う→rel属性(リンク先の他の文書に対する関係を示すための属性)をiconにする→faviconのファイル名はhref属性(リンク先を指定する属性)に指定

次にインターネットに公開した時に検索エンジンが説明用の文章として使うことを想定して、文書の説明も加えておく。
＜meta＞を使い、name属性(要素の名前)・content属性(name属性に対応したプロパティ名に対応した内容)をそれぞれ書く。

字下げを戻す=Shift+Tab

headタグを使う際に重要度に応じて、h1・h2・h3と下げていく。

HTMLのコード内にメモ書きを入れる際に＜!-- -- ＞と書くと、このテキストはブラウザ上では表示されないのでメモ書きすることができる。
上記のメモ書きを「コメント」と呼び、後からコードを見直す時やコードを渡す時にコメントとして書いておくとわかりやすくなる。
コメントを切り替えるためのショートカットキー=Command+++/

https://qiita.com/akari_0618/items/36ba2fc4dee783def482
前回の記事でのオブジェクトについて触れていきたいと思います。

簡単に言うとオブジェクトとは物体なのですが、わけわからないと思うのでここではドラえもんという作品を作るということにしときます。
ということで最初にいきなりオブジェクトに突っ込むと詰むので、まずは周りから攻めていきましょう。
ドラえもんの登場人物で考えて行きましょう。

クラス

これは設計図のです。難しいことは考えずにもう設計図だと思ってください！
しずかちゃんとかのび太くんのプロフィール用紙のようなものです。

プロバティ

これはCSSを触っていると馴染みがあると思います。要は、１つ１の説明のようなものです。
ドラえもんだとわかりにくいので、のび太くんたちで例えます。
のび太くんたちの出身地、通ってる学校、学年などをかきます。ある程度共通項目があるので、それをかきます。

メゾット

行動のことです。
何をするのか、特技はなにか、好物はなにかなどですね

これが、のび太くんたちの共通項目です。
ここから一人ひとりの設計図を作っていきます。

そして共通のクラスをあたしく作ったクラスに受け継ぐことを『継承』と言います！！

新たにクラスを作ったあとに、プロバティを詳細に記載していきます。
のび太くん▶　＜プロバティ＞
　　　　　　出身地：東京　学校：小学校　学年：５年生
　　　　　　＜メソッド＞
　　　　　　何をするのか：昼寝　特技：あやとり　好物：カレーライス
　　　　　　のび太くんはジャイアンにいじめられて泣きますが、帰ってきたドラえもんみたいにたまに自分の力でなんとかすることもあるの　　
　　　　　　ので、ここはあまり変えたくないなってときには『カプセル化』します。
これを、登場人物順に作っていく感じです。

共通項目を作ることにより、たまには出来杉君入れようよってなっても継承するだけって感じで改修しやすくなりますよね！?
また話が進んでいくうちにのび太くんたちが社会人になる場合もあるのでその場合に設定を変える場合にオブジェクトで書くと楽だよってことですね。

直接会って話をすることが望ましいのは言うまでもありませんが、今の時代はオンライン家庭教師が主流です。今は社会的に距離を置く時代ではありませんが、リクエストに応じて家庭教師を呼ぶのはとても楽しいことです。スケジュールの自由度が高く、時間をかけずに済む（実在の場所に通う必要もない）ため、これらのサイトには、特定の分野で上級学位を取得している数名の優秀な教師が集まってくるかもしれない。また、多くのサイトでは、デジタルホワイトボードやインタラクティブなテキスト編集など、生徒とチューターが同じ環境にいるかのように感じられるコネクテッドワークスペースを提供しています。
 
特定のコミュニティで利用可能なチューターだけに限定されず、これらのネットワークにはあまりにも多くのチューターが登録されています。つまり、あなたの生徒は、幼稚園児から高校生までの読解力や数学、高度なエンジニアリングや看護など、指導を必要とするあらゆる科目のスペシャリストと数分で対話することができるのです。また、教科の枠を超えて、大学受験や小論文、履歴書の作成、就職面接などのサポートを受けることもできます。こんなに頭を使うことができるのなら、誰だって申し込まないわけにはいきません。
 
 
iProf Evolutionアイプロフ・エボリューション iprofevolution.com
 
一風変わったアプローチのモダンなウェブサイトです。大阪に拠点を置く自然なアプローチの哲学は、東と西の概念を組み合わせ、数学と物理学を理解する全く新しい方法を学生に提供します。利用できる分野は、数学、物理、化学、英語、その他の言語です。
 このコンセプトは、生徒によって推論の筋道や文化的理解が異なるため、学習は誰にとっても同じではあり得ないという事実から生まれました。
教師は、生徒が納得するまでさまざまな方法を試し、学習時間を短縮するよう訓練されています。
 
また、講師はクラスを受講したり、無料のオンラインレッスン（ベータモード）を受講することで、スキルを向上させることができます。料金は1時間あたり18ドルからとなっており、低価格で質の高い家庭教師を探している学生に最適なプラットフォームです。
 
Chegg
 
Cheggは、ライブホワイトボードを使った1時間のオンラインセッションを月額30ドルで提供しており、ユーザーがより利用しやすい料金設定となっています。チューターは、さまざまな学問分野や大学入学手続きなどを教えてくれる。
 
Preply
 
Preplyは、ネイティブスピーカーと一緒に外国語を勉強したり教えたりしたい学生に適したサイトだ。スペイン語、ロシア語、アラビア語、日本語、ヘブライ語、ウルドゥー語など、さまざまな言語に精通した世界中のチューターが在籍している。言語だけでなく、数学、物理、科学など様々なトピックがリンクされています。欠点は、最初の授業料は無料で、その後の授業料は30％以上割引されることです。残念なことに、多くの教師は、給料が極端に割引されるため、それほど長くは続かない。
 
Classgap

preplyと同じアイデアですが、ラテン系の学生に焦点を当てて、様々なクラスを提供します。最初の授業では先生は0ドル、プラットフォームは毎回30％以上の値引きがある。最悪なのは、ホワイトボードがひどく、質の悪い作りになっていることです。先生があなたを助けようとズームミーティングを提案しても、Classgapはあなたの先生をブロックします。多くの良い先生が去っていきました。
 
Revolution
 
レボリューション・プレップの自慢は、講師陣がすべて正社員で構成されていることです。ここにはパートタイマーはいません。しかし、彼らの知識にはお金を払わなければなりません。12時間の個人指導は1,200ドル、12時間の少人数制試験準備セッションは400ドルと、一般の学生にとっては非常に高額です。

今回は、Vue．jsについて学習していきたいと思います。
Vue.jsとは、フロントエンドで使われる言語です。Javascriptのフレームワークになります。
HTMLとCSSで書いたあとに、動きを付けることができます。
フロントエンドではよく使われる言語のようです。
他にも、Javascriptのフレームワークはたくさんあり、用途ごとに使い分けて行きます。
また、Vue.jsには更にフレームワークが存在するのですが、ここでは割愛させていただきます。

Vue.jsを使うメリット

Vue.jsを使うメリットは、いくつかあります。
①HTMLとCSS
②Javascriptの知識があれば割とすんなり入ってくる。
③DOMがを自動的処理してくれる。（JsからHTMLとCSSのデータを取得してくれる）
です。

導入の仕方

コマンドを使ったりすることは特にないですが
HTMLとVue自体にお決まりのような記述内容があります。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js practice</title>
</head>
<body>
  <div id="app">
    {{　message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src="script/script.js"></script>
</body>
</html>

script.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちわ！'
  }
})

上記が主なVue.jsの雛形となっています。
ブラウザで表示すると以下のようになります。

HTML側からのVue.js

① Vue Devtools
これを使うことによりVueアプリケーションのバグを簡単に見つけることができるため、インストールしとくことをおすすめします。
HTMLでは以下のように記述します。bodyタグ一番最後に入力します。
また、その下にJsフォルダとそのファイルを読み込んでくれるように記述します。
"https://cdn.jsdelivr.net/npm/vue@2.6.12"
②divタグ
後で記述しますが、これは、Vue.jsでインスタンスの展開はここだよ〜って意味です。
で、divタグの中に入れてほしい単語などを記述します。
UIの領域になります。Ul/UXについては後ほど学習していきます。

JS側からの実装

①var
一行目にVarという記述がみられますね。これは、Vueの中核。これがなければそもそも動きません。心臓です。
ちなみにVarとはJsでの変数の宣言の場合に使われます。
②data
これはオブジェクト、配列の指定になります。詳しくは後に学習します。

以上がVue.jsを使うときに主に記入する内容になっています。

はじめに

CSSベンダープレフィックスは手打ちでやろうとすると割と厄介ですが、Autoprefixerは自動でこのベンダープレフィックスを付与してくれるため、コーディング量を少なくしメンテナンス性も高めることができるとても便利なものです。

しかし、Autoprefixerの挙動を理解していないと、IEと従来版Edge対応時に「自動配置」に振り回されるかもしれないので備忘録を残します。
決して、Autoprefixerが悪いという話ではなく、使うときはここに気をつけようという趣旨になります。

なお、Autoprefixerの導入やCSS Grid Layoutの詳しい使い方等については、本記事では扱いません。

CSS Grid Layoutについては以下の記事がとても参考になると思います。
CSS Grid Layout を極める！（基礎編）
本記事でもこの記事の例として出ているレイアウトを元に進めていきます。

(Autoprefixer version: 10.2.5)

結論

• Grid Layoutでグリッドを手動配置し、Autoprefixerで-ms-ベンダープレフィックスをつけるときは、エリア名をつけて配置する
• 本当にGridでないといけないのか再考する

CSS Grid LayoutのIEベンダープレフィックス

CSS Grid Layoutは縦横の2次元レイアウトを簡単に作成できる便利なCSSの機能です。

Can I Useによると、IEでのサポートはこんな感じ。

Partial support with prefix: -ms-

-ms-というベンダープレフィックスを使えば、一部使用できます。
Partial supportとは古いバージョンのgridには対応してるよーという意味とのこと。

Autoprefixerでgridに自動で-ms-プレフィックスを付与する

Autoprefixerのgridのプレフィックスオプションを有効にする

※筆者の環境ではgulpを導入しているため、gulpでの説明となります。

Autoprefixerでは、gridのIE向けベンダープレフィックスはデフォルトで無効になっています。
まず、それを有効にする必要があるので、grid: 'autoplace'を指定します。

公式Readmeに付け足し

gulp.task('autoprefixer', () => {
  const autoprefixer = require('autoprefixer')
  const sourcemaps = require('gulp-sourcemaps')
  const postcss = require('gulp-postcss')

  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer({ grid: 'autoplace' }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'))
})

なぜデフォルト無効なのかについてはReadmeで言及されており、

Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.

今のCSS Gridの記法をIE用に変換するpolyfillが完璧ではないため、とのことです。

そもそもIE対応が必要な上、Grid Layoutを使用する時は、明確な目的がある場合に絞るべきでしょう。

CSS Grid Layoutを適用する

ここでは、例えば以下のようなレイアウトを実現したいとします。

以下のHTMLにGrid Layoutを当てていきます。

grid_sample.html

<div class="bl_grid">
  <div class="bl_grid_item">A</div>
  <div class="bl_grid_item">B</div>
  <div class="bl_grid_item">C</div>
</div>

必ず指定するのはもちろんdisplay: grid;です。
また、幅と高さも指定してしまいます。

style.css

.bl_grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
}

問題はここからです。

今回は自動配置ではなく、以下のように配置を指定する必要があります。

A|B
A|C

方法は2つあります。

1. grid-rowとgrid-columnで行列番号を指定する
2. エリアに名前をつけて指定する

配置指定：行列番号指定

では、まず1つ目の方法でやってみます。

style.css

.bl_grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
}

.bl_grid_item:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.bl_grid_item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.bl_grid_item:nth-child(3) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

いよいよ、Autoprefixerの出番です。
これでAutoprefixerを走らせてみると、以下のように出力されます。

dest/style.css

.bl_grid {
  display: -ms-grid;
  display: grid;

  -ms-grid-rows: 100px 50px;
  grid-template-rows: 100px 50px;
  -ms-grid-columns: 100px 1fr;
  grid-template-columns: 100px 1fr;
}

.bl_grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.bl_grid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.bl_grid > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.bl_grid > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.bl_grid_item:first-child {
  -ms-grid-row: 1; 
  -ms-grid-row-span: 2; 
  grid-row: 1 / 3;

  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.bl_grid_item:nth-child(2) {
  -ms-grid-row: 1; 
  -ms-grid-row-span: 1; 
  grid-row: 1 / 2;

  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.bl_grid_item:nth-child(3) {
  -ms-grid-row: 2; 
  -ms-grid-row-span: 1; 
  grid-row: 2 / 3;

  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

全体的に-ms-が付与されました。

.bl_grid_item:first-childの部分を見てみます。

.bl_grid_item:first-child {
  -ms-grid-row: 1; 
  -ms-grid-row-span: 2; 
  grid-row: 1 / 3;

  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

-ms-grid-row-spanが指定していなかったオプションですが、そのグリッドエリアをどれくらい引き伸ばすかを指定することが出来ます。
-ms-grid-row-spanと-ms-grid-column-spanはIEと従来版Edgeにのみ存在するオプションで、他のブラウザではgrid-row: 1 span 2;のように指定することで同じ効果が得られます。

さて、いい感じに指定できたように見えますが、実はこれ、うまく機能しませず、↓こうなります。（AとCが重なっている）

なぜならば、以下の記述が追加されているためです。

自動追加された部分

.bl_grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.bl_grid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.bl_grid > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.bl_grid > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

なんぞこれ。

コードを読むと、.bl_gridの子要素を左上から順番に4つ並べているようです。
これはAutoprefixerのIEのグリッド自動配置機能によるものです。

これは、先程指定したオプションのgrid: 'autoplace'によって有効になり、grid-template-rowsとgrid-template-columnsが指定されているときに自動配置を行うという機能になります。

この機能によって自分で書いた記述ではなく自動追加された方が参照されるので、意図した配置になりません。（下に自分が記述したほうが優先されない理由は、CSSの優先順位によるものです。）

Autoprefixerのオプション/* autoprefixer grid: no-autoplace */をグリッドで指定して、自動配置を無効にすることで回避できます。

.bl_grid {
  /* autoprefixer grid: no-autoplace */
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
}

しかし、CSS内にAutoprefixerのオプションを記述するのはあまりスマートではない気がしてしまいます。

配置指定： 【推奨】 エリア名指定

Readmeにも以下のように書いてあります。

If manual cell placement is required, we recommend using grid-template or grid-template-areas
訳：手動でセルを配置する場合は、grid-templateもしくはgrid-template-areasの使用を推奨します。

また、

If grid-template or grid-template-areas has been set, Autoprefixer will use area based cell placement instead.
訳：grid-templateかgrid-template-areasが設定されている場合、エリアに基づくセル配置を行います。

ということで、手動で配置したい場合は大人しくエリアに名前をつけて指定するほうがベターでしょう。

幅と高さは指定していましたので、grid-template-areasを使用してみます。

エリア名指定

.bl_grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
  'gridA gridB'
  'gridA gridC';
}

.bl_grid_item:first-child {
  grid-area: gridA;
}

.bl_grid_item:nth-child(2) {
  grid-area: gridB;
}

.bl_grid_item:nth-child(3) {
  grid-area: gridC;
}

もしくは、短縮プロパティgrid-templateを用いると少し短く記述することが出来ます。

エリア名指定（短縮プロパティ）

.bl_grid {
  display: grid;
  grid-template: 
    'gridA gridB' 100px
    'gridA gridC' 50px
    / 100px 1fr;
}

.bl_grid_item:first-child {
  grid-area: gridA;
}

.bl_grid_item:nth-child(2) {
  grid-area: gridB;
}

.bl_grid_item:nth-child(3) {
  grid-area: gridC;
}

さて、Autoprefixerくんを走らせると、、、

dest/style.css

.bl_grid {
  display: -ms-grid;
  display: grid;

  -ms-grid-rows: 100px 50px;
  grid-template-rows: 100px 50px;
  -ms-grid-columns: 100px 1fr;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
    "gridA gridB"
    "gridA gridC";
}

.bl_grid_item:first-child {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;

  grid-area: gridA;
}

.bl_grid_item:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;

  grid-area: gridB;
}

.bl_grid_item:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;

  grid-area: gridC;
}

自動配置の部分がまるっとなくなりました。

grid-template-areasやgrid-areaにプレフィックスがありませんが、IEと従来版Edgeにはないので正常な動きです。
代わりに-ms-grid-row、-ms-grid-column、-ms-grid-row-span、-ms-grid-column-spanで実現しています。
ここを自動でやってくれるのはやっぱり便利ですね。

まとめ

Grid Layoutを使うときは、今後はエリアに名前をつける方で実装しようと思います。

grid内のアイテムもclassのnth-childで指定していたので今回問題に気づきましたが、idで指定していればそちらが優先されて気付かなかったということもあり得たかもしれません。（実証していませんが）

このようなプラグインは便利ですが、ちゃんとReadmeを読んで挙動を確認して、過信しすぎず出力されたものをちゃんと確認しようという学びになりました。

前置き

しばらく前に下記のようなことができるVueCLIの導入をして勉強していたのですが、
この開発ツールで作成した単一ファイルコンポーネント(.vueファイル)をそのまま、
普通のHTMLファイルに組み込む方法が意外とぐぐっても情報が少なかったので、
改めてまとめてみたいと思います。

VueCLIでできること

• プロジェクトのテンプレートの作成
• 複数のjsファイルを一つにまとめる
• .vueファイルを.jsに変換する
• トランスパイル
• JavaScriptの構文チェック
• テストツールの導入など

単一ファイルコンポーネントとは

その前に、Vue.jsの単一ファイルコンポーネントファイルについて改めて復習します。
単一ファイルコンポーネントファイルとは、以下のように、template, script, styleの
3つがセットになった拡張子vueのファイルです。

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

templateが表示部分、scriptがロジックや内部データ、styleはそのままCSSですね。
この1セットで一つの機能、コンポーネントになっています。

拡張子vueファイルについて

上述の単一ファイルコンポーネントは拡張子vueというファイルになっています。
VueCLI環境では、この拡張子vueファイルのまま開発が行えます。
これは前述のVueCLIでできることの中に、「.vueファイルを.jsに変換する機能」が組み込まれているからです。

拡張子vueファイルを扱えるのは、あくまでVueCLIという環境の中での話なので、通常のHTMLファイルに
そのまま組み込むことはできません。

Webpackについて

拡張子vueファイルを通常のHTMLファイルに組み込むためには、VueCLIにも含まれていた
「.vueファイルを.jsに変換する機能」が必要です。それを行ってくれるのがWebpackです。
Webpackはモジュールバンドラと呼ばれるツールで、複数のファイルを１つにまとめる(バンドル)
機能を持ちます。HTMLファイルに組み込む前に、このWebpackを用いて、Vue.jsと自作した
拡張子vueファイルをまとめて1つのjsファイルにすることで、通常のHTMLファイルに
単一コンポーネントファイル(拡張子vueファイル)を組み込める状態になります。

組み込み方法

それでは、以降で具体的な手順を記載します。
作業環境のOSはdebian系を利用します。
(最後にdockerファイル共有します)

VueおよびWebpackのインストール

適当な作業ディレクトリを作りそこで作業します。

$ mkdir ~/scf_test
$ cd ~/scf_test

各種必要なものをインストールしていきます。

# yarnのインストール
$ apt-get install -y yarn
# vue関連のインストール
$ yarn add --dev vue vue-loader vue-template-compiler
# webpackのインストール
$ yarn add webpack webpack-cli 

Webpack用の設定ファイル作成

Webpackを実行するために必要な設定ファイルを作成します。
この設定ファイルを用意することで、拡張子vueファイルに対してwebpackによるVue.jsと
自分が作った単一コンポーネントファイルを結合し、1つのjsファイル(下記の設定ではbundle.jsというファイル)
にバンドルすることができるようになります。

./webpack.config.js

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
    mode: 'development',
    // エントリーポイントの設定
    entry: './src/js/app.js',
    // 出力の設定
    output: {
        // 出力するファイル名
        filename: 'bundle.js',
        // 出力先のパス（絶対パスを指定する必要がある）
        path: path.join(__dirname, 'public/js')
    },
    module:{
        rules: [
            // .vue ファイルを組み込むためのモジュール
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        modules: [
            "node_modules"
        ],
        alias: {
            // vue.js のビルドを指定する
            vue: 'vue/dist/vue.common.js'
        }
    },
    plugins: [new VueLoaderPlugin()]
};

サンプルの単一コンポーネントファイル作成

バンドルしたいサンプルの単一コンポーネントファイルを作っておきます。
上記のwebpackの設定内で、「エントリーポイントの設定」があると思います。
そこが、自分が作成する単一コンポーネントを呼び出す起点のjsファイルになります。
まずはそれの作成です。

./src/js/app.js

import Vue from 'vue';
import HelloWorld from './components/hello-world.vue';

new Vue({
    el: '#app',
    components: {
        'hello-wold': HelloWorld,
    },
});

次に単一コンポーネントファイルを作成します。

./src/js/components/hello-world.vue

<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
</style>

Webpackによるバンドル処理

続いて、上記で作成したファイルを元にwebpackでバンドル処理を行います。
webpackコマンドは./node_modules/.bin/webpackにあります。

$ ./node_modules/.bin/webpack

成功すると、public/js/bundle.jsというファイルが作成されているはずです。
これがバンドルされたファイルです。

バンドルされたファイルを通常のHTMLファイルに組み込む

これは単純にHTMLファイルからさきほど作成したbundle.jsを読み込むだけです。
以下のようなHTMLファイルになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>scf tutorial</title>
</head>
<body>
<h1>scf test</h1>
<div id="app">
    <hello-wold msg="sayHello"></hello-wold>
</div>

<script src="public/js/bundle.js"></script>
</body>
</html>

上記のHTMLファイルをブラウザで開き、sayHelloと表示されていれば成功です。
なお、単一コンポーネントファイルを修正した場合は、webpackコマンドによる
バンドル処理を行い、bundle.jsを作り直す必要があります。

dockerファイル共有

上記の環境を整え済みのdockerファイルを共有しておきますので、お試し下さい。

$ git clone https://github.com/jcong7495/vuejs_scf.git
$ cd vuejs_scf
$ docker-compose up -d
$ docker-compose exec nginx bash
$ cd /usr/share/nginx/html/scf_test/
$ yarn install
$ ./node_modules/.bin/webpack

上記実行後、http://localhost/scf_test/にアクセスしてsayHelloと表示されれば成功です。

はじめに

疑似要素を使用してチェックボックスを作った際に、ブラウザ準拠のフォーカスを当てたかったのですが、どうしようか…と少々苦戦したので備忘録として残すために記事にしました。 （既出ネタだったらすいません）
また、元々は先輩がラジオボタンで似たようなことをしてたのを思い出し、それをチェックボックス版にしました。
なので0から私のアイディアという訳ではないです。（土下座）

結論

先に結論書いちゃいます。

疑似要素の下に普通のチェックボックス（input要素）置いちゃえ

以上です！

どういうこと？

では簡単に説明します。
の前に、カスタムチェックボックスを作成します。

事前準備

適当なinput要素、labelを用意。

<div class="checkbox-group">
  <input type="checkbox" id="check1" class="checkbox">
  <label for="check1" class="checkbox-label">チェック1</label>
</div>

すると上記のようなチェックボックスができるかと思います。

では上記に以下のスタイルを当てます。

.checkbox {
  display: none;
}

.checkbox-label {
  padding-left: 28px;
  position: relative;
}

.checkbox-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: solid 2px #b0c4de;
  background-color: #FFF;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

/* チェック済み */
.checkbox:checked + .checkbox-label::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #b0c4de;
  position: absolute;
  top: 4px;
  left: 4px;
}

すると

このようなチェックボックスができます。
ちなみにチェック済みの場合は…

こんな感じになります。

ここまでは、自分の好みのカスタムチェックボックスを作っていただいて大丈夫です。

考え方

では考え方ですが、文章は苦手なので、図で説明します。

（字が汚いのは申し訳ないです…ｗｗ）
…図でもわかりにくい説？

事前準備としてカスタムチェックボックスを作成しましたが、その際にinput要素をdisplay:none;なりで非表示にするかと思います。
（実際に上記でもそのようにしています。）

ただそうするとフォーカスが当たらなくなってしまうので、
非表示にはせず、カスタムチェックボックスの真下に本来のチェックボックスを隠してやります。
そうすることで、あたかも疑似要素にフォーカスが合っているかのように見せています。

ということでスタイルは以下のようになります。

.checkbox {
/*   display: none; */
  outline-offset: 8px;
}

.checkbox-label {
/*   padding-left: 28px; */
  position: relative;
}

.checkbox-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: solid 2px #b0c4de;
  background-color: #FFF;
  border-radius: 4px;
  position: absolute;
  top: -1px;
  left: -27px;
}

/* チェック済み */
.checkbox:checked + .checkbox-label::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #b0c4de;
  position: absolute;
  top: 3px;
  left: -23px;
}

したことは.checkboxクラスのdisplay: none;を削除、
outline-offset: 8px;を擬似要素で隠れないように調整、
疑似要素の位置を調整くらいでしょうか。。

すると上記のようにフォーカスが当たるようになりました。
input要素自体を非表示にしていないので、スペースキーでチェックを入れたり、外したりも可能です！

考え方さえ分かってしまえば特に難しいことはしていないので、簡単だと思います。

まとめ

結論として、input要素を非表示にせずに、その上に擬似要素を置いてやればフォーカスが当たるようになります。
他に良き方法があったら教えていただきたいです。

要素を任意の位置に配置する方法について記事を書きたいと思います。

要素の配置方法

■positionプロパティ
positionプロパティとは指定した要素の配置方法を決めることができるプロパティ。

値との組み合わせ	説明
position: relative;	現在の位置を基準に相対的な位置を決める
position: absolute;	特定の地点を基準に絶対的な位置を決める(デフォルトの基準はウィンドウ左上)
position: fixed;	要素を指定した位置に固定する

また、positionプロパティはtop、bottom、left、rightというプロパティとセットで使うことが多い。

■top/right/bottom/leftプロパティ
positionプロパティを指定した要素に、基準（上、下、右、左）の距離を指定することができる。

絶対位置

ブラウザの左上を基準としてとる位置のことを、絶対位置という。
position: absolute;を適用された要素はブラウザの左上が位置の基準になる。

相対位置への要素の配置

ある要素が、他の要素との関係の上に成り立つ位置のことを相対位置という。
親要素にposition: relative;を設定すると、子要素の基準は親要素の左上となり、相対位置をとる。
子要素にposition: absolute;を付与した際、親要素にposition: relative;を付与すると位置の
基準となる。

まとめ

・positionプロパティとは指定した要素の配置方法を決めることができるプロパティのこと。
・positionプロパティを指定した要素に、top/right/bottom/leftプロパティを用いることで、基準（上、下、右、左）の距離を指定することができる。
・親要素にposition:relative;を指定することで、position:absolute;を指定した子要素の基準の位置 　を親要素に指定できる。