こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく

ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や

2021年、企業が無償公開した新人エンジニア向け研修資料　機械学習やゲーム開発、AWS入門、数学などさまざま（1/2 ページ） 2021年、さまざまな企業が自社の社内研修資料を無償公開したことが話題になった。ITmedia NEWSでは主に、新人エンジニア向けに公開した資料などを記事として取り上げたところ、多くの反響が集まった。 学べる内容は、機械学習やIT業界の文化、ゲーム開発、セキュリティ、AWS入門、数学など各社さまざま。100ページ以上のスライドや5時間を超える動画などの資料もあり、新人教育への力の入れ具合も垣間見える。改めて、2021年に企業が無償公開した、社内研修資料を取り上げた記事を紹介する。 セガ、3DCG技術の基礎に役立つ数学資料 セガは6月15日に、2020年に社内勉強会で使った線形代数の教材を公式ブログで公開した。ゲーム制作では、キャラクターや背景を3次元で回転させた

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

長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ

こんにちは、カナダに来て1年弱ですが、いまだに"how are you?"にアイムファインセンキューと返してしまう全然英語が上達してない聖賢です。 インフラエンジニアならみんな大好きtopコマンド、おそらくビヨンドの中ではサーバ運用の中で最初に覚えるコマンドじゃないでしょうか。 実は結構奥が深いコマンドでいろんなことができるので、これまでドヤ顔で「こんなこともできるんやで」と上司の威厳、、、もとい先輩としての経験を後進に伝えていたのですが私も最近になって初めて知った超便利な使い方を紹介したいと思います。 ちょっと長いですがお付き合いください。 普通にtopコマンドを実行すると以下のような画面が表示されます 結構これだけでもサーバ運用には重要な情報が詰まっているのですが、topコマンドの見方などは他でも色々と紹介されていると思うので今回は割愛します 今回はこのtopコマンドの表示を最終的にこ

やりたいこと yarn ではなく npm install を叩いたらエラーを出す仕組みを作りたい 実現方法 npmrc に engine-strict=true を記載する npmrc とは npmの設定ファイル のことである

技術ブログの方に書くか迷ったのですが、かなりポエムの類な文章になりそうなのでこちらに書きます。 ちょっと前にバズったこちらの記事 medium.com に触発されました。 ちなみにコードレビューに関する話としてはまだ僕が色々と手探りだった3年前にもこんなことを書いていたようです。3年前の自分の考えに触れられるブログって面白いなという気持ちとこいつどんだけ軽率な文章書いてんだよという気持ちが合わさり甘酸っぱい気持ちが生み出されました。 hachibeechan.hateblo.jp 当時と今では日本全体の技術的トレンドも変わっていますし、そもそも僕の所属している会社も違います。今の会社ではGitHubを使っており、コードレビューが当然のフローとして組み込まれています。 そしていま改めて当時のブログを読み返したのですが、びっくりするほどコードレビューに対する僕の考えが変わっていないので、改めて

Goの標準パッケージにはcontextパッケージというものが存在します。 このパッケージは、net/httpやdatabase/sqlのような現実の事象と対応している何かが存在するようなパッケージではないため、初学者にとっては使い道がわからない、となってしまいがちです。 しかしcontextパッケージは、複数のゴールーチンを跨いだ処理を実装する際には非常に強力な力を発揮する、とても便利なパッケージなのです。 この本では、「contextとは何か？」というところから「どのように使えばいいのかわかる」ところまでたどり着けるように、Goのcontextまわりのことを解説しました。

見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl

8月だというのに涼しい日が続きますね。 kintone.comのDevOpsをしている@ueokandeです。 もうすぐAWS版kintoneのローンチからから2年が経過しようとしています。 この2年間、DevOpsチームではkintone.comのサービス安定化やスケーラビリティに注力してきました。 時には本番環境の障害で休日や深夜に障害対応することもあります。 kintone.comの障害の一次対応は、我々DevOpsメンバーが実施しています。 サービスローンチ直後は、メンバーの多くがオンコールに不慣れで、慌てて障害対応したりうまく進められないことが何度もありました。 そこでメンバー全員が効率的・効果的な障害対応を目指すべく、チームでPagerDuty社のIncident Response（非公式日本語訳版）を読むことにしました。 この記事ではAWS版kintoneで実際に体験した障害

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語との

Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別

こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子

前置き 私が所属している「もりけん塾」で受けたコードレビューについてまとめていきます。 「もりけん塾」では、先生がマークアップエンジニアからフロントエンドエンジニアになるための課題を作成してくださっており、塾生はその課題を通してJavaScriptの基礎を学んでいきます。 本当に1段1段階段を登っていくように作られており、課題を終える頃にはある程度自走しながらコードが書けるようになります。 私もこの課題に挑戦し、先日課題を終えることができました。だいたい2~3ヶ月くらいかかったと思います。JavaScriptが全然わからない状態から、ここまで書けるようになるとは思っていなかったです。 JS課題はこちら 成果物　👈　README.mdに置いてます。 先を見越したコードを書く編 仕様が増えたときを想定する バリデーションを実装する課題でのレビューです。 名前のバリデーションでは、変数名を n

はじめに これは文系出身の私が、入社後に早く教えて欲しかったことをまとめたものです。 私は 10 年ほど前に文系大学を卒業して技術職で採用されましたが、入社 1 年も経たないうちに「使えない」と言われ、お客様向けのサポートセンター業務に就くことになりました。 その間も個人ではコーディングを続け、開発チームに厄介な口出しなどしているうちに、いつの間にか技術職に戻っていました。 プログラミング未経験者のよくある回り道をした身として、同じような境遇の方の助けになれば幸いです。 以下はすぐに使えるものから、未経験の方には難しい内容まで含まれます。 すぐに分からなくても知ってさえいれば後々効いてくる内容にしたつもりですので、「そのうち分かるかな」くらいの気持ちで読んでもらえればと思います。 👑 コーディングの基礎テクニック 初学者に役立つ汎用的なテクニックをまとめます。 特に説明のない限り、コード

この度「Webを支える技術」という本を読んだので勉強のためにまとめました。 第1章　Webとは何か 現在最も重要なソフトウェアはブラウザで、ブラウザを通してインターネットの向こう側にあるWebサーバとやりとりをしている 様々なWebの用途 Webサイト ポータルサイト＆ショッピングサイト 動画投稿サイト その他いろいろ ユーザインタフェースとしてのWeb ネットワーク接続するデバイスの設定はブラウザで行うものがある HTMLによるヘルプの記述 プログラムAPIとしてのWeb APIとしてのWebはプログラム向けのインターフェースでデータフォーマットにXMLやJSONのようなプログラムで解釈＆処理しやすいものを使用する そもそもWebとは何か？ Webの最も基本的な技術はHTTP、URI、HTMLである。 URIを使えば世界中のあらゆる情報を指し示すことが可能。 HTMLはそれらの情報を表現

コンテナイメージ内の実行ファイルをupxで圧縮するべきか福田（@knqyf263）と申します。過去にフューチャー発OSSのVuls開発を手伝っていましたが、現在はフューチャーで働いているわけでもなく完全に部外者です。今回は社員の澁川さんの推薦もあり、ブログの寄稿をさせて頂くことになりました。 背景その理由の前に少し背景を説明しますが、自分はTrivyというOSSの脆弱性スキャナーのメンテナをやっていまして先日Goバイナリの脆弱性検知をする機能をリリースしました。 例えばコンテナイメージ内にGoでビルドしたバイナリを1つだけ置いている場合などにも検知が出来るためとても便利です（自画自賛）。stripなどでシンボルを落としていてもセクションヘッダにモジュール情報が残っているため検知は動作するのですが、upxでバイナリを圧縮している場合には動きません。 upxというのは実行ファイルを圧縮するため