寒空のなか商戦に駆り出されているゆきだるまのみなさん、ことしもおつかれさまです。 この記事は、Money Forward Engineering Advent Calendar 2021 24日目の記事です。 私は、クラウド会計ソフトの画面をなんとかする仕事をしています。 React や TypeScript を使ってがんばっています。 この記事について この記事では、 React を使う話でたまに出てくる「メモ化」について書きたいと思います。 また、標準で使える useMemo などメモ化のためのフックは便利ですが、使えそうで使えない状況もあるようなので、一緒にここでまとめたいと思います。 新しい技術の話でもなければ、会社での独自の取り組みでもないアドベントカレンダーらしからぬ話ですが、ここ２年くらいずいぶん苦労したわりにあまり欲しい情報の記事がすぐ見つからず、もしかしたら有益かもしれな

« text/template と html/template に continue/break が入った。 | Main | 「エキスパートたちのGo言語」を読んだ。 » Go の http パッケージの Request.Body はこれまで最大バイト数を指定できなかったので、巨大なファイルをアップロードするといった DoS 攻撃を心配するのであれば、各ハンドラの中で独自でサイズ制限しながら読み込む必要がありました。Go 1.18 から http.MaxBytesHandler が入ったので簡単にサイズ制限をする事ができる様になりました。 MaxBytesHandler は http.Handler として提供されるので、例えば labstack/echo であれば以下の様に、各ハンドラを直接修正する事なく、簡単に導入して使う事ができます。 package main import ( "

こんにちは、@kaa_a_zuです。PWAという単語を聞いて、皆さんは何を想像しますか？A2HS、オフライン利用、プッシュ通知など様々な機能があるかと思います。今回は、あまり知られていないけど、WebAppを確実にNativeAppに近付ける機能についてご紹介をします。また、この記事は 2021年のPWA(Progressive Web App)のアドベントカレンダー 19日目の内容になります。 私が想定している読者は、全てのWeb開発に関わる方々です。中でも「既にPWAサービスを展開している」「既存のPWAを今すぐにNativeAppに近づけたい」という開発者に届けることができたら嬉しいです。 目次 PWA と ProjectFugu について マニフェストファイルの基礎 さらにNativeAppに近付ける マニフェストファイル(2021年末版) 1. PWA と ProjectFugu

はじめに この記事はJSL(日本システム技研) Advent Calendar 2021の記事です。 とある事情でReactの高階コンポーネントについて調べなければいけなくなったので、その過程でわかったことなどをまとめました。 いや難しいよ高階コンポーネント、、、 高階コンポーネントとは React公式ドキュメント先生の説明がこちら 高階コンポーネント (higher-order component; HOC) はコンポーネントのロジックを再利用するための React における応用テクニックです。HOC それ自体は React の API の一部ではありません。HOC は、React のコンポジションの性質から生まれる設計パターンです。 一瞬?????となりました が、よく読んでみると、どうやらいろんなコンポーネントで使っている同じようなロジックを共通化するための技術ということらしいです。

hey Advent Calendar 2021 及び アクセシビリティ Advent Calendar 2021 の 24日目です。 業務委託で STORES の開発をしている @inouetakuya です。近年ウェブ業界全体でアクセシビリティをカイゼンする取り組みが盛り上がっていますが、hey においても今年いくつかの動きがありました。 今回はその中のひとつに絞って、2021年に行った取り組みのなかで最も効果があったと私が考えている、freee 社のアクセシビリティガイドライン と チェックリスト を丸ごと導入したことについて、その背景や導入理由、そして導入してどうだったか？などをご紹介します。 導入前に抱えていた問題 hey ではもともとアクセシビリティについて「プロダクトがどのような状態になっているのが理想か？」を定めたアクセシビリティガイドラインを独自に作成しようと試みていまし

この記事はGraphQL Advent Calendar 2021の22日目の記事です。 またこれは書籍、出来る100%TypeScript 作って学ぶNext.js + GraphQL + Prismaに掲載していたコラムに加筆修正を行ったものです。 GraphQLは一言でまとめてしまえばDSL(GraphQL query language)による宣言的な記述を介してGraphQLサーバーから柔軟にデータを取得/提供する事が出来る仕組みです。文法は全く異なりますが動作モデルとしてはSQLとRDBの関係に近いかもしれません。なおHTTP上で利用される事がほとんどですが特に決まりがあるわけではありません。 元々はFacebook社(現Meta社)で開発され2012年からfacebook.comで利用されている技術で、その後2015年にはオープンソース化されFacebook以外でも徐々に利用さ

本記事は「Go Advent Calender」25 日目の投稿です。 Happy Holidays! EDIT (2022-01-03): There is an English version of this article. tl;dr いままでは Go プログラムを Nintendo Switch 上で動かすために WebAssembly に一度変換し、それを C++ に変換してコンパイルするということを行ってきました。今回、 Go の Nintendo Switch 向けネイティブコンパイルに成功し、実際に手元でゲームを動かすことができました。手法として、システムコール呼び出しを C の関数呼び出しに置き換えるように -overlay オプションを指定してビルドしました。また、 -overlay オプションに指定する JSON を生成するパッケージ Hitsumabushi を開

長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする

こんにちは。サーバーサイドエンジニアの伊藤です。 この記事は Enigmo Advent Calendar 2020 の 5 日目の記事です。 さっそくですが、みなさん 2 段階認証(2FA) のワンタイムパスワードの発行には何を利用していますか？ 私は普段 Authy という 2 段階認証アプリを利用しています。ただ、AWS をコマンドラインから操作する時などわざわざターミナルからアプリに移動してワンタイムパスワードをコピーして貼り付けるのが面倒だと思うことがありました。 ということで、OATHTOOL と peco を利用して CLI からワンタイムパスワード(TOTP)を取得するラッパーコマンドを作成しました。 今回は折角なので 2 段階認証(2FA) についてと 2 段階認証アプリで利用されるワンタイムパスワード(TOTP) についても調査したのでまとめました。 最後に作成したラッ

ビジネス・ブレークスルー大学（BBT大学）は、オンラインのみで経営の学士資格を取得できる、日本唯一の大学です。今回はBBT大学主催で行われた、経営学部教授・斉藤徹氏の　『だから僕たちは、組織を変えていける　やる気に満ちた「やさしい組織」のつくりかた』刊行記念講演の模様をお届けします。社員のエンゲージメントが高い「やさしい組織」をつくるために一人ひとりにできることは何か、今まで斉藤氏の30年近い起業家経験から得られたエッセンスが1冊にまとめられています。本記事では、建設的な議論を行うための「推論のはしご」の考え方について、組織に「安心感の醸成」をもたらすためのポイントについて語られました。 建設的な議論を妨げる最大の要因は、感情的になってしまうこと 斉藤徹氏：続いて、（チームメンバーの意識が）外に向いたらどうすればいいのか。これはみんなが意見を出し合うことが大切です。でもこの建設的に第3案を

この記事は Go Advent Calendar 2021、24日目の記事です。 はじめに みなさんは StreamDeck をご存じでしょうか。 StreamDeck は数々のアクションを起動することができるLCDキーを搭載したデバイスで、シーンを切り替える、アプリケーションやメディアを起動する、オーディオを調整する、などの操作をキーボードショートカットをマッピングしたり記憶する必要が無くなる便利な物です。主に YouTuber の皆さんが使っている事が多い様ですが、エンジニアの皆さんがエディタやブラウザを起動したり、特定の業務をボタン1つで実行するなど、便利に使っておられる様です。 さて 2021 年、僕は GitHub Stars に選ばれました。色々なプレゼント を GitHub 社から頂いたのですが、その中に StreamDeck がありました。 一応 StreamDeck の存