banseivlog

大器晩成型 - 仕事中の覚え書きや反省文を書く程度のブログです

URLと仲良くなりましょ

URLの文字列にどういう意味があって、どういった仕様になっているのかなんとなくでわかってる人が多かったので、ここで改めてURLを知っておきたい(ほしい)という気持ちをポエムに書き残しておきます。

僕の愛読書のNode.jsのドキュメントにわかりやすいURLの構成要素の図が書いてあります。まずはこちらを見てみましょう。

URL構成要素の図。この図を以下で説明していく。
URL | Node.js v10.8.0 Documentation

プロトコル// の前の : で終わる文字列。Schemeと言われてたりもします。よく見るのは http: だったり https: ですがもちろんソレ以外にも file: とかもソレに当たります。

// の先にはベーシック認証のuserとpasswordが書くことができます。ブラウザでベーシック認証のプロンプトで認可しなくてもここに書けば認証は解けます。

ホストはご存知の通り hostname と port に分解できます。

ここまでがURLの オリジン 情報です。ここテストに出ます。

以降はパスとハッシュに続きます。URLクエリもパスに入るんですね。

クエリパラメータを省いた部分は pathname となってます。pathとpathnameは違うんです。

クエリは ? を省いた部分です。? の構文まで入れるとsearchと呼ばれています。

最後に#ハッシュ。ハッシュは # も含む文字列になります。なので使うときはたいてい最初の一文字を hash.slice(1) こんな感じで省いたりします。

それで、 ハッシュはサーバーには送られてこないんですよ。これ大事なことなので復唱してください。

ハッシュはあくまでもクライアントだけで扱っている情報なのでサーバーにはやってきません。

これを知らない人が意外にも多くて僕はおったまげーでした。

クライアントとサーバーをやる人じゃないと普通に生きてても意識しないレイヤーなのでいいのですが大事です。

ユニバーサルなエスピーエーのルーティングライブラリを書くときなんかもちゃんと意識したいですね。

以上、ポエムになります。

続きを読む

CSSの読み込みを待つReactコンポーネントを作りたかった

※この記事ではstyled-componentやcss-modulesに関しては一切書いておりません。

僕は普段からReactを使ってIsomorphicなWebアプリケーションを開発してるのですが、個人の趣向でcss-modulesを使っておらずJavaScriptCSSはそれぞれ独立させて作られています。
この環境下でSPAで遷移する時に各ページ毎にJSやCSSファイルが存在するため、ページ遷移毎にその読み込みを待つ時間が少なくとも発生します。このときCSSファイルがまだ読み込まれずにコンポーネントが描画されると、スタイルがあたっていない状態で視認できる状態になってしまいます。ちなみにページ単位でのCSSの読み込みではreact-helmetを用いていました。
このスタイルがあたっていない状態がちらつく減少を回避するためにはリンクタグで読み込んでいるCSSのロード完了を待つ必要がありますが、残念ながら使用しているライブラリ側ではそのような昨日はサポートされていませんでした。

といった経緯で作ったのがこちら

github.com

続きを読む

ぼくのつゆやすみ・三日目

昨日の疲れが残っていたので朝は寝坊して朝食を逃しました。残念。
三日目は寝坊しつつも無事チェックアウトを済ませ、札幌市内の観光へ



とりあえず札幌に知見がないのでなけなし知識で知ってる観光スポットに行きます。

僕の持っている札幌の知識といえば - ジンギスカン - スープカレー - ラーメン - 時計台 - テレビ塔

くらいなので飛行機までの時間は軽く過ごせそう。さっそくポケモンGOを起動してからホテルから徒歩で時計台を目指します。 ちなみにホテルは反対側の札幌駅北口方面にあったので、大通公園まではそれなりの距離を歩きました。

有名な時計台。ちょうど休館期間でした。
またまたタイミングが悪い 😇

さっぽろテレビ塔。エレベーターガールが美しかったです。エレベーターの中で暗記されているガイドを淡々と説明してくれている感じはロボットと一緒にいるようで面白かったです。

テレビ塔から見た大通公園。このあとスープカレーを食べに行くのですが流石に時間がなくて大通公園を一周はできなかったです。
帰りのエレベータ内では研修中のエレベーターガールが先程のガイド内容が書かれているカンペを見ながら練習していました。かわいい。

そのままの足でスープカレーのイエローへ
中に入ってみたらなんだか見覚えのある店だなと思い返してみると、大学時代に来た場所でした。

食べたのはチキンと野菜のスープカレー。ライスにトッピングしたガーリックマヨネーズがめちゃくちゃカレーに合う!

ここらで時間なので空港に移動。新千歳空港でお土産を買って帰宅しようかと思ったけどラーメン食べてないことに気づいたので

空港内にあるラーメン屋で味噌バターコーンラーメンを一杯。最後まで北海道を味わって飛行機に乗りました✈️



こんな感じで梅雨入りしたての北海道旅行が幕を閉じました。とはいえまだまだ休みは残ってるので、旅行疲れを癒して会社に復帰します。