はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。

サマリとある通販サイトにて「 メールアドレス・パスワードを保存する」機能がありますが、サイトにクロスサイトスクリプティング(XSS)脆弱性がサイトにあると生のパスワードが漏洩する実装となっています。本稿では、この実装方式を紹介し、なぜ駄目なのか、どうすべきなのかを紹介します。 記事の最後にはセミナーのお知らせを掲載しています。 はじめに家人がテレビを見ていて欲しい商品があるというので、あまり気は進まなかったのですが、その商品を検索で探して購入することにしました。「気が進まない」というのは、利用実績のないサイトはセキュリティが不安だからという理由ですが、この不安は的中してしまいました。 最初の「えっ?」はパスワード登録のところでして、パスワードを再入力する箇所で「確認のためもう一度、コピーせず直接入力してください」とあるのですよ。私は乱数で長く複雑なパスワードを入力しかけていたのですが、コピ

モノタロウで海外向けのECサイト開発を担当している山田です。Tech Blogでは、これまでに国内サイトの開発・運用を効率化する様々な取り組みを紹介してきましたが、今回はモノタロウの海外事業に関する取り組みについて、特に、Magentoを活用したモノタロウの越境ECサイト開発と運用にスポットを当てて紹介します。 MonotaROの海外事業 MonotaROの東南アジア向け越境ECビジネスについて Magentoとは Magentoで越境ECサイトをリプレイスした背景 Magentoによるサイト開発・運用の効率化事例 エクステンション導入による開発の高速化 ベスト・プラクティスに沿った開発手法の提供 カスタマイズに対して堅牢性の高いアーキテクチャを提供 効率的に開発が行えるコーディング手法の提供 品質保証のための枠組みをデフォルトで提供 公式ドキュメントの活用によるMagentoの効率的な学

メール認証の仕組みと、SESでのTerraformを使った設定方法について紹介します。 メール認証の種類 メールメッセージ MAIL FROM FROM SPF(Sender Policy Framework) DKIM(DomainKeys Identified Mail) DMARC SESの設定 SESで利用するドメイン認証 DKIM設定 DMARC with DKIM DMARC with SPF 参考 メール認証の種類 メールでは送信元のなりすましを検出するための認証の仕組みとして、主に以下の3つがあります。それぞれRFCで定められています。 SPF(Sender Policy Framework) DKIM(DomainKeys Identified Mail) DMARC(Domain-based Message Authentication, Reporting, and

UXエンジニアとは Jobs - Google Design によると、 You’ll partner with researchers and designers to define and deliver new features, translate concepts into living, breathing prototypes, and iterate on interactions, animations, and details to deliver the perfect experience. UX Engineers also collaborate closely with UX Researchers to user-test new concepts and assist engineering. 以下、Google翻訳＋意訳 研究者やデザイナーと協力して、新

本日はfreeeが挑戦するインクルーシブデザインというテーマでお話させていただきます。インクルーシブデザインについて簡単に説明すると、多くのユーザの中でも普段はメインのターゲットにしないような人から示唆を得て、結果的に皆がより使いやすくなるものにしていくという考え方です。 本日はアクセシビリティというところからはじまり、どのようにインクルーシブデザインに取り組むに至ったのかという経緯をお話していきます。 簡単に自己紹介させていただきますと、私は伊原力也と申します。freee株式会社でデザインリサーチチームというチームのマネージャーをやっています。もともとデザイン会社のビジネス・アーキテクツという会社で13年間、フロントエンドやプロジェクトマネージャーや情報設計、インフォメーションアーキテクトなどをしていました。 そして2017年にfreeeに入社した当初はUXデザイナーをしていたのですが、

まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効

JSON色付け係のhanetsukiです。 今回はMicromodal.jsをカスタムHookで汎用的に使えるようにしようという試みで記事を書きました。 今回の実装はリポジトリを公開してありますので、参考になれば幸いです。 Micromodal.jsとは バニラjsで構成されたモーダルライブラリ アクセシビリティが考慮されている 1.9kbと軽量 要点をまとめると上記のような特徴を持っています。 近年様々なフレームワークを元に実装して行く最中、どのフレームワークに対してもアプローチ可能で、軽量！ そして、一番実装で苦戦してしまいそうなa11yが考慮されているのは非常にありがたいです。 事前準備 インストール micromodalをプロジェクトに追加します useMicromodalを作成する 今回はuse-micromodalフォルダを作成し、その中に4つのファイルで振り分けたいと思います

例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ（ソース） ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、

この記事はNext.js 12.xのLayouts機能です。 Next.js 13.xのLayoutsについては公式を参照してください https://beta.nextjs.org/docs/routing/pages-and-layouts Next.jsのLayoutについてTypeScriptの記事を探してもあまり見つからなかったので Layoutsとは🤔 ページ間で共通のコンポーネントを定義する機能 HeaderやFooterなどはほぼ全ページ同じレイアウトを使うけど、ページコンポーネントに直接書くとコンポーネントの状態（入力値など）が保持できないのでページコンポーネントの外に書くことでレイアウトの状態も保持できる🤝 検証に使ったリポジトリ Next.jsのLayoutsを使うと何が嬉しいのか 一部共通ではないページが有る場合もページ単位でLayoutを変えられるので対応可能

こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった…！ GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO そこで今回は、下記のようなよくあるAWSサーバーレス構成（API Gateway + Lambda + DynamoDB + α）のシーケンス図をMermaidで描いてみました。 描いてみた Mermaidにおけるシーケンス図の文法はこちらを参考にしま

本番のサイトを眺めていて、「あーここのHTMLこうしたら、もっと速くなるのになー」って思う時ありますよね。 僕はあります。でも、検証するだけのために、プロダクトのコードを直接いじるのは大げさ。 そんな時に、wgetとmirrorというコマンドを使ってページをダウンロードして「ほんの少し」HTMLを変更しています。 紹介します（追記にLocal Overridesという「そのものズバリな」Chromeの機能も紹介してます）。 最近あった話です。特にCore Web Vitalsとか速度改善について。 トラベルブックのとあるページのスコアが落ちていて、Chrome DevToolsで観察してみると、どうもYouTubeの埋め込が足を引っ張っている。 表示領域外にも関わらずiframeの中身がロードされています。 これは直したい（本来なら本番へ上げる前に気づく仕組みを作りたいのですが、一旦置いて

『VOICEPEAK』は、最新のAI音声合成技術を搭載し手軽に読み上げさせることが可能な入力文字読み上げソフトです。 お好みの文章や言葉をテキストで入力するだけで、簡単に高品質な音声が作成できます。 感情パラメータによる喜怒哀楽の表現にも対応しています。 「VOICEPEAK 商用可能 6ナレーターセット」には6人のナレーター(男性3名、女性3名)に加えて幼い「女の子」の声も収録されており、様々な声のバリエーションで読み上げが行えます。 個人ユーザー様のご利用はもちろん、教育機関の方や法人様など、様々な商用・業務用途でのご利用も可能です。 OSはWindows、macOS、Linuxに対応。 体験版もご用意しておりますので、ぜひお試しください。 ・女性1 声優：若守みづき 特徴：息づかいが感じられる、やや高めでやわらかく優しい声色です。 ・女性2 声優：野宮佳乃 特徴：落ち着いたトーンの声

※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ

GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう 「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」 この本はそんなスキマを埋めるべく書きました。 近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。 GraphQLはその選択肢のひとつです。本書では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験し、ご自身のアプリ開発に役立ててください。 v1.10 refactor github deploy

つくったアプリケーションのソースコードは公開したい、でもシークレットはどうにかして秘匿しないといけない。継続的な運用を目指すならシークレットのデータ自体もなんとかしてリポジトリに（Repository secrets などではなくコミット対象として）含める必要がある。 …という状況を解決するために、gpg だけを使って継続的な運用を図る手段をまとめてみます。フロントエンド/バックエンドなど問わずどこでも使用できます。 Web フロントエンドなどから各種 API キーを利用する場合、リクエスト時の挙動はデベロッパーツールで全て確認できてしまう点には留意してください。 これらは API サーバー側でオリジンの制限をかけるなどの検討が必要です。 やること主な作業内容の要約は gpg を使ってプッシュする前にローカル側で暗号化をする暗号化するときに復号化のための(最強の)パスフレーズを登録するその

Stylo is an open source WYSIWYG interactive editor for JavaScript. Its goal is to bring great user experience and interactivity to the web, for everyone, with no dependencies. Stylo is a Papyrs project. This is an ​alpha​ version! ⚠️ The project is under active development and contributions on GitHub are most welcome. Features Interactive design 🎯Customizable 💪Framework agnostic 😎Lightweight (3

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert