皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ

React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い

要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。２週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま

本記事は、ShakuroのRita Kind-Envy氏による「UI/UX Design Trends Of 2022 You Need To Catch Up To」（2021年11月15日公開）の和訳を、著者の許可を得て掲載しているものです。 はじめに 2021年は2020年よりも良い年でしたか？UI/UXデザインに限って言えば、そうです。新しい素晴らしいウェブサイトやアプリが生まれ、グラフィックデザイナー向けの新しいソフトウェアがリリースされ、創造性が泉のように湧き出ているようでした。 デザイナーが在宅を余儀なくされると、より多くのものを生み出し、すでに存在するものについて考える時間ができます。退屈はアーティストの最大の敵で、その解消のために努力します。 世界の他の分野では、2021年は非常に困難な年でした。世界最年長の猫は34歳の誕生日を迎えました。うーん、そう、良かったのはそれだ

Qiita株式会社 Advent Calendar 2021（2）の20日目の担当は、CX向上グループの@xrxoxcxoxです！ この記事の概要 タイトルの通り、デザインに興味があるエンジニア向けのTipsをいくつかまとめてみました。 「自分はセンスがないからデザインは無理ですよ……」と仰る方が多いような気がしたので、持って生まれた感覚ではなくて理屈で良い感じにするためのあれこれを書き連ねてみました。 かつて社内向け勉強会で作った資料を記事化しているので一部記事に最適化できていない箇所もありますがご了承ください 色の選び方 UIやロゴ作る上で、テーマカラーを選ぶときは以下のあたりを確認しながら進める 商材やモチーフの印象にあっている 社会的な文脈に沿っている 明度や彩度がUI的に都合が良い アクセシビリティが高い 商材やモチーフの印象にあっている 例：水を扱うサービスのイラスト 茶色 青

株式会社ZOZO 技術本部 本部長の @sonots です。この記事は ZOZOのAdvent Calendar 2021のカレンダー1の最終回（25日目）です。 2021年度、ZOZOにとっても、私にとっても大きな変化が2つありました。1つ目が2021年3月に前CTOの今村が退任し、私が全社技術戦略を策定する役割とZOZOTOWNリプレイスプロジェクト責任者を引き継いだこと、2つ目が2021年10月にZOZOとZOZOテクノロジーズの組織が再編され、私も含む開発部門がZOZOに併合されたことです。 この記事ではその変化の中で私と組織がこの一年取り組んできたものをいくつか取り上げたいと思います。 全社技術戦略策定 2021年4月にCTO的な役割を引き継いで、個人的に一番変わったのは経営陣（当時はZOZOテクノロジーズ）との対話が増えたことだと思います。私の考えているCTOの役割と、経営陣の

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

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

2022/04/28：追記 公開していたzipファイルのリンクを削除しました。 バックエンドのサーバーを停止しました。 伴ってもう星が流れなくなります。 ※この記事にはちょっとだけエッチな内容が含まれます！苦手な方はご注意ください。 こんにちは。あんど(@ampersand_xyz)と申します。 いきなりすみません、タイトルにエッチとか入ってて驚かれた方もいらっしゃることでしょう。どういうことなのか説明させていただきます。 概要説明 画像出典： 吸血鬼すぐ死ぬ 9巻 P134 盆ノ木至 秋田書店 __要するにこれです。__さすがに宙に星を降らせるわけにはいきませんので今回はブラウザ内に星を降らせていきます。 漫画のコマを見ただけでは何を言ってるのかご理解いただくのが難しいかもしれませんが、これ以上説明のしようがありませんのでついてきてください。 実現方法 いかにしてエッチなことを考えている

はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV

おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？　最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ

ググり力、それはエンジニアにとっては 必須の能力 になりつつあると思います。 さて、皆さんは自分のググり力で欲しい情報にちゃんとたどり着けると言えますか？ @Yametaro さんからのお題です。 ある日、コードレビュー中ワイ ワイ「さぁ、今日も同僚のコードをレビューしていくでぇ」 ワイ「まずは新卒のT君のコードを読んでいこか」 ワイ「どれどれ…」 ワイ「ん？なんやこの??っていう書き方は…？」 ワイ「ググってみよか…」 ワイ「JavaScript ??と入力して、検索ボタンをポチッとな」 ワイ「…あれ？それらしい検索結果が出てこんな…」 ワイ「ぐぬぬ、記号関係はググりづらいこともあるんやな…」 ワイ「これじゃあ今日はもう、酒飲んで寝るしかないやないか…」 〜飲酒、そして就寝へ…〜 では JavaScript で ?? の検索方法はどうしたらいいのか？ ここに１つの解答を示しておきます！

この度転職活動を行って無事内定をいただいたので、記念に面接の中でいただいた質問をまとめてみました。 某大手金融のフィンテックエンジニアに転職します！！ 転職活動当初は、レガシー、ジョブホッパー、経験少でダメ出しの嵐🍃 でも諦めずNuxt+Firebaseでのサービス開発、マイクロサービス化ポートフォリオ、CTFの取組、GitHub毎日コントリビュート、個人活動も頑張って内定頂けて本当よかった😁 — bindingpry (@bindingpry) November 19, 2021 基本的に技術面接では、履歴書や実務経験の技術、ポートフォリオで扱っている技術、自分で口にした技術を深ぼられることが多かったです。 そこはしっかり技術を扱えるだけでなく説明できるようにすることも必要だと思いました。（自分は最初ボロボロでしたが笑） また正社員の面接では技術と同等に、仕事への姿勢、性格、事業への

The Qiita Advent Calendar 2021 is supported by the following companies, organizations, and services.

ToDo管理ツール、いろいろありますよね。 古くは Remember the Milk、Evernote、Google GmailのToDoなども便利です。 しかし、たかだかToDoを管理するのに有料のサービスを使いたくはありませんし、ToDoにはそこそこに個人的なセキュリティが求められる要素があります。 Gmail ToDoだと管理が難しい例 GmailのToDoはメールに起因するToDoには便利ですが、カンバン方式のワークフロー、メールに起因しないToDo…例えば「ああ〜、あのイベントの参加費を月末までに精算処理して領収書提出しなきゃ〜」とか「来月のLTでの講演頼まれちゃったけど、上長伺いから広報チェックから事後記事公開まで 面倒くさい たいへん～」など、チェックボックス的な1段階の階層では片付かないToDoにはあまり効率が良くありません。GmailのToDoは期限もメールそのものへの

React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp

開発者「すみません、なんかnpm iとかnpxコマンドがうまくいかなくて…」 ワイ「でたー、cb.apply is not a functionって書いてません？」 開発者「書いてます」 ワイ「ちょっと見てみますね」 ワイ「……これはnpm入れなおしたほうが早そうですね…」 ｶﾀｶﾀ… ワイ（うーん…なぜ未だにnodistで消耗しているのか…😨） TL;DR nodistはもうやめよう 選定するときは、まず選定基準を決めよう 関連技術の特徴を洗い出そう それらが自分たちの環境にどれくらいマッチするかで比較しよう Windowsならfnmがオススメ1！ ※ バージョン管理ツールがなんだかわからない方は「Node.jsのバージョン管理ツールとは」からお読みください。 うわっ…私の現場、nodist使いすぎ…？ Node.jsの利用が本格化してきたころ、私の周りでは圧倒的にnodistが流行し

より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変

はじめに 当記事ではProgrammingを始める方や学生でこれからエンジニアを目指されている方々に私がよく紹介しているGitHubのプロジェクトを紹介します。基本英語ベースのプロジェクトですが、どのプロジェクトもきっと皆さんのキャリアにとって役に立つはずです。ぜひお役立ていただければと思います。 また、指導者、教育者側の方々も、教材として参考になるかと思います。 2021/11/14追記 MicrosoftがGitHubで無償で公開している学習教材をまとめました。こちらも合わせてお読みください。 1. Web Developer Roadmap このプロジェクトではWeb Developerになるまでにどのような知識が必要なのかを体型的にまとめてくれています。 これはFrontendのRoadmapの例ですが、以下のようにTopicにつき質問がいくつかあるのでそれに答えられるようになって

「メタバース有識者」の話があまりにもくだらない。 偉そうに話しているが、あれもこれも全部実現している。 良くてもVRChat止まりで、それ以外の実情を分かっていない。 本当のメタバースについて、書き殴ってみようと思う お前は誰？ ただの一般人だ。ただし現実よりVRに生きているかもしれない。 プレイ時間はVRChat:500時間、NeosVR:1900時間である。 他にclusterでもイベントを主催したりワールドアップしている。 VRの中で飲み、踊り、寝る ゴーグルを被ったまま酒を飲んで、DJをして、音に合わせて楽しく踊る。 疲れたらそのまま寝る、もちろんゴーグルを被ったまま。 メイド喫茶やホストクラブ、ラジオ体操にゲーム。 悩み相談をしたり、恋愛をしたり、旅行にも行ける。 これはVRSNSの日常風景だ。 ここまではおそらく、多くの方が想像しているメタバースだろう。 知ってほしいのはここか