React アプリのモーダルを dialog 要素で実装する - 30歳からのプログラミング
モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが、これはモーダルとして開発者が求めているものとは、多くの面で異なる。 そのためなのか、モーダルを実現するためのライブラリは多数公開されている。 だが個人的な方針として、依存ライブラリはあまり増やしたくない。 かといって自分で開発するのもそれなりに手間がかかる。 そこで、HTML 5.2 で標準化されたdialog要素を使うことにした。 標準化された機能なら、知識やノウハウが陳腐化しにくく、第三者が作ったライブラリより採用しやすい。 そう考え、React アプリのモーダルをdialog要素で実装することにした。 だが、DOM を操作するため
なぜ組織の透明性が大切なのか - 30歳からのプログラミング
個人的に、組織の透明性というものに関心を持っている。自分にとって大切なことだし、組織にとっても大切だと思っている。 この記事では、透明性に対する現時点での考えを書いていく。今の自分の頭のなかのスナップショットのようなものなので、あまり整理されていない。 大きく分けて、なぜ透明性が大切なのか、そして透明性を実現するために大切だと思っていることについて、書いていく。 透明性とは何か、透明性が高いとは具体的にどういう状況のことなのか、といった話は扱わない。取り敢えず、情報や意思決定のプロセスがオープンになっており誰でも制限なくアクセスできる、くらいの意味で書いている。本当はそれだけでは不十分で、情報のメンテナンスやサマライズ、適切な通知やアナウンス、なども必要になってくるが。 なぜ透明性が大切なのか 透明性に問題があると何が起こるのか、という角度から述べていく。 モチベーションが下がる もしかし
ブラウザにおける ES Modules の利用とパフォーマンスについて - 30歳からのプログラミング
現代の主要なブラウザでは、ES Modules（以下、ESM）を利用することができる。 つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。 モジュールシステムをそのまま使えるので、複数のファイルをバンドルする必要もない。 この記事ではまず、ブラウザで ESM を使う方法について説明していく。 その後、処理の流れを詳しく確認していく。これを理解していないと、パフォーマンスが非常に悪いページになってしまう恐れがある。 動作確認は Google Chrome の84.0.4147.105で行っている。 ESM 利用の基本 まずは検証用にサーバを立てる。 以下のコードを Deno（バージョンは1.2.2）で実行する。 そうすると、http://localhost:8080/にアクセスしたときにindex.ht
『プログラミングの基礎』を読んだ - 30歳からのプログラミング
ゴールデンウィークを使って読み進めて、ようやく読み終わった。 浅井健一『プログラミングの基礎』サイエンス社 タイトル通り、プログラミングの基礎を学んでいく。言語はOCaml。 リストや木構造などの簡単なデータ構造やアルゴリズムについても学んでいく。 Gitを使って内容をまとめながら読んだ。 赤黒木の挿入の説明がよく分からなかったのと、最後のヒープについては飽きてしまったので、やってない。 それ以外は一通りやった。 読もうと思ったキッカケとなったのは、この記事。 19: 読んでよかった技術書 – kdxu – Medium 憧れているプログラマが「プログラミングの作法の9割はこの本から学んだ」と言っていたので、興味を持った。 OCamlというのもいいなと思った。 プログラミングが上手くなるためには関数型言語をやるといいとどこかで読んだし、今は型の強い言語が人気だし。 JavaScriptに型
Reactのコンポーネントにpropsを渡さない場合のFlowの書き方 - 30歳からのプログラミング
Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Component<Props> { render() { return <div>{this.props.foo}</div>; } } class ParentComponent extends React.Component { render() { return <ChildComponent foo="hoge" />; } } https://flow.org/en/docs/react/components/ では、このコンポーネントにはprop
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
