{ "version": "https://jsonfeed.org/version/1.1", "title": "Katashin .info", "language": "ja", "home_page_url": "https://katashin.info/", "feed_url": "https://katashin.info/feed/feed.json", "description": "実用的ですぐに開発に役立てることができる Web フロントエンドの話題を書いている Katashin の個人ブログです。", "author": { "name": "Katashin", "url": "https://bsky.app/profile/katashin.bsky.social" }, "items": [ { "id": "https://katashin.info/posts/touch-pointer-cancel/", "url": "https://katashin.info/posts/touch-pointer-cancel/", "title": "タッチデバイスで pointercancel イベントによるドラッグ中断を回避する方法", "content_html": "

高度なインタラクションを持つ UI には、画面上のオブジェクトをつまんで移動するような、ドラッグアンドドロップの実装があります。リスト項目の並べ替えや、ホワイトボードアプリでの自由な要素配置などがその代表例です。Pointer Events API（pointerdown、pointermove など）を使用することで、マウス、タッチ、ペンといった多様な入力デバイスに対応したドラッグアンドドロップ機能を実現できます。

スマートフォンのようなタッチデバイスでは画面のスクロールと競合してドラッグの処理がキャンセルされることがあります。ユーザーが要素をドラッグしようと画面に触れた際、ブラウザーがそのジェスチャーをスクロール操作と解釈すると、pointercancel イベントが発生してドラッグ処理が中断されます。この問題は、スクロール可能な領域内にドラッグ可能な要素を配置した場合に現れます。

以下のデモは、タッチデバイスでスクロールとドラッグが競合して pointercancel イベントが発生する様子を示しています。点線で囲まれた領域はスクロール可能な要素で、画面上部には最後に発生したポインターイベントの種類が表示されます。タッチデバイスで緑の四角形をドラッグしようとすると、ブラウザーがスクロールを優先し、pointercancel イベントが発生することを確認できます。

上記のデモのコード
<div>PointerEvent:&nbsp;<output id=\"output\"></output></div>\n\n<div id=\"scroller\">\n  <div class=\"content\">\n    <div id=\"rect\"></div>\n  </div>\n</div>
body {\n  position: absolute;\n  inset: 0;\n  overflow: clip;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 0;\n  padding: 8px;\n  font-family: sans-serif;\n}\n\np {\n  margin: 0;\n}\n\n#scroller {\n  flex: 1 1 0;\n  overflow: auto;\n  border: 1px dashed black;\n}\n\n.content {\n  position: relative;\n  background: linear-gradient(to bottom, white, gray);\n  height: 600px;\n}\n\n#rect {\n  position: absolute;\n  top: 50px;\n  left: 80px;\n  background: green;\n  width: 50px;\n  height: 50px;\n}
const scroller = document.getElementById('scroller')\nconst output = document.getElementById('output')\n\nscroller.onpointerdown =\n  scroller.onpointermove =\n  scroller.onpointerup =\n  scroller.onpointercancel =\n    printOutput\n\nfunction printOutput(event) {\n  output.textContent = event.type\n}

このようにドラッグがキャンセルされる現象の対策として、touch-action を指定する方法と、touch イベントリスナーで preventDefault() する方法があります。いずれもブラウザーのデフォルトタッチ動作を制御し、開発者が意図したインタラクションを実現するためのアプローチです。

", "date_published": "2025-07-07T00:00:00Z" } , { "id": "https://katashin.info/posts/implicit-type-conversion/", "url": "https://katashin.info/posts/implicit-type-conversion/", "title": "JavaScript の暗黙の型変換とそれを制御するメソッド", "content_html": "

JavaScript では演算子の使用時など、様々な場面で暗黙の型変換が行われますが、この挙動は開発者がカスタマイズできます。例えば、Date オブジェクトを比較演算子で比較できるのは、内部で自動的に数値（ミリ秒）へ変換されるためです。

const date1 = new Date('2025-06-30')\nconst date2 = new Date('2025-07-01')\n\n// 内部的には valueOf() が呼ばれてミリ秒に変換される\nconsole.log(date1 < date2) // true\nconsole.log(date1 > date2) // false
", "date_published": "2025-07-01T00:00:00Z" } , { "id": "https://katashin.info/posts/skyline-algorithm/", "url": "https://katashin.info/posts/skyline-algorithm/", "title": "Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト", "content_html": "

CSS Grid や Flexbox により、CSS だけで表現できるレイアウトの幅が広がりました。しかし、グリッドの枠を超える柔軟な UI は CSS のみでは実装が困難です。例えば、短いメモと画像を二次元に並べる以下の UI は CSS Grid や Flexbox だけでは表現できません。

グリッドで表現できないレイアウト例。メモと画像が2次元配置され、特定の軸に縛られず余白を最小化する並びになっています。下部にメモ入力フォームがあります。

CSS Grid も Flexbox も行や列を定義し、その中に要素を配置するため、行や列にとらわれない UI の実装は困難です。よく使用される Masonry レイアウトは Grid より自由度が高いものの、列か行の片方を厳密に並べるため柔軟性に欠けます。

本記事では Skyline アルゴリズムがこのような柔軟な配置を実現できることを示します。基本的なアルゴリズムを紹介した後、より多くの空きスペースを削減し、より美しいレイアウトを作るための拡張も解説します。

", "date_published": "2025-06-23T00:00:00Z" } , { "id": "https://katashin.info/posts/vue-3.4-computed/", "url": "https://katashin.info/posts/vue-3.4-computed/", "title": "Vue 3.4 で変わった computed の再計算アルゴリズム – 処理順序の逆転による最適化", "content_html": "

Vue 3.4 ではリアクティビティシステムの根幹が改善されました。特に注目すべきはcomputed の挙動変更で、不要な再計算や再レンダリングが大幅に削減され、パフォーマンスが向上しています。

本記事は以前の記事で解説した従来の computed の課題と computedEager の解説を踏まえ、Vue 3.4 での computed の内部実装に焦点を当て、効率化の仕組みを詳しく解説します。

", "date_published": "2025-06-16T00:00:00Z" } , { "id": "https://katashin.info/posts/position-sticky-issue/", "url": "https://katashin.info/posts/position-sticky-issue/", "title": "position: sticky が効かない原因を CSS 仕様から読み解く – スクロールコンテナーと包含ブロック", "content_html": "

position: sticky は、スクロール時に要素を画面上に固定表示する CSS プロパティです。ヘッダーやナビゲーションバー、目次など、スクロール中も常に表示しておきたい要素の実装によく使われます。

しかし、position: sticky を指定しても要素が固定されない問題に遭遇することがあります。この問題を解決するには、CSS の仕様における要素の配置とスクロールの挙動を理解する必要があります。

この記事では、position: sticky が動作しない主な原因とその解決方法を解説します。

", "date_published": "2025-06-09T00:00:00Z" } , { "id": "https://katashin.info/posts/wkwebview-service-worker/", "url": "https://katashin.info/posts/wkwebview-service-worker/", "title": "ハイブリッドアプリの WKWebView で Service Worker を使用する方法", "content_html": "

ハイブリッドアプリは Web 技術で開発したコンテンツをネイティブアプリの WebView で動作させることで、クロスプラットフォーム対応を実現する開発手法です。しかし、単に Web アプリを表示するだけでなく、ネイティブ側の設定が必要になる場合があります。たとえば iOS の WKWebView では、デフォルトで Service Worker が動作しません。この記事では、WKWebView で Service Worker を有効にする設定方法を解説します。

", "date_published": "2025-06-02T00:00:00Z" } , { "id": "https://katashin.info/posts/vue-updated-trigger/", "url": "https://katashin.info/posts/vue-updated-trigger/", "title": "Vue テンプレートが再描画されても onUpdated ライフサイクルフックが実行されないケース", "content_html": "

Vue コンポーネントで DOM 要素の更新を検知したい場合、onUpdated ライフサイクルフックが使えます。例えば以下のコンポーネントでは、ボタンをクリックするたびに count の値が更新され、その値が表示されている DOM 要素も更新されます。その後、onUpdated に登録されたコールバックが実行され、コンソールに Updated と出力されます。

<script setup>\nimport { ref, onUpdated } from 'vue'\n\nconst count = ref(0)\n\nonUpdated(() => {\n  // DOM が更新されたあとに呼ばれる\n  console.log('Updated')\n})\n</script>\n\n<template>\n  <button @click=\"count++\">{{ count }}</button>\n</template>\n

似たライフサイクルフックに onBeforeUpdate もあります。こちらは DOM の更新直前に呼ばれるコールバックです。

この onUpdated や onBeforeUpdate が特定のケースでは実行されない場合があります。この記事ではその現象がどういった時に、なぜ起きるのかを解説し、そのようなケースではどういったコードを書けばよいかを提案します。

", "date_published": "2025-05-26T00:00:00Z" } , { "id": "https://katashin.info/posts/firebase-emulator/", "url": "https://katashin.info/posts/firebase-emulator/", "title": "Firebase をローカルで使うエミュレーターの起動、シードデータの設定、データの永続化方法", "content_html": "

ローカルに自分だけが使える Firebase を起動して、チームメンバーに影響を与えず色々と実験したい場合はありませんか？すでにそういった環境を用意している人でも、エミュレーターを起動するたびにデータを入れ直すことを煩わしく思ってる人もいるのではないでしょうか？

本記事では、Firebase をローカルで使うためのエミュレーターの起動方法から、エミュレーターへのシードデータのインポート方法や、終了後のデータの永続化方法を解説します。

", "date_published": "2023-11-28T00:00:00Z" } , { "id": "https://katashin.info/posts/ios-menu-interaction/", "url": "https://katashin.info/posts/ios-menu-interaction/", "title": "長押しドラッグを活用した iOS のポップオーバーメニューインタラクションを Vue.js で実装する", "content_html": "

iOS の UI は細かいインタラクションが作り込まれていて、使っていて快適です。例えば、iOS のポップオーバーメニューは、タップではなく長押しでもポップオーバーを開くことができ、そのまま指を離さずにメニュー項目に指を動かせば、その項目を選択することができます。以下のデモはその挙動を再現したものです。

また、一部のアプリでは、メニュー項目を選択できる領域が拡大されていることがあり、項目に指が触れていなくても選択できるものもあります。例えば、以下のデモはポップオーバーで絵文字を選択できますが、指を絵文字の上まで動かさなくても、少し下に指を動かすだけで選択できます。これによって、指で選択したい項目が隠れるのを防げます。

この記事では Vue.js を使って、上記のような長押しドラッグによるポップオーバーのメニュー選択インタラクションの実装方法を、実際のコードを交えながら解説します。

", "date_published": "2023-11-20T00:00:00Z" } , { "id": "https://katashin.info/posts/css-spring-animation-library/", "url": "https://katashin.info/posts/css-spring-animation-library/", "title": "直感的なオプションでスプリングアニメーションできる JavaScript ライブラリ CSS Spring Animation", "content_html": "

「難しいことはよくわからないからとりあえずいい感じにアニメーションしてほしい！」

前回、前々回の記事を読んだ方の中にはそう思った人がいるかもしれません。今まで CSS に数式を書いてアニメーションさせる方法や、iOS で使われているスプリングアニメーションを CSS で実装する方法を紹介しましたが、しっかりと理解をして実装をするにはハードルが高かったように思います。今回は、それらの実装を簡単にできる JavaScript ライブラリ CSS Spring Animation を紹介します。

前回、前々回の記事は以下のリンクから読めます。

\"\"

CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く

\"\"

iOS のスプリングを CSS 数式アニメーションで再現する

", "date_published": "2023-10-25T00:00:00Z" } , { "id": "https://katashin.info/posts/spring-animation-math/", "url": "https://katashin.info/posts/spring-animation-math/", "title": "iOS のスプリングを CSS 数式アニメーションで再現する", "content_html": "

「こういうアニメーションを作ってると未来予知したくなるんですよね」

9月30日の複雑 GUI 会に参加した時に、「iOS のラバーバンドスクロールを Web で実装する方法」のラバーバンド実装を見せた時にこんな事を言いました。物理演算を取り入れたアニメーションはフレームごとに次の位置を計算するため、例えば1秒後にどこにいるのかを事前に知ることはできないので、数式を使って計算したくなるという話でした。

この話をしたら、参加者の方に WWDC 2023 で発表された Animate with springs を教えていただきました。iOS では、従来物理演算で行われていたスプリングアニメーション（Spring Animation）を数式で表現していることが解説されていて、実際の数式も紹介されており、とても興味深いものでした。

数式によるスプリングアニメーションの実装を Web に持ってこれたらおもしろいのではないかと思い、何度も動画を視聴し、数式の理解を試みました。ある程度 Web で動かせるようになるまで理解が進んだので、本記事ではその数式の解説と、簡単な実装の紹介をします。

", "date_published": "2023-10-16T00:00:00Z" } , { "id": "https://katashin.info/posts/css-math-animation/", "url": "https://katashin.info/posts/css-math-animation/", "title": "CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く", "content_html": "

cubic-bezier() をやめてこれからは数式で CSS アニメーションを書いていこうと思います。cubic-bezier() には簡単にアニメーションのイージングを書けるというメリットがありますが、凝ったことをしようとすると表現力が足りない問題に直面します。例えば、ユーザーが直前に行った操作に応じてアニメーションに初速をかけたい時、CSS アニメーションでやるのは難しいので、JavaScript で実装するというのが一般的です。

しかし、最近の CSS では、アニメーションさせたいプロパティに数式を記述することで、初速を考慮したイージングを実現できます。以下のデモは初速を考慮した CSS アニメーションの実装です。（記事執筆時点で Firefox に未実装の機能を使用しているので、Firefox 以外のブラウザーで見てください）

これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。

\"\"

iOS のスプリングを CSS 数式アニメーションで再現する

この記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。

", "date_published": "2023-10-09T00:00:00Z" } , { "id": "https://katashin.info/posts/tweetbot-interaction/", "url": "https://katashin.info/posts/tweetbot-interaction/", "title": "今はなき Tweetbot の至高のインタラクションを高校数学と物理を使って再現する", "content_html": "

iOS の Twitter（現X）クライアントに Tweetbot というアプリがありました。全 Twitter クライアントの中でインタラクションの出来が群を抜いており、筆者はこのアプリのインタラクションが気持ち良くて愛用していました。

筆者が Tweetbot のインタラクションの中で最も好きなのが、ツイートの画像タップで拡大表示した後、その画像をドラッグすることで、カードのように画面外に飛ばし、拡大表示を閉じれるというものです。そのカード飛ばしインタラクションを再現したものが以下のデモです。

このインタラクションの気持ち良さは、ただ画像が飛んでいくだけでなく、ドラッグに合わせて自然に画像が回転し、ドラッグ後もくるくると回転しながら飛んでいくところにあります。実装も興味深く、高校数学や物理で学んだことを組み合わせる必要があります。

本記事では、この Tweetbot のカード飛ばしインタラクションの実装について解説します。高校までの数学や物理の話が出てきますが、なるべく図を使い、平易な解説を行います。また、本記事の最後に、このインタラクションの HTML、CSS、JavaScript コードの全体を掲載しています。

", "date_published": "2023-09-25T00:00:00Z" } , { "id": "https://katashin.info/posts/seamless-transition/", "url": "https://katashin.info/posts/seamless-transition/", "title": "シームレスな画面遷移アニメーションの Vue Router を使った実装パターン", "content_html": "

以下のようにシームレスな（繋ぎ目のない）画面遷移を実装するとしたら、どのように実装しますか？それぞれのカードをクリックするとカードが拡大され、そのコンテンツ全体が見れるようになります。

この実装はカード一覧ページと、コンテンツ全体が見れるページの2ページで構成されていて、画面遷移の処理を工夫することで、シームレスな見せ方をしています。

シームレスな画面遷移は、要素同士の関連性を強調したり、アプリへの没入感を高めるなどのメリットがありますが、実装難易度が高く、コードのメンテナビリティが下がりやすいというデメリットもあります。

本記事では、このようなシームレスな画面遷移を実装する難しさを説明してから、Vue.js を使った実際のコードを交えながらその実装方法について解説します。

", "date_published": "2023-09-19T00:00:00Z" } , { "id": "https://katashin.info/posts/window-prompt-vuejs/", "url": "https://katashin.info/posts/window-prompt-vuejs/", "title": "window.prompt を Vue.js で再発明する", "content_html": "

window.prompt は JavaScript を一行書くだけでユーザーのテキスト入力を取得できる優れた API です。以下のように window.prompt を呼ぶだけで入力フォーム付きのダイアログが開き、戻り値でユーザーが入力した文字列を取得できます。

<script setup>\nimport { ref } from 'vue'\n\nconst list = ref([])\n\nfunction onAdd() {\n  const input = window.prompt('追加する文字列を入力してください')\n  if (input) {\n    list.value.push(input)\n  }\n}\n</script>\n\n<template>\n  <button type=\"button\" @click=\"onAdd\">追加</button>\n\n  <ul>\n    <li v-for=\"(item, i) in list\" :key=\"i\">{{ item }}</li>\n  </ul>\n</template>

しかし、実際のアプリケーションでは独自ダイアログを実装することがほとんどです。window.prompt によって開かれるダイアログは、デザインや機能をカスタマイズできないためです。独自ダイアログが window.prompt と同様の使い勝手であれば良いのですが、大抵の実装には以降の節で解説する問題点があります。

本記事では、Vue.js で独自ダイアログを実装する例を通して、その実装によくある問題点を解説し、どうすれば window.prompt のようなシンプルなインターフェースの実装ができるかを解説します。

", "date_published": "2023-09-11T00:00:00Z" } , { "id": "https://katashin.info/posts/dialog-pitfalls/", "url": "https://katashin.info/posts/dialog-pitfalls/", "title": "アクションシートの実装から学ぶ <dialog> 要素を使う時の3つの落とし穴", "content_html": "

<dialog> 要素が主要なブラウザすべてに実装され、現実的に使えるようになってきましたが、これをそのまま実際の Web アプリで使うには様々なものが足りません。足りないものを自分で実装していくと、分かりづらい挙動があったり、癖のある実装が必要なことがあります。例えば、<dialog> 要素のデフォルトは中央揃えで、コンテンツに合わせたサイズになりますが、これの位置、サイズ調整やアニメーションをする際に落とし穴があります。

本記事では、以下のアクションシートのようなモーダルを実装する例を通して、<dialog> 要素を使う時の3つの落とし穴を紹介します。

", "date_published": "2023-08-28T00:00:00Z" } , { "id": "https://katashin.info/posts/animation-debug/", "url": "https://katashin.info/posts/animation-debug/", "title": "たった一つの変数でアニメーションのデバッグを簡単にする実装パターン", "content_html": "

アニメーションを実装した時、そのアニメーションを観察してどこか違和感を感じた経験はありませんか？例えば、以下のデモは項目の追加時には高さが 0 から伸び、削除時には縮むアニメーションをしますが、これに違和感を感じる人もいるかもしれません。

このような場合、アニメーションの動きが速くて目立たない部分に、意図とは違う挙動、つまりバグが隠れている時があります。本記事では、こういったアニメーションのバグを見つけるデバッグの仕方や、デバッグを簡単にする実装パターンを紹介します。

", "date_published": "2023-08-21T00:00:00Z" } , { "id": "https://katashin.info/posts/feature-flag/", "url": "https://katashin.info/posts/feature-flag/", "title": "お祈りデプロイを避けるためのフィーチャーフラグ運用", "content_html": "

「今日リリースの機能ですが、マージ前に軽くレビューしてもらえますか？」

同僚にそう言われてプルリクエストを見ると1000行以上の差分がある。たしかにこの機能は大きく、開発の完了まで本番環境にリリースしてしまわないようにブランチを分けていたのだが、そうは言っても差分が大きすぎてレビューが大変そうだ。リリースまでの時間もないし、軽く動作チェックをして、問題がないことを祈ろう……

チーム開発でレビュワーの経験がある人なら、このような状況に覚えがある人もいるでしょう。しかもこういうのは大抵タイムリミットが短く、最終的には時間がないので問題が起きないことを祈りながら Approve するのです。検証やテストが不十分なまま、問題が起きないことを祈りながら本番環境にデプロイすることを俗にお祈りデプロイと呼ぶこともありますが、これはできたら避けるべきです。

筆者はこれに対処するため、フィーチャーフラグを用いた開発を数年間試したところ、開発体験が良くなった感触を得ています。この記事ではフィーチャーフラグの解説を交え、筆者が実際に試した開発方法を紹介します。

", "date_published": "2023-08-14T00:00:00Z" } , { "id": "https://katashin.info/posts/undo/", "url": "https://katashin.info/posts/undo/", "title": "操作データから逆操作を生成しUndo（元に戻す）機能を実装するパターン", "content_html": "

リッチなアプリを開発していると、Undo（元に戻す） 機能を自分で実装する必要が出てきます。canvas を使った図形の描画などはブラウザデフォルトの Undo 機能が使えず、自分で実装しなければならない代表例です。Undo の実装にはパターンがあり、それを理解することで様々なアプリへの Undo の実装がしやすくなります。

この記事では、JavaScript による簡単なデザインツールのデモを通して、Undo の実装パターンと、具体的な実装例を解説します。

", "date_published": "2023-08-07T00:00:00Z" } , { "id": "https://katashin.info/posts/rubber-band/", "url": "https://katashin.info/posts/rubber-band/", "title": "iOS のラバーバンドスクロールを Web で実装する方法", "content_html": "

普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか？その挙動をどう実装するか考えたことはありますか？

この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、ほとんどの人はあまり意識せずに iOS デバイスを使っていると思います。今では当たり前のこの挙動は、iOS の使っていて気持ちのいい UI に大きく寄与しています。

本記事では、この挙動をラバーバンド効果と呼び、単純化した例を通じてその実装方法を解説します。

", "date_published": "2023-07-31T00:00:00Z" } , { "id": "https://katashin.info/posts/visual-viewport-api/", "url": "https://katashin.info/posts/visual-viewport-api/", "title": "バーチャルキーボード張り付き UI と Visual Viewport API", "content_html": "

以前は Web で実装するのが難しくてモバイルアプリで実装するしかない UI がありました。その一つがバーチャルキーボードの上に要素を張り付けて配置する UI です。LINE のような画面下に入力フォームがあるチャットアプリはそのような UI の代表例です。

2023年7月現在は主要なブラウザに Visual Viewport API が実装され、バーチャルキーボードの高さを計算し、それを利用した要素の配置が容易です。この記事では Visual Viewport API を使ってスクロールや拡大率によらずバーチャルキーボードの上に要素を張り付ける方法を解説し、この API の前提知識となる Visual Viewport と Layout Viewport について解説します。

", "date_published": "2023-07-24T00:00:00Z" } , { "id": "https://katashin.info/posts/eager-computed/", "url": "https://katashin.info/posts/eager-computed/", "title": "Vue.js パフォーマンスチューニングの最終手段 computedEager", "content_html": "追記: Vue 3.4 以降では computed の値が変わったかどうかが判定されるようになりました。現在はもう computedEager を使う必要はありません。以下の記事でその改善について詳しく解説しています。
\"\"

Vue 3.4 で変わった computed の再計算アルゴリズム – 処理順序の逆転による最適化

「これを computed のかわりに使うとパフォーマンスが良くなる」

先日 computedEager というユーティリティが使われているのを見て、使っている理由を聞いたらこういった答えをいただきました。たしかに computedEager でパフォーマンスを改善できる場合がありますが、使い方を間違えると逆に悪化させてしまう可能性もあります。この記事では computedEager の仕組みを深掘りしていき、どのような使い方が有効なのかを解説します。

", "date_published": "2023-07-17T00:00:00Z" } , { "id": "https://katashin.info/posts/flip-animation/", "url": "https://katashin.info/posts/flip-animation/", "title": "アニメーションの実装が劇的に簡単になるFLIPテクニック", "content_html": "

アニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか？FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。

", "date_published": "2023-07-10T00:00:00Z" } , { "id": "https://katashin.info/2019/04/28/261/", "url": "https://katashin.info/2019/04/28/261/", "title": "Vue テンプレート内の式の型チェックと解析ができるまで", "content_html": "

Vue の TypeScript 対応は v2.0 から公式に型定義がサポートされるようになったり、v2.5 で Vue.extend を使ったときに this の型が推論されるようになったりと、改善が何度も行われています。

しかし、課題はまだたくさんあり、その中でもよく聞くのが、テンプレート内の式の型チェックがされないという課題でした。TypeScript はテンプレートを解釈できないので当たり前ですが、もしそれが解決できたらより安全になるでしょうし、開発体験も向上すると思います。

そしてこの課題は Vetur の最新版で解決されました。

", "date_published": "2019-04-28T00:00:00Z" } , { "id": "https://katashin.info/2018/12/18/247/", "url": "https://katashin.info/2018/12/18/247/", "title": "任意の背景色に対して読みやすい文字色を選択する方法", "content_html": "

GitHub の Issue ラベルなど、任意の色の中に文字を入れたい場合があります。このとき文字色が一色のみだと、背景色と似たような色のときに読みづらくなってしまいます。

以下のスクショでわかるように、GitHub は背景色によって文字色を黒か白のどちらにするかを計算しているようです。

\"\"

個々のサービスの実装についてはわかりませんが、WCAG (Web Content Accessibility Guidelines) で定義されているコントラスト比を使うことで、背景色に対して読みやすい文字色を選択することができます。

", "date_published": "2018-12-17T00:00:00Z" } , { "id": "https://katashin.info/2018/08/26/236/", "url": "https://katashin.info/2018/08/26/236/", "title": "GraphQL の情報を雑にまとめる", "content_html": "

最近 GraphQL を使うことがあり、いろいろ調べたりしていることをメモしておきます。自分が必要なものしかまとめてないので情報には偏りがあります (具体的には Apollo、TypeScript や Ruby あたりに偏ってます)。

GraphQL / Apollo まわりのテストの話は別の記事で詳しく書くかもしれないです。

", "date_published": "2018-08-26T00:00:00Z" } , { "id": "https://katashin.info/2018/07/16/233/", "url": "https://katashin.info/2018/07/16/233/", "title": "Nuxt.js のような自動ルーティングを可能にする Vue CLI プラグインを作った", "content_html": "

Nuxt.js という Vue.js で SSR をするアプリケーションが簡単に書けるフレームワークがあります。Nuxt.js は SSR だけでなく、webpack の設定やディレクトリ構造なども最初から決められており、規約がすでに存在することによる開発の効率化の面においても注目されています。

個人的に Nuxt.js で便利だと感じている機能にルーティングの自動解決とレイアウト機能があります。通常の Vue Router を使ったアプリではルーティングの設定は自分で書く必要がありますが、Nuxt.js では pages/ ディレクトリ以下の構造から自動的にルーティングの設定を生成してくれます。また、Rails のレイアウトのように、各ページごとにレイアウトファイルを指定することができます。

これらの機能に慣れてしまうと、Nuxt.js を使っていないプロジェクトにおいて自分でルーティングの設定を書くのがとても面倒になってきたので、Nuxt.js じゃなくてもいい感じにする Vue CLI プラグインを書きました。

vue-cli-plugin-auto-routing

また、vue-cli-plugin-auto-routing は独立したパッケージを組み合わせているので Vue CLI プラグインを使えない環境の場合は以下の2つを直接使うと良いです。

vue-auto-routing: ルーティングの設定をディレクトリ構造から生成する webpack プラグイン vue-router-layout: レイアウト機能を提供するコンポーネント

", "date_published": "2018-07-16T00:00:00Z" } , { "id": "https://katashin.info/2018/07/09/231/", "url": "https://katashin.info/2018/07/09/231/", "title": "vue-thin-modal v1.0.0 をリリースしました", "content_html": "

去年から作っていた Vue のモーダルコンポーネント vue-thin-modal の v1.0.0 をリリースしました。仕事でも結構使っていて、特に大きな問題もなく、API も安定しているのでメジャーバージョンを上げました。

vue-thin-modal は世の中の多くのつらいモーダル実装を見て、つらくならなくするために作ったライブラリです。主に以下のような特徴があります。

モーダルのつらさについては CodeGrid 5周年記念パーティーで話しているので、そのスライドも見てみてください。

vue-thin-modal を作る際には Bootstrap Modal や Modaal をかなり参考にしました。特に Bootstrap Modal の作り込みはすごくて、その完成度の高さに驚いた覚えがあります。

関連ライブラリとして vuex-modal というものもあります。こちらは vue-thin-modal を作る前に作ったものですが、今は内部で vue-thin-modal を使用しています。

自分の欲しい機能はすべて実装したので、これからの展望は特にないですが、バグレポートや機能要望などは歓迎です！

", "date_published": "2018-07-09T00:00:00Z" } , { "id": "https://katashin.info/2018/06/07/227/", "url": "https://katashin.info/2018/06/07/227/", "title": "SSR + vue-meta で hydration 直後の変更が反映されない問題の対策", "content_html": "", "date_published": "2018-06-07T00:00:00Z" } , { "id": "https://katashin.info/2018/02/24/221/", "url": "https://katashin.info/2018/02/24/221/", "title": "TypeScript Compiler API の基本的な使い方、コード例と作ってみたもの", "content_html": "

2月20日 (火) に JavaScript メタプログラミング勉強会 Metapro.es という勉強会があり、そこで TypeScript (TS) Compiler API について LT しました。内容は TS Compiler API の基本的な使い方を話したものですが、短い時間で話しきれる内容でなかったのと、TS Compiler API の日本語資料は少ないので、ここに補足記事を書いておきます。

また、example コードを Github に置いているので、適宜参照・実行しながら読むと理解しやすいかもしれません。

", "date_published": "2018-02-24T00:00:00Z" } , { "id": "https://katashin.info/2017/11/12/218/", "url": "https://katashin.info/2017/11/12/218/", "title": "Vue のテンプレートの型チェックについて", "content_html": "

静的型が好きな人と話していると大体テンプレートの型をチェックしたいという話を聞くのですが、Vue には今のところそれをうまく行う方法はありません。

すこし前に Vue のテンプレートの型チェックについて LT したのですが、これは vue-class-component などの Vue 標準の API から離れた書き方を強制するのでちょっと微妙な感じでした。これは、以前は Vue のコンポーネントの this の型を得るためには、クラス構文を使う必要があったためです。

しかし、TypeScript v2.3 に導入された ThisType によって、オブジェクトリテラル内部のメソッドの this の型推論が行えるようになったのと、 Vue v2.5 から、TypeScript の型定義が大きく改善されたことで、Vue 標準の API を使っても this の型をうまく得ることができるようになりました。

良い機会なので、上記の LT をした時に作ったものを更新して、標準の API でもテンプレートの型チェックをできるようにしてみました。

typed-vue-loader をクローンして、npm i && npm run example:dev した後に、example ディレクトリのソースを編集すると動作がわかると思います。

pic.twitter.com/8DDeyFFnK9

— katashin (@ktsn) November 12, 2017

ただし、この実装ではコンパイル時に型チェックができるだけであり、エラーが発生している場所はわからないですし、エディタ上で型情報を利用した補完機能を利用するということはできないです。そのあたりを頑張ろうとして作ったのが以下です。

vue-template-diagnostic

vue-template-diagnostic の発想は Angular と同じで、自分で型チェッカーを作ってしまおうというものです。しかし、やはり型チェッカーを再実装するのは結構つらいのと、Vue のテンプレート内部の式はほぼ JavaScript と互換性を持っているので、うまいこと TypeScript で処理させたほうが良さそうだなーと感じ、開発は止まってます。

エラーの場所がわからないということに目をつぶれば、typed-vue-template でやっていることを AST に対して行う Language Service を作れば、テンプレートの型チェック処理を TypeScript に丸投げしつつエディタからその情報を取れそうな気がするので、次はそれを試してみようかなと考えてます。

", "date_published": "2017-11-12T00:00:00Z" } , { "id": "https://katashin.info/2016/06/06/213/", "url": "https://katashin.info/2016/06/06/213/", "title": "TypeScript の恩恵を受けつつ Vue を使いたい その2 (Value オブジェクトを扱う)", "content_html": "

せっかく型のある TypeScript を使うなら、なるべくプリミティブを使わずに Value オブジェクトを使いたいです。この記事では TypeScript + Vue で Value オブジェクトを扱うためにいろいろと考えたり、試したことを述べます。この記事に書かれていることは Vue 公式にはあまり推奨されない (と思われる) 方法なので、採用する場合には注意してください。

", "date_published": "2016-06-05T00:00:00Z" } , { "id": "https://katashin.info/2016/05/29/199/", "url": "https://katashin.info/2016/05/29/199/", "title": "TypeScript の恩恵を受けつつ Vue を使いたい その1", "content_html": "

最近 TypeScript の恩恵を受けつつ Vue を使うためにいろいろと試行錯誤しています。この記事ではコンポーネントの定義と、コンポーネント内のロジックを再利用可能にするための Mixin の定義を TypeScript でどのように書けばよいかを述べます。

", "date_published": "2016-05-29T00:00:00Z" } , { "id": "https://katashin.info/2016/05/22/196/", "url": "https://katashin.info/2016/05/22/196/", "title": "vq にイベントハンドリングの機能を実装した", "content_html": "

vq v1.1.1 をリリースしました。主な更新点は、イベントハンドリング機能の追加です。

vq は複雑なアニメーションを簡潔に書くことを目指しているライブラリで、関数型プログラミングの考え方から着想を得ています。今回の更新点以外の詳しい説明は以前書いた記事や README を参照してください。

", "date_published": "2016-05-22T00:00:00Z" } , { "id": "https://katashin.info/2016/04/24/190/", "url": "https://katashin.info/2016/04/24/190/", "title": "Vue のコンポーネントと Vuex Store を繋げるためのヘルパ vuex-connect を作った", "content_html": "

某勉強会中にネタを思いついて、急いで作って LT してその日のうちに npm にアップしたら、翌日Vue 公式に紹介されていてだいぶビビったやつです。Vue と Vuex のヘルパなので、この二つを理解していることが前提になります。

vuex-connect (Github) vuex-connect (npm)

", "date_published": "2016-04-24T00:00:00Z" } , { "id": "https://katashin.info/2016/04/10/184/", "url": "https://katashin.info/2016/04/10/184/", "title": "テキスト編集における Selective Undo を実装した", "content_html": "

Selective Undo とは、その名の通り Undo したい処理を選択することのできる Undo のことです。テキスト編集で Selective Undo をするためのライブラリを書いたので、それを実装する上で学んだことを簡単に述べます。

", "date_published": "2016-04-10T00:00:00Z" } , { "id": "https://katashin.info/2016/03/28/179/", "url": "https://katashin.info/2016/03/28/179/", "title": "webpack + Testem でフロントエンド JavaScript のテストを書く", "content_html": "

webpack を使っているプロジェクトで、テストコードも webpack で依存関係の解決やトランスパイルをしたいということがあったので、その時に行ったことをまとめます。

", "date_published": "2016-03-28T00:00:00Z" } , { "id": "https://katashin.info/2016/03/05/172/", "url": "https://katashin.info/2016/03/05/172/", "title": "Vue.js における methods の this は自動的に VM に束縛される", "content_html": "

執筆当時の環境

JavaScript で以下の様なコードを書いた時、onResize 内の this はグローバルオブジェクト (window) となり、this.log('resized') はエラーとなります。

const obj = {\n  log: function (str) {\n    console.log(str)\n  },\n\n  onResize: function (event) {\n    this.log('resized')\n  },\n}\n\nwindow.addEventListener('resize', obj.onResize) // this.log('resized') でエラー

上記のコードの obj を、以下のように Vue.js の VM にするとエラーが起きなくなり、意図した通りに動作するようになります。また、this の値は obj に束縛されています。

const obj = new Vue({\n  methods: {\n    log: function (str) {\n      console.log(str)\n    },\n\n    onResize: function (event) {\n      this.log('resized')\n    },\n  },\n})\n\nwindow.addEventListener('resize', obj.onResize) // エラーが発生しない

このことから、Vue.js では methods に渡された関数を VM に束縛していると言えます。実際にコードを追って確かめてみます。

methods で Github のリポジトリを検索すると、 _initMethods というメソッドが存在しているのがわかります。このメソッドは src/instance/internal/state.js の中に定義されています。_initMethods の中を見てみると、bind(methods[key], this) という記述があります。JavaScript ネイティブの bind ではないですが、どうやらここで this を束縛しているように見えます。

vue/state.js at 521e8d2754c2e7f172c3c9702fdb74fe993027fb · vuejs/vue

なぜわざわざ独自の bind 関数を使っているのかを調べるために、この bind の定義も見てみました。bind は src/util/lang.js に定義されています。

vue/lang.js at 521e8d2754c2e7f172c3c9702fdb74fe993027fb · vuejs/vue

関数の上のコメントには、ネイティブの bind よりも早いと書いてあります。少し調べてみたところネイティブの bind は、this の束縛の他に型チェックや、引数の束縛なども行うため遅くなっているとのことでした。ただ、遅いとはいってもほとんどのケースでは気にならない違いだと思うので、普通にアプリケーションを作る際には気にしなくても良さそうです。

javascript - Why is bind slower than a closure? - Stack Overflow

", "date_published": "2016-03-05T00:00:00Z" } , { "id": "https://katashin.info/2016/02/28/164/", "url": "https://katashin.info/2016/02/28/164/", "title": "JavaScript ライブラリを npm で公開するためにやっていること", "content_html": "

最近、何度か自作のライブラリを npm にアップしています。その時にやっていることを書き留めておきます。

", "date_published": "2016-02-27T00:00:00Z" } , { "id": "https://katashin.info/2016/02/08/159/", "url": "https://katashin.info/2016/02/08/159/", "title": "複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った", "content_html": "

最近 JavaScript のアニメーションの実装につらみを感じていたので、それを解消するためにライブラリを作りました。 vq というライブラリで、Velocity.js というライブラリのヘルパーという位置づけです。 内部のアニメーションは Velocity.js にまかせていて、vq は記述を簡潔に書けるようにしています。

vq - GitHub vq - NPM

", "date_published": "2016-02-07T00:00:00Z" } , { "id": "https://katashin.info/2016/01/31/136/", "url": "https://katashin.info/2016/01/31/136/", "title": "XCode で動作環境に応じて API の URL などの設定を変更する", "content_html": "

OSX, iOS アプリでも Rails の RAILS_ENV のように、動作環境に応じて値を変えたいという時があります。 この記事では、アプリから利用する Web API の URL を動作環境に応じて切り替えるのを例に、そのやり方を説明します。執筆時の開発環境は下記のとおりです。

", "date_published": "2016-01-31T00:00:00Z" } , { "id": "https://katashin.info/2016/01/16/126/", "url": "https://katashin.info/2016/01/16/126/", "title": "指定した行数でテキストを省略できるライブラリ Truncator を作った", "content_html": "

N 文字目以降を省略するというライブラリはたくさんあるのですが、行数指定できるものは見かけないので作りました。N 行以上になった時は省略したいというケースは結構ある気がするんですが、なぜそういうライブラリは無いのだろう......。

Truncator - NPM Truncator - Github

", "date_published": "2016-01-16T00:00:00Z" } , { "id": "https://katashin.info/2016/01/09/121/", "url": "https://katashin.info/2016/01/09/121/", "title": "Bookshelf のアソシエーションで発生する循環読み込みによるエラーを回避する", "content_html": "

Node.js の ORM である Bookshelf では公式サイトの例のようにアソシエーションを定義することができます。 しかし、モデルの定義を別ファイルに分けるとこの例が動かなくなります。 この記事では、モデルの定義を別ファイルに分けても意図通りに動くコードの書き方の説明と、それを支援する Bookshelf プラグインの紹介をします。

", "date_published": "2016-01-09T00:00:00Z" } , { "id": "https://katashin.info/2015/11/28/97/", "url": "https://katashin.info/2015/11/28/97/", "title": "State パターンでアニメーションの挙動を制御する", "content_html": "

あるオブジェクトが絶えずアニメーションをするようなコードを書く時、様々な状態に応じて挙動を変えたいというのはよくあることだと思います。単純に実装すると、状態に対応するフラグを記録しておき、それに応じて条件分岐するという書き方になると思います。しかし、状態の数が増えると、フラグ管理が大変になり、コードがどんどん汚くなっていきます。そこで、State パターンのように、状態ごとに別々の挙動を行う関数を定義し、オブジェクトの状態が遷移した時に実行する関数を切り替えるようにすると、コードが状態ごとに整理され、見やすくなります。

", "date_published": "2015-11-28T00:00:00Z" } , { "id": "https://katashin.info/2015/10/18/72/", "url": "https://katashin.info/2015/10/18/72/", "title": "Vue.js を使った中規模 Web アプリ向けのディレクトリ構造を考えた", "content_html": "

最近 Vue.js を使って Web アプリを書いていて、どんなディレクトリ構造だと良いんだろうなーということを考えた結果を書きとめようと思います。Angular Best Practice for App Structureっぽい感じです。

", "date_published": "2015-10-18T00:00:00Z" } , { "id": "https://katashin.info/2015/01/05/58/", "url": "https://katashin.info/2015/01/05/58/", "title": "2014年に読んだ技術書の中で良いと思ったもの三冊", "content_html": "

もう年明けてしまいましたが、僕が2014年に読んだ技術書の中で良いと思ったものを三冊紹介します。ちなみに、筆者は普段 Web 系のコードを主に書いているので、読んでる本もそういったものに偏り気味です。

", "date_published": "2015-01-04T00:00:00Z" } , { "id": "https://katashin.info/2014/07/05/47/", "url": "https://katashin.info/2014/07/05/47/", "title": "Objective-C でデリゲートメソッド内でコールバックできるようにする", "content_html": "

Objective-C では非同期処理の完了後の処理をデリゲートメソッドで行うものがあります。デリゲートメソッドで処理するのは、単純なシステムなら問題ありませんが、システムが複雑になってくると、1つのデリゲートメソッド内に多くの条件分岐ができて、コードが読みにくくなる場合があります。こういった時にはデリゲートメソッドの代わりにコールバック関数を用いることで、コードがすっきりします。既に存在するライブラリが、非同期処理完了後の処理をデリゲートメソッドで実行するようにしている場合は、デリゲートメソッド内でコールバック関数を呼ぶようなラッパークラスを書く必要があります。コールバック関数については以前の投稿を読むと分かるかもしれません (Objective-C でコールバックを持つメソッドを実装する方法について)。

非同期処理完了後の処理をデリゲートメソッドで行うと以下のようになります。例として、WebSocket ライブラリの square/SocketRocket を用いています。今回は説明を簡単にするために、クライアントが送信したメッセージを受け取ったら、即座に同一のメッセージを返すサーバーを仮定します。

// メッセージ送信\n- (void)sendMessage:(NSString *)message {\n  [_socket send:message];\n}\n\n// メッセージ受信 (SocketRocket のデリゲートメソッド)\n- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message {\n  // メッセージ受信後の処理を書く\n  NSLog(@\"%@\", message);\n}

メッセージ受信後に1つの処理のみを行うのであれば上記で充分ですが、場合によって異なる種類の処理を行いたい場合は工夫をする必要があります。例えば、サーバーから受け取るメッセージの種類によって処理を分けたい場合は、サーバーから受け取ったメッセージ内に、type のようなパラメータを加えて、デリゲートメソッド内で条件分岐をするということが考えられます。また、上記の sendMessage メソッドを呼び出すクラスが複数あり、クラス毎にメッセージ受信後の処理が違うというような場合は、デリゲートメソッドのみでは対応できません。こういった場合は、NSNotificationCenter を使った通知で条件分岐をするとうまくいきます。また、sendMessage メソッドの引数でコールバック関数のポインタを渡すようにし、デリゲートメソッド内でそのコールバック関数を呼ぶことでも対応できます。今回は、デリゲートメソッド内でこのコールバック関数を呼ぶ方法を説明します。

デリゲートメソッド内でコールバック関数を呼ぶには、インスタンス変数にコールバック関数を保存する必要があります。また、非同期処理を行うメソッドは並列で実行される可能性があるため、コールバック関数は複数保存可能で、かつ、デリゲートメソッド内で対応するコールバック関数を判別可能であるべきです。これらは以下の様なコードで実現できます。ここでも、サーバーはクライアントから受け取ったメッセージを即座にそのまま返すと仮定します。また、NSDictionary と JSON の変換部分は擬似コードです。インスタンス変数の初期化部分も適当なので、自分で実装する時は書き換えることをおすすめします。

// インスタンス変数\n@property NSMutableDictionary *callbacks;\n@property int *callbackID;
// 初期化\n- (void)initialize {\n  _callbacks = [NSMutableDictionary dictionary];\n  _callbackID = 0;\n}\n\n// メッセージ送信\n- (void)sendMessage:(NSString *)message completion:(void (^)(NSString *))completion {\n  // メッセージに _callbackID を含める\n  NSDictionary *dic = @{@\"message\": message, @\"id\": [NSNumber numberWithInt: _callbackID]};\n\n  // _callbackID をキーとして、コールバック関数をインスタンス変数に保存\n  [_callbacks setObject:completion forKey:[NSNumber numberWithInt:_callbackID]];\n  _callbackID++;\n  [_socket send:[dic json]]; // NSDictionary を JSON に変換して送信 (擬似コード)\n}\n\n// メッセージ受信 (SocketRocket のデリゲートメソッド)\n- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message {\n  NSDictionary *dic = [message dictionary];\n  // JSON を NSDictionary に変換 (擬似コード)\n  // ID に対応するコールバック関数を取得\n  void (^callback)(NSString *) = _callbacks[dic[@\"id\"]];\n\n  // コールバック関数を呼ぶ\n  callback(dic[@\"message\"]);\n}

上記のコードのように、コールバック関数毎に一意な ID を割り当てることができ、デリゲートメソッド内でこの ID を取得することができれば、デリゲートメソッド内でコールバック関数を呼ぶことができます。今回の例では、インスタンス変数に NSMutableDictionary 型の変数 (callbacks) と int 型の変数 (callbackID) を用意してこれを行いました。新しいコールバック関数が与えられる度に、現在の callbackID の値をキーとして、コールバック関数を callbacks 内に保存しています (14行目)。また、サーバーへ送信するメッセージ内に callbackID の値を含めています (10-11行目)。サーバーはメッセージをそのまま返すので、メッセージに含めた callbackID の値をデリゲートメソッド内で取得することができます (25行目)。取得した callbackID を用いてコールバック関数を取得し、実行すれば完了です (25-28行目)。

今回はサーバーがメッセージをそのまま返すものだったのでこのままでは役に立ちませんが、あるパラメータに与えられた値のみはそのまま返すようなサーバーにすることで実用的になります。また、最終的にデリゲートメソッド内でコールバック関数を取得できれば良いので、考えれば色々なパターンで実装できそうです。

", "date_published": "2014-07-05T00:00:00Z" } , { "id": "https://katashin.info/2014/02/09/24/", "url": "https://katashin.info/2014/02/09/24/", "title": "box-sizing: border-box; を指定している時の jQuery UI Resizable の調整方法", "content_html": "

CSS の幅や高さ指定を直感的なものにしてくれる border-box というものがありますが、これを使うと jQuery UI の Resizable の挙動がおかしくなります。この問題は短くて単純なコードで解決することができます。

通常、CSS の width や height は HTML 要素のコンテンツのサイズを指定します。つまり、border や padding の値は width や height には含まれません。例えば、width が 100px で、左右の padding が 20 px の HTML 要素を表示してみると、見た目上の幅は 140px となるわけです。これは CSS を書いてると結構気持ち悪く感じることがあると思います(他の要素との組み合わせを考える時にめんどくさかったり)。

上記の問題(?)はCSS で、box-sizing: border-box; を指定することにより解決することができます。つまり、width や height の値を padding や border も含んだものとして指定できるようになります。先の例の width が 100px で、左右の padding が 20px の HTML 要素を考えると、見た目の幅が 100px となり、要素内のコンテンツの幅が 60px になります。

しかし、box-sizing を border-box にすると、jQuery UI の Resizable の挙動が気持ち悪くなります。具体的には、HTML 要素のサイズを変更するためにドラッグを開始すると、padding や border の値だけ大きさがずれます。このせいで、ドラッグ中のマウスポインタの座標と、HTML 要素の端が一致しないのですごく気持ち悪いです。

Resizable の border-box 問題に関しては、jQuery 側ではまだ対応されていないみたいなので、自分で対応してみました。以下がそのコードです。jQuery UI のコードを読み解くのは嫌だったので、普通な感じの解法です。$el が border-box と resizable の両方を適用している HTML 要素の jQuery オブジェクトです。

$el.on('resize', function (ev, ui) {\n  // box-sizing: border-box; に対応\n  ui.element.height(ui.size.height)\n  ui.element.width(ui.size.width)\n})

HTML 要素がリサイズされた時に発生するイベント "resize" に対してイベントハンドラを割り当て、この中で width や height の値を修正しています。"resize" イベントのイベントハンドラは第2引数に、ui オブジェクトが与えられます。ui.element はリサイズ対象の HTML 要素の jQuery オブジェクトで、ui.size はリサイズ後の HTML 要素のサイズを示しています。ui.size のそれぞれの値を ui.element の width、height 関数に与えるだけで border-box に対応することができます。これは、ui.size の値が padding や border の値を考慮していない値になっており、さらに、jQuery の width、height 関数は同様に padding や border の値を含まないのサイズを指定するようになっているためです(border-box っぽく指定したい時は css 関数で指定できます)。

border-box と Resizable を併用することで発生するサイズの問題は "resize" イベントのイベントハンドラで HTML 要素の正しいサイズを設定してやると解決できました。偶然だと思いますが、結構短いコードで解決できたのが面白いです。初めに真面目に padding と border を取得していたのは何だったのかと。

", "date_published": "2014-02-09T00:00:00Z" } , { "id": "https://katashin.info/2014/01/15/22/", "url": "https://katashin.info/2014/01/15/22/", "title": "Objective-C でコールバックを持つメソッドを実装する方法について", "content_html": "

非同期に結果が返ってくる処理を書く場合、Objective-C では @Protocol を定義して、デリゲートメソッド内で結果をもらうのが良いのかもしれませんが、JavaScript を書いてるとコールバックで結果を取得したいと考えてしまいます。この記事では、Objective-C でコールバック付きのメソッドを作る方法を解説します。(コールバックって呼んでいいのかわかりませんが)

", "date_published": "2014-01-15T00:00:00Z" } ] }