左右前後の中央寄せをするイマドキのCSS

コード

これだけ

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

サンプル

jsfiddle.net

ブラウザ対応状況

https://caniuse.com/#search=flexcaniuse.com

IE11でも使えるっぽいしもう解禁でいいでしょ＞flex

Javascriptでも変数展開したい人生だった

Javascriptで変数展開、いわゆる文字列の中に変数を記述する記法は一応ある。

方法

ダブルクォーテーションの代わりにバッククォートで文字列を囲み、その中で展開したい変数を${}で囲むだけ

val = 'hello'
`${val} world !`

> "hello world !"

正式名称はテンプレートリテラルというらしい。

developer.mozilla.org

だがしかし

この記述が出たのがつい最近。なので例によってIEとかいうオワコンブラウザにはIE11ですら対応していない。IE11ですら対応していない。

大事なことなの（略

以下のURLからブラウザの対応状況が確認できる。

https://caniuse.com/#feat=template-literalscaniuse.com

https://kangax.github.io/compat-table/es6/#test-template_literalskangax.github.io

ちなみに古のCoffeeScriptでは変数展開できたらしい

val = 'hello'
"#{val} world !"

お、おうって感じ

react memo

yarn add react-router-dom

react-routerはreact-router-domに内蔵されているので明示的なインストールは不要

import { BrowserRouter, Route, Link } from 'react-router-dom';

exact
exactという記述がある場合、pathと一致するURLの場合のみ、コンポーネントをレンダリングする。
ない場合は、一致するURLだけでなく、その下層を示すURLの場合も、レンダリングを行う。

例えば上記の場合、/memo/hogeや/memo/abc/123にアクセスしても、Memoと表示される。
だが<Route exact path="/memo" component={Memo} />に書き換えると、/memoと/memo/の場合にのみ、レンダリングを行うようになる。

パラメータを受け取る

Google Analytics連携したアプリケーションを解除する方法

Google Analytics連携したのはいいが、連携解除がアプリケーション側から案内がなくて困った。

ずっと連携しっぱなしというのも気味が悪いので解除するための方法をメモ

連携解除方法

1. 以下のURLを開く

https://myaccount.google.com/permissions

1. 以下のような画面が表示されるのでGoogle Analytics連携解除したいアプリケーションをクリック

1. ボタンが表示されるので「アクセス権の削除」をクリック

1. 確認画面が表示されるので「はい」を選択

これで連携解除が完了。一度解除すると再認証しないと戻せないので注意。

これぐらい公式ヘルプで案内してくれ頼む

HackerNews APIで遊ぶ

Hacker Newsは知るぞ知る投稿型ニュースサイト。

https://news.ycombinator.com/news.ycombinator.com

英語読めないマンなのでこのサイト自体は活用できてないのだが、サイトが公式でAPIを出しており、無料かつユーザー登録不要ということで、新しい言語やフレームワークの練習によく使われる（要出典

が、そもそもそのAPIの仕様を知らないと書けないのでまとめた

一覧取得

一発で投稿一覧取得はできない。 大まかな流れとしては、投稿ID一覧取得→IDを指定して各投稿の詳細を取得となる。

• 新着順: https://hacker-news.firebaseio.com/v0/newstories.json
• 人気順: https://hacker-news.firebaseio.com/v0/topstories.json
• ベスト順: https://hacker-news.firebaseio.com/v0/beststories.json

jsonだが返ってくるのは配列である

[15728194,15728191,15728174,（略）,15728173,15722110,15722108]

投稿取得

ID.jsonで取得できる。

• https://hacker-news.firebaseio.com/v0/item/15723926.json

以下のようなJSONが返ってくる。

{
  "by": "dmmalam",
  "descendants": 164,
  "id": 15723926,
  "kids": [
    15725222,
    15725497,
    15724381,
    15725098,
    15725522,
    15724380,
    15727049,
    15725813,
    15725354,
    15725170,
    15727631,
    15727112,
    15724376,
    15724479,
    15724432,
    15724919,
    15724328,
    15724448,
    15724396,
    15725571,
    15724863,
    15727718
  ],
  "score": 551,
  "time": 1510939468,
  "title": "Microsoft and GitHub team up to take Git virtual file system to macOS, Linux",
  "type": "story",
  "url": "https://arstechnica.com/gadgets/2017/11/microsoft-and-github-team-up-to-take-git-virtual-file-system-to-macos-linux/"
}

各項目は以下。あとで翻訳する。

Field	Description
id	The item's unique id.
deleted	true if the item is deleted.
type	The type of item. One of "job", "story", "comment", "poll", or "pollopt".
by	The username of the item's author.
time	Creation date of the item, in Unix Time.
text	The comment, story or poll text. HTML.
dead	true if the item is dead.
parent	The comment's parent: either another comment or the relevant story.
poll	The pollopt's associated poll.
kids	The ids of the item's comments, in ranked display order.
url	The URL of the story.
score	The story's score, or the votes for a pollopt.
title	The title of the story, poll or job.
parts	A list of related pollopts, in display order.
descendants	In the case of stories or polls, the total comment count.