componentタグを使用する。 <component is="script" src="./hoge.js" async></component>

要点 localstorageをクリアする。 詳細 Storybookの設定で「Show addons」にチェックが付いているにもかかわらず、addonsタグが表示されなくなる場合がある。 この場合、localstorageをクリアすると表示されるようになる場合がある。

npm i --package-lock-only

インストール方法 (1)ライブラリをインストールする。 npm i -D sass sass-loader fibers (2)nuxt.config.jsを編集する。 import Sass from 'sass'; import Fiber from 'fibers'; export default { ... build: { loaders: { scss: { implementation: Sass, s…

概要 deep selector を使用する。 方法 vue2の場合 ::v-deep の他に、 >>> または /deep/ を指定する方法があるが、バージョンによってはエラーになったり、解釈されなかったりする。 .parent-some-class ::v-deep .child-some-class { margin-top: 30px; } …

方法 .native 修飾子を使用する。 <templete> <div> <some-component @click.native="onClick" /> </div> </templete> 用途 ライブラリのコンポーネントを使用している場合に、そのコンポーネントで発生するclickイベント等のネイティブイベントを、そのコンポーネントを利用する側で購読したい場合。 自作のコンポーネントを使用してい…

$watchで、子コンポーネントのdataを追跡するようにする。 { mounted() { this.$watch( () => this.$refs.someComponent.someData, (val) => { console.log(`someData updated: val: ${val}`); }, ); }, }

preset-scssを使用する。 github.com

字下げ 文章の先頭行について、行頭の位置を右側にずらすこと。 ぶら下げ 文章の先頭行以外の行について、行頭の位置を右側にずらすこと。

米印 Reference Mark（リファレンスマーク） 米印 - Wikipedia

ソースコード // test.js const args = process.argv.slice(2); console.log(args); 実行コマンド $ node test.js foo bar ["foo", "bar"] argvの格納値 インデックス 格納値 0 node実行ファイルのフルパス 1 スクリプトファイルのフルパス 2以降 コマンドラ…

marginを表示したい要素の一方をクリックして選択する。 windowsの場合はAltキー、macの場合はoptionキーを押しながら、もう一方の要素をクリックする。

重ねたHTML要素の前面側のCSSにpointer-events: noneを指定する。

input { -webkit-appearance: none; }

グレーのボタンだと、押せないと勘違いする人も出る。 本当に無効ではないことを十分に示す必要がある。 参考 buttonのブラウザデフォルトのデザイン 通常の場合 <button>サンプル</button> disabledの場合 <button disabled>サンプル</button>

ゴーストボタンとは アウトラインはあるが、塗りつぶしがないボタンのこと。 ゴーストボタンのメリット シンプルなボタンであるのため、Webサイトのデザインを邪魔しない。 ゴーストボタンのデメリット ゴーストボタンはボタンとして認識し辛い。ソリッドボ…

$ grep "[検索したい文字列]" < [検索したいファイル名] test.txtから"xxx"という文字列を検索する場合 $ grep "xxx" < test.txt

コマンド・コマンド xxx が実行終了した後に、コマンド yyy を実行する。 $ xxx ; yyy コマンド xxx が正常終了した場合のみ、コマンド yyy を実行する。 $ xxx && yyy コマンド xxx がエラー終了した場合のみ、コマンド yyy を実行する。 $ xxx || yyy コマ…

DOMを操作する場合、class属性ではなくdata属性を使用する。 class属性はスタイルを定義するためにあり、CSSだけが使用するべきであるため。 class属性を使用した場合、デザインの修正等でclass名の変更が発生した場合にJavaScriptも修正しなければならなく…

$ find / -name [ディレクトリ名] -type d

ps を使用する方法 $ ps aux | grep [プロセス名] pgrep を使用する方法 # プロセスが起動中の場合は、プロセスIDが出力される。 # プロセスが停止中の場合は、何も出力されない。 $ pgrep [プロセス名] 12345

process.cwd();

text-indentを使用する方法 <p class="indent">※サンプル文章サンプル文章サンプル文章サンプル文章</p> .indent { /* ブロック全体を右に移動させる */ padding-left: 1em; /* 1行目のみ左に移動させる */ text-indent: -1em; } .indent { /* marginを使用しても上記と同じことが…

$ git cherry-pick --abort

:not を使用してCSSの上書きを回避する。 // bad .item-item { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } // good .list-item { &:not(:last-child) { margin-bottom: 20px; } }

this.$nuxt.error(); 引数として、statusCodeとmessageを指定することが出来る。 this.$nuxt.error({ statusCode: 404, message: 'エラーが発生しました。', });

const obj = { a: 'c', b: 'd', }; type Keys = keyof typeof obj; type Values = typeof obj[Keys] // 'c' | 'd';

<input type="number" inputmode="decimal" />

サンプルstoryファイルとcssファイルを削除すればOK storybookのセットアップ時に、サンプルstoryファイルとcssファイルが自動でstoriesディレクトリに生成される。 storiesディレクトリに配置しimportしたcssファイルは、そのcssファイルをimportしたstory…

chormeで開発者ツールを開く。 Network タブを開く。 WS を選択する。