ReactでTwitterのタイムラインなどを埋め込む

React(Next.js)でTwitterの埋め込みを行いたい。

主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。

ライブラリを使ったり使わなかったり。

続きを読む ReactでTwitterのタイムラインなどを埋め込む

【Typescript】モジュールをブラケット表記法で使う

import * as M from ""で読み込んだモジュールをブラケット記法[]で使いたい。

こんな感じで引数(変数)に対応したモジュールを使いたい場合にどうするか。

続きを読む 【Typescript】モジュールをブラケット表記法で使う

日時を使った新規ファイルの命名

なにか新しくファイルを作るときには命名法則を考える必要があります。

被らずにソートしやすいものとして日時の情報を使うことが多いですが、どうやって使うのがいいかなと思ったのでjavascriptで適当に動かしてみます。

続きを読む 日時を使った新規ファイルの命名

Next.js with Material-UIでスタイルが崩れる

Next.jsMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。

現象としてはnext.jsのPHASE_PRODUCTION_BUILDgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。

ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。

結構複雑な問題だったので要点をまとめながら解決を図ります。

環境:next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1

続きを読む Next.js with Material-UIでスタイルが崩れる

【Typescript】Nullableに対する様々な操作

Next.js(React)でTypescriptで書いていますが、DOM関連でNullableな操作が続きどう処理するのがいいか悩んだので色々やってみます。

Typescriptは制限と同時にできることも多いので思いのほか色々できました。

 

キーワード:Null合体演算子Null条件演算子Null許容型Type GuardNon-null assertion operatorDefinite Assignment AssertionsOptional chaining

続きを読む 【Typescript】Nullableに対する様々な操作

【javascript】URLエンコードあれこれ

色んなAPIを使っているとPOSTで情報取得をするものもあります。

api keyなんかが必要な場合は仕方ないとして、どうでもいいパラメータをPOSTで送るものがREST APIと自称してて??となることも多々。

そんな中で躓くことの多いapplication/x-www-form-urlencodedのエンコードをどうするのがいいかなと試してみたので覚書き。

 

基本的にネストしたデータは送らないという前提で書いていきます。

階層化したデータを送る必要があるならapplication/jsonで送るかJSON.stringfyしたものを送るようになっているはず。きっとそう。

とはいえ必要な場面が来るかもしれないのでそれっぽいコードも書いておきます。

続きを読む 【javascript】URLエンコードあれこれ

fetchでxml(rss2.0)をパースする

WordPress Blogのfeedをjavascriptで扱いたい。

feedをjsonで返すプラグインなんてのもあったんですが、今後のことも考えて使う側でどうにかしたいと思います。

jQueryの$.parseXML()を使うとかなり楽ですが、できればもうjQueryにはかかわらないようにしたい。

fetch APIを使ってXMLを処理してみます。

続きを読む fetchでxml(rss2.0)をパースする

【Node.js】サーバ処理で使う通信ライブラリ

ここしばらくフロント開発が便利になった反面、サーバ(node.js)でこれ使えないんだっけとなることが多々あります。

特に通信系は多種にわたる処理のいろんなフェーズで使うのため、その場その場で使うものを決めていたんですが今後のために少しまとめておきます。

続きを読む 【Node.js】サーバ処理で使う通信ライブラリ

Next.jsのライフサイクルと外部APIのタイミング

簡単にReactを使ったSSRができるNext.jsを使っていて外部APIをfetchするときに色々戸惑ったので覚書き。

公式ドキュメントが結構偏っているのと日本語情報も少ないのでわりと手探りでどうすればいいか考えていきます。

next 9.1.7 react 16.12.0

続きを読む Next.jsのライフサイクルと外部APIのタイミング

複数の非同期処理をうまく処理する【Web API編】

複数のWeb APIを叩いたりするときに複数の非同期処理をハンドリングする必要があったので、適当に書いた後どんどん変えていったら別物になりました。

今後のPromise活用に使うかもしれないので基本部分からまとめておきます。

続きを読む 複数の非同期処理をうまく処理する【Web API編】