JavaScriptでAlgoliaのAPIを叩くときに、APP IDとAPIのKEYを引数に渡す必要があるんだけど、それらを外部ファイルにして、Gitにコミットしないようにしたかったけど、webpackの設定をどう書けばいいのかよくわかんなくてつらかったのでメモ。 Vue.jsをwebpac…

Chrome拡張機能のバックグラウンドスクリプトから特定のサイトのcookieの値を取得したくて、その方法について調べた。 developer.chrome.com といっても、の公式ドキュメント書かれてるとおり、 chrome.cookies っていうAPIがChromeに用意されているので、そ…

ユーザーが入力した文字列を元にして、そのキーワードの検索結果ページへリンクしたいけど、そのキーワードをJavaScriptでShift_JISにエンコードしないといけないという仕様を実装した。JavaScriptで文字コードを変換するというのをしたことがなくて調べたの…

かなり疲弊した。バージョンは次のとおり。 "nuxt": "2.4.0" "@storybook/vue": "5.0.11" Nuxt.jsにStorybookを追加 Storybookの公式ドキュメントを参考にした。手動で入れる方法もあるみたいだけど、CLIの方が簡単そうなので任せることに。 npx -p @storybo…

アバター画像とかをCSSで丸くくり抜くときに、img要素にborder-radius: 50%を指定するか、以下のような感じにすれば丸くくり抜きできるけど、画像が正方形じゃなかった場合に縦横比が伸びておかしくなってしまう。 <span class="avatar"> <img src="https://github.com/tacamy.png" alt=""> </span> .avatar { display: inline-block; over…

JavaScriptで2つのオブジェクトの差分を出したいとき、Lodashの omitBy を使うと簡単に書けた。 const before = { a: 1, b: 2, c: 3 } const after = { a: 0, b: 1, c: 3 } const diff = _.omitBy(after, (v, k) => before[k] === v) この場合、 diff の結果…

たとえば、button要素のクリック時にonClickAとonClickBという2つのイベントハンドラを実行したいというケースで。 本来は、👇みたいにちゃんとメソッドにまとめてから指定してあげるべきなんだろうけど、 <button @click="onClick"></button> methods: { onClick() { this.onClickA() this.onCli…

Vue.jsのカスタムディレクティブのフック関数には bind ディレクティブが初めて対象の要素にひも付いた時 inserted ひも付いている要素が親 Node に挿入された時 update ひも付いた要素を抱合しているコンポーネントの VNode が更新される度 componentUpdate…

以前作ったAtomのpackage（プラグイン）に、半年前にissueが立ってて、最近になって他の人からも+1が続いたので修正しようと思ったものの、packageの開発方法とか完全に忘れてて、どうしたらいいのか分からなくて困ったので未来の自分のために残す。 過去に…

vuejs-meetup.connpass.com 申し込んだ時点で213/80人と絶望的だったのですが、たまたまブログ書く枠が空いたので勢いでポチってしまいました。ただ、私はVue.js初心者（※）なのでブログを書けるほど内容が理解できるのかかなり不安でしたが、結果的にどのト…

以前、Pythonを使ってMacでローカルサーバーを簡単に立てる方法を書いたけど、 tacamy.hatenablog.com 新しいMacBookではanyenvにして、（無駄に）Pythonもバージョン管理するようにしたら、SimpleHTTPServerが使えなくてちょっとハマった。 原因は、Python …

花金なので、multiline-tabっていうAtomのプラグインをつくりました atom.io Atomって開いてるタブが多くなると、タブ幅が小さくなりすぎてファイル名が読めない上に、エディタの幅に収まらないタブは横スクロールで画面外に消えてしまって使いづらすぎるの…

jQueryを使わずにAjaxをしたくて、とはいえ生のXHR（XMLHttpRequest ）を扱うのはめんどくさいっていうときに、Fetch APIを使ってみました。そのとき調べたことの覚え書きです。 Fetch APIって？ ここに、Jxck先生のすばらしい記事があります。 jxck.hatenab…

npm-check-updatesというNode.jsのモジュールを使ってみたら便利でしたという話です。 2013年のブックマークとかもあったので、別に新しいものではないと思うけど、私は知らなくて感動したのでした。 なにこれ？ package.jsonに書かれているnpmのバージョン…

なぜgulpfile.jsをES6で書くの？ ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.jsで試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。 他への影響が少ない コードの分量が少ない 実装にあまり頭…

領域をはみ出したときに三点リーダー（…）で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use…

今週の月曜に突如Chrome拡張機能に興味をもって、火曜に勉強を始めて、木曜の今日Chromeウェブストアに公開しました！(∩´∀｀)∩ﾜｰｲ Chrome ウェブストア - 楽天カンタン送料表示 ウェブストアに出てる！！！感慨深い！！！Developer感アル。 どういう機能かと…

ローカルサーバーを立てると、同じネットワークにつながってる別の端末から簡単にアクセスできるようになるから、スマホの表示確認とかに便利。でもいちいち httpd.conf とかいじるのはダルい。このやり方なら一瞬でできるからちょう楽ちん。 ターミナルでサ…

input type=”email” とすると、対応ブラウザの場合、ブラウザ側でバリデーションチェックをして、Email の形式じゃなかった場合はエラーメッセージを表示してくれる。 でもこれがジャマになって止めたいときもある。その場合は form タグに novalidate 属性…

CTO が分かりやすく教えてくれたので、メモ。 公開鍵の基本 公開鍵とは、github や beanstalk、Heroku などの git を使うサービスを利用するときに必要な、~/.ssh 以下につくられるファイル。 公開鍵と秘密鍵 ファイル名の最後に .pub がついている方が公開…

Sass やら Compass やらの普及で、フロントエンドな人も Ruby や gem に触れることが増えたけど、こないだ調子こいて gem をアップデートしたら、rails server でエラーが出て、rails で作られたシステムが起動できなくなってしまった・・。 エラーの内容は…

Movable Type で日付のフォーマットをいじりたいときには、% を使って簡単に設定できます。 例えば、「2013年03月14日 (月)」と表示したいときは、次のように指定します。 <$MTDate format="%Y年%m月%d日 (%a)"$> 詳しくは、日付に関するテンプレートタグの…

初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイ…

普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。 環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸 2 日潰れるという大惨事だったので、ちゃんとブログに…

node をバージョン別に使い分けたりしたかったので、nodebrew なるものを使うことにした（hokaccha++）。 最初は nvm 使ったんだけど、なんかうまくできなかった。 ~/.bashrc に設定書いたら、ターミナル起動するたびに nvm use v0.8.19 とか出てくるのがイ…

超大作は書くのが大変すぎて続かないので、どうでもいいエントリも織り交ぜつつ、ゆるく続けていくことにしました。 今回は、jQuery の勉強でツールチップ書いたときに、謎の現象で困ったのでメモ。 つくったもの jQueryStudy/jquery.tooltip - GitHub 謎の…

勉強のために超簡単な jQuery プラグインを書いてみたら、凄腕 JSer の方々に色々とご指導ご鞭撻いただいたので、忘れないようにメモる。 オレオレ jQuery プラグインテンプレート (function($) { $.fn.pluginName = function(options) { /** * Option */ op…

this はインスタンス自身を指す、ただそれだけの話でしょう？ そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思い…

前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブ…

スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。 スコープの種類 JavaScript のスコープには、グローバル変数とローカル変数の 2 種類あります。 グローバル変数 ローカル変数 関数の外（トップレベル）で宣…