サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
tacamy.hatenablog.com
ユーザーが入力した文字列を元にして、そのキーワードの検索結果ページへリンクしたいけど、そのキーワードをJavaScriptでShift_JISにエンコードしないといけないという仕様を実装した。JavaScriptで文字コードを変換するというのをしたことがなくて調べたので、忘れないうちにメモ。 文字コードをUnicodeからShift_JISに変換 JavaScriptの世界の文字コードはUnicodeなので、まずは、入力されたキーワードをShift_JISに変換する必要がある。 npmにencoding-japaneseというライブラリがあったので、利用することに。 www.npmjs.com ちなみに、文字コードの変換だけだと iconv-lite - npm の方が有名っぽい雰囲気だったけど、encoding-japaneseはURLエンコードもできるからそっちにした。 JavaScr
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 の結果は👇こうなる。 console.log(diff) // { a: 0, b: 1 } 差分がない場合は空のオブジェクトが返ってくる。 ちなみに、 omitBy の第一引数に渡すオブジェクトのkeyとvalueを基にしてもうひとつのオブジェクトの値と比較してるから、👇こんな感じだとDiffは出ない。 after は a っていうkeyしか持ってないから。 const before = { a:
かなり疲弊した。バージョンは次のとおり。 "nuxt": "2.4.0" "@storybook/vue": "5.0.11" Nuxt.jsにStorybookを追加 Storybookの公式ドキュメントを参考にした。手動で入れる方法もあるみたいだけど、CLIの方が簡単そうなので任せることに。 npx -p @storybook/cli sb init --type vue Storybookを起動する 設定ファイルやデモ用のコンポーネントの生成、npm scriptへの追加などはCLIがすべて用意してくれるので、とりあえずもうStorybookの起動はできる。ここまではとても簡単。 npm run storybook アドオンの追加 アドオンは、Storybookの拡張機能みたいなもので、これを使ってStorybookをカスタマイズできる。CLIを実行すると、デフォルトでActions
vuejs-meetup.connpass.com 申し込んだ時点で213/80人と絶望的だったのですが、たまたまブログ書く枠が空いたので勢いでポチってしまいました。ただ、私はVue.js初心者(※)なのでブログを書けるほど内容が理解できるのかかなり不安でしたが、結果的にどのトークも楽しめました(理解したとは言ってない)。なので、同じような初心者の方でも、興味があれば参加してみるとよいのではと思います。 (※)人がつくったアプリ(Vue 1.x)の改修をしたり、開発合宿でミニマムな評価アプリ(Vue 2.x)をギリギリつくった程度のレベルです。 以下、それぞれのトークの内容のメモです。 Vue.js の中身 - 算出プロパティはどうやって動いているか @kitak https://kitak.github.io/slides/170316-vue-meetup/ Vue.jsのようなライブ
以前、Pythonを使ってMacでローカルサーバーを簡単に立てる方法を書いたけど、 tacamy.hatenablog.com 新しいMacBookではanyenvにして、(無駄に)Pythonもバージョン管理するようにしたら、SimpleHTTPServerが使えなくてちょっとハマった。 原因は、Python 2にはあったSimpleHTTPServerという標準ライブラリのモジュールが、Python 3ではhttp.serverというモジュールに統合されたからだった。 要するに、Python 2では $ python -m SimpleHTTPServer [ポート番号] としていたのを、Python 3では $ python -m http.server [ポート番号] にすればいいだけでした。 ありがとうStack Overflow。 stackoverflow.com
npm-check-updatesというNode.jsのモジュールを使ってみたら便利でしたという話です。 2013年のブックマークとかもあったので、別に新しいものではないと思うけど、私は知らなくて感動したのでした。 なにこれ? package.jsonに書かれているnpmのバージョンを、一括で最新に書き変えてくれるNode.jsのモジュール。 ncuコマンドひとつで一度に書き変えできて便利。 実際に書き変える前に確認だけすることもできる。 「メジャーバージョンは固定で、それ以下を最新にしたい」などの細かい設定もオプションで可能。 どんなときに便利なの? 既存のpackage.jsonを流用して、同じnpmをそのまま使いたいけど、バージョンだけは新しくしたいとき。 昔つくったサイトのメンテナンスで、npmのバージョンだけを新しくしたいとき。 使い方 初回のみ、npm-check-update
jQueryを使わずにAjaxをしたくて、とはいえ生のXHR(XMLHttpRequest )を扱うのはめんどくさいっていうときに、Fetch APIを使ってみました。そのとき調べたことの覚え書きです。 Fetch APIって? ここに、Jxck先生のすばらしい記事があります。 jxck.hatenablog.com 正直ぜんぜん理解できてないのですが(🙇)、ものすごくざっくりいうと、 jQueryのAjax並に簡潔に記述できる Promiseベースの設計で、結果はPromiseで返される XHRよりも細かな制御ができる みたいな感じなのかなと思いました。 ちなみに、先の記事では単なるXHRの代わりじゃないと記載されてるので、FetchとかFetch APIの理解にはそちらを読んでもらった方がいいかと思います。。 ブラウザサポート状況 Can I use... Support table
なぜgulpfile.jsをES6で書くの? ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.jsで試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。 他への影響が少ない コードの分量が少ない 実装にあまり頭を使わないで書ける 環境によってはbabel等のトランスパイラをインストールせずにES6がそのまま使える 環境を準備する gulpfile.jsでES6を使えるようにするには、gulp側で対応するか、Node.js側で対応するかどちらかになります。 gulp側でES6に対応する gulpはv3.9.0からbabelを標準サポートするようになったので、babelを介してES6構文を利用できるようになりました。 ただし、ES6構文を使う場合は、ファイル名をgulpfile.babel.jsにする必要があります gulpのバージョ
領域をはみ出したときに三点リーダー(…)で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた!IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま
今週の月曜に突如Chrome拡張機能に興味をもって、火曜に勉強を始めて、木曜の今日Chromeウェブストアに公開しました!(∩´∀`)∩ワーイ Chrome ウェブストア - 楽天カンタン送料表示 ウェブストアに出てる!!!感慨深い!!!Developer感アル。 どういう機能かというと、楽天の商品ページにいくと、画面左下に送料をすぐに見られるためのボタンが表示されるというものです。 楽天の送料ページは、http://www.rakuten.co.jp/shopName/info2.htmlで見られるのですが、いろいろ面倒です。 送料を見るために、商品ページから画面遷移が必要 送料以外の情報も一緒に書かれている 長すぎてどこを見ればいいのかぱっと見で分からない ショップによって送料ページへのリンクの位置がバラバラ これらのことを解決したくて、送料の部分のHTMLだけをスクレイピングして取得
ローカルサーバーを立てると、同じネットワークにつながってる別の端末から簡単にアクセスできるようになるから、スマホの表示確認とかに便利。でもいちいち httpd.conf とかいじるのはダルい。このやり方なら一瞬でできるからちょう楽ちん。 ターミナルでサーバー起動 サーバーのルートにしたいディレクトリまで cd コマンドで移動したら、下記コマンドを実行。 $ python -m SimpleHTTPServer 8888 最後の数字はポート番号で、他に使われていなさそうな番号に適当に変えれば、複数のサーバーを同時に起動できる。 ブラウザで表示確認 localhost で確認 ブラウザのアドレスバーに http://localhost:8888/{ファイル名} と入力して表示確認。 表示できてるなら、ローカルサーバーを立てるのが成功してる。表示できなかったら、ターミナルを見て、さっきのサーバー
input type=”email” とすると、対応ブラウザの場合、ブラウザ側でバリデーションチェックをして、Email の形式じゃなかった場合はエラーメッセージを表示してくれる。 でもこれがジャマになって止めたいときもある。その場合は form タグに novalidate 属性をつければ抑止できるらしい。 <form> <input type="email"> </form> これを、 <form novalidate> <input type="email"> </form> こうするだけ。 Chrome のみで確認。 thx @yomotsu 先生
CTO が分かりやすく教えてくれたので、メモ。 公開鍵の基本 公開鍵とは、github や beanstalk、Heroku などの git を使うサービスを利用するときに必要な、~/.ssh 以下につくられるファイル。 公開鍵と秘密鍵 ファイル名の最後に .pub がついている方が公開鍵、ついていない方が秘密鍵。 公開鍵とは、例えるなら家の鍵穴みたいなもので、誰でも見ることができる。 秘密鍵とは、例えるなら家の鍵で、自分しか持ってないもの。 公開鍵(鍵穴)と秘密鍵(鍵)が一致することで認証される仕組み。 だから、秘密鍵は絶対に公開してはいけない。 rsa と dsa rsa と dsa の違いは、暗号化方式の違い。 利用するサービスの公開キー登録方法の説明を読んでみて、書いてある方を使えばOK。 公開鍵の使い回し サービス間での使い回し サービスごとに別々に鍵を用意して分けてもいいけれど
Sass やら Compass やらの普及で、フロントエンドな人も Ruby や gem に触れることが増えたけど、こないだ調子こいて gem をアップデートしたら、rails server でエラーが出て、rails で作られたシステムが起動できなくなってしまった・・。 エラーの内容はこんな感じだけど、bundler のバージョンはちょっと違ったかも(メモしてなかった)。 /usr/local/rvm/gems/ruby-1.9.3-p385@global/gems/bundler-1.1.5/lib/bundler/rubygems_integration.rb:187:in `stub_source_index170': uninitialized constant Gem::SourceIndex (NameError) ぜんぜん分からなくて泣いていたら、ほ神ら先生が助けてくれたの
Movable Type で日付のフォーマットをいじりたいときには、% を使って簡単に設定できます。 例えば、「2013年03月14日 (月)」と表示したいときは、次のように指定します。 <$MTDate format="%Y年%m月%d日 (%a)"$> 詳しくは、日付に関するテンプレートタグのモディファイアリファレンス を参照。 その感覚で、JavaScript でも同じようなことできると思っていたら、そういうものは無いらしい。 なので、自分でフォーマットを整形したいときは、次のように指定します。 // 今日の日付で Date オブジェクトを作成 var now = new Date(); // 「年」「月」「日」「曜日」を Date オブジェクトから取り出してそれぞれに代入 var y = now.getFullYear(); var m = now.getMonth() + 1;
超大作は書くのが大変すぎて続かないので、どうでもいいエントリも織り交ぜつつ、ゆるく続けていくことにしました。 今回は、jQuery の勉強でツールチップ書いたときに、謎の現象で困ったのでメモ。 つくったもの jQueryStudy/jquery.tooltip - GitHub 謎の現象その1 - チカチカする アニメーションする速度より速く、複数のリスト上を通るようにマウスを高速に動かすと、ツールチップが点滅する・・。 .fadeIn() / .fadeOut() を .show() / .hide() にすれば大丈夫なんだけど・・ん・・? 「あっ!これ、zudo 本で出た問題だ!」 複数の命令を順番に処理するしくみを、キュー(待ち行列)と言います。 キューに貯まった吹き出しの表示・非表示アニメーションの処理は、マウスの操作に追いつきません。 その結果、マウスの動きを止めてからも順番に処
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。 環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸 2 日潰れるという大惨事だったので、ちゃんとブログに残しておく。 Node.js のインストール Node.js の INSTALL ボタンから、インストーラを使って入れることもできるけど、Node.js のバージョンを切り替えて使える方が便利だと思うので、前回のエントリを参考に nodebrew を使ってインストールするのがオススメ。 node.js 入れるなら nodebrew が超簡単 - tacamy memo インストールが正しくできているか確認のため、Node.js のバージョンを表示。 $ node -v npm のインストール Node.js にはたくさ
勉強のために超簡単な jQuery プラグインを書いてみたら、凄腕 JSer の方々に色々とご指導ご鞭撻いただいたので、忘れないようにメモる。 オレオレ jQuery プラグインテンプレート (function($) { $.fn.pluginName = function(options) { /** * Option */ options = $.extend({ opt1: 'val', opt2: 'val' }, options); /** * Core */ return this.each(function() { // Process }); /** * Method */ function _methodName() { }; }; }(jQuery)); /** * Execute */ $(function() { $(".foo").pluginName(); })
node をバージョン別に使い分けたりしたかったので、nodebrew なるものを使うことにした(hokaccha++)。 最初は nvm 使ったんだけど、なんかうまくできなかった。 ~/.bashrc に設定書いたら、ターミナル起動するたびに nvm use v0.8.19 とか出てくるのがイラっとしたのでやめた。 1. nodebrew のインストール ターミナルに以下の 1 行コピペするだけ。超簡単。 curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup 2. 環境設定ファイルにパスを通す いまだに「パスを通す」っていう意味が分かってないけど、これをやらないと、ターミナルを再起動したときに、せっかく入れたツールが使えなくなるっていう認識でおります・・。 私は ~/.bashrc を使っ
this はインスタンス自身を指す、ただそれだけの話でしょう? そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思います。 下記のようなイメージで言葉を使っています。 用語 意味 クラス インスタンスオブジェクトの元となる設計図 コンストラクタ クラスのコード部分で、new したときにコンストラクタの内容で初期化する インスタンス クラスを元に実体化したオブジェクト メンバ変数 クラスやインスタンスに属するローカル変数 メソッド クラスやインスタンスに属する命令(関数) オブジェクト指向とプロトタイプと this JavaScript のオブジェクト指向開発では、元になるクラスを new することで、インスタンスを生成します。
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。 スコープの種類 JavaScript のスコープには、グローバル変数とローカル変数の 2 種類あります。 グローバル変数 ローカル変数 関数の外(トップレベル)で宣言した変数 関数の中で宣言した変数, 関数の仮引数 プログラム全体から参照できる その関数の中でのみ参照できる ブロックスコープは存在しない Java などの言語では、if や for などの {} で囲まれたブロックごとにもブロックスコープがありますが、JavaScript には存在しません。 JavaScript でどうしてもブロックスコープを使いたい場合は、with 命令を使う方法や、無名関数を定義と同時に呼び出すなどの方法で、擬似的にブロックスコープを作ることは可能です。 補足 : let を使うとブロックスコープがつくれると教
JavaScriptでAlgoliaのAPIを叩くときに、APP IDとAPIのKEYを引数に渡す必要があるんだけど、それらを外部ファイルにして、Gitにコミットしないようにしたかったけど、webpackの設定をどう書けばいいのかよくわかんなくてつらかったのでメモ。 Vue.jsをwebpack v4でビルドしてる環境です。 dotenvのインストール $ npm install dotenv --save ほかにもdotenv-webpackとかいろいろあって、どれをつかえば…!ってなってた。 .envの作成 ルート直下に.envという名前のファイルを作成して、以下のような感じで保存する。 APP_ID=***** API_KEY=***** .envをignore .envをGit管理化から除外するために、.gitignoreに.envを追記する。 webpackの設定 webpack
Markdown が使いたくて、はてなダイアリーからはてなブログに引っ越してきました。ちょっと書いては放置してるブログの残骸があちこちに散らかっております。 前回プロトタイプについて勉強してみてふんわり分かった気になったけど、その中で 1 箇所よく分からなかったところがありました。 前回のおさらい Javaと比較しつつ、JavaScriptのプロトタイプについて調べてみる - tacamy memo の「分からなかったところ」を参照。 前回分からなかったところ プロトタイプには次のような特徴がありました。 プロトタイプの中身は、そのオブジェクトを基に生成されたインスタンスから参照される (暗黙の参照) 同じオブジェクトを基に複数のインスタンスを生成した場合、どのインスタンスからも同じプロトタイプの中身 (プロパティ) を参照できる 複数のインスタンスからひとつのプロトタイプを参照しているだ
このページを最初にブックマークしてみませんか?
『tacamy--blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く