Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

HTTP/1.1とかHTTP/2とかQUICとかにGraphQLとか、Webサーバー関連の話題についてまとめてみた。

最近ネットワーク周りについて興味があって調べているので、その結果をまとめました。

主な話題

  • HTTPの最近の流れ
  • なぜHTTP/2は高速なのか?
  • QUICとはなにか?何を解消するのか?
  • WebRTCとは?WebSocketとは?
  • RESTとGraphQL、gRPC

HTTP関連

HTTPの最近の流れ、歴史

HTTP and 5G (fixed1)

HTTPのこれまでの課題、HTTP/3 over QUICや5Gといった今後の技術についてわかりやすくまとまったスライドです。

HTTP/2はなぜ高速なのか?

HTTP/2の特徴 HTTP/1.1との違いについて | REDBOX Labo

HTTP/1.1からHTTP/2はどのように変わったのかまとめられています。

  • HTTP/1.1は1コネクション1レスポンス。多重化するには複数コネクションを確立する必要がある。
  • HTTP/2では1つのコネクションで複数レスポンスさばける。

QUIC関連

QUICとは?

GoogleのQUICプロトコル:TCPからUDPへWebを移行する | POSTD

「TCPでのコネクション確立、TLSのネゴシエーションというコストがかかる通信をQUICが置き換えるよ」という話です。

QUICで解消できるHTTP/2の課題

Head of Line Blocking - High Performance Web 2015 - Qiita

HTTP/1.1で起きるHoLブロッキングと、HTTP/2で起きるHoLブロッキングそれぞれの解説と、QUICならどちらも解消できるという話です。

その他QUIC

QUICとHTTP/3時代のインターネット解説書はどうあるべきだろう - golden-luckyの日記

QUICについてのよくある誤解や、QUICがOSI参照モデルに当てはまらないよというような話です。一言で要約することが困難なので一読をおすすめします。

リアルタイム通信について

これらは「ブラウザ上でのリアルタイム通信」に関する話題です。リアルタイム通信はチャットやオンラインゲーム、通知などで必要になる技術です。また、ツイッターのタイムラインなどでも利用されます。

リアルタイム通信の種類

リアルタイムなwebアプリを実現する方法(ポーリング、Comet、Server Sent Events、WebSocket) - Qiita

リアルタイム通信の種類についての記事です。

  • ポーリング
  • Comet(ロングポーリング)
  • SSE
  • WebSocket

4つのリアルタイム通信方式の違いについて図でわかりやすく解説されています。

WebRTCで通信ができるまで

WebRTCの基本とP2P通信が成立するまでを学ぶ - Qiita

WebRTCで通信ができるまでのプロセスについての記事です。WebSocketも出てきます。

RESTやGraphQLなどAPI周り

APIを扱いたいとき、今まではRESTが多かったです。しかし、GraphQL、gRPCといった選択肢が出てきました。

GraphQLを最速でマスターするための意識改革3ヶ条 - Qiita

GraphQLとRESTの違いや、「GraphQLは操作とデータ取得のみに専念して、認証などは別の層で捌くべし」という記事です。

gRPCって何? - Qiita

gRPCについての記事です。正直僕はこの記事だけでは理解できませんでした。gRPCはフロントエンドとバックエンドの通信はできず、バックエンド間の通信を担うらしい(??)(gRPC-Webなるものはできるそうですが)。

リーダブルコードを読んだらコードの質が格段に上がった

リーダブルコードを読む前に書いたコードを見たら、ゴミすぎて全部書き直しました。

今回はこちらのコードを書き直しました。

ひらがなからローマ字への変換可能パターンを列挙するプログラムをつくった - Panda Noir

続きを読む

z-indexを心穏やかに使うための方針

z-indexを「なんとなく」で扱っていませんか?その結果

  • すべてのCSSを読まないと重なりについて理解できない
  • 最大値を探し出さないとつぎの要素を設定できない
  • z-index:100と設定する

といったことになったこと、ありませんか?z-indexという"""災厄"""とうまく付き合いたくありませんか?

ポイント: z-indexを「グローバル」に扱わない

z-indexを使っていて混乱するのは「グローバルに」扱ってしまっているからです。グローバル変数が悪というのは古から言われています。z-indexもグローバルに扱うことはもちろん握手です。

z-indexを「ローカルに」領域を区切って扱えると良いと思いませんか?実はできるんです!

続きを読む

Reactで<dialog>いじってみたけどつらい件

みなさん<dialog>要素を知っていますか?HTML5.2で追加された要素で、モーダルウィンドウをカンタンに実装できるステキ要素です。これをReactから使おうとしてみたのですが、Flux的なやり方ができなくて辛かったです。

…というだけの記事です。

この記事の環境

この記事は以下のバージョンのパッケージを使用しています。

  • React v16.7.0
  • Redux v4.0.1
  • TypeScript v3.2.2
  • TypeScript-FSA v3.0.0-beta-2
続きを読む

TABでの移動についてまとめてみた

たびたび「あれ?Chromeのタブ間移動ってどうだっけ?」「同じアプリのウィンドウ間移動って?」となるので、まとめました。

Ubuntu18.04用です。

キーボードショートカット 動作
Ctrl+TAB Chromeで次のタブへ移動
Super+TAB アプリ間を移動
Alt+TAB Super+TABと同じ
Alt+半角/全角 同一アプリでのウィンドウ移動
Alt+ESC ウィンドウを切り替える(同一アプリかに関係なく全てのウィンドウに対する操作)
Ctrl+数字 Chromeで、その番号のタブへ移動
Alt+数字 Chromeで、その番号のタブへ移動

調べてみると、意外にもTABを使ったショートカットが少ないことがわかります。