はてなブックマーク

Webサイトを作成しているとブラウザで予期せぬ横スクロールが発生してしまうことがある。 ブラウザで予期せぬ横スクロールが発生するのはCSSで幅の計算などを間違えて表示領域を超えてしまうことが原因だ。 例えばこちらのサンプルをブラウザで見ると横スクロールが発生している。 横スクロールが発生している原因の要素 一般的に横スクロールが発生している要素の確認する際はCSSの全称セレクタ（ユニバーサルセレクタ）でoutlineを付けて確認されることが多い。 * { outline: 1px solid red; } しかし、CSSに追加するのは若干面倒なのでブラウザのデベロッパーツールのConsoleで以下のJavaScriptを実行したほうが簡単にoutlineを追加できる。 $$("*").forEach(v => v.style.outline = '1px solid red') outli

sleep処理は1行で書ける sleepの関数を作成してasyncのfunction内でawaitを付けて実行する。 asyncが付いていないとawait sleep()は使用不可。 const sleep = ms => new Promise(res => setTimeout(res, ms)) async function sample() { console.log('開始') await sleep(2000) console.log('開始から2秒経過') await sleep(3000) console.log('開始から5秒経過') } sample()

Stylelintとは CSSのコードをチェックするツール。 例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。 Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。 Stylelintのインストール方法 npmを使用するので、例としてターミナルで以下のコマンドを実行してファイルを必要な作成する。 mkdir css-sample; cd css-sample; touch index.css .stylelintrc.json; npm init -y; 関連ファイルを作成したらStylelintとルール(stylelint-config-standard)をインストールする。 npm i -D stylelin

aspect-ratioプロパティとは 指定した要素のアスペクト比を設定できるCSSプロパティ。 例えば aspect-ratio: 16 / 9; のCSSプロパティを要素に追加すれば16:9のアスペクト比を設定できる。 16:9 aspect-ratio: 16 / 9; レイアウトのアスペクト比の維持に便利なプロパティだがSafari 14.x以下では使用できない。 https://caniuse.com/mdn-css_properties_aspect-ratio Sassの@mixinでaspect-ratioを使用 aspect-ratioが対応ブラウザが少なく、そのままでは使用できないため、使用する際はpostcss-aspect-ratio-polyfillを使用する必要がある。 しかし、postcss-aspect-ratio-polyfillを使用するためにはNode

Storybookにはアドオンが必要不可欠 Storybookはアドオンを追加することで機能を拡張できる。 例えばソースコードを表示・コピーするアドオンなどだ。 アドオンを追加していないStorybookはエディタで拡張機能が追加されていないくらい使い勝手が悪いので必ず追加したほうが良い。 https://storybook.js.org/addons/ StorybookのAddon Galleryにもアドオンの一覧がまとめられている。 https://storybook.js.org/docs/addons/addon-gallery/ 以下にStorybookのおすすめアドオンを記載した。 StorybookのアドオンのGitHubページには「add following content to .storybook/addons.js」などと記載されている場合があるが、以下のサンプルで

Puppeteerとは 以前「PuppeteerによるヘッドレスChromeの使い方 evaluate」という記事を書いたのだが、現在ではコードが古くなってまともに動作しなくなってしまったので「PuppeteerによるヘッドレスChromeの使い方 2021年度版」を新たに作成した。 PuppeteerとはChromeを操ってWebスクレイピングを行い各種チェックなどができるNodeライブラリ。 例えば下記のようなスクリプトを作成してnode test.jsを実行すればChromeが指定した文字列を検索して、さらにスクリーンショットを保存してくれる。 // test.js const puppeteer = require('puppeteer'); puppeteer.launch().then(async browser => { const page = await browser.

cheeriogsとは GASで使用可能なHTMLをパースできるライブラリ。 Google Apps ScriptだけだとWebサイトのHTMLをgetContentTextを使用してHTMLをテキストで取得して正規表現で抽出しなければならないため、非常に取得しづらい。 cheeriogsを使用すれば$('title').text()とjQueryようなコードで簡単に取得できる。 cheeriogsを使用するには スクリプトエディタでリソース => ライブラリを選択してAdd a libraryに以下のスクリプトIDを検索して、最新バージョンを選択して保存を押せば使えるようになる。 1ReeQ6WO8kKNxoaA_O0XEQ589cIrRvEBA9qcWpNqdOP17i47u6N9M5Xh0 スクリプトエディタのリソース => ライブラリからcheeriogs(Cheerio)を追加

Storybookとは Storybookとは保守性の高いUIコンポーネント(スタイルガイド)を素速く簡単に構築するためのツール。 オープンソースなので商用でも無料で使用することが可能。 Storybook for HTMLといってもHTMLだけではなくCSSやJavaScriptのスタイルガイドも構築できる。 昔はFractal、sc5-styleguide、kss-nodeなどがよく使用されていたが、2020年現在では新規のプロジェクトの場合はStorybookが使用されることが多い。 React、Vue.js、Angular用などがあるが、この記事で説明するのは一番需要がありそうなHTML用のStorybook for HTMLのインストール手順と基本的な使い方。 Vue.jsなどの場合は公式サイトトップの右下のMADE FORのVueのリンク先にある説明手順に従ってインストールする

Node.jsでHTMLの要素取得 Node.jsを使用してWebサイトのHTML内の要素やテキストを調べて取得したいことがある。 Node.jsはhttpsをrequireすれば簡単にHTMLを取得できる。(httpsのみ) // sample.js const https = require('https'); const url = 'https://iwb.jp/foo/'; https.get(url, res => { let html = ''; res.on('data', line => html += line); res.on('end', () => { console.log(html); }); }); node sample.js 結果をHTMLファイルで保存する場合は node sample.js > sample.html document.querySe

BootstrapVueをインストール vue create my-bootstrapで環境構築後、npm i bootstrap-vueでBootstrapVueをインストールする。 あとはmain.jsにCSSを読み込むための記述を2行追加するだけでBootstrapが使用できるようになる。 import Vue from 'vue' import App from './App.vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') App.vueにBootstrapのclassを付けたH

イベント間引き処理とは scrollイベントなどを使用したときはイベントを連続して呼び出してしまうので処理が多くなり、ブラウザに負荷がかかる。 // <p id="r"></p> var r = document.getElementById('r') function insertHello() { r.textContent += 'hello! ' } window.addEventListener('scroll', insertHello) スクロールイベント処理 サンプル そのため負荷軽減のため、イベントの呼び出しは指定した時間が経過した際に発生するようthrottleやdebounceを使用して処理することがある。 一般的にはlodashのthrottleやdebounceが使用されることが多い。 throttleとは イベントを呼び出し後、指定した時間が経過するまでは次のイ

CSSアニメーションで右回転させる方法 よく使用されるCSSアニメーションで右回りの回転をさせるにはtransform: rotateで0degから360degを指定してanimationで動かす。 /* <div class="star star1">★</div> */ .star { display: inline-block; font-size: 3em; } .star1 { animation: r1 1s linear infinite; } @keyframes r1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Vue.jsのフィルターとは Vue.jsのフィルターとはテキストフォーマットなどを適用するためもの。 例えば{{ str }}がabcと表示される箇所に{{ str | capitalize }}のような記述でフィルターを記述するとAbcで値が返されるようになる。 Vue.js 2.xではフィルターはすべて自分で作成する必要がある。 Vue.js 1.x のデフォルトのフィルター Vue.js 1.x以下だと10個のデフォルトのフィルターが存在するが2.x以降では削除されているため、これらは自分で作成する必要がある。 capitalize uppercase lowercase currency pluralize json key debounce filterBy orderBy 以降にVue.jsでよく使用されるカスタムフィルターのサンプルを掲載した。 必要なものを取り入れたり、フ

VS Codeとは 正式名称はVisual Studio Code。Microsoft社が開発したオープンソースのテキストエディタ。 Vue.jsとの相性が良いためVue.jsの開発者のEvan Youなどが使用している。 VS CodeはEmmetやGitなどコーディングを行う上で必須の拡張機能がいくつか最初からインストールされているので使いやすい。 (Extentionsで@builtinで検索すると一覧が見られる) しかし、Vue.jsを使用する上で必要な拡張機能は最初からインストールされている訳ではないため、インストールしたほうが良い拡張機能と設定(settings.json)をまとめた。 以下にVS Codeおすすめ拡張機能を記載した。 Vue.js Extension Pack Vue.js開発でインストールされていることの多い11の拡張機能パック。 vetur vue-pee

Adobe XDでプラグインが使用可能に 2018年10月15日にリリースされたAdobe XD 13からプラグインをインストールできるようになった。 Adobe XDを起動するとメニューにプラグインが追加されている。 Adobe XDでプラグインをインストール Adobe XDでプラグインはメニューの「プラグイン => プラグインを見つける」からインストール可能だ。 以下にAdobe XDの便利すぎる！おすすめプラグインをまとめた。 Adobe XDプラグインのアンインストール Adobe XDプラグインは「インストールされたプラグイン」のインストール済みの左にある「…」からアンインストールできる。 QR Code Maker for XD QRコードを作成するプラグイン。URLを入力するだけでQRコードを生成。 Mimic Rename It 選択したレイヤー名を置換できる。 例えばレ

JavaScriptで国民の祝日を判定 JavaScriptのnew Dateによる日付の処理をしている際に国民の祝日を判定したいことがあります。 たとえば2018年1月1日(月)のような月〜金の曜日でも祝日の場合は(月)のように赤くするなどの処理です。 JavaScriptにはgetHolidayはない JavaScriptには曜日を数値で取得するgetDayはあるが祝日を取得するgetHolidayのようなものはない。 そのため祝日のデータをあらかじめ用意しておく必要がある。 祝日のデータは自分で作成しない 祝日のデータを自分で作成して判定に使用している人をたまに見かけるが、祝日は毎年変わるしデータを自分で作成するのは手間がかかる。 間違った祝日データを作成してしまう可能性もあるので自作は避けたほうがよい。 内閣府から祝日のデータをダウンロード 内閣府のWebサイトには国民の祝日につい

ドットインストールの新着レッスンにtextlint入門があったので見てみたのだが、これだけではtextlintの校正ルールの半分も使用できてない。 ドットインストール textlint入門 レッスンでは textlint-rule-max-ten textlint-rule-preset-japanese textlint-rule-prh linter-textlint などがインストールされていたが、業務で使用する場合、これだけでは足りない。 さらにインストールしたほうが良い校正ルール iwb.jpでは以下の校正ルールを使用している。 使用方法や校正ルールに関しては各GitHub参照 textlint-rule-alex textlint-rule-common-misspellings textlint-rule-date-weekday-mismatch textlint-rule

世はまさに、SCSS + autoprefixer時代!! 現在はCSSファイルを直接編集する機会は激減し、SCSS + autoprefixerでCSSを生成するのが当たり前になってきている。 おかげでコーディングの工数は激減し、autoprefixerを使用していればベンダープレフィックスのつけ忘れもない。 JavaScriptにもベンダープレフィックス追加 しかし、autoprefixerはあくまでCSSにベンダープレフィックスを自動追加するものなので、JavaScriptには追加されない。 ゆえにベンダープレフィックスを必要とするAndroid 4系などはJavaScriptでstyleを追加された際にベンダープレフィックスが付いていないと動かなくなってしまう。 例えばこのようなCSSが適用された要素に… /* <div id="b"></div> */ #b { width: 2

JavaScriptだけでスワイプ処理を実装は以下のようなコードになる。 関数を作成しておけば要素を指定するだけで良い。 function setSwipe(elem) { var t = document.querySelector(elem); var r = document.getElementById('result'); var startX; var startY; var moveX; var moveY; var dist = 30; t.addEventListener('touchstart', function(e) { e.preventDefault(); startX = e.touches[0].pageX; startY = e.touches[0].pageY; }); t.addEventListener('touchmove', function(e

CSSとJavaScriptに最適な環境構築 少し前だとタスクランナーにgruntやgulpなどが使用されていたが、現在はwebpackで作業環境を構築するケースが多い。 最新のwebpack 4なら簡単にCSSとJavaScriptに最適な作業環境を構築できるので劇的な作業効率向上が期待できる。 今回作成したpackage.jsonは下記の通り。以降の説明を見る前にあらかじめnpm installしておくと良い。 { "name": "webpack4", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --open --env.dev", "build": "webpack --env.dev" }, "devDependencies": { "autoprefixer": "^8.4.1", "babel-c

JavaScriptで絵文字を除去する Webサイトで絵文字を入力して送信すると文字化けすることがある。 例えば「😭文字化け」と入力すると「〓j字化け」のようになる。 これを防ぐにはサーバー側の対応が必要だが容易に対応できないことが多い。 この場合JavaScriptで入力時に絵文字を除去すれば簡単に対応できる。 絵文字除去の実装方法 まず下記のJavaScriptの関数を読み込む。 function removeEmoji(t) { var ranges = [ '\ud83c[\udf00-\udfff]', '\ud83d[\udc00-\ude4f]', '\ud83d[\ude80-\udeff]', '\ud7c9[\ude00-\udeff]', '[\u2600-\u27BF]' ]; var reg = new RegExp(ranges.join('|'), 'g')

Puppeteerとは Chromeを操って各種チェックなどを行えるようにするもの。 例えば下記のようなスクリプトを作成してnode test.jsを実行すればChromeが指定した文字列を検索して、さらにスクリーンショットを保存してくれる。 // test.js const puppeteer = require('puppeteer'); puppeteer.launch().then(async browser => { const page = await browser.newPage(); await page.goto('https://www.google.co.jp/'); await page.type('#lst-ib', 'new date'); await page.waitFor(1000); await page.click('.lsb'); await pa