みなさんこんにちは帳票弱いマンです。 フロントエンドライブラリはやっぱりReactが好きです。帳票を作る時もReactを使いたかったので、色々やった結果を書いてみます。 出力方式 2つの方式を検討・利用しました。 React-PDF https://react-pdf.org/ （※私が利用したバージョンは 4.x → 1.6 表示する方のreact-pdfと間違えてました） 専用のReact要素 ＋ react-pdf用レンダラーを用いることによってPDFのBlobが出る方式。 <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> <View style={styles.section}> <Text>Section #2<

この記事のソースコード: https://github.com/knjname/2020-09-03_growingtsd TypeScriptプロジェクトのコンパイルが終わらない！ こんにちは型に弱いマンです。 CIでTypeScriptプロジェクトのコンパイルが1時間たっても終わらなかったことはありませんか？ 私は何度かあります。 TypeScript的に行儀の良い(?)フレームワークを使っている方は、おそらくそういう現象に遭うことは少ないと思います。 行儀の悪い(?)フレームワークをハードに使っている方は、こういうことに遭う確率が高いと思います。 具体的にどういうフレームワークかというと、下記のようにコードで動的に型を紡ぎ出す系のフレームワークですね。 （mobx-state-tree なんかが該当します。） export type ItemDefinitions<D = {}> =

オレオレのAtomic Designの指針です。 世間のAtomic Designと合わないところが結構あると思いますが、苦情は受け付けません。 （コンポーネント名は説明のためにクソみたいな名前になっているので、適切なものを振るようにして下さい。） Atomic Design 以前の概念 Presentational / Container アプリのストア（状態）とコンポーネントを紐付けているかどうかで、下記のように呼び方を変えるのが普通です。 Presentational component ストアと紐付いていない 見た目だけのコンポーネント。容易にテスト可能。 Container component ストアと紐付いている Container componentを直接含むコンポーネントもcontainer componentです。 なるべく前者によせてコンポーネントを作れるといいですね。

困った共通処理 Next.js で、全ページ共通の処理がある場合、あんまり頭のよくないコードを書くことになります。 export const getServerSideProps = async (ctx) => { // （全ページ共通処理）共通情報を取得する。 let commonInfo; try { commonInfo = await getCommonInfo(); } catch (exception) { // 取得できなければ404で返す ctx.res.status = 404; return { props: { notFound: true } }; } // いろいろな処理… } これを全ページにコピペして書くなんて信じられな〜い！ もちろん関数に抽出すればもっと短くなるかもしれないけど、 try { } catch () { return ... } は短くなら

Next.js (現バージョン 9.4) に入門します。 何をするものか？ Reactでウェブサイトを構築できます サーバサイドで動きます SSRできます APIも生やせます 静的サイトとしてもレンダリングできます 基本的にcreate-react-app (CRA)によく似ています CRAと同じで、設定がなくて楽ちんです CRAと同じで、裏で勝手にwebpackとか使ってます 特定のディレクトリに決まった形式でJSファイルを置けばページとしてルーティングとサーブとレンダリングをよしなにやってくれます ページに該当するJSからReactコンポーネントをexport defaultとして公開すればOKです。 ./pages/xxx/index.tsx → http://myhost/xxx/ ./pages/foobar/baz.js → http://myhost/foobar/baz .

自作TypeScriptパッケージをそこそこいい感じにビルドする (Rollup / tsc / PostCSS / Babel)TypeScriptbabelpostcssrollup.jsrollup やりたいこと Rollupで下記を達成したいと思います。 自作TypeScriptプロジェクトのビルド ES6 Modules (import ...) での出力 Webpackで参照するにはこちらの形式が有利です（TreeShaking） CommonJS (require(...)) での出力 NodeJSで参照するにはこちらの形式が必要です 型宣言(*.d.ts)の出力 ソースマップ(*.js.map)の出力 ビルドしたJavaScriptをBabelでトランスパイルする ソース中で参照しているCSSはPostCSSで処理しながら、一つのファイルとして出力 外部ライブラリ(node

CRA (create-react-app) でTailwind CSSに入門してみます。 Tailwind CSS概要 一言でいえば、パラメータをカスタマイズ可能なCSSフレームワークという感じです。 Tailwind CSSの設定ファイル(tailwind.config.js)に基づいてTailwind CSSがCSSファイルを生成してくれるので、それをTailwind CSSの規約通りのクラス名を通して利用する形になります。 自分でゼロからUIデザインする際に邪魔しないCSS設計 Atomic Designをしたいし、自サイトのテイストを出したいが、そこそこCSSの定番は欲しいという要望にマッチしそう たとえば、UIライブラリとしてMaterial-UIがあるわけですが、マテリアルUI強制になってしまうのが欠点だったりする 基本的にTailwind CSSが吐いたCSSを参照して利用

mobx-keystone をやっていきたいと思います。 公式サイト: https://mobx-keystone.js.org/ GitHub: https://github.com/xaviergonz/mobx-keystone 紹介記事: https://medium.com/@xaviergonz/mobx-keystone-an-alternative-to-mobx-state-tree-without-some-of-its-pains-8140767a3aa1 MST に比べて何がいいのか？ 基本的にMSTと同じようにツリー状のJSONと等価なデータでアプリ状態を表す ツリーにメタデータ({$modelType: string, $modelId: string})が付くようです。 applySnapshot() する時もこれらが要求されるのでそこは面倒。 MSTと違い、

Node.jsでサーバサイドWebアプリを開発中、なぜかメモリリークがあるライブラリに遭遇してしまったので、ワークアラウンドとして、定期的にプロセスを再起動させて、メモリリークの問題を緩和したいと思いました。 コード: https://github.com/knjname/2020-04-05_restartClusterChild 参考: https://nodejs.org/api/cluster.html サーバサイド http://0.0.0.0:10080 をリスンするプロセスが4つ立ち上がり、5秒未満で子プロセスを停止させ、その後に再起動します。（実用上は、もっと長い時間でプロセスを殺すべきです。） const cluster = require("cluster"); const http = require("http"); const sleep = time => ne

AWSのソリューションアーキテクト プロフェッショナルという資格を去年秋ごろに取得したので、備忘録代わりに合格体験記を書きます。（特にあんまり試験の具体的なトピックは書いてないです） ちなみにAWS関連だと下記の資格を持っています。 2018年 夏 資格取得: AWS ソリューションアーキテクト アソシエイト 2019年 秋 資格取得: AWS ソリューションアーキテクト プロフェッショナル (1回目落ちて、2回目の受験で合格。去年の秋ごろ取得。) 2019年 冬 AWS クラウドプラクティショナー (去年のre:Invent会場で取得) 資格の前提知識について 要求される知識 ネットワークなど含め基本情報程度の知識は必要だと思います。 TCP/UDP、サブネット、DNS解決、HTTP通信など Linuxの操作(CLI)はできたほうがいいです。 アプリケーション開発の知識もある程度はあった

Qiita に mobx-state-tree の記事が全然なくて寂しいので紹介記事を書こうと思います。 この記事ではReactと組み合わせて利用しています。 最近のReactがわからないと読むのがつらいと思います。 サンプルコードの動作確認はしていません。雰囲気を掴むためだけのサンプルコードです。 書いてたけど、情熱が尽きてしまった… MobX の紹介 mobx-state-tree を紹介する前に、 MobX を簡単に紹介したいと思います。 MobXはすごーーーく簡単に言えば、モデルの値の変更に自動連動するReactコンポーネントを作ることができるフレームワークです。 MobXでカウンタを作ってみる たとえば、状態の定義として MobX で下記のようなクラス（ストア）を定義しておき、 class Counter { // トラッキング可能な値の宣言 @observable counte

const model = types.model("ModelA", {/**/}) type ModelA_InferredType = typeof model export interface ModelA_ModelType extends ModelA_InferredType {} export const ModelA: ModelA_ModelType = model モデルの型を型推論そのままをexportせずに、きちんと名前がついた型としてexportするのがポイントです。 (参考: https://github.com/mobxjs/mobx-state-tree/issues/1425) なぜ上記のように書き換えるのか TypeScriptは型を推論できます。 そして、その型推論の上にmobx-state-treeのようなライブラリは成り立っているわけですが、推論

TypeScriptパッケージをwebpack (Tree Shaking)とNode.js両方で使えるようにする(ES6 Modules / CommonJS)Node.jsTypeScriptwebpackTreeShaking モチベーション 私は今までwebpackのみの割とシンプルなプロジェクトを作っていました。 特にインポート・エクスポートについては、import だの export だの書いておけば動いたのですが、 monorepo構成で、共通モジュールをこまめに切り出し、 webpack / Node.js 双方から参照するパッケージを作った途端に、 Node.js 「共通モジュールにある export キーワードって何？ そんなキーワードうちら知らんのやけど。」 と文句言われ始めたので、Node.jsからも文句を言われないパッケージを作りたいと思います。 ※文中に書かれて

tomono を使ってmonorepoに移行した話を書きます。 （※ monorepo化 ＝ ソフトウェアプロジェクトを複数のgitリポジトリに分けずに、1つのgitリポジトリにおさめること） monorepo に移行したかった 業務上、あるプロジェクト内でシステムコンポーネントごと（各所で動くAPIやバッチプログラム）に、gitプロジェクトを切っていたのですが、下記の理由により、だんだんmonorepoにしたくなってきました。 そもそもメンテナが1-2人しかいないのに、リポジトリが10弱存在していて管理が煩雑。 依存パッケージやランタイムのバージョンアップについて、それぞれのリポジトリにプルリクだしてマージするのが超煩雑。 共通ライブラリもリポジトリが分かれているけれども、半分自動化されているとはいえ、共通ライブラリのアップデートのたびに下記を繰り返すのが苦痛。 共通ライブラリの更新とバ

今日ハマったのでメモ。 Reactはバージョン16から要素に好きに属性を生やせます Reactはバージョン16からカスタム属性の利用を認めています。 たとえば、下記のような属性指定ですね。 上記の場合だときちんと mycustomattr="customvalue" が実際のDOMにレンダリングされます。 もともとReactでは、HTML公認のカスタム属性である data-** や、幅広い語彙を持つ aria-** は利用を認められていたのですが、その他の自作の属性、あるいはHTML5でいなくなった古い属性(e.g. <td> 要素の align 属性)は、カスタム属性が使えないと表現できません。 emotionのStyled Componentsはそのままだとカスタム属性をはたき落とします そして本題ですが、タイトルの通りemotionのStyled Componentsは、デフォルトで

SPAのルーティングライブラリを探していて、あまり自分好みのものがないので、自分なりのルーティングに対する考え方をまとめて、何がほしいのかを明らかにしたいと思います。 SPAにおけるURLおよびURL遷移とはなにか？ SPA内のユーザの現在位置＝URL として一次元の文字列(パス)として表現できるようにしている。 URLを書き換えることにより、ユーザの現在位置を書き換える ことになる。 現在位置を書き換えた結果をURLとしてメモする、という方式も考えられなくないけれども、実装が最終的に大変なので、アプリ内はURLを基軸にすべて画面遷移するというふうにしたほうがいいです。 URLはメモリ内だけに保存せず、ブラウザのアドレス情報（履歴情報）としてユーザに露出して保存している 別にメモリ内に保存してもいいが、ブラウザのナビゲーションでページ遷移する機能をユーザが利用できなくなりUX上不便。 何よ

Kotlin + Spring でインジェクトされるオブジェクトがプロキシ(CGLib)を伴っていた場合、メソッドがprivate変数をデフォルト非null引数に使っていると死ぬKotlinspringSpringBoot $ git clone https://github.com/knjname/2019-05-22_springkotlinpitfall 2019-05-22_springkotlinpitfall $ cd !$ $ ./gradlew bootRun ... java.lang.IllegalStateException: Failed to execute CommandLineRunner at org.springframework.boot.SpringApplication.callRunner(SpringApplication.java:816) ~

GitLab/GitLab CIで隣接プロジェクトへのsubmoduleありのリポジトリを扱っていて、ハマっていたのでメモ。 GitLab CIはデフォルトでsubmoduleは引っ張ってこないので、 GIT_SUBMODULE_STRATEGY を設定しよう GitLab CIはデフォルトでsubmoduleは無視します。 下記のように GIT_SUBMODULE_STRATEGY に適当な値を指定しましょう。 something_to_do: stage: test variables: # "none" (デフォルト): submoduleは引っ張ってこない # "normal": トップレベルのsubmoduleのみ引っ張ってくる (submodule内は解決しない) # "recursive": submoduleのsubmodule といった入れ子も解決する # # cf. h

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? nexus_1 | 2018-08-07 02:21:36,632+0000 ERROR [FelixStartLevel] *SYSTEM org.sonatype.nexus.extender.NexusContextListener - Failed to start nexus nexus_1 | com.orientechnologies.orient.core.exception.OStorageException: Cannot open local storage '/nexus-data/db/config' with