【TypeScript】gray-matterでsections

gray-matterという便利なライブラリがあります。

Next.js+gray-matterのススメ」でも書いたようにコンテンツとコンフィグをまとめて1つのマークダウンにかけるようなやつです。

TypeScript でセクションを使う時に少し困ったのでメモしておきます。

続きを読む 【TypeScript】gray-matterでsections

React-Markdownで見出しタグを変更する

react-markdown で 見出し要素 <h1> ~ <h6> を独自に編集したい。

具体的には Material UITypography にしたい。

javascript でも問題ないですが Typescript 前提で書いています。

続きを読む React-Markdownで見出しタグを変更する

Typescriptの型指定を無視する

gl-react でお絵描き的なことをしようとしてて、Typescript の型チェックが通らない値を設定する必要が出来た。

型設定を修正するのが正攻法ですが、直すのが面倒な事情もあっていくつかのプロパティーの型チェックを放棄したい。

考えてみれば必要な機能で基本的な事なんですが、やろうと思ったことがなかったので知らなかった。

続きを読む Typescriptの型指定を無視する

React Native, Expoでのパスエイリアス設定

Expo ( react native ) で相対パスの代わりにエイリアスを使いたい。

import Ctx from "../../../contexts/main"; みたいなのは書いてられないです。

next.js で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。

続きを読む React Native, Expoでのパスエイリアス設定

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を使ってなんかしようと思ったら何もできなかったという内容です。

カルロっていうとコマンド―を想起するのは自分だけではないと信じたい。

続きを読む CalroでGUIアプリを作りたかった

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に対する様々な操作