はてなブックマーク

ちょっといつもと毛色の違う記事書きますね。 Twitterアカウントの乗っ取りは昔から問題にはなっているのですが、いまいち纏まった対策法が書いているところが少ないなーと思っていました。最近になってまた増えてきている気がするので、なんとかしたいという気持ちがあります。 私は主にウェブシステムの設計・開発を仕事にしていて、アカウント管理のセキュリティ周りの話もよくします。チェック自体は専門家に任せるのですが、やりとりをスムーズに行うために自身も最低限の知識は学ぶようにしています。 普段から否応なしにセキュリティを意識せざるを得ない立場から、Twitter乗っ取りの考えうる手口や、それらに対して私達ができる対策など、簡単にまとめておきたいと思います。 長い！読みたくねえ！短くまとめろ！ 乗っ取りの経路はパスワードと連携アプリの2種類ある パスワードを使い回すな パスワードは大文字/小文字/数字/

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac

コンピュータ上で文字列を扱う時、データ上は単にコードユニットの羅列でしかなく、そこに単語や文としての意味合いはありません。 しかし我々は人間であり、単なる文字列ではなく文章として処理したい場合があります。そんなとき、 Intl.Segmenter が役に立つかもしれません。 文章の分割と仕様の標準化 プログラムを書く上で、文字列の処理、というより「文章の処理」をしたくなることがしばしばあります。文章というのは単語や文で構成された、単なる文字コードの連続ではなく、人間的に意味を持つ単位が連続したものとなります。 今まで文字列の意味的な分割は Intl.v8BreakIterator を用いて行っていました。これはChromeやNode.jsで使用されているV8エンジンの独自の仕様であり、一般的な物ではありません。なおかつNode.jsでは意図的に無効化されています。 Intl.v8Break

単純なReactプロジェクトを簡単に作るためにcreate-xxx-appというツールを作ったので紹介します。 create-xxx-app create-xxx-app はテンプレートからNode.jsプロジェクトを作るためのパッケージです。 私が個人的に使うために作ったものですが、一応npmにpublishしているので簡単に解説しておきます。xxxという文字の並びにはエロい意味があるらしいですが、気にしないでおきます。 Node.jsがインストールされた環境で以下のコマンドを叩きます。 npx create-xxx-app プロジェクト名 --template react これでReact開発環境の整った「プロジェクト名」フォルダが出来上がります。今のところ対応しているテンプレート名は「react」のみです。 また、「react」テンプレートも暫定状態でpublishしています。今後大

もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック

ウェブとリアルタイム通信は、もはや切り離せない関係となりました。 ロングポーリングやそれを応用したComet、チャンク通信を利用したServer-Sent Event、新しくはWebSocketという技術は、 いずれもリアルタイム通信を実現するために先人たちが築き上げてきた礎です。 それらの技術の中に、次は WebTransport が加わろうとしています。 WebSocketとTCP WebSocketという偉大な発明は、ひとつの時代を作りました。 双方向性のリアルタイム通信がもたらした恩恵は計り知れません。 しかし一方で問題もありました。 WebSocketはTCP上に構築されたプロトコルであり、当然ながらTCPの特性による制約を受けます。 顕著な例としてTCPの到達保証や順序保証があります。TCPにおいてはパケットが途中でロスした場合は再送制御が行われます。 また、パケットには番号が

Reactにおける状態管理の方法論は、様々な道を辿ってきました。ある人はReduxを使い、またある人はMobXを、またある人はuseContextで物事を解決してきたでしょう。 先日、また新しい選択肢が増えました。Facebook公式による状態管理ライブラリRecoilです。 まだExperimental（実験版）なので実際のプロジェクトに導入することは難しいですが、ちょっとつまみ食いをしてみましょう。 Recoil RecoilはFacebook製のReact状態管理ライブラリです。 小さくシンプルで、Hooksネイティブなライブラリとなっており、非同期処理にも対応している点が特徴です。 まだExperimental（実験版）ということで仕様は大きく変わるかも知れませんし、もしかしたらプロジェクト自体が凍結になるかもしれません。 しかしそれでも触ってみたくなるのが人間というものです。なの

ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU

我々の生活にQRコードが浸透してから何年経ったでしょうか。QRコードの読み取り機能はOS標準で可能になり、もはや「QRコードアプリ」すら不要な時代になりました。 一方でブラウザにおけるQRコードの取り扱いは、全くサポートされていませんでした。今まではゼロから実装した有志のライブラリを使ってQRコードの読み取りを実装していました。 しかしBarcode Detection APIの実装で、そういったライブラリも不要になるかもしれません。 Shape Detection API 近年になって、ブラウザにShape Detection APIというAPIの策定・実装が始まっています。 Shape Detection APIは現在以下の2つのAPIから構成されています。 Barcode Detection API Face Detection API また、「親戚」として、OCRを実現するText

JavaScriptとの戦いの大部分は、undefinedとの戦いです。undefinedはあなたのプログラムに素早く忍び込み、全てを壊していくでしょう。 これはTypeScriptでも避けられません。undefinedになりうる値があれば、繊細なガラス細工に触れるときのように慎重に扱わなければなりません。 そんなundefinedとの戦いの中、ほんのちょっぴり役に立つ文法がJavaScriptに導入されたので、紹介したいと思います。 Optionalな値 コードを書いていると、「入力してもしなくても良い」値を扱いたくなる場合があります。例えば外部からデータをフェッチしてくる関数を作るときには、trueかfalseか未指定（undefined）を指定する「disableCache（キャッシュ無効化）」フラグが欲しくなるかもしれません。 そういったoptional（任意入力）の値を実現しよう

Reactはどちらかというと非同期処理が苦手な部類でした。今まではReduxのmiddlewareを駆使したり、Hooksを上手く使ったりして乗り切っていました。 そこで以前よりSuspenseという機能の実装が進んでいます。Suspenseはまだ世間に浸透しきっていない機能ですが、Reactの世界を大きく変える可能性があります。そんなSuspenseについて、軽く覗いてみましょう。 Suspenseの世界 Reactで非同期処理を綺麗に扱うのは簡単なことではありません。redux-sagaを使うにせよ、useEffectを使うにせよ、大きな痛みを伴います。 そもそもReactはアプリケーションのUI層を担当するライブリラリです。本来果たすべき責務に注力できず非同期処理のような些事に気を取られ、あろうことか非同期処理がReactアプリケーションの設計に大きな影響力を持ち始めるというのは、望

この記事は「Svelteで始める頑張らないフロントエンド生活 前編」の続きです。読み進める前に、先にそちらをご覧ください。 前編のおさらい 「Svelteで始める頑張らないフロントエンド生活 前編」ではSvelteの基本的な使い方を学びました。 Svelteでは、変数のバインド、コンポーネントの作成、分岐表示処理などを簡単に実現することができました。Svelteは他のフレームワークほど強力な機能を持っているわけではありませんが、シンプルなアプリを作る際には心強い機能を提供してくれます。 今回作るもの ノートアプリ Svelteの基本的な使い方については習得したので、今回はノートアプリを作ってみましょう。以下のようなイメージです： シンプルですが、ウェブアプリを作る上で重要なことを制作過程で学べます。 Single Page Application(SPA) Single Page Appl

フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした

ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo

Promiseの概念はずいぶん浸透してきました。Promiseは単なる「新機能」のひとつから、もはや非同期処理における基本となりました。有志のライブラリなどもPromiseを返すのが当たり前になってきていて、コールバックでの処理はオプションであることが多くなりました。 さて、そうなってくるとPromiseの概念がどうこうというよりも、実用的なケースに対するコードスニペットがほしくなってきます。そこで今回の記事では、よくあるケースに対しての具体的解決策をいくつか提示します。 この記事について この記事では、JavaScript初心者に向けた、実用的な観点に焦点をあてて説明します。よっていつもの記事ほど正確性や厳密性はありません。 Promiseの「仕様」について詳しく知りたい場合は、MDNを読むなり、仕様書を読むなりしてください。 世界はPromiseに染まった Promise！Promis

JavaScriptの全貌を知るには、人生は短すぎます。大まかに把握したと思っていても、少し時間が経つと、またわけのわからない構文が現れます。 特に最近増えてきた記法として、代入の左辺に、括弧が使われているというものがあります。今回は、これの正体を探ってみましょう。 括弧のついた代入たち JavaScriptにおいて、代入とは一般に以下のようなものを指します： const myNumber = 100; しかし、モダンなライブラリを使用していると、以下のようなサンプルコードを見かけることがあります： const [job] = client.exec(); また、Node.jsにおいて、以下のような構文を見かけることも増えてきました： const {SampleClass} = require('sample-lib'); どちらも少し不思議です。左辺の変数名が括弧（[]または{}）で括ら

どうもどうも。古都ことです。転職したい気分になってきたので書きます。 なおこの記事は、転職先が決まるか、諦めるか、反応がなかったら消します。この記事が残っている間は連絡待ってます。（2019/07/25追記 残しておきます） 希望条件 自分の知識や技術をより活かせる職場を探しています。拾ってください。 勤務先：できれば大阪周辺（豊中市から近いとかなり良い）遠いようならリモートワーク可給料：手取り25万は欲しい勤務時間：普通でもフレックスでも業務内容：可能ならばウェブ系がいいです（フロント/サーバ/バック問わず）新しい技術や新しい試みができる、挑戦的な内容開始：8月以降？備考：まだ退職してないです 連絡先 連絡は締め切りました プライベートでの実績 大雑把にはGitHub見てもらえばいいと思いますここと https://github.com/kotofurumiyaここ https://gi

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部

私はかつてFlashをいじっていたのですが、その頃はマシンの性能もあまり良くはなく、Flashの実行エンジン自体もそこまで高速ではなかったので、様々な高速化テクニックに頼ることもありました。 ふと思いました。あの頃の高速化テクニック、今のJavaScript通用するのかな、と。今や超高機能なプロセッサと超高速な実行エンジンで動くモンスターと化してしまったJavaScriptですが、かつての兄弟（ActionScript）の技を受け継ぐことができるのでしょうか。 注意事項 この記事はノルタルジー重点です。あんまり真面目に計測してないです。実用性も薄いです。 というかこの記事に書いてあるような高速化は、仮に効果があったとしても実務では絶対に使わないでください。夜道で刺されると思います。どうしようもなく読みにくくなるので……。 計測条件 計測はChromeとFirefoxで行います。計測関数は以

プログラミングにおいて、値（データ）の扱いはとても重要です。今度は、値をどう管理すべきか、値をどう処理すべきかについて学んでみましょう。 連載目次 基礎と文法 関数 配列とオブジェクト オブジェクト指向 データ構造とアルゴリズム（この記事） HTMLとDOM（予定） 未定 今回学ぶ内容 プログラミングというのものは、極端なことを言うと、値の操作の集まりです。なので、値をどう上手に扱うか、という一点が重要になってきます。値の扱いが上手ければ、処理が高速に終わるかもしれません。また、少ないメモリ消費で動くかもしれません。 今回はそういった「処理効率」に焦点を当てていきます。そして高い処理効率を実現するには、データ構造とアルゴリズムの知識は必要不可欠です。 値を保持するデータ構造は様々存在します。データ構造が違うと何が違うのか、それぞれどんなメリットがあるのか、どんなデメリットがあるのか、いくつ

Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ

近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He

プログラミングにおいて避けては通れないのがエラーです。JavaScriptにおいても、多数のエラーに悩まされることになります。 エラーはそのメッセージさえ読めば原因がわかることも多いのですが、プログラミングに慣れてない人がJavaScriptの柔軟なコードに振り回されていると、なかなかメッセージからは原因を推察できません。 そこでこの記事ではよくあるエラーとその対策についてまとめます。 よくあるJavaScriptエラーの原因と対策 基本的に以下の環境での実行とします。 Google Chrome しかしエラーメッセージはFirefoxやNode.jsでもそう変わらないと思います。 Chromeにおいて、エラーを確認するためのコンソールはF12キーを押すと表示できます。確認したいページを開いて、そこでF12を押してください。 Uncaught SyntaxError: Unexpected