frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【css】コンテンツの高さ可変のフッター固定

css

# フッター固定 css フッター固定させるのを久しぶりにやってみました。 久しぶりにやると結構めんどくさいことになっていました。 html { min-height: 100vh; position: relative; padding-bottom: 100px; } footer { position: absolute; bottom: 0; } 上…

各企業のコーディングガイド(規約)が参考になるのでまとめてみた

各企業のコーディングガイド(規約)が参考になるのでまとめてました。 どういうコーディングが正しいんだろ? 自社おコーディング規約を作らなければいけなくなった。 上記に当てはまる人は参考になるかと思います。特におすすめなのは上から3つ Google Air…

iosで疑似要素の機種依存テキストに色を付ける方法

css

疑似要素に機種依存文字を入れる場合iosで確認すると色がつかないので注意が必要です。例えば下記では疑似要素に✔(チェックマーク)をいれていますが、通常色は黒文字、対策後に色が変わります。 See the Pen YzKZrdj by funclur (@funclur) on CodePen. 本…

【JavaScript】split、splice、substring使い方まとめ

文字列や配列を成型したいときに用途によってメソッドを使い分けなければなりません。しかしsplit、splice、substringは名前がsで始まって似ているため覚えずらいです。用途としては以下です。 substring・・・引数を与え指定した範囲を切り出す split・・・…

【Vue.js 】keyup.enterとblurを同じ要素にいれる方法

# 【Vue.js 】enterとblurを同じ要素に登録しても無限地獄にならない方法 stackoverflowに助けられたので日本語版として残しておきます。 仕様 input要素にフォーカスアウトしたときと、enterキー押したときにアラートを出したい。 実装 (誤り) <div id="app"> <input type="text" @blur="alert" @keyup.enter=" alert "> </div> new Vue…

【JS】電話番号の文字列からハイフンを追加・削除する

電話番号の文字列からハイフンを追加する 以下が、電話番号の文字列からハイフンを追加するデモです。 See the Pen ExYPPdd by funclur (@funclur) on CodePen. 3と7で決め打ってるところが若干微妙でマジックナンバー化しそうですが、ほかに思いつかなかっ…

【JavaScript】constに一度に複数の変数に値を代入する方法

#コンストに1度に複数の変数に値を代入コンストに1度に複数の変数に値を代入する方法は以下です。 const { id, hash } = { id: 1, hash: 2 } console.log(id) console.log(hash) See the Pen GVOvax by funclur (@funclur) on CodePen.

Vue.jsのmodalで背景をクリックで閉じる、複数のモーダルを表示するためには?

公式のmodalは問題あり 公式のmodalは下記のようになっています。 See the Pen ZEzbaQb by funclur (@funclur) on CodePen. しかしこれだと2点の問題があります。それは 背景クリックで閉じない 複数のモーダルが作れない ということです。そのためこの記事…

【git bushとyarnが相性悪い?】Error: EBUSY: resource busy or locked, rmdir【解決済み】

git bushをインストールしたところVueでyarn buildができなくなりました。エラーは下記 Error: EBUSY: resource busy or locked, rmdir 'C:\Users\省略' error Command failed with exit code 1. ん~なぞ。git bushをアンインストールしたらbuildできるよう…

【注意】router.jsに記述するrouteの順番

router.jsに記述するrouteの順番は気を付けなければいけません。下記のようにルーティングすると意図した挙動になりません。 export default new Router({ mode: 'history', routes: [ { { path: '/hoge/:id/', name: 'fuga2', component: () => import(/* w…

【Vue.js】createdとmountedの違い【簡潔に説明】

Vue.jsのcreatedとmountedの違いはライフサイクルの中で発動タイミングの違いです。下記を見ていただくとわかりやすいかと思います。 See the Pen dxZdgK by funclur (@funclur) on CodePen. var app = new Vue({ el: '#app', data: { }, mounted() { consol…

typescriptの型エラーをなんとかしたい!anyよ、さよなら。エラーの解決法

TypeScriptは型付けできるJSですが、そのエラーの多さに嫌気が指してしまうのは自分だけではないはずです。この記事ではTypeScriptの何が難しいのか、実際自分がエラーにあたって解決した事例を書いていきます。 尚、勉強中故、正しい情報とは限りませんので…

【Vue.js】location.hrefは使用しません|$routerを使いこなそう

Vue.jsではlocation.hrefの代わりに$routerを使用します。(Vue Routerを使用している場合)console.log(this.$route)とすると以下のように表示されます。 fullPath: "/hoge" hash: "" matched: [{…}] meta: {} name: "hoge" params: {hoge: "1"} path: "/ho…

prettierで大量のエラーが発生→コマンド一発で解消

コードを自動で成形してくれるprettier便利なのですが、無駄にエラーが発生してストレス感じますね。大量のエラーが発生することもあるのですが、まるで「バルス」のようにコマンド一発で消すことができたので紹介します。 経緯 VSCODEでprettier拡張機能をi…

Vue+TypeScriptで起きたRawLocationエラーの対処法

下記のようなエラーが出ましたが以下の方法で解決しました。 経緯 error TS2345: Argument of type '{ name: string; query: QueryParams; }' is not assignable to parameter of type 'RawLocation'. Type '{ name: string; query: QueryParams; }' is not …