{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/copy-function-of-developer-tools/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"1eeb4a6d-949b-5879-9f8f-ce1840ae041e","excerpt":"こんにちは。開発者ツールネタです。 ChromeでもFirefoxでもSafariでも使える便利な関数が色々あります。 その中の１つcopy関数について紹介したいと思います。 copy…","html":"

こんにちは。開発者ツールネタです。

\n

ChromeでもFirefoxでもSafariでも使える便利な関数が色々あります。
\nその中の１つcopy関数について紹介したいと思います。

\n\n

copy関数とは？

\n

クリップボードに渡した文字列をコピーする関数です。
\n開発者ツールを起動し、コンソールタブを開く。

\n
copy('xxx')
\n

と実行した後にペーストしてみてください。xxxがコピーされてると思います。

\n

一点注意なのが、 このcopy関数は開発者ツール以外では使用できない特殊な関数 です。
\nなので.jsファイルとかにcopyと記述しても「そんな関数無いよ」と言われてしまいます。

\n

便利な使い方

\n

jsでごにょった値をコピーして使う、と言ってしまえばそれまでなんですが、
\n具体的にどんなケースに使えるんだろうという具体例を考えてみます。

\n

他のブラウザではわかりませんが、少なくともChromeではES6のメソッド群が色々使えるので、それらを使ったワンライナーを書いてみたいと思います。

\n

Cookie周りの操作

\n

[HTTPOnly]属性のついてないCookieであれば、jsから操作できます。

\n
copy(document.cookie\n  .split(';')\n  .map(exp => exp.trim())\n  .filter(exp => exp.startsWith('_ga=')))\n  .map(exp => `document.cookie = '${exp}';`)\n  .join(';')
\n

こんなjsを実行すると、_gaという名前のCookieを他のタブへ貼り付けるようのjsとしてコピーできます。

\n

ページのタイトルとURLをコピーする

\n
copy(document.title + 'n' + location.href) // 改行区切り\ncopy(`[${document.title}](${location.href})`) // Markdownのリンク形式
\n

記事書くときに、他サイトから引用したり参考リンクとして貼ったり、という作業を効率化できます。

\n

ページ中のクラス名の一覧を取得する

\n
copy(\n  Object.keys(\n    [].concat(\n      ...Array.from(document.querySelectorAll('[class]'))\n        .map(el => Array.from(el.classList))\n    )\n    .reduce((acc, cls) => Object.assign(acc, { [cls]: 0 }), {})\n  )\n  .sort()\n  .join('n')\n)
\n

ちょっと長いですが、こんな感じでページ中に存在するclass属性の値を全て取得できます。

\n

まとめ

\n

使い方次第で色々な作業を楽にできるので、ぜひ使ってみてください。

","timeToRead":3,"frontmatter":{"title":"開発者ツールで使える便利なcopy関数","tags":["JavaScript"],"date":"November 15, 2016","featuredImage":null}}},"pageContext":{"slug":"/copy-function-of-developer-tools/","previous":{"fields":{"slug":"/how-to-use-redmine-with-docker-in-japanese/"},"frontmatter":{"title":"RedmineのDockerコンテナとMySQLで日本語を使えるようにするまで","tags":["Docker","Docker compose","MySQL","Redmine"]}},"next":{"fields":{"slug":"/first-pull-request/"},"frontmatter":{"title":"自作のOSSライブラリに初めてPRが来た","tags":["Github","OSS","PHP"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}