会津ラボ

React Hook Form と Draft.js の組み合わせ

React Hook Form を使えばフォーム周りの state を一元管理したり、バリデーションを加えたり拡張できるけれど、Draft.js の値も組み込めるのか、というのが気になるところだと思う。「React Hook Form で、Draft.js の state を管理したい」「React Hook Form と Draft.js を組み合わせたい」など、お困りなら力になれるかもしれない。はじめにリッチテキストエディタを単一に配置する程度ならば、個別に state を設けるのみで済まされる。これは Draft.js 公式のドキュメントに掲載されているように、ひとつの <Editor> に対して、ひとつの editorState を設定するというものだ。だけど実際には、リッチテキストエディタもフォームの一部であることが自然で、そこには入力フィールドがあったり、選択フィールドがあったり、チェックボックスがあったりすることだろう。そうするとフォームヘルパー系のライブラリ（react-hook-form）によるフォーム管理が見込めるわけで、そんななか Draft.js の <Editor> だけ別途 state を定義しているのは残念に思えてくる。どうかこれも一緒に管理できないものか、というのがこのエントリーの根幹になっている。興味を引く内容であったならば引き続きお付き合いいただきたい。 React Hook Form と Draft.js を組み合わせよう React Hook Form と Draft.js の組み合わせにおける最小構成を用意させてもらった。実装環境各種関連パッケージのバージョンは、以下コードを確認してほしい。コンポーネント React コンポーネントは、以下コードを確認してほしい。…

December 2, 2021
ブラウザ対応まで待てない！CSS コンテナクエリ（@container）の polyfill 適用について

コンテナクエリのプロトタイプが利用できるようになって、マークアップエンジニア界隈は大きな注目を集める一方で、 Chrome Canary でフラグを有効にしなければ機能しない対応状況が、いまひとつ現場に熱をもたらさない要因となっている。 CSS に関心がある、あなたにおかれても「いつコンテナクエリを使えるのだろう」と首を長くして待たれていたことだろう。そんななか GitHub の GoogleChromeLabs アカウントからコンテナクエリの polyfill が公開された。このエントリーでは、Container Query Polyfill について紹介したい。 CSS コンテナクエリとは CSS コンテナクエリは、対象の親コンテナのサイズに応じてスタイルを適用するためのものだ。サイズに応じてスタイルを定義する現行の手段といえば、CSS メディアクエリ（@media）が用いられ、ビューポートを基に切り替えている。しかし、このアプローチでは制限があるとして、CSS コンテナクエリ（@container）が登場したと思われる。たとえばサイドカラム内のコンテンツなどは、ビューポートを基にするより、親コンテナであるサイドカラムのサイズに基づいてスタイル定義したほうがスマートになる好例じゃないだろうか。モジュラーな設計が求められる昨今のフロント開発にマッチするとして期待されている。 Container Query Polyfill を適用しようそれでは、CSS コンテナクエリ用 polyfill の container-query-polyfill を適用してみよう。使い方 ES modules に準拠したセットアップならば、以下のコードで Polyfill を適用できる。 import に際して、パッケージがインストールされている必要があるから、事前に yarn add container-query-polyfill などで用意しておこう。従来の読み込みが求められるセットアップならば、以下のコードで Polyfill を適用できる。要件的に、CDNサービスから読み込めないならば、container-query-polyfill リポジトリを git clone するなりダウンロードするなどしてから…

November 29, 2021
【入門】HTMLを書くとき用意するもの

HTML 入門直後だと「どんな HTML 要素あるの？」だったり「どんなツールが必要なの？」だったりは、当然のように湧き上がる疑問だと思う。わたし自身も、HTML 入門に踏み込んだころに同様のことでモヤついたのを覚えている。数ある HTML 要素のなかから、どれを優先して覚えればいいのか、ポピュラーな HTML 要素を知りたいと望んだり、HTML を書くにあたって必要とされるツールはどれなのか、プロの立場から入門者の目線に立ってもなお役立つツールを教えてほしいと願ったりしたものだ。このエントリーでは、そんな悩みに回答させてもらいたい。 HTML 要素を知る HTML コーディングにおいて HTML 要素の理解は、なによりも要求されるわけだが、WHATWG 勧告の HTML (Living Standard) で 100 個を超える HTML 要素が存在する。それらをあまさず習得すれば最善だろうけれど、実際に HTML コーディングしてみると、そのほんの一部しか使っていないものである。いずれは全部覚えてもらうとして、これから HTML を覚えようという場合においては、頻出する HTML 要素から始めてみてはどうだろうか。ここでは、ポピュラーな HTML 要素をピックアップして、お届けしよう。基本構成基本的な構成は、DOCTYPE宣言から始まる一連の HTML 要素で作られる。先頭行の <!DOCTYPE> は、html 文書のバージョンを定義するためのもので必須で配置しなければならない。 <html> は html ファイルの基幹となる要素で、ほかすべての要素を包含している。 <head> は html ファイルに関するメタ情報を含める。つまりタイトルや文字エンコーディング、スタイルなどのことで、目に映らないものを対象とした梱包要素だ。 <body>…

November 22, 2021
[JavaScript] ISO形式の日付をミリ秒に変換する方法

ISO形式の日付データをミリ秒にしなければならないケースといえば、UNIX時間の参照や処理経過時間の計測などだろうか。UNIX時間においては、秒単位であるが、まず日付データをミリ秒に変換する工程が必要だ。それから処理経過時間の計測では、差分を算出するためミリ秒に変換することもあるだろう。このエントリーでは、ISO 形式の日付をミリ秒に変換するソリューションについて共有したい。ミリ秒に変換する Date.parse() Date.parse に渡した文字列（ISO形式）に対する、1970 年 1 月 1 日 00:00:00 UTC からの経過ミリ秒で変換している。 Date.prototype.getTime() getTime による 1970 年 1 月 1 日 00:00:00 UTC からの経過ミリ秒で変換している。数値型に変換するショートハンド + 記号（ショートハンド）によって Date オブジェクトを数値型に変換している。 UNIX時間に変換する UNIX時間は、UTC時刻における1970年1月1日 00:00:00 からの経過秒数で表される。つまりミリ秒を秒に変換できれば目的が果たされる。では、その方法を見ていこう。上述の手段によってミリ秒を参照できているから、それを 1000 で割ればよい。

October 13, 2021
Create React Appのwebpack環境をejectしないでカスタマイズする方法

Create React App の webpack 環境を eject することで隠蔽された構成ファイルが、プロジェクトフォルダに顕現する。それらファイルを直接参照できることによって webpack や babel、ESLint など、カスタマイズを可能にしている。ところが、複雑な構成ファイルを扱うにも抵抗があったり、eject すると元に戻せなかったりとネガティブな感情を覚えてしまう。そこで、このエントリーでは、eject せずに Create React App をカスタマイズする方法を紹介したい。カスタマイズの準備 eject せずに Create React App をカスタマイズするにも、多少の準備が必要だ。決して難しいことではないから引き続き付き合ってほしい。パッケージをインストールする webpack 環境をオーバーライドするのに必要なパッケージをインストールしたい。必要なパッケージは次の、 react-app-rewired customize-cra をインストールする。ついては、以下コマンドを実行してほしい。開発環境をカスタマイズするためのパッケージであるわけだから、いずれのコマンドも –dev や –save-dev オプションを付与することで、devDependencies 所属のパッケージとしてインストールしている。 package.json を修正する package.json の scripts 項を修正する。ここでは、eject コマンド以外の react-scripts を react-app-rewired にしているだけだ。もともと react-scripts が隠蔽された構成ファイルを参照していたところに、react-app-rewired にすることでカスタム用構成ファイルを介入させる作りだと考えられる。…

June 11, 2021
JSライブラリ不要！ページトップへ戻るスムーススクロールの最小構成

「スムーススクロールのライブラリは使いたくない」この要件に沿ったページトップへ戻るスムーススクロールの最小構成は、どの程度だろうか？昨今の縦長基調のデザイン構成において当然のように設置される「ページトップへ戻るボタン」であるが、スムーススクロールが実装されているサイトを多く見かける。ボタンをクリックすればページ上部まで、なめらかにスクロールする機能だ。これを実現するには、JavaScript ライブラリを使うことが一般的だけれど、その導入ともなると労力を要する。できるならば可能な限りスケーリングしたい。このエントリーでは、JavaScript ライブラリを使わないスムーススクロールの最小構成を紹介しよう。これこそスムーススクロールの最小構成だスムーススクロールの最小構成は、HTMLとCSSだけで機能する。あわせて７行程度の記述で済む。以下コードを見てもらうのが早そうだ。ご覧のとおりHTMLはページ内リンクを設置していることがわかると思う。これだけでは瞬時にスクロール位置が変わるもので、断じてスムーススクロールとは言えない。そこで注目したいのが、CSSプロパティの scroll-behavior だ。scroll-behavior は、スクロールの振る舞いをコントロールするプロパティで、対象セレクタでスクロールが発生したときに機能する。ただしマウスホイール操作によるスクロールは影響を受けず、ページ内リンクや JavaScript の scrollTo() メソッドなど、指定位置までスクロールするケースにおいて適用される。 URLの # (ハッシュ) を消すなめらかにスクロールするだけで構わないなら、以上の内容で完成しているけれど、URLにアンカーリンク（#page-top）を含んでしまう。わずらわしいのであれば、つぎの記述でアンカーリンクを消せる。果たして、URLのアンカーリンクを削除できたことだろう。だがしかし、アンカーリンクを消すことがユーザー体験において、どのような効果をもたらすか怪しいところだから、扱いには気をつけてもらいたい。フォーカスをコントロールするリンクをクリックしたことで a タグにフォーカスが移る。スクロール位置はページ上部を表示しているにも関わらず、見当違いのところにフォーカスがあるわけだ。Tab キーで画面操作するユーザーに最悪のユーザー体験を与えかねない。したがって、スムーススクロール実装にはフォーカス管理を加えると良いだろう。要点としては、ページ上部にある主要なコンテンツにフォーカスを移す具合だ。まとめ JavaScript ライブラリを使わないスムーススクロールの最小構成の紹介だった。フォーカスをコントロールする項目で、onhashchange イベントハンドラのコールバックとしてフォーカス管理を記述している。これは前項の、URLアンカーリンクを消す対応をしている前提で活用してみた。無論、当該イベントハンドラで構わないけれど、ページトップへ戻るボタンのクリックイベントに反応する形で実装しても良さそうだ。臨機応変に要件に沿う対応を心がけたい。

May 12, 2021
ReactのContext APIを簡単実装！「constate」の使い方

「React Context API の状態管理が煩雑だ」状態管理ソリューションの代替策に挙げられる React Context API。コンポーネント間の props のバケツリレーを回避できるソリューションであるが、たびたび引き起こされる煩雑さに悩まされる。その要因は、コンテクスト( Provider )を展開するコンポーネントでローカルstate を定義するからではないだろうか。多くのケースで、ルートに位置するコンポーネントに展開する。しかも複数存在することもある。こうなると該当コンポーネントで必要に応じてローカルstate を用意しなければならない。それに加えてコンテクストを外部ファイル化しているような場合、さらにややこしい。ローカルstate とコンテクストの結びつきを目で追いかけなければならないのは保守性に欠けるうえに見通しが悪くなってしまう。可能ならば、ローカルstate とコンテクストの結びつきが明瞭かつプロジェクトのファイル構成に従いたい。そのニーズにマッチしたライブラリがある。このエントリーでは、Context API のラッパーライブラリ「constate」を紹介したい。 Context API とは？ Context APIは、任意階層のコンポーネント間でデータを共有する仕組みを提供するものだ。propsの明示指定を強制することなく、コンポーネントツリー間でデータを参照できる。これは、React v16.3で導入されたもので16.x以前のレガシーContext APIとは相容れない。将来のメジャーバージョンで削除される予定とのことだ。 https://reactjs.org/docs/context.html constate について Write local state using React Hooks and lift it up to React Context only when needed with minimum effort. https://github.com/diegohaz/constate 導入設置使用例かんたんな使用例として、モーダル実装を思い出してほしい。モーダルを開くトリガー要素はいたる所に散らばっていて、それを梱包するコンポーネントとモーダルコンポーネントが兄弟関係にあたる構造は珍しくない。いかにも相性が良さそうだ。まとめ…

April 15, 2021
Mildom（ミルダム）のコメント欄を非表示にする方法ある？表示切り替えるChrome拡張機能をつくる

「 Mildom（以下、ミルダム）は、コメント欄を非表示にできないの？」ライブ動画配信サービス「ミルダム」の視聴に際して、不便を覚えることがある。ディスプレイサイズを贅沢に専有できる環境ならば思いつくこともないだろうが、ブラウザサイズをタイトにすることで動画が小さくなって視聴しにくい。そもそもミルダムのサイトは、リキッドレイアウトよろしくメインカラムが可変してレイアウトを維持する。ところが固定幅のコメント欄に押しやられた動画はアスペクト比を保ってリサイズするから小さくなってしまうわけだ。このような観にくい状態は、レスポンシブデザインの弱点のひとつで、ちょうど調整しにくい時空の狭間のようなもので、ミルダムにおいてもビューポート900px以下でコメント欄を非表示するように施している。一方で、ヘッダー画像が配されているイベントページのようなレイアウトの場合に限り、コメント欄非表示タブが用意されている。これを通常レイアウトにも設置してもらいたいところだが、いまのところ実装の様子がみられない。なんとしてもコメント欄が煩わしい場合は、Chrome デベロッパーツールでコメント欄カラムを非表示にしている次第だ。それもいい加減めんどうくさい。そんなわけで Chrome 拡張機能をつくってみたい。 Chrome 拡張機能とは？ Googleが開発したウェブブラウザ「Google Chrome」に追加するソフトウェアプログラムで、標準では備わっていない便利な機能を体験できる。 Chrome 拡張機能の入手は、Chrome ウェブストアに公開されているものをインストールする手段と、Chrome 拡張機能ポリシーに従って配布されたものをインストールする２パターンが考えられる。なお規約違反した外部拡張機能に関しては望ましくないソフトウェアとしてフラグが立てられるとのことだから留意しておきたい。インストールしたものは、Chrome 拡張機能の管理画面（chrome://extensions/）から確認できる。アンインストールしたり機能効力を切り替えたり、開発時におけるデベロッパーモードやパッケージ化されていない拡張機能を読み込む機能も備わっている。開発環境を準備しよう Chrome 拡張機能の開発にあたり「chrome-extension-webpack-boilerplate」を活用して効率化を図りたい。当該パッケージは、Chrome 拡張機能を作るのに必要なソースコードを備えた雛形環境で、開発の着手が容易になっている。 Node.js のバージョンが6以上であることを確認する以下コマンドで Node.js のバージョンを確認のうえ、6以上ではない場合は適宜アップデートする。 GitHub リポジトリからクローンする作業するディレクトリで以下コマンドを実行する。なお git がインストールされていなければ圧縮ファイルをダウンロードすればよい。 https://github.com/lxieyang/chrome-extension-boilerplate-react パッケージをインストールするパッケージマネージャのインストールコマンドを実行する。開発サーバーを起動するフロントエンド開発で馴染みの webpack-dev-server を起動する。 http://localhost:3000 にアクセスできれば無事 webpack サーバーが立ち上がっているものと考えられる。それと同時に「build」フォルダが生成されていることを確認できる。 Chrome に読み込ませる前節で触れた「build」フォルダを Chrome に読み込ませることで、開発中の拡張機能を適用できる。その手順を確認していきたい。開発環境の準備は以上で完了だ。…

April 13, 2021
育児休業を1年とって思ったこと〜序〜

昨年めでたく第一子を出産し復帰いたしましたsushiです。産前休業を含めると、なんと一年以上業務から離れておりました。こんな長いお休みは社会人生活初でございました。ありがとうございます。弊社のブログではプログラマの皆さんがいろんな開発記事を載せてくれているので、私は嗜好を変えて育休体験談をお話させて頂こうと思います。会津ラボでは女性の育休取得は私が初めてですが、その前にも男性社員が育休を取得したり、取得しやすい雰囲気ではありました。ただそれでも初めての事ばかりで全体感を掴むまでに苦労したのでその辺りをお話しできたらなと。スケジュールざくっと妊娠〜出産〜育休のスケジュールを説明します。「子どもができたなぁ。」となってから復帰までは、あっという間でしたが1年10ヶ月もありました。人によっては産休だけだったり、育児休業を早めに切り上げたり、保育園が決まらなければ最大2歳まで延長できたりと期間は様々です。男性の場合の育休は少し違っていて、産休がない分産後の育休は生まれてすぐ取得できます。でも初めての男性の育休取得では、会社として取得できるよう取り組んだ場合には助成金が出る制度もあるようです。全体の流れやお金、手続きなど全然知らないことばかりで大変でした。特に心配だったのがお金のこと！このあとじっくりお話しします。知りたい！お金のこと出産にまつわるお金はいくつかあります。あくまで会社員で育休を取得したわたしの場合をご説明。妊娠を機に仕事をやめる場合や元々仕事をしていないなど、条件で色々変わります。妊娠中・妊婦検診費用の助成市町村ごとに定期的な妊婦検診を実施しています。会津若松では妊娠届出書を提出すると母子手帳と助成金クーポン的な妊婦健康診査受診票がもらえました。全国的に何かしら検診費用の助成があると思いますので調べてみてください。里帰り出産での追加検査や薬以外ではほぼ費用はかかりませんでした。出産後・出産育児一時金 42万円が支給されます。出産する病院で直接請求してくれたので特に自分でやる手続きはありませんでした。（出産育児一時金直接支払制度）病院で事前に聞いておくと安心です。特別リッチな病院じゃなければ出産費用はほとんど賄えますが、わたしの場合はお産前後に入院したため追加で十数万かかりました。幸いにも自分で入っていた医療保険で賄えたので、自分で加入している保険の内容（手術に異常分娩が含まれるか、入院日額いくらもらえるかなど）をチェックしといたほうがいいです。・出産手当金産休(産前休業・産後休業)を対象として、1日平均標準報酬日額の2/3の金額がもらえます。ただまとめて産後に請求、支払いとなるのでちょっと生活費の準備が必要ですね。出産した病院の記載と会社の記載が必要なので、とりあえず病院で記載してもらえば産後にゆっくり申請できます。育児中・育児休業給付金育児休業中の給付金です。半年までは賃金の67%、半年以降は50%が支給されます。基本は2ヶ月ごとの申請です。67%と言ってもピンときませんが手取り賃金と比べると休業前の約8割が支給されるイメージです。また給付額を80%にする検討がされているみたいなので今後上がるかも・・。手続きは会社でやってくれました。（タイミングは産休終了後）親切にも1ヶ月ごとに申請していただけたので毎月収入があり大変助かりました！その他・パパママ育休プラス終わってから内容が理解できたため使うことができませんでしたが、育児休業の取得期間の一年間で、パパとママでずらして取得し半年ずつ67%の給付額で育休を取ったりできる制度です。給付額が多いうちに復帰するけれど一年間は子どもが見られるためうまく使えば便利ですよね！まとめ出産にかかる費用については雇用保険などの国の制度で、あまり個人の負担がかからないようになっています。失業保険などと同じようなイメージですね。ちょっと節約すれば貯金がなくてもどうにかなるかも・・・。育休前は「復帰できないんじゃないか」「やめなくちゃいけないんじゃないか」など出産とか育児についてネガティブなイメージがありましたが、自分が充実した育休を取れたことでいろいろなことに気づくことができました。それも会社の理解と柔軟な対応や、みんなの協力のおかげだと思っています。このような企業が増えていけばきっと女性が働きやすい世の中や、子どもが増える世の中を作っていけるのではないかと期待しています。よーし！これからもっと頑張るぞ！結局、生きるためには仕事と生活両方大切！会津ラボではキャリアプランとライフプランをそれぞれに考えてもらい自分企画書を作成します。それぞれに合った仕事の仕方や、ライフイベントのタイミングでは働き方なども調整可能です。コロナ渦の現在ではテレワークも活用し新しい働き方も進めています。育休体験談を長々とお話しさせていただきましたが、そんな働きやすい会津ラボで、あなたも一緒に働いてみませんか？ ※記載内容については簡易的な表現であったり、古い表現や間違いなどがある可能性があります。念のため情報の確認をお願いいたします。

April 1, 2021
[Python] aws-requests-auth で Lambda から IAM 認証つきの API を簡単に叩く

AWS Lambda から IAM 認証のかかった API を呼び出したいという場合があります。この場合、Lambda に適切な IAM ロール（ポリシー）を付与し、かつ API 呼び出し時に署名を行う必要があります。 Python では、aws-requests-auth というライブラリを使用すると簡単に署名を行うことができます。 API の準備 IAM 認証のかかった API を用意します。リージョンは ap-northeast-1 と仮定します。今回は GET /hoge を叩くと {“message”: “hoge”} が返ってくるように設定しました。この API に IAM 認証をかけ、デプロイしておきます。ステージ名は api としました。黒く塗りつぶしている箇所は API ID です。 Lambda 関数の作成 API を呼び出す Lambda 関数を作成します。ロールには基本的なポリシーに加え、以下のようなポリシーを設定します。 Resource は arn:aws:execute-api:(リージョン):(アカウントID):(API ID)/(ステージ)/(メソッド)/(リソースパス) のような形式で指定します。…

January 22, 2021