Markdown テーブルの中に | を書きたい

GitHub の PR や issue, wiki といったマークダウンでテーブルの中に Pick<Interface, 'foo' | 'bar'> とか a || b みたいに | を書きたい事が稀にあります。そのまま書くとコードで囲っても | がテーブルの区切りと判断されてしまうので、どうやったらテーブルのコンテンツに | が使えるのかのメモ

\ でエスケープすれば OK

Pick<Interface, 'foo' | 'bar'> をテーブル内に書きたい時は Pick<Interface, 'foo' \| 'bar'> とエスケープして書く。
a || b なら a \|\| b と | は全てエスケープすればOK。

| foo | bar |
|-----|-----|
| A | `Pick<Interface, 'foo' \| 'bar'>` |
| B | `a \|\| b` |

👇

foo	bar
A	Pick<Interface, 'foo' | 'bar'>
B	a || b

はてなブログのマークダウンでも OK だった！

おわり。

---

Markdownライティング入門　プレーンテキストで気楽に書こう！ (技術の泉シリーズ（NextPublishing）)

1/35 イギリス重戦車Mk.V (雌型) プラモデル

マークダウンのネタ 英国戦車ばかりになってるな

Flask Flask-JWT-Extended がよしなに返してくれるエラーをカスタマイズしたい

Flask で書かれた API を使ったフロントの開発をしていました。
JWT が unauthorized になった時のエラーだけ他のエラーと形式が異なり、エラーコードも 401 で他のエラーと被ってしまっていて、フロントでエラーハンドリングが面倒なことになってしまっていたので、API 側に越境してエラー関連をカスタマイズしたメモ。

※ Python はなんもわからんマンが書いています。ご了承ください。

Flask-JWT-Extended がよしなにエラーを返すようになっていた。

API 側の実装を見にいくと、Flask-JWT-Extended というライブラリが使われており、API に @jwt_required() デコレーターが有り、この中で JWT が unauthorized になるとライブラリがよしなにエラーを返却しているようでした。

from flask_jwt_extended import jwt_required

@app.route('/user', methods=['GET'])
@jwt_required()
def get_user():
  # 略 このブロック内に JWT unauthorized 時のエラーの実装はなし

@jwt デコレーターで JWT 関連のエラーハンドリングができる

# JWT が期限切れのとき
@jwt.expired_token_loader
def jwt_expired_token_callback(expired_token):
  token_type = expired_token['type']

  if token_type == 'access':
    return make_response(jsonify({
      'status': 'ACCESS_TOKEN_EXPIRED',
      'message': 'token expired',
    }), 401)
  else:
    return make_response(jsonify({
      'status': 'TOKEN_EXPIRED',
      'message': 'token expired',
    }), 401)

# JWT が invalid だったとき
@jwt.invalid_token_loader
def jwt_invalid_callback(error_string):
  return make_response(jsonify({
    'status': 'INVALID_TOKEN',
    'message': 'invalid token',
    'error': error_string
  }), 403)

# JWT の認証エラー
def jwt_unauthorized_callback(error_string):
  return make_response(jsonify({
    'status': 'UNAUTHORIZED',
    'message': 'invalid token',
    'error': error_string
  }), 403)

₍ ᐢ. ̫ .ᐢ ₎ できたっぽい!!

所感

フレームワークでよしなにしてくれるのは良いけど、ちゃんとフレームワークの使い方分かってないと細やかな部分で困りますね。
にしても Python 関連のドキュメント慣れてないからかも知れないけど見ずらいの多くない？？？？

---

[参考]

• Flask-JWT-Extended’s Documentation — flask-jwt-extended 4.3.0 documentation
• flask - @JWT_Required decorator Exception Handling - Stack Overflow
• SPA開発におけるREST APIをFlaskで男前に - Qiita

Python & Flask 初めてのWebアプリケーション作成に挑戦!!

カリフォルニケイション

レッド ホットチリペッパー キッズコスチューム 男女兼用 80ｃｍまで 81160

Next.js SVG ファイルを React component として import したい！

create-react-app した React アプリでは何もしなくても SVG ファイルを import { ReactComponent as MySVGImage } from './svg/my-image.svg'; で読み込みコンポーネントとして扱うことができました。

Next.js でも同じことができると思ったのですが、create-next-app しただけの状態では SVG ファイルをそのまま import することができませんでした。(エラーになる)

create-next-app した Next アプリで SVG ファイルを React component として import できるようにする！

1. babel-plugin-inline-react-svg を導入する

$ npm -i D babel-plugin-inline-react-svg 

1-2. .babelrc にプラグインの設定をする

root に .babelrc ファイルを作成して inlne-react-svg を使えるようにする

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

これで import MySVGImage from './svg/my-image.svg'; のように SVG ファイルを React Component として読み込めるようになりました！ (Named import ではないですが)

2. SVG の import にも path.alias が使いたい！

コンポーネントから SVG を読み込ませる時に ../../../../svg/my.svg のようにインポートするのはちょい辛いです。

Next で path.alias を使う

tsconfig.json に下記設定を加えると @/ で ./src/ フォルダに、 ~/public/ で public フォルダに直接アクセス可能となります。

{
  "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "~/public/*": ["../*"]
    },
}

上記のNext.js 側で path.alias を指定していたので SVG でもそのまま @/svg/my.svg のように import できるものだと思っていたのですが、パスが解決できずエラーになってしまいました。

2-1. SVG ファイルにパスエイリアスを適応するには別途 babel-plugin-module-resolver で設定が必要

SVG は babel を通じて import できるようになっているので、パスの解決も babel での設定が必要なようです

$ npm i -D babel-plugin-module-resolver

2-2. .babelrc にエイリアスの設定を追加する

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    "inline-react-svg",
+   [
+     "module-resolver",
+     {
+       "alias": {
+         "@": "./src/"
+       }
+     }
+   ]
  ]
}

"module-resolver" の設定で baseUrl も指定可能だったのですが、baseUrl: "./src" とすると tsconfig での設定とバッティングしてしまうようで SVG 以外の エイリアスを使ったインポートの箇所でエラーが出てしまいました。
上記の例のように baseUrl 指定なしで、alias に直接 .babelrc のある階層からのパスを指定してあげればバッティングすることなく同じパスエイリアスが使えるようになりました！

所感

Next.js でも create-react-app と同じ様に使えるんだと思っていたら別途設定が必要だったのですが、公式に例が合ったおかげでサクッと実現することができました。(named import にする方法は調べなかった) パスエイリアスの方は少しハマってしまいましたが、一度設定の作り方解ってしまえば次に活かせるのでヨシ！(๑•̀ㅂ•́)و✧
環境作り王に俺はなる…!!

---

[参考]

• javascript - Importing SVG as React component not working with Next.js - Stack Overflow
• next.js/examples/svg-components at canary · vercel/next.js · GitHub
  • GitHub - airbnb/babel-plugin-inline-react-svg: A babel plugin that optimizes and inlines SVGs for your React Components.
• next.jsで絶対パスを使用する方法(TypeScript) - Qiita
  • babel-plugin-module-resolver - npm

WEB+DB PRESS Vol.123

【Amazon.co.jp限定】星の旅人/シナヤカナミライ/薔薇と私(メガジャケ付き)

かげきしょうじょ!! 見てください