我が名はなんとか菜である!

主に技術系の記事を書きますが、ポエムも混入します。

【React】子要素によって親要素の状態を更新するコンポーネントの作り方

4月も半ばに近づきようやく春の陽気を感じられるようになってきましたね。

今日は珈琲館で書いてる。

前提

子要素によって親要素の状態を更新するコンポーネント とは、「そのコンポーネントを特定のコンポーネントchildren として渡すことで特別な処理を行うコンポーネント」のことです。

よく分からないと思うので以下に疑似コードを示します。

import { Tab, TabItem } from './my-handmade-tab';

const Component = () => {
  // 以下のようにして使うと、 "fisrt" と "second" というアイテムを持ったタブが生成される
  // タブがクリックされると中身が切り替わる
  return <Tab defaultKey="first">
     <TabItem tabKey="first" title="first">
       first tab content
     </TabItem>
     <TabItem tabKey="second" title="second">
       second tab content
     </TabItem>
  </Tab>
}

みたいなやつのことです。UIライブラリとかでよく見るやつですね。

実は最近まで「こういうのってどうやるといいのかなぁ」とは思いつつも、これを実現しているライブラリの中身を見に行くでもなくなんとなくモヤモヤした日々を送っていたところ、似たような処理を自前で実装する必要がとうとう出てきてしまい、ひええ~と思いながら頑張って考えた結果なんとか実現できたので、その成果を書いていこうと思います。

続きを読む

Linter や自動フォーマッターで修正できないコーディングルールは敷くべきではないという話

プログラムは芸術作品じゃないんだよ。

追記: 一気に書き終えたあとタイトルをあまり回収していないただの愚痴になってしまったことに気が付きましたが、色々疲れてたせいだと思うのでその点了承して読み進めてください

今関わってるプロジェクトで、謎のコーディングルールが敷かれている。

それは以下のようなものだ。

  1. すべての React コンポーネントは、 Component という名前で named export する
  2. すべてのモジュールは namespace import し、 named import は使わない
  3. ただし、 styled-components については default import してもよい

一つずつ問題点を書き出してみる。

続きを読む

プログラマとして「プログラムを書くこと」以外に許容できる仕事、許容できない仕事

まーたフローチャートが云々みたいな話でツイッターのタイムラインが盛り上がっていたので所感を書いておきます。

今日はルノアールで書いています。

プログラマはプログラムだけ書いていればいい仕事ではないというのが万人の共通認識だと思うが、そうはいってもやりたくないものはやりたくないものである。

僕の中でやりたくない仕事ははっきりしていて「実装の進行に一切寄与しないもの」である。

具体的に一つ挙げると「このタスクには具体的に何時間ぐらいかかるか」のような見積もりを細かく切る仕事である。

勘違いしないで欲しいのが、「大目標に対してタスクを細分化する」ことはむしろ重要であると僕は考えているということだ。

続きを読む

Next.js をカスタムサーバーで構築して Websocket サーバーと同居させる

久しぶりに純粋な技術ネタです、備忘録代わり。

今日は秋葉のミスドで書いている。(気が付いたら周りのビルがぽつぽつなくなっていてなんだかちょっと寂しい感じになっていた)

概要

Next.js はお手軽 React.js フレームワークとして使うこともでき、フロントエンドで完結するウェブアプリであれば Next.js のみで作っていくことも可能である。

しかし、ちゃんとしたバックエンドサーバーを置きたい場合、とてもではないが Next.js の /api だけでは大変辛いので、別にサーバーサイド用フレームワークを用いて組む必要がある。

その際、従来通りサーバーサイドアプリケーションは別のディレクトリに構築していくのももちろんアリだが、実は Next.js のSSRサーバーは普通に next パッケージとして import することが可能であり、これを使えば手動で初期化処理を行うことが出来るため、この一連の処理の中で独自のサーバーサイドアプリケーションを同居させることが出来る。

今回紹介する例では Next.js を手動で初期化し、 ws パッケージを用いて WebSocket サーバーを立て、クライアントから ws://~ で接続する。

続きを読む

あけおめ~(気さくな挨拶)(23日遅れ)(いつまでも正月気分)

こん菜~(気さくな挨拶)

正月気分でぼんやりしている間に1月が終わりそうです、怖いですね。

今日はなんだか最近災難が続いているサイゼで書いています、おなかいっぱいになった。

というわけで新年なので、今日のお題は今年の目標についてです。

続きを読む

給料が上がって悠久の有休が欲しいけどエンジニア採用って難しそうだよねっていう日記

世間ではログフォージェーの脆弱性で湧いておりますが、僕は幸いにもJVMを趣味も含めて業務でもあまり縁がないので、対応している人は大変だなぁと思いながら見ています。

今日は大久保の菜々の湯で書いてます、ポテトがうまい。

続きを読む

【今年のやらかし Advent Calendar 5日目】CI/CDの設定をミスって環境を大量に生やした話

というのは嘘で、 今年のやらかし Advent Calendar なんていうアドベントカレンダーも存在しません、残念でした。

11月中、精神的に摩耗していたせいでボーっとしていたらうっかり知り合いのアドベントカレンダーがすべて埋まってしまっていました、残念。

一人アドベントカレンダーとかやろうと思ったんですが、毎日日記を書けるほど僕はこまめではないので終了です。

というわけで以下より隔週の日記です。(それは日記なのか?)

今日は珈琲館で書いてる。

続きを読む