はじめに 本記事では無料で公開されている企業のエンジニア向け研修資料をまとめました。 近年では、多くの企業が新人向けの研修資料を公開しています。これらの資料は内容が充実しており、初心者から中級者まで幅広いレベルの学びを得ることができます。さらに、資料の作り方も参考になるため、勉強会で発表する人や企業の研修担当者にとっても貴重な情報源となっています。 本記事では様々な企業のエンジニア向け研修資料をまとめましたので、ぜひ参考にしてみてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 この記事の主な対象者 有名企業の研修資料を幅広く確認したい方 エンジニアとして初級から中級レベルの方 独学で学んでいる方 今後研修資料
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
別にみんなそうするべきとは全く思わないのだけど、僕は最近GitHub Copilotを意図的に無効にすることがあるので、そのへんについて雑に書いておく。 あらかじめ言っておくが、僕はGitHub Copilotを有効にすることもある。この記事もGitHub Copilotおよびそのユーザーを批判する意図は全くない。 GitHub Copilot が便利な場面 僕がGitHub Copilotを使い始めて少なくとも一年以上は経ってる。自分が書こうと思っているコードに近いものが簡単に生成されていくことに最初は感動したし、便利な場面がはたくさんある。 具体的に便利な場面を思い返してみる。 僕は仕事ではNext.jsでフロントエンドを書いたり、NestJSでバックエンドを書いたりしているのだが、その用途では便利だった。僕は自分が関わっているプロジェクトのReactやNode.jsの書き方はある程度
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
Next.js 15 RC
The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an
Next.js 15 RCまとめ
基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js（１４．x） App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En
『メルカリ ハロ』の成長を加速させる最重要タッチポイント、「はたらくタブ」はこうしてつくられた | mercan (メルカン)
2023年11月にメルカリに入社。前職ではfreee株式会社で約3年間、企業向け決済サービスの開発リーダー兼エンジニアリングマネージャーを務めた。現在は「Mercari Hallo」プロジェクトのエンジニアリングマネージャーとして、チームのパフォーマンスとプロダクト品質の向上に努めている。主にはたらくタブ、メルカリ ハロアプリ、及び事業者向け管理画面の開発を担当している。 事業成否の鍵を握る「はたらくタブ」 ——そもそものところから伺いたいのですが、「はたらくタブ」はつくることは初期段階から決まっていたのでしょうか。 @godriccao：「はたらくタブ」の議論自体はかなり初期から継続して行われてきました。「はたらくタブ」そのものというより、『メルカリ ハロ』という事業自体はやることが決まった後に、その展開の仕方についてかなり議論になりました。単独のアプリ（以下、クルーアプリ）のみで行くの
はじめに こんにちは！ Yahoo!知恵袋の津村です。去年の11月からYahoo!知恵袋のフロントエンドシステムのリアーキテクトに取り組んでいます。この記事では、これまで抱えていた技術的な問題と、それらをどう解決したかについて説明します。この結果、開発効率向上やレビュー時間短縮などの効果がありました。 Yahoo!知恵袋は利用者登録者数5,200万人、質問総数2億8,000万件、回答総数は6億5,000万件以上（2024年4月3日現在）ある、日本最大級のQ&Aサイトです。2004年からサービスを開始し、今年20周年を迎えます。 Yahoo!知恵袋はモバイルクライアント、バックエンド、フロントエンドの3つのシステムで構成されています。今回対象とするフロントエンドシステムは、ブラウザやYahoo! JAPANアプリからアクセスされる際のWebページを提供するシステムです。 Yahoo!知恵袋の
NTT東日本の中村です。 Amplify Gen2がGAとなり、プレビューで紹介されていたチュートリアルも大きく変わりました。 改めて、正式公開されたチュートリアルを確認してみました。 プレビュー版はこちらの過去の記事でまとめられていますが、GAになり、多少コマンドの変更等がありますので、ご注意下さい。 amplify → ampxにコマンドが変更 sandboxのオプションがnameからidentifierに変更 チュートリアルを始める前に チュートリアルはReact、Vue、Flutter等、言語フレームワークにより分かれていますが、今回はNextJSのApp Routerをベースに確認します。 今回はQuickStartを進めていきます。 Amplify Gen2のチュートリアル（Quick Start） 以前は無かった、QuickStartのチュートリアルで、GitHubにGen2
エンジニア向け社内イベントのご紹介と運営を経験してわかったこと - 一休.com Developers Blog
こんにちは。宿泊プラットフォーム開発チームの菊地です。 一休では月に一度、社内エンジニア向けにIkyu Tech Talkを開催しています。2022年から始まり、ありがたいことに2024年3月で丸2年を迎えることができました。 この記事では、Ikyu Tech Talkの2年間のふりかえりをしていきます。 また、私は社内イベントの主催が初挑戦だったので、どうやったらイベントを盛り上げられるのかと悩んだときもありました。 そこで、同じように自分の会社でTech Talkを開催してみたい人に向けてイベント運営の知見もお伝えしたいと思います。 開催のきっかけ もともと定期的なプロジェクトの成果報告会はあるものの、業務で得たエンジニアリングの知見の共有をする場は設けられていませんでした。 あるとき「技術についてざっくばらんに話す場が定期的にあると楽しそう。一緒にやらない？」と声をかけてもらい、面白
JSer.info #694 - Next.js 15 RCがリリースされました。 Next.js 15 RC | Next.js React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 また、Fetch/GET Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingのincrementalオプションを追加などの変更も行われています。 そのほかには、遅延処理をするnext/afterを追加、create-next-appのアップデート、非推奨だった@next/fontのサポート削除などが行われています。 SolidStart 1.0がリリースされました。 SolidStart 1.0: The Shape of Framewor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年度】エンジニア向け研修資料まとめ - Qiita
最近は意図的にGitHub Copilotを無効にすることがある
Next.js で React Compiler を試しつつ出力コードを見てみる
Server Actions の同時実行制御と画面の状態更新
Next.jsでMiddlewareが大量に実行される場合の対処法
Yahoo!知恵袋 フロントエンドをリアーキテクトしている話
Amplify Gen2のQuickStartチュートリアルを進めてみた | DevelopersIO
2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)