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 …

老後2000万必要だから毎月いくら貯めればいいか計算するツール作った

金融庁「年金含めて老後2000万円必要だよ?」 2019年6月3日に金融庁が資産形成を促す報告書をまとめました。 長寿化によって会社を定年退職した後の人生が延びるため、95歳まで生きるには夫婦で約2千万円の金融資産の取り崩しが必要になるとの試算を示した。…

Vue error "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders"の対策

下記のようなエラーが出ました。 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "property"f…

【JavaScript】日付の差の求め方

new Date()って久しぶりにやると忘れますよね。 ということで備忘録ではありますが日付の差の求め方をJavaScriptで解説します。例 new Date(2019, 6, 5).getTime() - new Date(2019, 6, 3).getTime() //172800000 172800000 / (1000 * 60 * 60 * 24) //2 上…

【SPA】Vue.jsで静的サイトの作り方まとめ

Vueで通常の静的サイトを作成するための手順をまとめました。 あくまで数ページの小規模サイトのSPAを想定しています。 Vue cilでインストール $ vue init webpack my-project www.frontendmemo.xyz ディレクトリ、ファイル構成 ├─App.vue ├─assets │ ├─comm…

nuxt.js error Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive

nuxt.jsで v-for を回す時には v-bind:key でkey属性を渡してあげないとエラーになる。 <div v-for="item in items" :key="item.id"> </div>

nuxt.jsのerror async function run(_argv) { SyntaxError: Unexpected token function

nuxtjsをインストールしてnpm run devしたところ下記errorがでました。 async function run(_argv) { SyntaxError: Unexpected token function これはnodeのバージョンが6以下だと対応していないそうでバージョンを上げる必要があります。ヴァージョンを上げ…

z-indexの数値をルール化するための覚書き

css

z-indexの数値っていくつに設定したらいいかわからないですよね。適当な数値を入れてしまうと特に大規模サイトはカオスになってどこかで崩れます。崩れ方もグレーの背景にその要素だけ前に出てたりして目立つ&かっこ悪いです。 z-indexのルール z-indexのル…

【CSS】clip-pathの対応ブラウザ、generateツール紹介

cssのclip-path プロパティは、表示領域を決められるcssのプロパティです。 つまり指定した位置を結んだ図形が表示され、その外側が非表示になります。 このcssを使えばどんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第で…

photoshopスライス3パターン使い分け

オブジェクトを選択し新規レイヤーに基づくスライスを選択(ショートカットあり) 新規レイヤーを複製してトリミング(透過があるとき便利) レイヤーの目のところをalt+クリック(透過がありスライスを保存したいとき便利) photoshopのスライスの方法を3パ…

a要素とbutton要素の使い分け

先日下記のツイートをしましたが、多くのいいねをいただいたので記事にしたいと思います。✅button要素とa要素の使い分けa要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場…

【CSS】画面サイズに合わせてfont-sizeの拡大縮小

css

レスポンシブサイトやLPの背景にテキストが乗ってる場合に画像の拡大・縮小に合わせてテキストも拡大・縮小させたい時に使います。 画面サイズに合わせてfont-sizeの拡大縮小することが可能です。計算式は下記です。 font-size: calc({フォントサイズ}vw * 1…

Vue.js ラジオボタンで要素を切り替える方法

Vue.jsを使用してラジオボタンを切り替えた時要素を切り替える方法について解説します。下記のようになります。 デモ See the Pen xBddEg by funclur (@funclur) on CodePen. htmlは通常通りですね。 <div id="app"> <label><input type="radio" name="radio" v-on:change="handler" value="a" checked> A</label> <label></label></div>

Vue.jsの本レビュー比較まとめ

Vue.jsの本は2019年の今でも数冊しか出版されていません。 そんな希少価値の高いVue.jsの本ですが、どれがどんな人を対象としているかなど比較したいと思います。 Vue.js入門 基礎から実践アプリケーション開発まで Vue.js入門 基礎から実践アプリケーション…

Vue.jsで簡単なじゃんけんゲームを作る

Vue.jsでじゃんけんゲームを作りました。環境構築についてはこちらの記事をどうぞ www.frontendmemo.xyzindex.html <body> <div id="app"></div> <script src="dist/build.js"></script> </body> App.vue <template> <div id="app"> <h1>じゃんけんゲーム</h1> <div> じゃんけん、 <button @click="fight('ぐー')">ぐー</button> <button @click="fight('ちょき')">ちょき…</button></div></div></template>

Webアクセシビリティで気を付けたいこと6つまとめ

フロントエンドでアクセシビリティ 先日下記のtweetをしました。 https://twitter.com/funclur_01/status/1100216512198074369 フロントエンドでアクセシビリティは後回しにされがちですが、Webを使う人は様々な環境、様々な人がいるので重要です。 例えばal…