gray-matterという便利なライブラリがあります。
「Next.js＋gray-matterのススメ」でも書いたようにコンテンツとコンフィグをまとめて１つのマークダウンにかけるようなやつです。
TypeScript でセクションを使う時に少し困ったのでメモしておきます。
カテゴリー: javascript
React-Markdownで見出しタグを変更する
react-markdown で 見出し要素 <h1> ~ <h6> を独自に編集したい。
具体的には Material UI の Typography にしたい。
javascript でも問題ないですが Typescript 前提で書いています。
Typescriptの型指定を無視する
gl-react でお絵描き的なことをしようとしてて、Typescript の型チェックが通らない値を設定する必要が出来た。
型設定を修正するのが正攻法ですが、直すのが面倒な事情もあっていくつかのプロパティーの型チェックを放棄したい。
考えてみれば必要な機能で基本的な事なんですが、やろうと思ったことがなかったので知らなかった。
React Native, Expoでのパスエイリアス設定
Expo ( react native ) で相対パスの代わりにエイリアスを使いたい。
import Ctx from "../../../contexts/main"; みたいなのは書いてられないです。
next.js で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。
CalroでGUIアプリを作りたかった
定期的にGUIアプリを作ってみたくなる発作が出ました。
前回は「Go+Qt」、「Goのみ」、「NWJS・Electron」で作ってますが、今はJavascript (Typescript) 以外触る気分でないので何かないか探してみる。
するとGoogle製のCalroというのを見つけました。
https://github.com/GoogleChromeLabs/carlo
ElectronのようなChromium組み込みアプリですが、ローカルのChromeを使うのでビルドサイズが小さく済む。インストールしてないとどうなるかというと、
Q: What happens if the user does not have Chrome installed?
Carlo prints an error message when Chrome can not be located.
このCalroを使ってなんかしようと思ったら何もできなかったという内容です。
カルロっていうとコマンド―を想起するのは自分だけではないと信じたい。
ReactでTwitterのタイムラインなどを埋め込む
React(Next.js)でTwitterの埋め込みを行いたい。
主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。
ライブラリを使ったり使わなかったり。
【Typescript】モジュールをブラケット表記法で使う
import * as M from ""で読み込んだモジュールをブラケット記法[]で使いたい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//module_a export const contents_a = ...; export const contents_b = ...; export const contents_c = ...; //module_b import * as M from "./module_a" export const someFunc = (name: string) => { M.contents_a; //ドット表記法なら問題ない M[name]; //この書き方はエラー /* expression of type 'string' can't be used to index type 'typeof import("..."). No index signature with a parameter of type 'string' was found on type 'typeof import("..."). ts(7053) */ } |
こんな感じで引数（変数）に対応したモジュールを使いたい場合にどうするか。
日時を使った新規ファイルの命名
なにか新しくファイルを作るときには命名法則を考える必要があります。
被らずにソートしやすいものとして日時の情報を使うことが多いですが、どうやって使うのがいいかなと思ったのでjavascriptで適当に動かしてみます。
Next.js with Material-UIでスタイルが崩れる
Next.jsとMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。
現象としてはnext.jsのPHASE_PRODUCTION_BUILDでgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。
ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。
結構複雑な問題だったので要点をまとめながら解決を図ります。
環境：next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1
【Typescript】Nullableに対する様々な操作
Next.js(React)でTypescriptで書いていますが、DOM関連でNullableな操作が続きどう処理するのがいいか悩んだので色々やってみます。
Typescriptは制限と同時にできることも多いので思いのほか色々できました。
キーワード：Null合体演算子Null条件演算子Null許容型Type GuardNon-null assertion operatorDefinite Assignment AssertionsOptional chaining