はてなブックマーク

2023年9月19日アニメーション,Vue,Vue Router以下のようにシームレスな（繋ぎ目のない）画面遷移を実装するとしたら、どのように実装しますか？それぞれのカードをクリックするとカードが拡大され、そのコンテンツ全体が見れるようになります。 この実装はカード一覧ページと、コンテンツ全体が見れるページの2ページで構成されていて、画面遷移の処理を工夫することで、シームレスな見せ方をしています。 シームレスな画面遷移は、要素同士の関連性を強調したり、アプリへの没入感を高めるなどのメリットがありますが、実装難易度が高く、コードのメンテナビリティが下がりやすいというデメリットもあります。 本記事では、このようなシームレスな画面遷移を実装する難しさを説明してから、Vue.js を使った実際のコードを交えながらその実装方法について解説します。 シームレスな画面遷移アニメーションの難しさ #シーム

2023年8月28日HTML,CSS,JavaScript<dialog> 要素が主要なブラウザすべてに実装され、現実的に使えるようになってきましたが、これをそのまま実際の Web アプリで使うには様々なものが足りません。足りないものを自分で実装していくと、分かりづらい挙動があったり、癖のある実装が必要なことがあります。例えば、<dialog> 要素のデフォルトは中央揃えで、コンテンツに合わせたサイズになりますが、これの位置、サイズ調整やアニメーションをする際に落とし穴があります。 本記事では、以下のアクションシートのようなモーダルを実装する例を通して、<dialog> 要素を使う時の3つの落とし穴を紹介します。 デフォルトのスタイルが分かりづらい #<dialog> 要素にはデフォルトでいくつかのスタイルが設定されていますが、これまでの HTML 要素のデフォルトスタイルと比べると値が特

2023年8月14日ソフトウェア開発方法論,Vue「今日リリースの機能ですが、マージ前に軽くレビューしてもらえますか？」 同僚にそう言われてプルリクエストを見ると1000行以上の差分がある。たしかにこの機能は大きく、開発の完了まで本番環境にリリースしてしまわないようにブランチを分けていたのだが、そうは言っても差分が大きすぎてレビューが大変そうだ。リリースまでの時間もないし、軽く動作チェックをして、問題がないことを祈ろう…… チーム開発でレビュワーの経験がある人なら、このような状況に覚えがある人もいるでしょう。しかもこういうのは大抵タイムリミットが短く、最終的には時間がないので問題が起きないことを祈りながら Approve するのです。検証やテストが不十分なまま、問題が起きないことを祈りながら本番環境にデプロイすることを俗にお祈りデプロイと呼ぶこともありますが、これはできたら避けるべきです。

2023年8月7日JavaScript,Vue,Undo,デザインパターンリッチなアプリを開発していると、Undo（元に戻す） 機能を自分で実装する必要が出てきます。canvas を使った図形の描画などはブラウザデフォルトの Undo 機能が使えず、自分で実装しなければならない代表例です。Undo の実装にはパターンがあり、それを理解することで様々なアプリへの Undo の実装がしやすくなります。 この記事では、JavaScript による簡単なデザインツールのデモを通して、Undo の実装パターンと、具体的な実装例を解説します。 Undo の実装パターン #Undo の頻出実装パターンは、操作をデータで表現することです。ユーザーの各操作をデータで表し、それを打ち消す操作（逆操作）を保存します。Undo を行うときは逆操作を取り出し、それを実行します。 デザインツールに Undo を実装

2023年7月31日JavaScript,インタラクション,アニメーション,iOS普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか？その挙動をどう実装するか考えたことはありますか？ この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、ほとんどの人はあまり意識せずに iOS デバイスを使っていると思います。今では当たり前のこの挙動は、iOS の使っていて気持ちのいい UI に大きく寄与しています。 本記事では、この挙動をラバーバンド効果と呼び、単純化した例を通じてその実装方法を解説します。 ラバーバンド効果の単純化した例 #ラバーバンド効果はスクロールだけではなく、移動可能なオブジェクトが動ける範囲を暗に示すために使えます。例えば、この

2023年7月10日CSS,JavaScript,アニメーション,デザインパターンアニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか？FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。 FLIPとは #FLIP とは First, Last, Invert, Play の頭文字から取られた用語であり、アニメーションをこの4つのステップに分割して行うテクニックです。例えば、以下のようなリストの項目に追加、削除、並べかえができるUIに対して、簡単にアニメーションを付けることができます。 上のデモで追加、削除、並べかえを行った時に、項目の座標移動がアニメーションすることがわかると思います。これは CSS Transition だけでは実装する

2019年4月28日TypeScript,Vetur,VueVue の TypeScript 対応は v2.0 から公式に型定義がサポートされるようになったり、v2.5 で Vue.extend を使ったときに this の型が推論されるようになったりと、改善が何度も行われています。 しかし、課題はまだたくさんあり、その中でもよく聞くのが、テンプレート内の式の型チェックがされないという課題でした。TypeScript はテンプレートを解釈できないので当たり前ですが、もしそれが解決できたらより安全になるでしょうし、開発体験も向上すると思います。 そしてこの課題は Vetur の最新版で解決されました。 Vetur v0.19.0 #Vetur は Visual Studio Code の拡張機能の一つで、Vue の単一ファイルコンポーネント (.vue ファイル) のための様々な機能を提供し

2018年12月17日CSS,JavaScript,アクセシビリティGitHub の Issue ラベルなど、任意の色の中に文字を入れたい場合があります。このとき文字色が一色のみだと、背景色と似たような色のときに読みづらくなってしまいます。 以下のスクショでわかるように、GitHub は背景色によって文字色を黒か白のどちらにするかを計算しているようです。 個々のサービスの実装についてはわかりませんが、WCAG (Web Content Accessibility Guidelines) で定義されているコントラスト比を使うことで、背景色に対して読みやすい文字色を選択することができます。 WCAG で定義されているコントラスト比 (contrast ratio) #WCAG は Web のコンテンツを障害者がより利用しやすくするためにはどうするべきかが記された指標です。また一般的に、WCAG

2018年8月26日Apollo,GraphQL最近 GraphQL を使うことがあり、いろいろ調べたりしていることをメモしておきます。自分が必要なものしかまとめてないので情報には偏りがあります (具体的には Apollo、TypeScript や Ruby あたりに偏ってます)。 GraphQL / Apollo まわりのテストの話は別の記事で詳しく書くかもしれないです。 基本知識 #GraphQL | A query language for your API #公式サイト。GraphQL のコンセプトやできることを知りたいときに見る。 GraphQL Concepts Visualized – Apollo GraphQL #GraphQL のコンセプトを図を交えて説明。アプリケーションのデータをグラフで表し、その一部を取得するために GraphQL を使う。効率的なキャッシュを行う

2018年7月16日VueNuxt.js という Vue.js で SSR をするアプリケーションが簡単に書けるフレームワークがあります。Nuxt.js は SSR だけでなく、webpack の設定やディレクトリ構造なども最初から決められており、規約がすでに存在することによる開発の効率化の面においても注目されています。 個人的に Nuxt.js で便利だと感じている機能にルーティングの自動解決とレイアウト機能があります。通常の Vue Router を使ったアプリではルーティングの設定は自分で書く必要がありますが、Nuxt.js では pages/ ディレクトリ以下の構造から自動的にルーティングの設定を生成してくれます。また、Rails のレイアウトのように、各ページごとにレイアウトファイルを指定することができます。 これらの機能に慣れてしまうと、Nuxt.js を使っていないプロジェク

去年から作っていた Vue のモーダルコンポーネント vue-thin-modal の v1.0.0 をリリースしました。仕事でも結構使っていて、特に大きな問題もなく、API も安定しているのでメジャーバージョンを上げました。 vue-thin-modal は世の中の多くのつらいモーダル実装を見て、つらくならなくするために作ったライブラリです。主に以下のような特徴があります。 モーダルはどこに置いても DOM の実態は <body> 直下にマウントされる (いわゆる Portal)。 モーダルが開くと通常のコンテンツ部分はスクロールが止まる。モーダル内のコンテンツがウィンドウサイズを超えてもスクロールできる。 これで発生する、スクロールバーが消えることによるガタツキを防ぐ実装もしている。モーダルを閉じたときに元のコンテンツにフォーカスを戻す。 デフォルトの CSS スタイルが提供されていて

2018年2月24日TypeScript2月20日 (火) に JavaScript メタプログラミング勉強会 Metapro.es という勉強会があり、そこで TypeScript (TS) Compiler API について LT しました。内容は TS Compiler API の基本的な使い方を話したものですが、短い時間で話しきれる内容でなかったのと、TS Compiler API の日本語資料は少ないので、ここに補足記事を書いておきます。 また、example コードを Github に置いているので、適宜参照・実行しながら読むと理解しやすいかもしれません。 TypeScript Compiler API とは #その名の通り、TypeScript のコンパイラーをアレコレすることのできる API です。あまり実践的な使い方を話題に上げている人は見かけないですが、コードの解析、変

静的型が好きな人と話していると大体テンプレートの型をチェックしたいという話を聞くのですが、Vue には今のところそれをうまく行う方法はありません。 すこし前に Vue のテンプレートの型チェックについて LT したのですが、これは vue-class-component などの Vue 標準の API から離れた書き方を強制するのでちょっと微妙な感じでした。これは、以前は Vue のコンポーネントの this の型を得るためには、クラス構文を使う必要があったためです。 しかし、TypeScript v2.3 に導入された ThisType によって、オブジェクトリテラル内部のメソッドの this の型推論が行えるようになったのと、 Vue v2.5 から、TypeScript の型定義が大きく改善されたことで、Vue 標準の API を使っても this の型をうまく得ることができるように

2016年5月29日TypeScript,Vue最近 TypeScript の恩恵を受けつつ Vue を使うためにいろいろと試行錯誤しています。この記事ではコンポーネントの定義と、コンポーネント内のロジックを再利用可能にするための Mixin の定義を TypeScript でどのように書けばよいかを述べます。 vue-class-component を使う #TypeScript で Vue を使う時は vue-class-component はほぼ必須だと思います。なぜなら、Vue のコンポーネントの生成の仕方では、TypeScript コンパイラがコンポーネントの型を解釈することが難しいからです。 例えば、コンポーネントの生成を行うコードは以下のように書けますが、reverseMessage メソッドの中では、this がそのコンポーネントであることがわからないですし、this.me

2016年4月24日JavaScript,Vue,Vuex,vuex-connect,ライブラリ某勉強会中にネタを思いついて、急いで作って LT してその日のうちに npm にアップしたら、翌日Vue 公式に紹介されていてだいぶビビったやつです。Vue と Vuex のヘルパなので、この二つを理解していることが前提になります。 vuex-connect (Github) vuex-connect (npm) vuex-connect の機能 #vuex-connect は connect 関数のみ提供しており、やっていることは react-reduxの connect と同じです。connect は第一引数に Vuex の getters、第二引数に actions を受け取ります。 また、戻り値として別の関数を返し、こちらの関数には、コンポーネント名と、コンポーネントのコンストラクタを渡

2015年10月18日JavaScript,Vue最近 Vue.js を使って Web アプリを書いていて、どんなディレクトリ構造だと良いんだろうなーということを考えた結果を書きとめようと思います。Angular Best Practice for App Structureっぽい感じです。 ディレクトリ構造 #├── app │   ├── components │   │   ├── component1 │   │   │   ├── component1.html │   │   │   ├── component1.js │   │   │   └── component1.css │   │   ├── component2 │   │   │   ├── component2.html │   │   │   ├── component2.js │   │   │   └──

2016年1月31日Objective-C,Swift,XcodeOSX, iOS アプリでも Rails の RAILS_ENV のように、動作環境に応じて値を変えたいという時があります。 この記事では、アプリから利用する Web API の URL を動作環境に応じて切り替えるのを例に、そのやり方を説明します。執筆時の開発環境は下記のとおりです。 XCode: Version 7.2Swift: version 2.1.11. Build Configuration を作成する #PROJECT -> Info -> Configurations に、動作環境の分だけビルド設定を追加します。例えば、ローカル環境を対象としたビルド設定を追加したいときは、Debug Local と Release Local を追加します。追加するときは、それぞれ、元からある Debug と Releas

実用的ですぐに開発に役立てることができる Web フロントエンドのディープな話題を書いている Katashin の個人ブログです。毎週月曜日更新。

2014年1月15日Objective-C非同期に結果が返ってくる処理を書く場合、Objective-C では @Protocol を定義して、デリゲートメソッド内で結果をもらうのが良いのかもしれませんが、JavaScript を書いてるとコールバックで結果を取得したいと考えてしまいます。この記事では、Objective-C でコールバック付きのメソッドを作る方法を解説します。(コールバックって呼んでいいのかわかりませんが) メソッドの書き方 #サーバーからデータを取得し、そのデータを UIImage として返すメソッドを例とします。以下がメソッドの簡単な書き方です。 // メソッド定義 - (void)requestImageWithURL:(NSURL *)url completion:(void (^)(UIImage *image, NSError *error))completi