ズーム可能なSVGを実装する方法の解説 | 株式会社カブク
ソフトウェアエンジニアの畠山です。今回は，SVGに対して"Pan"と"Zoom"を実装する方法を解説します。 PanとZoomのためのライブラリはsvg-pan-zoomなどがありますが，今回はこういったライブラリを使用しないで実装してみます。 ※ Google Chrome 69でしか動作検証していません。 SVGのviewBox まず最初に，svgタグのviewBox属性についておさらいしておきます。なぜならこのviewBoxを使ってPanとZoomを実現するからです．viewBox属性は”min-x”, “min-y”, “width”, “height” の4つの数値リストをスペース区切り（もしくはカンマ区切り）で指定します． 例えば，viewBox属性に[min-x min-y width height] = [0 0 100 100] を指定すると以下のようになります。 <sv
さようなら、TypeScript enum - 株式会社カブク
フロントエンドエンジニアの今村です。TypeScriptではenumを使わずunion型を使いましょう、という話を書きます。 モチベーション 何を今さら、と思う方もいるかもしれません。 TypeScriptのunion型はenum的なものを表現可能であり、基本的にenumよりもunion型を使うべき、という意識を持っているTypeScriptプログラマーはすでに少なからずいるのではないかと思います。しかし、ではenumの使用はいかなる場合も避けるべきなのか、そうでないとしたらどのような基準でenumとunion型を使い分けるべきなのか、といった点について、広く合意の取れたガイドラインはなさそうです（少なくとも私は知りません）。この結果、コードレビューなどで少しやりづらさを感じることがあったので、白黒つけてしまいたいという気持ちからこのブログを書いています。 結論としては、enumは全面的に
Top-level awaitとDual Package Hazard - 株式会社カブク
Node.js Advent Calendar 2019の21日目の記事です。 2019/12/25追記 もともと「Top-level awaitによるESモジュールの非同期化とDual Package Hazard」というタイトルにしていましたが、表現に勇み足な部分があり、ご指摘をいただいたので、少し修正しました。 「TLAによってNode.jsのESMが非同期になった」という表現はおそらく正確ではありません。ESMに関する2017年のNode.jsのドキュメントでは、特に理由は触れずに「ESMのロードは非同期で、それはブラウザの挙動と合致する」と記述されています。ここでいう「ブラウザの挙動」とは、WHATWG Loaderで定められた仕様を指すと考えられます。ECMAScriptの仕様としては、少なくとも2019まではESMが非同期であるとの記述はなさそうなので、ブラウザの仕様に合わせ
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク
はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成
![[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/897d9c48832ba7e3a66c89a7941ffe151d3d8705/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F05%2Fcut20_bunsin-1200x801.jpg)
TypeScriptで実現する型安全な多言語対応（Angularを例に） - 株式会社カブク
フロントエンドエンジニアの今村です。 この記事はAngular Advent Calendar 2018 11日目の記事で、テーマは多言語対応です。 Angular Advent CalendarなのでAngularの話を中心に書きますが、手法としてはAngularに限らず、ひろく（TypeScriptで書かれた）Webフロントエンド全般の多言語対応に適用可能なものです。というのも、私は以前にも似たような記事をQiitaに投稿していて、その時はReactをやっていました。 この記事ではQiitaに投稿した方法を少し改良したやり方をご紹介しますが、TypeScriptの型に甘えて多言語対応を実現したいという気持ちは一貫しています。 TL;DR 辞書ファイルをTypeScriptで書きたいという思いのもと、Angularの標準のi18n機能やその他のライブラリに頼らずに実装した多言語対応を紹介
Angular 4アプリケーションをAngular 6に移行する | 株式会社カブク
初めまして！ カブクでアルバイトをしている長瀬です。普段はWebフロントエンド関連の業務をしています。 先日、Angular 4.3.6で動いていたアプリケーションを6.1.0へ移行した際に得られた知見を共有します。Angular/Angular CLI 6への移行に関する日本語記事は、すでに以下をはじめとするすばらしい記事が世に出ています（私も参考にさせていただきました）。 Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2) lacoさんの記事 angular-cliの移行作業がまとまっている Angular6に移行メモ 5.2 -> 6.0の移行 ngx-bootstrapなど、外部パッケージ関連の移行作業についても触れられている この記事では、上記の記事で紹介されている内容（移行手順や移行により改善されたこと）に加えて、 –
2018 年の tree shaking - 株式会社カブク
Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
