はじめに この記事は GENDA Advent Calendar 2023 13日目の記事です。 株式会社GENDA FE/BEエンジニアの shinnoki です。今年は自分にとって色々と変化のあった年で、年初にはアーリーのスタートアップでCTOを務めておりましたが、ご縁があり8月にGENDAに入社いたしました。 最近社員インタビューも公開されて入社の経緯なども触れていただいたため、興味があればぜひご覧ください。 今年は個人的にあまり最新技術のキャッチアップができていなかったことを差し引いても、フロントエンド界隈では激動の1年だったのではないでしょうか。 最新技術のキャッチアップが大変なのはフロントエンドに限ったことではなくどの領域においても発生する話ですが、フロントエンドは特に大変だよねという話は周囲からもよく聞くため、感覚として間違っていないと思います。 これらとどう付き合っていくか
atama plus の osuzu です。 atama plus では、これから段階的に Web ベースプロダクトのフロントエンド開発で React を用いて SPA(Single Page Application) へリプレイスしていきます。 参考: 技術課題のないプロダクトなんてものはない！Django→React リプレイスの意思決定に至る atama plus 流の軌跡 この記事では SPA の技術選定にあたって考えたことを共有します。 プロダクトについて 技術選定はプロダクトの置かれた状況によって意思決定が変わると考えているので、リプレイスするプロダクトについて補足します。 atama plus は塾などで利用可能な学習アプリ「atama＋」を提供していますが、一連のプロダクトの中に塾本部の方が管理のために用いる業務アプリがあります。 今回リプレイスするのはこちらの業務アプリで
プログラミング練習用のタイピングゲームを作った話。エンジニアなら4000点を超えたい！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 少しキャッチーなタイトルにしました。すみません。 あくまで、お遊び程度として是非タイピングゲームを楽しんで頂ければと思います。 以下のプログラミング練習用のタイピングゲームを作成しました。 結構面白いです。ハマります。是非、一度プレイしてみて下さい。 4000 点を超えると、結構凄いです。 目指すべきスコア こちらのプログラミング練習用のタイピングゲームで、目標にすべきスコアを簡単にまとめました。社内で色々遊んでみて、大体こんな感じかなー、という感じで適当に書いてます。 8000 点以上 まだ誰も到達したことが無い未踏の地。自
Nikkei Advent Calendar 2023の 14 日目は IDE がやっていきます。いま Web チーム内の基盤改善を専門とするチームで活動しています。自分が入社するより前に作られてメンテナンスがあまりされていなかったシステムを、現代でも戦えるようにするお仕事をしています。メンテナンスを放置することはセキュリティ的によくないので、メンテナンスを専業で行っています。最近の自分の仕事は、今日紹介する rnikkei と呼ばれるマイクロサービス群の Node.js バージョンを、v12 から v18(一部は v20) まで引き上げることです。この rnikkei は当初「爆速の日経」と呼ばれていた頃に設計・実装されたサービスです。今日はそのような過去に作られたサービスにもう一度スポットライトを当ててみようと思います。 see: https://marketing.itmedia.c
Kubernetesの資格CKA/CKADを取得し、なにか自分にご褒美を与えたいな〜と思い……おうちKubernetesを構築することにしました！楽しみにしてたんだ！！ 前日譚： ryusa.hatenablog.com モチベーション 🦾 そもそもなんでおうちKubernetesなんて？と言う話から…… 自分の仕事柄、職場のエンジニアの多くが自宅になにかしら機材を持ち込んで幸せになってる人が多いんですよね おうちKubernetes おうちサーバー＆おうち iLO おうちESXi おうちクラウドサービス おうちハニーポット おうちBGPフルルート 先日も仕事の帰り道に数万する機材をポチって自宅に搬入したとか話を聞き、これはもはや一種の宗教じゃないのか とても羨ましい！ぜひ我が家にも！！と、ぼくも家に機材を搬入してみたいな〜と思ってました。 とはいえ、残念ながら自分は仕事で機材に触る機会
Next.js Commerce
Next.js CommerceA high-performance, server-rendered Next.js App Router ecommerce application. This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more. Note: Looking for Next.js Commerce v1? View the code, demo, and release notes. ProvidersVercel will only be actively maintaining a Shopify version as outlined in our vision and strategy for Next.js Commerce. Ver
セキュアな時刻同期Network Time Security(NTS)をOpenWRTルーターに設定する | DevelopersIO
ども、大瀧です。 NTPにセキュリティ機能を追加したNTSという時刻同期サービスを知っていますか。本ブログではルータ向けLinuxディストリビューションOpenWRTで時刻同期にNTSを構成する様子をご紹介します。 動作確認環境 ハードウェア: GL-iNet GL-MT2500 ファームウェア 4.5.0release6(rc) OpenWRT: バージョン21.02 Chrony: バージョン4.1-2 NTS公開サーバー: time.cloudflare.com time.cloudflare.com とは time.cloudflare.comはNTSに対応するCloudflareの公開タイムサーバーです。以下のブログで紹介されてます。 その後RFC8915の策定に合わせてポート番号を変更したとのブログが以下です。 AWSの公開NTPサーバーにも接続を試行してみましたがエラーになっ
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
ZOZOテクノロジーズSRE部の市橋です。普段は主にAWSを用いて複数プロダクトのシステム構築、運用に携わっています。今回は2020年2月にリリースされたZOZOMATについて、システム構成と開発時に直面した課題、その課題を解決するために工夫した点について紹介します。 ZOZOMATではEKSやgRPCを新規に採用しており、これによって仕様の変更に強くなる、通信のオーバーヘッドを削減できるなど様々なメリットを享受できました。しかし導入時に一筋縄ではいかないことがあったため、今回苦戦した点についてご紹介できればと思います。 ZOZOMATとは お客様の足を3Dで計測するために開発された計測用マットです。ZOZOMATでの計測情報をもとに、靴の推奨サイズを参照するなどのサービスをご利用いただくことが可能です。ご興味のある方はこちらをご確認ください。 ZOZOMATのシステム構成 システムの全体
はじめに この記事は、筆者がOOPartsというプロダクトにおいて、Reactのアプリを 「Create React App」 から 「Next.js」 に置き換えた事例を記す内容となっています。 これまで 「0からのNext.jsアプリケーションの作成」 文脈における記事は多くありましたが、「Create React App」から「Next.js」という、 同じReact環境における移行記事 はそこまで多くなかったと認識しています。 ある程度育ちきっているプロダクトであれば、フレームワークごと移行することは中々困難になると思っていますし、それを成し遂げることはとてもチャレンジングなことです。その結果、事例としての大規模移行事例は中々存在しませんし、稀有なことだと思っています。 本記事におけるOOPartsのNext.js移行に関する知見は、今後大きな移行する人たちの参考になれば良いと思っ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信しています 弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は
3Dモデルの配信サーバーでRustとZstandardを採用して数倍のパフォーマンス向上を実現した - pixiv inside
はじめに こんにちは、VRoid部所属のエンジニアのyueです。 この度VRoid Hubで3Dモデルの配信サーバーの見直しを行い、技術選定から始めRustとZstandard (zstd)を採用した実装に切り替えました。 結論から見るに従来のNode.js製サーバーと比べて以下のことを実現しました。 最大のレスポンス時間が 1.5 ~ 2.5s から 300 ~ 400msまで低下 平均のレスポンス時間が 700 ~ 800ms から 150 ~ 200msまで低下 サーバーのCPU使用率が ~ 50% から ~ 10%まで低下 docker image のサイズが ~ 346mb から ~ 21mb程度まで削減 配信されるファイルサイズが平均 10 ~ 20% 軽量化されました レスポンス時間 CPU使用量 (上からAVG(MAX), AVG, AVG(MIN)) メモリー使用量に関し
Next.js 14
As we announced at Next.js Conf, Next.js 14 is our most focused release with: Turbopack: 5,000 tests passing for App & Pages Router 53% faster local server startup 94% faster code updates with Fast Refresh Server Actions (Stable): Progressively enhanced mutations Integrated with caching & revalidating Simple function calls, or works natively with forms Partial Prerendering (Preview): Fast initial
はじめに 配属研修の課題について エンジニア新入社員研修の個人課題：「JavaScriptでの開発」 配属研修課題1：「RailsでAPIサーバのみ構築」 配属研修課題2：「Railsでフロントエンドも含めた開発」 作ったアプリケーションの概要 JavaScript・Expressで開発した時との違いに関する感想 letやconstが要らない変数定義 falsyな値の違い ブロックをそのまま変数に代入できない 暗黙のreturn 条件文の後置 フレームワークの機能が豊富 ディレクトリ構造の一貫性 リソースベースルーティング 課題を取り組みながら学んだこと OpenAPIを使ったAPI定義ファイルの作成 N+1問題対策 テストコードに関する考えの変化 おわりに We are hiring! サムネイル画像 はじめに こんにちは。2022年4月に新卒で入社しました教育事業本部サービス開発部バッ
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
とても久しぶりにブログ更新します。 普段ネットワークエンジニアとしてAS運用などに携わっている身なので 自宅に フルルート 欲しいなぁなんて思ってました。 某NOCのRouterにSSHすることができたり、各キャリアで用意されたLooking Glassがあるとはいえ、 自宅でフルルートってカッコイイじゃないですか。 Xでみていると個人でASを取得してたり、某NOCとピアしてたりする人を結構見かけるわけですが、 自分は誰にも迷惑をかけずに1人でひっそりフルルートを見たいだけなのです。 そんな自分のような人がフルルートを受信して楽しめる方法を紹介します。 概要 自宅でひっそり誰にも迷惑をかけずにフルルートを受信したい。 必要なもの フルルートを保持できるルーター (実機でも仮想でもなんでも良い) クラウド(Vultr)に払うお金 自分でBGPやGREの設定を行うことができる能力 外部とGRE
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理
SSRみたいなフロント用語の使い方改めませんか運動
sumirenです。 背景 フロントエンド界隈はベンダやコミュニティ主導で新しいアーキテクチャや技術的手法がどんどん出ていて素晴らしいです。 一方、そうして量産されてきた用語が、界隈の変化に置いていかれている側面もあるように思います。例えば、SSRという用語を取り上げると、コンポーネントからHTMLへの変換を指すこともあれば、サーバー側でデータを取得することを指すこともあります。 実際、業界のパイオニアであるVercel/Next.jsも、そうした現状に対する懸念を持っているように思われます。実際、Next.js App Routerでは、以下のような変化が見られます。 getXXXPropsが廃止され、fetchに対する引数で表現されるようになった SSRやISRという「レンダリング」という言葉を、フェッチの文脈で使わなくなっている しかし、そっとドキュメントを書き換えた程度では、人々に
Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい | フューチャー技術ブログ
タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？ という記事です。 Next.jsは大きすぎる？フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。 Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にI
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕
蟹の半身みたいなWi-Fiルーター ASUS RT-AX3000に買い替えたら自宅Wi-Fiが高速化されて大満足 - I AM A DOG
先日、Wi-Fiルーターを買い替えました。ASUS RT-AX3000なる機種です。 Twitterで人様がルーターの買い替え検討しているのを見かけて、丁度我が家でも探していたので横から美味しい情報（？）に乗っかって真似したら良い買い物でした、みたいな話。 前提：そろそろルータ買い替えの必要性を感じていた 人のルーター買い替え経緯を横から眺めてそれに乗っかった 明らかに速く快適になった自宅のWi-Fi 前提として、自宅のルーターの買い替えを検討していた経緯から……。別に飛ばして貰ってOKです。 前提：そろそろルータ買い替えの必要性を感じていた 自宅のネット回線ですが、マンション常設のCATVのオプション契約なこともあって、それほど速くないんですよね。といっても自宅で普通にネットをしたり、Amazonプライムビデオ等のストリーミングに問題がある程でもなく……。新たにフレッツ光を契約するのも面
管理画面を作るフレームワークrefineを使って、Next.jsで管理画面を作ってみた | DevelopersIO
管理画面って作るのめんどくさくないですか？そんなわけでrefineを使ってみました。 refineは、管理画面を作成するためのReactベースのフレームワークです。refineを使ってNext.jsな管理画面を作ってみました。 管理画面って作るのめんどくさくないですか？ 管理画面は一般的に、データのCRUD（Create, Read, Update, Delete）が行えるデータの管理画面として使われることが多いです。 そうすると、一覧画面があって、データの登録画面があって、データの編集画面があって、データの削除画面があって、データの詳細画面があって…、という感じで大体似たような画面を作ることになります。 そういった手間を軽減するために、refine を試してみました。 refine は、管理画面を作成するためのReactベースのフレームワークです。 refine | Open-sourc
こんにちは。先月くらいからReact向けのルーターライブラリ「Rocon」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。 このチュートリアルサイトはRoconを用いて作られています。 Roconチュートリアル: https://rocon.uhyohyo.net/Roconの特徴は非常に型安全であることです。 何よりも型安全性・型周りの快適性を優先してAPIが設計されています。 当然、TypeScriptと一緒に使うことが前提です。 また、Roconはreact-router-domの代替となることを意図しています。 そのため、Roconを使うべきとき・使うべきでないときをまとめると以下のようになります。 Roconを使うべきとき: 今react-router-dom等を使ってSPAを作っ
この記事は、4/28 に動画配信したfreee Tech Night online #1 「3月1日のfreee全社員一斉リモートワークの裏側」 の補足記事です。 www.youtube.com TL;DR freeeがフルリモートに移行するまでのあゆみを時系列でまとめるとこんな感じです。 2月12日 リモート対応打診 = リモートの人増えるかも 2月18日 VPN能力増強の正式な打診 = max 400人くらいかな 2月20日 VPN β公開 = 暫定機材で運用開始 2月26日 VPN 全社公開 = 新機材到着 2月28日 全社フルリモートへ = max 800人で 3月1日 新機材で運用開始 記事の最後に貼ってあるグラフで見ると、移行した様子が綺麗に分かります。 時系列で追ってみる 2月初旬、COVID-19はダイヤモンドプリンセス号で感染が発覚した段階で、まだ、水際で止めることができ
package by feature のススメ
最近、package by feature というディレクトリ構成が様々なところで出てきています[1]。例をあげると、これらで見れます。 next.js の app router bulletproof-react 他人がはやく読めるコードを書くために しかし、package by feature について簡潔にまとまった資料がまだないため、人に紹介するときに不便です。そこで今回は package by feature とは何なのか、何が良いのかについてまとめます。 package by feature とは? package by feature とは、ディレクトリを feature 単位でまとめる手法のことです。 # package by feature src/ └ feature/ └ recordList/ (記録を表示するための機能群) ┝ DailyAverage.tsx ┝
TP-Link製ルーターが大量のトラフィックをAviraへ送信しているとの報告、関連サービスをオフにしても送信は止まらず
データを複数のコンピューター間で中継するルーターの中には、単にインターネット接続をサポートするだけではなく、セキュリティ機能やホームペアレンタル機能などを提供するものも存在します。中国のネットワーク機器メーカーであるTP-Link製のルーターも、ドイツのアンチウイルスソフトウェア企業であるAviraと提携したセキュリティサービスを展開していますが、海外掲示板のRedditに投稿された「TP-Link製ルーターは関連サービスをオフにしてもAviraのサーバーに大量のトラフィックを送信している」という報告が話題となっています。 [PSA] Newer TP-Link Routers send ALL your web traffic to 3rd party servers... : hardware https://old.reddit.com/r/hardware/comments/tbt
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
https://findy.connpass.com/event/306714/
TanStack Router
Modern and scalable routing for React applicationsA fully type-safe React router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs. Get Started Typesafe & powerful, yet familiarly simpleTanStack Router builds on modern routing patterns made popular by other tools, but has been re-engineered from the ground up to be 100% typesafe without compromising on D
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
米Twitterは3月8日（現地時間）、TwitterのWebサイトをTor（The Onion Router）ネットワーク経由で閲覧できるようにした。このプロジェクトに協力した英Open Rights Groupの元代表で現在はアドバイザーを務めるアレク・マフェット氏がツイートで告知した。 Torブラウザで「https://twitter3e4tixl4xyajtrzo62zg5vztmjuricljdp2c5kshju4avyoid.onion」にアクセスすることで、ユーザーは匿名でTwitterを利用できるようになる（このURLは、Tor以外のWebブラウザでは開けない）。 ロシア政府は2月25日、Facebookへの国内でのアクセスを部分的に制限すると発表した。その際、複数のメディアがTwitterへのアクセスも制限していると報じた。 Torは、インターネットの接続経路の匿名化を実
Next.js 15
Next.js 15 is officially stable and ready for production. This release builds on the updates from both RC1 and RC2. We've focused heavily on stability while adding some exciting updates we think you'll love. Try Next.js 15 today: # Use the new automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@rc react-dom@rc We're also excited to s
BunとHono
JavaScriptのランタイム、Bunのv1.0がリリースされましたね 🎉 さて、僕がメインとなって開発しているHonoはBunと関係があるので、その話をします。 hono Express or KOA Bunのリリース時に使われた動画がかっこいいです。まるでApple。 この中で作者のJarredから肉まんのパスを受けるのがBunのDeveloper AdvocateでZodの作者のColinです。彼は「Web APIを作るためのフレームワーク」として以下のように言いました。 hono Express or KOA おおー。Express、Koaより前に来てていい感じですね。上記で貼ったリリースノートには順番が変わってますが、しっかりと名前が出てます。 Bun is tested against test suites of the most popular Node.js pack
SEILでつくる、“最強”ご家庭用ルータ ～ひかり電話無しプラン～ | IIJ Engineers Blog
セキュリティオペレーションセンター と セキュリティ情報統括室 に所属。システム開発者(極) を目指すプログラマ としての活動と、セキュリティアナリストとして活動をしています。うさぎさんのぬいぐるみが相棒 【IIJ 2021 TECHアドベントカレンダー 12/2（木）の記事です】 くまさかです。 弊社では、ご家庭の情シス主幹として活動している方がそれなりにいます。かくいう私もその一人です。 OSアップデートから、プリンタの設定など、ワンオペなのでやることは多岐にわたります。 そのような家務の中には、もちろんネットワーク運用も含まれます。 弊家のネットワーク運用では、ゲートウェイルータとして、IIJ製のルータであるSEIL を採用し、細かな経路設計なども実現できています。 今回は、そのようなSEILの経路設計から、 ひかり電話無し契約時のIPoE+DS-Lite/PPPoE な設定例を紹介
WireGuardによるマルチクラウド構成VPNの事例紹介
こんにちは、滝澤です。前回の記事『OctoDNSとGitLab CI/CDを利用した複数DNSプロバイダー構成の運用』に引き続き、社内事例を紹介します。 弊社ハートビーツではMSP（Managed Service Provider）サービスの可用性向上のために、社内基盤をマルチクラウド構成で運用しています。 複数のクラウド拠点のネットワークおよび事務所のネットワークとの間をWireGuardというVPNトンネルのソフトウェアで接続しています。 今回はこのWireGuardの利用事例を紹介します。 行っていることをまとめると次のようになります。 マルチクラウド構成（Azure, AWS, GCP）の各拠点と事務所のネットワーク間をWireGuardによるVPNで接続している。クラウド拠点間のレイテンシーはVPNルーター間で2〜4ミリ秒、分散システムのノード間で2〜6ミリ秒である。 ピア（対向
ジャンプTOON Flutter アプリの全体像 | CyberAgent Developers Blog
ジャンプTOON アプリチームの國師です。 5 月にサービスを開始した 「ジャンプTOON」 は、Flutter を採用し Android, iOS, iPadOS 向けのアプリを提供しています。 本記事では、ジャンプTOON モバイルアプリの開発で採用している技術スタックやプロジェクト構成、開発手法を紹介します。 目次 SDK・ツール管理 プロジェクト管理・タスクランナー CI・CD ディレクトリ構成 テーマ管理 ルーティング アセット管理 状態管理 サーバ通信 Lint テスト UI カタログ Web Preview PDR SDK・ツール管理 Flutter の SDK バージョン管理には、Flutter 以外の SDK やツールもまとめて管理できる asdf を採用しています。 Flutter の開発者界隈では FVM も人気ですが、次の点から、アプリチームに限らず開発チーム全体で
2024年3月15日の一粒万倍日に、mosya ReactというReactを学習できるサービスをリリースしました。 こちら1年間の開発期間を経て、ようやくリリースできました！ mosyaの開発期間と合わせると約2年間の開発期間を経てのリリースとなります。 いやー、長かった！ 良かったら下のリンクから試してみてください！ どんなサービスか mosya ReactはReactをオンライン上で学習できるサービスです。 エディターに書いたコードがリアルタイムにプレビューできるようになっていて環境構築なしでReactを学習できます！ 採点機能が搭載されているのでReactを自学習したい方におすすめです！ このサービスの開発で特に頑張ったのが以下の特徴です！ 最新の技術にキャッチアップしている ライブラリの型がエディター上で確認できる Biomeを動かしていてリントエラーがエディター上で確認できる 最
ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感
MOCO - Kubernetes 用 MySQL クラスタ運用ソフトウェア - Cybozu Inside Out | サイボウズエンジニアのブログ
サイボウズの Kubernetes 基盤を開発している Neco プロジェクトの ymmt です。 サイボウズ製品のほとんどはデータベースとして MySQL を採用しています。 現在 400 を越える MySQL のインスタンスを運用しており、これら全てを新しい Kubernetes 基盤に移行していく予定です。 Kubernetes 上でアプリケーションやミドルウェアの運用を自動化するソフトウェアのことをオペレーターと言います。 大量の MySQL インスタンスを Kubernetes 基盤に移行するにはオペレーターが必須であると考え、技術顧問の @yoku0825 さんの監修の下で MOCO というソフトウェアを開発しオープンソースライセンスで公開しました。 本記事では Kubernetes 上の MySQL オペレーターの状況と、開発した MOCO の機能を詳細に解説いたします。 M
僕のElectronアプリアーキテクチャ
はじめに 最近、趣味でElectronを使ったアプリを開発しています。その過程で、アーキテクチャ設計についていくつか悩んだポイントがありました。本記事では、実際に採用したアーキテクチャや解決策を紹介します。 今回はサーバーにデータを置かないローカルファーストなデスクトップアプリを作っているということもあり、特に以下の点で悩みました。 フレームワークどうする？ WebのようなREST APIが使えない データベースどうしよう アプリのアップデートどうしよう アプリのコード署名むずい フレームワークどうする まずはじめにフレームワークをどうするかという問題がありました。 最初はNext.jsのApp Routerを使ってアプリを作っていました。しかし、Electronアプリは最終的に静的ファイルになるため、Next.jsのServer ComponentsやServer Actionsの恩恵を
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのキャッチアップ大変だよねという話 2023
React SPA の技術選定で考えたこと（atama plus のケーススタディ）
Express と handlebars で動き続ける日経 — HACK The Nikkei
おうちKubernetesを構築した話 - メモ - RyuSA
ZOZOMATにおけるEKSやgRPCを用いたシステム構成と課題解決 - ZOZO TECH BLOG
Create React AppからNext.jsへの移行事例紹介
研修で初めてRuby on Railsを触って学んだこと - ドワンゴ教育サービス開発者ブログ
自宅で誰にも迷惑をかけずにBGPフルルートを受信する方法 (Vultr)
React 19によって状態管理はどのように変わるのか
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
究極のReact向けルーターライブラリ「Rocon」を作った - uhyo/blog
3月1日のfreee全社員一斉リモートワークの裏側 - freee Developers Hub
【Next.js】実務でapp routerに移行した所感
Twitter、Tor経由Webサイトを開設 ロシアからも閲覧しやすく
1台何役も使えて3万円台!? ビデオ監視もVPN構築も“秒で”できるWi-Fi 6ルーター Ubiquiti「UniFi Dream Router」【イニシャルB】
Reactを学習できるサービスmosya Reactの技術的な紹介
Jestのuiテストがつらすぎるので愚痴らせてください。そしてブラウザテストで本質的なuiテストをしよう