こんにちは！フロントエンド開発課所属のkoki_matsuraです！ 今回はものすごく今更感が否めないのですが、Reactのv18で発表された「Suspense」とVercel社が提供しているReact Hooksライブラリの「SWR」によって何を解決してくれるのか、コンポーネントの表示と実装を例に紹介します。 目次は以下のようになっています。 Suspenseとは SWRとは Suspense・SWRが解決すること Suspense・SWR導入におけるコンポーネント表示の変化 Suspense なし　SWR なし Suspense あり　SWR なし Suspense あり　SWR あり Suspense・SWR導入におけるコンポーネント実装の違い Suspense なし　SWR なし Suspense なし　SWR あり Suspense あり　SWR あり まとめ 終わりに Sus

Sick of boring JavaScript newsletters?Bytes is a JavaScript newsletter you'll actually enjoy reading. Delivered every Monday, for free.

みなさん、 React の Context は正しく使えていますか？この記事ではパフォーマンスの観点で Context を少しでも正しく使うための方法や理由などを書いていこうと思います。 なお、この記事の内容が最も正しいと主張するつもりではありません。ぜひ PR や コメント でよりより使い方を共有してください！ 想定する読者と記事の範囲 一番この記事を読んでいただきたいのはこういった方々です Context についてなんとなくしか分かっていない とりあえず redux や recoil 等を使えば良いと思っている しばしば recoil と Context を比較するといった趣旨の記事があったりしますが、 Context について正しく使えていないが故に、適切に比較できないものがあったりします。僕自身は Context よりも recoil を使うことが多いのですが、思考停止で reco

本記事では、GitHubを使って日々システム開発している人に向けて、開発スピードを爆速化するために覚えるべきコマンドを5つほどご紹介します。 GitHub CLIとは GitHub CLIは、コマンドラインからGitHubを直接操作できるツールです。リポジトリの作成やクローン、Pull Requestの作成やマージ、Issueの管理など、GitHub上のさまざまなタスクを素早く効率的に実行できます。 インストールしていない人はこちらの記事を参考にインストールしてください。 私のGitHub CLIの活用方法 ここまでの記事を読んで「GitHub CLIを使ってあらゆる操作をシェルで完結させるのか(難しそう)」といった先読みをした人もいるかもしれません。私自身そのような崇高な使い方はできていませんし、実際にはWebブラウザでGitHubにアクセスすることも頻繁にあります。 WebブラウザでG

目次 はじめに ブランチ戦略 Git Flow GitLab Flow GitHub Flow 開発チームのブランチ戦略 GitHub Flowの採用理由 運用の基本ルール 実際にGitHub Flow運用してみて 良かったこと 悪かったこと まとめ はじめに Insight EdgeのLead Engineerの三澤です。 Insight Edgeでは開発プロジェクトに応じてその時々でチームを編成し、プロジェクトの内容に合わせてチーム単位で技術やアーキテクチャや開発ルールの選定・決定をしています。 今回は直近の開発で運用してきた開発ルール（ブランチ戦略）の1つGitHub Flowについて、実際の運用方法や良かった点・悪かった点をご紹介したいと思います。 本記事ではGitとブランチを既知のものとして進めることにご了承ください。 ブランチ戦略 GitHub Flowの話へいきなり入る前に、

そんなときは下記のサイトでファイルを含むパッケージを検索しよう。 例えば、パッケージの内容を検索にlibnssutil3.soを入れて検索すると、、、 パッケージlibnss3に含まれていることが分かった！ これで解決。 おまけ: apt-fileを使った検索について There is also apt-file. Because this method required updating the files database, however, I prefer the other, instant option. apt-fileもあります。しかし、この方法ではファイルデータベースを更新する必要があるため、私はもう一つの即席のオプションを好みます。 参考 https://askubuntu.com/questions/2493/apt-get-or-aptitude-equivalen

東京都立産業技術大学院大学（Advanced Institute of Industrial Technology、略して「AIIT」）は、東京都が設置した専門職大学院であり、国内外の産業技術分野において活躍できる高度で専門的な知識・スキルと実務遂行能力を備えた高度専門職業人を養成することを目的とします。 AII...

はじめに 私が技術選定をやってきた中で、ここを気をつけているというポイントをまとめてみます。 技術選定という作業に正解はないと思いますが､自分がやってきたことの備忘録として残しつつ､誰か第三者のご意見をいただけたら良いなという意味合いで残しています｡ 技術選定をしていく上で4つのチェックポイントをベースに技術選定をしていっています｡ チェックポイント 解決したい課題を理解する 組織のバッググラウンドを理解する 選定する技術の市場を理解する 選定する技術のボトルネックを理解する 1.解決したい課題を理解する 基本的に技術を選定するときは「この技術でなにかやりたい」ではなく、ビジネス課題の解決等の理由があるはずです。 その課題を正しく理解して、本当に必要な技術要件を洗い出していくことが重要だと考えます。 その課題を解決するために必要な技術要件を以下の視点を踏まえて洗い出していきます。 マストで

どんな人向けの記事？ レビューによって心理的なダメージを受けやすい方 非エンジニアだが、エンジニアチームがどんな機能を作っているか知りたい方 業務が溜まっていて、レビューに割く時間を捻出するのに苦労している方 コピペできるコードも公開します 初回レビューをAIに任せると、いろんなロールの人の役に立つ レビューは得意ですか？ 優秀なエンジニアしかいないチームであれば、PRは1トピックに絞って小さく明確なコミットによって作成され、適切な要約とともに提供されることでしょう。 しかし、実際にはいろいろな制約から、PRが想定よりずっと大きくなってしまったり、関連トピックと異なるコードが混じってしまうこともあります。 実際のところ、大きなPRを適切にレビューするのは難しいことです。また、自分が詳しくない領域のレビューを行わなければいけない機会もあります。 今回の記事は、レビューを作成してくれるAI C

Flutter初心者ですが勉強のためにDocker環境を作ることにしたのでその時のメモです。 ローカルに入れてもよかったのですが、個人PCはWindows、会社PCはMacなのでなるべくDockerを使って環境ごとの細かい差分を気にせず扱いたかったのです。 Dockerfile cmake, libgtk-3-devはflutterのインストールの際に必要といわれたので追加。 apt-get updateは一度で済ませたいのですが、google-chrome.listを取ってきてからgoogle-chrome-stableを取得する必要があるため2回に分けています。 FROM ubuntu:20.04 # Setup timezone for cmake RUN ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime # The packa

GitHub Actionsオタクによるセルフホ ストランナーのアーキテクチャ解説 加瀬健太 @Kesin11 品質本部品質管理部SWET第二グループ 株式会社ディー・エヌ・エー © DeNA Co.,Ltd. 自己紹介 加瀬健太 品質本部品質管理部SWET第二グループ ● 全社用GitHub Actionsランナーの設計 ● 社内向けCircleCI Server, Bitriseの運用 @Kesin11 @Kesin11 日課はGitHubのchangelogを読むこと 2

（※以下は2023年の弊社のQiita アドベントカレンダーに投稿したものです。） ご挨拶 こんにちは、市原と申します。 開発をしていて見通しが立たないことって多いですよね。 今までやったことのある開発をすることの方が少なくて、大体は初めてのこと、初めてのメンバー、初めてのシチュエーションだと思います。 ある種の不確実性を抱えた仕事がほとんどではないでしょうか。 そんな見通しが立たない状況を偉大にも日々開拓してきた先人がいます。 ギャルです。 ギャルはいつの世も変化を当然のように受け入れ、適応し、さらに大きな変化を生み出してきました。 その上ギャルは楽しそうです。 プロジェクト乗り越えるためにギャルマインドを憑依させればうまくいくんじゃね？と思っちゃったので、 日常のプロジェクトで使えるギャルマインド3選を紹介していきます。 ※この記事は筆者のイマジナリーギャルに基づいて書かれており、実在

今回検討したツール Mermaid Figma miro NotionCharts Google Sheets(スプレッドシート) Lucidchart diagram.net(旧draw.io) Whimsical Cacoo kroki.io Google Jambord Notionへの連携方法 外部ツールをNotionに連携するにはいくつか方法があります。ほとんどの場合、ツール1つあたりの連携方法は1つとなっています。(あとから機能追加された場合は例外的に2つ以上持っていることもあります) Notion内蔵機能 Notion自体がもとから持っている機能 連携とは言えないが、今回紹介する機能の1つが内蔵機能なので紹介 利用制限等は特にないが、一部契約しないと使えない機能がある 今回は無料使用でも利用可能なものだけとなっている Notionのコネクト機能を使用 Notionが提供してい

React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo