WSAは、米Amazonとの提携により、Microsoft Store経由でAmazonアプリストアに登録されているAndroidアプリをPCにダウンロードできるようにするものだ。 3月5日より前にWindows 11上のAmazonアプリストアからAndroidアプリをインストールしたユーザーは、終了日まではそのアプリを利用できる。 Amazonアプリストア自体は存続する。AmazonアプリストアにAndroidアプリを登録している開発者が何らかの作業をする必要はなく、アプリはWSAと共に終了日に自動的に廃止される。 Microsoftは、WSAの終了の理由については特に説明していない。WSAで利用できるAndroidアプリはAmazonアプリストアに登録されているもの（と一部のゲームメーカーのゲーム）のみで、米Googleの純正アプリなどは利用できないままで、あまり利用されていなかった
使ってみたい技術を試せる、汚いコードを書くとどんな目に遭うかわかる… 個人開発で得られる“6つの利益” 個人開発がおすすめな理由 名人氏の自己紹介 名人氏：タイトルは「個人開発がおすすめな理由」というところで、株式会社NoSchoolでCTOをしている名人という者ですが、発表します。お願いします。 目次です。自己紹介と、私が個人開発しているツールを話したあとに、おすすめな理由を6つほど用意してきたので、それを話す感じで発表をしていきます。 最初に軽めに自己紹介をします。名人というハンドルネームで「Twitter（現X）」や「Zenn」で記事を書いているので、良かったら見てもらえたらうれしいです。ふだんはオンライン家庭教師「マナリンク」という家庭教師のサービスを開発している株式会社NoSchoolでCTOをしています。個人開発で「テストメーカー」というサービスを作っています。 好きな言語はT
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。 はじめに 「スクラムマスターがいることでどんな利益がなるの？」 スクラムマスターをやっていると時々この質問を受けることがあります。 スクラムを始めたばかりのチームや組織はもちろん、広報BLOGに「専任のスクラムマスターをおくことにこだわってます。」とCTOが書いているような企業の中にいても こうした問いかけを受ける事があります。 この記事では私が実際にこの問いかけを受けてから、ずーと考えていたことを、なるべく整理してまとめています。それでも雑な文章になっていること、そして個人的な見解でしかない事はご承知おき頂けますと幸いです。 この記事の概要 この記事をまとめるこんな感じです！ 「スクラムマスターがいる事でどんな利益になる？」と言われたら信頼されていな
こんにちは、技術部の石川です。 ある日、社内の各種アプリケーションを眺めている中で、とあるクローズしたサービスの管理画面を担っていたウェブアプリが今も動いていると気付きました。簡単にヒアリングしたところ、サービス自体はクローズしたものの、保有していたデータが次のチャレンジに生かせるため管理画面だけ残しているとのことでした。 一方で、その管理画面へのアクセスはそう多くありませんでした。毎日ちょっとだけのリクエストを処理するためだけにデータベースとサーバーが動いており、少し無駄がある状態になっていました。 やや気になったので検討した結果、最終的にこの管理画面アプリを Next.js 製の静的なデータビューワーサイトとしてリニューアルし、社内向けの GitHub Pages として提供されている状態にできました。この記事ではその顛末をご紹介します。 技術選定 いくつか事前調査をした結果、今回の管
【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
Honoの今の状況 - ゆーすけべー日記
この記事は2023 JSConf JPで発表したHono v3 and v4を元に11月17日に書いたCloudflare社内のブログ記事「Current Status of Hono」を日本語に訳した記事です。 Honoの「Initial commit」からおおよそ2年が経ちました。このプロジェクトは2021年の12月15日に始まりました。 当初、私はCloudflare WorkersのみのためにHonoを作りました。itty-routerはよかったものの、私が欲しかった多くの機能が欠落していました。また、私は勉強のためにTrie木構造のルーターを作りたかったのです。それがHonoの生まれた理由です。 それから多くのことが起こりました。私がCloudflareにいるのもHonoのおかがです！HonoはCloudflare開発者コミュニティで認知されていきました。Honoの人気が出ること
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた - SmartHR Tech Blog
こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar
今日から始めるSvelte入門
みなさんはSvelteって知っていますか？ SvelteはReactやVue.jsなどと同じ、モダンなJSのUIフレームワーク(厳密に言うと、コンパイラベースのJSフレームワーク)です。 0からSvelteに入門し、Vite/TS/Tailwindを用いての漢字クイズアプリ開発を通して、その記述を理解しましょう。 ✅ Svelte ✅ Vite ✅ TypeScript ✅ TailwindCSS
こんにちは！プロダクト開発統括部 システムアーキテクト部 dodaリビルドGの大野です。 私はパーソルキャリア株式会社に2023年5月に入社し、「dodaリビルドプロジェクト」のPMとして従事しております。今回はdodaリビルドプロジェクトについて現場目線でご紹介させていただきます。 dodaリビルドプロジェクトとは 転職サービス「doda」が抱える技術負債を解消すべく発足しているプロジェクトです。 発足当時の背景等は過去記事（こちら）を参考にしていただければと思いますが、現在の取り組みを大きく分類すると下記２つに取り組んでおります。 dodaサイトのマイグレーション エンジニアの開発効率向上 １つめのdodaサイトのマイグレーションとはモノシリックな既存画面を順にフロントエンド/バックエンドへの構成に変更していくものです。既存doda画面をフロントエンドはNext.js化、React版デ
イベントハンドラの関数名についての雑記 - Qiita
今日のXでは、イベントハンドラの関数名についての話題を見ました。元の投稿はこちらです。要するに、次のhandleClickのようなhandleイベント名という命名は良くないということです。 const handleClick = () => { ... }; <button type="button" onClick={handleClick} /> これについて少し考えたので、せっかくなのでアウトプットしておくことにしました。 この記事の目的 考えたことを頭の中に残しておくのがもったいないので、文章の形にしておく。 色々な意見が出る問題であり、ベストな答えは無いので各々好きにすれば良いということを、読者に理解してもらう。 とはいえ、筆者の考えに納得して同じ考えの人が多いと嬉しいので、なるべく納得してもらう。 筆者の考え 自分の考えとしては、むしろhandleClickいいじゃん！ どんど
Dioxusの概要 Dioxus（ディオクサス）は、Dioxus Labsによるクロスプラットフォーム対応のアプリを構築できるRustライブラリです。移植性が高く（portable）、高性能で（performant）、人間工学に基づいた（ergonomic）設計が特徴とされています。Dioxusでは、単一のコードで以下のプラットフォームで動作するアプリを開発可能です。 （1）Web WebAssembly技術を用いたSPA（Single Page Application）を開発できます。WebAssemblyについては＠ITの連載「いろんな言語で試す、WebAssembly入門」で紹介しています。その第5回「RustでWebAssembly――「Rust and WebAssembly」を体験する」でRust and WebAssemblyを紹介しています。本記事の理解にWebAssemb
はじめに こんにちは、株式会社TERASSでエンジニアをしている myrear です。 先日 React Blog にて公開された React Labs: 私達のこれまでの取り組み - 2024年2月版 という記事に React Compiler に関する記述があります。 この React Compiler とは React コードを自動的に最適化し、それにより開発者はメモ化について考える必要がなくなる(忘れることができる)というものです。 まるで魔法のようですが、一体どのような方法でコードの最適化を実現しているのでしょうか？ 本記事では2023年秋の講演の動画を自動翻訳字幕で追いながら要所要所をかいつまんで解説していきます。 React Forget とは？ 先述の通り React コードを自動的に最適化してくれるコンパイラです。 具体的には JavaScript と React のルー
モーダルの開閉状態を URL で管理する
よくあるモーダルの実装について考えてみましょう。モーダルは名前のとおり、現在開いているか閉じているかの状態（モード）があります。状態を管理するときには、React の useState フックを利用する方法がまっさきに思い浮かぶのではないでしょうか？ import { useState } from "react"; import Dialog from '@ui/components/Dialog'; import Button from '@ui/components/Button'; const App = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button variant="outlined" onClick={() => setIsOpen(true)}> Open dialog </B
GraphQL実践ノウハウv2
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql GraphQLの誤解 https://speakerdeck.com/sonatard/rethinking-graphql
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL - Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog - 「作ってから売る」と「売ってから作る」と「売れるようにしてから作る」 ～技術の社会実装のための『開発』～ - Speaker Deck - React プロジェクトを始める – React - フロントエンドの移り変わりは早すぎるのか Zenn
「Developers Meetup 急成長ベンチャーが向き合う『開発生産性』」は、開発組織や事業フェーズの異なる株式会社Another works・株式会社SmartHR・株式会社スタメンの3社が、開発生産性について語り尽くすイベントです。ここで株式会社スタメンのかみお氏が登壇。フロントエンドのリプレイス前にあった課題と、「生産性が向上した」と感じさせてくれた5つのことについて紹介します。 かみお氏の自己紹介 かみお氏：「レガシーフロントエンドをリプレイスしたら開発生産性が向上しました」というタイトルでお話をします。よろしくお願いします。 まず自己紹介を簡単にさせてください。2021年1月にスタメンに入社して、主にフロントエンドを担当している「かみお」です。現在は、今回お話しするNext.jsへのリプレイスのプロジェクトに参加中です。今回初登壇なのでお手柔らかにお願いします。 今日は、リ
はじめに Next.jsなどReactのプロジェクトにはlinterとformatterが必須でeslintとpretteirを使うと思います。 しかし、導入するとなると考慮すべき点や面倒な点が結構あります。 以下は一例です。 eslintとprettierは設定が複数あり、プラグインのインストールが必要 eslint-plugin-prettierを使えば、pretteirがなくてもformatterは実現できるため、そもそもprettierいるのか問題 逆にeslintはlinterとしての役割のみにして、formatterの機能は持たせたくない そこででてくるのがBiomeです。 Biomeとは 一言でいうとeslintとprettierを一つにしたものです。 以下、公式の引用とページです。 Biome はWebプロジェクトのための高性能なツールチェーンであり、プロジェクトの健全性を
How to review code effectively: A GitHub staff engineer’s philosophy
As a staff engineer at GitHub, code review is one of my main focus areas in my day to day work. Over the past eight years, I’ve reviewed more than 7,000 pull requests. Why so many? Because code review is crucial to building good software and another set of eyes can often spot issues you would have otherwise missed. I see code review as one of the most important aspects of my job. In fact, whenever
こんにちは！もみです🐶 皆さん、GitHubプロフィールのREADME は設定していますか？ GitHubのプロフィールを充実させることで、 GitHub上での交流はもちろん、就活や転職でもきっとちょっと役に立ったりと、素敵なご縁に繋がるかもしれません。 たった5分で設定できるので、さっそく設定していきましょう！ 🚩 今回作成するプロフィール シンプルさを保ちつつ、スキルやGitHub上での活動を中心にした自己紹介テンプレートにしてみました！ GitHubリポジトリ： https://github.com/NonokaM/sample-github-profile/blob/main/README.md 1. リポジトリを作成しよう まず、ユーザー名と同じ名前のリポジトリを作成しましょう。 （ ユーザー名と同一のリポジトリは、特別なリポジトリと認識されて自動的にプロフィールに表示されま
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
背伸びしないコンポーネントの始め方
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 v1.1 / The Intersections of Business and Engineering, and The Impact of Code Quality There (v1.1)
発表の際に使ったスライドと台本をそのまま記事にしています。 そのため、表現が口語的な部分もありますがご了承ください。 できるだけ、Web でもネイティブアプリでもクロスプラットフォームでも共通する話にしようと思っていましたが、筆者の知識が Web に偏っているので内容も Web 寄りです。 自己紹介と導入 みなさんこんにちは。 株式会社エイチームのグループ会社である、Qiita株式会社でデザイナーをしている、綿貫佳祐といいます。 プロダクト開発部というデザイナーとエンジニア混合の部署で部長をしています。 こういった出自もあり、製品開発においていかにデザインとエンジニアリングを上手く紐づけるか？について今日はお話します。 「デザインデータが完成したけど、いざ実装しようと思ったらとても大変な内容だった」 「ビジュアル上のこだわりが、実装者にどうしても上手く伝わらない」 こんな悩みを持っている人
はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事業での採用した結果についてお話します。 pnpm とは pnpm とは、npm や yarn とレイヤーを同じくするパッケージマネージャであり、サードパーティのものです。 pnpm.io pnpm は他のツールと比較して高速でありディスク効率が良いと謳っています。 その pnpm の最大の特徴は、 node_modules の構造にあります。 例えば npm では v3 からフラットな node_modules を使うようになっております。yarn もデフォルトでは同様にフラットな node_modules を提供しています
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回はAIサービス「v0」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。今回は、プロンプトからUIを作成してくれるツール「v0」の使いかたや、実際に使ってみた感想などを紹介していきます。 「v0 by Vercel」とは Next.jsを開発するVercelが、生成AIへのプロンプトでUIを自動生成するサービスを公開しました。2024年1月頭時点ではベータ版ですが、Freeプランも提供されているためログインすれば誰でも使用することができます。ChatGPTのように、プロンプトを投げるとAIがTailwind CSSとShadcn
こんにちは、JX通信社でシニアエンジニアをしているSirosuzumeです。 JX通信社の「FASTALERT」には、ユーザーが事前に設定した地域で発生した災害情報を、メールで受信する機能があります。 しかしテストする手順も複雑で、配信条件も多様化していったこともあって、手動でのテストを行うことに限界を感じていました。 設定画面の挙動確認など、ブラウザ上で完結するテストであればPlaywrightを使って自動化することもできていたのですが、実際にメールを受信するところのテストを自動化する方法についてのノウハウ不足が課題でした。 そこで、Amazon SESの機能を改めて確認していたところ、特定のメールアドレスで受信したメールをS3に保存する機能があることを知り、E2Eテスト内からS3にアクセスすることでメールの受信テストまで自動化でカバーできるのではないか、と考えたことが、今回のチャレンジ
先日、症状検索エンジン「ユビー」のAndroidアプリが、Google Play ベスト オブ 2023 優れたAI部門で大賞を受賞しました。 リリースから約2年半、みんなで育ててここまで来ることができましたが、実は最初はWeb版のおまけで、1週間で突貫リリースしたアプリでした。そこからの成長を振り返り、技術的におもしろそうなトピックをいくつか紹介します。 Web版をWebViewで動かすだけ モバイルアプリ(以下アプリ)のリリース当時、Web版はすでに数百万MAUまでグロースしているプロダクトでした。そのため、ある程度PMFした体験がベースとしてあった上で、アプリを入れてもらえるのか、アプリ特有の体験（通知等）が刺さって継続的に使ってもらえるのか、といった点が主な不確実性でした。 そこを最速で検証するために Capacitor を採用しました。Capacitor は Ionic Fram
SPAにするとNext.jsの嬉しさが半減しますが、/pages/以下のディレクトリ構造がそのままエンドポイントのパスに対応する、ディレクトリベースのルーティングをとても気に入っていたので、ほぼルーティングだけのためにNext.jsを使い続けていました。 今年（2023年）の春頃、高機能なNext.jsをルーティングのためだけに使いつづけるのはやはり違う気がする、と調べていて「ViteとReact Routerを使えば簡単にディレクトリベースのルーティングできるよ」という記事を見つけたのが、実はViteを知った最初でした。流行に鈍感…これが老化か…。 Simplifying Routing in React with Vite and File-based Routing Viteにはimport.meta.glob()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し
はじめに 今回の記事では、類似しているWeb技術であるReactとNext.jsをコードベースで比較する。 対象とする読者 ReactとNext.jsの違いがわからない人 技術選定で、ReactとNext.jsのどちらにしようか悩んでいる人 Reactとは React（リアクト）は、Meta(旧Facebook)が開発しオープンソースとして公開しているJavaScriptライブラリで、ユーザインターフェースの構築に特化している。 Reactの特徴は以下の通りだ。 コンポーネントベース：Reactの中核となる考え方は、UIを再利用可能なコンポーネントに分割することにある。これにより、大規模なアプリケーションでも管理を簡単にできる。 仮想DOM：Reactは仮想DOMを使ってページの更新やレンダリングを行う。 宣言的UI：Reactは宣言的UIを採用しており、アプリケーションの各状態に対してU
この記事は株式会社ビットキー Advent Calendar 2023 5日目の記事です。 はじめに この記事では React を用いたフロントエンドアプリケーションのディレクトリ構成について検討した内容を紹介します。 現在フロントエンド開発を行っていて、ディレクトリ構成にお悩みの方の参考になれば幸いです。 ※ State 管理についての良し悪しやその他 React 向けのフレームワークライブラリについては本記事では触れません。 今回対象とするプロダクト ビットキーのHome事業では、不動産管理会社向けのB2B2Cプロダクトを展開しています。 その中でも不動産管理会社の方が利用する管理画面について、リリース後から様々な機能や画面が実装されシステムが巨大化してきたので、ディレクトリ構成を見直す機会が訪れました。 参考値として、現在のプロダクトは100画面を超えており、ソースファイルも1500
pnpmについて 私は普段、パッケージマネージャーにnpmではなくpnpmを使っています。npmよりパッケージインストールが高速であったり、ちょっと良い機能が付いていたりします。1 この記事の内容のほとんどはnpmとpnpmのどちらでも問題ないように書いているつもりですが、念のため前提として紹介させていただきます。 create-next-appの実行(オプション追加) create-next-appにはいくつかオプションがあります。私はいつも以下のようにしています。 # pnpmの場合 pnpm dlx create-next-app ./some-directory --ts --no-tailwind \ --eslint --app --src-dir --import-alias '@/*' # npmの場合 npx create-next-app ./some-director
はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
「Women Developers Summit 2023（デブサミウーマン2023）」で大反響だったセッション「Git中級者への第1歩」が、パワーアップしてCodeZineに帰ってきました。この連載では、コマンドの使い方やGitの効率的な学び方など、知っておくと役立つ情報をお届けし、基礎から更なるステップアップを目指すみなさまを応援していきます。 はじめに こんにちは、都内でソフトウェアエンジニアとして働いている藤澤です。最近はフロントエンドの開発を担当しており、TypeScript、Reactあたりをよく触っています。 今回は「Git中級者への第1歩」と題しまして「普段の業務では困らないくらいにGitを使えているけど、もっと便利にGitを使いたい」という方向けの記事を3回にわたって書いていきます。 本連載は「Women Developers Summit 2023」にて筆者が発表した「
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、転職サービス Findy の開発チームにおける開発生産性の向上に対する取り組みをご紹介します。 以前の状況 モノリスの解体 開発基盤の刷新 コンポーネント設計の刷新 テストの拡充 CI の高速化 改善の効果 まとめ 以前の状況 2020年頃の Findy は Ruby on Rails と React のモノリス構成で作られていました。 機能の増加に従いコードが複雑化し、しだいに開発スピードが伸び悩むようになりました。 ここで Findy Team+ で算出した当時のリードタイムを見てみましょう。 2020年のFindyのリードタイム 上記のグラフから次のことがわかります。 改修が本番に適用されるまで 約1週間 かかる プルリクエストがレビューされるまで 約5日 放置される
🤷♂️ 凝集度とは みなさん、おはようございます！ さて、いきなりですが、みなさん プログラミングにおける、凝集度とはご存知でしょうか？ 「知っとるわい！！」との声が聞こえてきそうですが、 かく言う私は、言葉は知っていても、細かい部分まで理解することができていませんでした と言うわけで、凝集度に関してReactのコードを混ぜながら解説しましたのでご覧ください〜！ もし間違いあればコメントいただけると嬉しいです 結合度編もあるよ！ 🤔 凝集度って？ それは一つのモジュールやコンポーネント、関数、クラスなどが、どれだけ単一の責任や機能に集中しているかを測る指標 一つのモジュールの責任を減らすという考え方 🤔 凝集度が高い状態とは？ そのモジュールや関数が一つの明確な目的に専念していて、それ以外のことを行わない状態のこと 🤔 凝集度が低いと何が悪いの？ 一つのコンポーネントが多くの責任
【React/Python】２年がかりで完成した個人開発サービスの話【ChatGPT】 - Qiita
個人開発でサービスを作り始めて、気がついたら２年も経っていました。 気軽な気持ちで作り始めたのですが、思いの外色々なことに手を出してしまったので、 利用した技術などをまとめてみます。 作ったもの YouTubeのライブ配信風の画面に向かって話しかけると、 音声を認識してAIがスーパーチャットを送ってくれる、 その名も「AIスパチャ」です。 良かったら遊んでみてください。 作るきっかけ YouTubeでひろゆき氏の配信を見ていた時に、 「私もひろゆきさんみたいに質問回答の配信をやってみたいです。 けれどいざ配信をしてみても視聴者が少なく、質問なんて全くきません」 といった質問がありました。 確かに、ひろゆき氏のように、何千人も視聴者がいて、ガンガンとスパチャが送られてきたらそりゃ楽しいですが、 普通の人はまずスパチャなんて送られません。 そもそも実際にYouTubeライブをやることのハードル
サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています！ プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
Reactにおけるパフォーマンス最適化のTips
はじめに React は内部でのパフォーマンス最適化により UI 更新に必要な DOM 操作の数を軽減しています。本記事では、さらに React アプリケーションを最適化するテクニックを紹介します。 前提知識 以下にレンダリングの仕組み等を解説します。すでにご存知の方は飛ばしてテクニックの章をお読みください。 React がどのように UI を更新するのか レンダリングされたコンポーネントを作成した時、React はコンポーネントの要素木に対してvirtual DOMを作成します。コンポーネントの状態が変わるたびに React は virtual DOM 木を作成し以前のレンダリング結果と比較します。それらの違いのみを変更された要素の実際の DOM に反映します。 実際の DOM は操作するのにパフォーマンスコストがかかるため、React は virtual DOM を用いることで再レンダ
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、Windows 11でのAndroidアプリサポートを終了へ
使ってみたい技術を試せる、汚いコードを書くとどんな目に遭うかわかる… 個人開発で得られる“6つの利益”
クローズしたサービスの管理画面を静的サイトにする - クックパッド開発者ブログ
dodaリビルドプロジェクトとは - techtekt
RustとDioxusで投稿アプリのSPAを作ってみよう
React Forget は何を「忘れ」させてくれるのか
レガシーフロントエンドをNext.jsにリプレイス 「開発生産性の向上」を感じさせてくれた5つのこと
【Next.js】eslint + pretteirをやめてBiomeにした話
5分でできる！GitHub README プロフィール 💬 - Qiita
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
デザインデータとコードを一体のものとして捉える - Qiita
pnpm の node_modules を探検して理解しよう - ドワンゴ教育サービス開発者ブログ
UIコンポーネントの大きさは外から制御しよう - Qiita
プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた
Playwrightでメール配信のテスト自動化にチャレンジ！ - JX通信社エンジニアブログ
Web版しかなかったサービスがGoogle Playのアプリ大賞を受賞するまで
Vite+Vitest+Ladleで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
【コードベースで比較する】React VS Next.js
4年分の負債を解消するために React ディレクトリ構成について真剣に考えてみた - Qiita
Next.jsプロジェクトに追加したい設定11個 - Qiita
TSKaigiは配信画面もTypeScript製だったという話
Git中級者への第1歩！ レビュー品質向上の秘訣、コミットに便利なコマンドを紹介
Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog
【むっず】Reactコードで理解する「凝集度」 - Qiita