Next.js で React Server Components を試してみた
こんにちは、フォルシアエンジニアの籏野です。 先日Next.js 13.4が発表され、App Router が Stable 版になりました。 App Router では最新の React の機能を利用することが可能になっており、その中でも特に注目したいのが React Server Components です。 これまでの Next.js では SSR 時にフェッチしたデータを利用する場合、getServerSidePropsやgetStaticPropsを利用していました。 これらの関数で取得したデータをコンポーネントに props として渡して SSR を行っていましたが、props のバケツリレーが長くなってわかりづらくなったり、非同期の処理に時間がかかって初期の描画が遅くなるといった問題がありました。 React Server Components(以後、RSC)の大きな特徴とし
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
pnpmでvite, react, typescriptのprojectを作成する - Qiita
pnpmでvite, react, typescriptのprojectを作成する Motivation pnpmのベンチマークが気になったことと、主要なpackageでpnpmを利用していることがあり存在が気になっていた。 nx, lerna以外の monorepoの構成をpnpmで一度試してみたくなったことがこの記事のモチベーションです。 table of contents 作成しようとしているプロジェクト構成 pnpmのworkspace用のconfigファイルを作成する vite, react, typescriptのprojectを作成する 起動してみる 1. 作成しようとしているプロジェクト構成 Motivationにもあるとおり、pnpmのmulti-package構成を利用したプロジェクト構成にしようとしています。 $ tree . -L 2 ├── README.md ├
生成AIを無料で学べる45分×10コースの入門講座、Google Cloudが公開
Google Cloudは2023年5月19日（米国時間、以下同）、「Google Cloud Skills Boost」に、7つの無料コースからなる新しい学習プログラム「生成AIラーニングパス」を追加したと発表した。2023年5月末に「生成AIラーニングパス」の内容を拡充し、6月7日現在は10のコースと1つのクエストがラインアップされている。 Google Cloud Skills Boostは、Google Cloudが直接管理、提供するオンライン学習、スキル開発、認定資格取得のためのプラットフォーム。データ、AI、インフラ、セキュリティなどのトピックに関する合計700以上の学習アクティビティーにオンデマンドでアクセスできる。 学習アクティビティーは「コース」「クエスト」「ハンズオンラボ」に大別される。これらのアクティビティーを完了すると、専門知識を身に付けたことを証明するGoogle
君には1時間でGitについて知ってもらう(with VSCode) - Qiita
おことわり この記事はプログラミング＆業務未経験の新入社員に、Gitについて1時間くらいでバババッと説明した内容をもとに作ったものです。自分がもし誰かにGitについて教えて貰える立場にいたら、最初にこれを教えて貰いたかったという気持ちで作りました。 とりあえず「1人のプロジェクト」で「1時間で」Gitをそこそこ知って使えるようになることを目的としています。実際のチーム開発ができる水準までこの記事だけで達するのは無理ですが、今後Gitを使う必要がある人にとって学習の足がかりになればいいな、という内容です。 それと、新入社員に教えるという都合上、表現がやや正確でなくざっくりしたところがあるかもしれませんが、質の悪い誤解を招くようなものでなければご容赦下さい。 全体像 まずはGitとは何かをざっくり分かって貰った後で、VSCode上での操作を行って貰います。 Windowsでの説明を行いますが、
ChatGPTを使った時の「うまくいかない」をどう解決するか 機械学習エンジニアが明かす、プロンプトエンジニアリング手法
OpenAI社によって開発された自然言語処理を使ったサービス「ChatGPT」。その背景にあたり、最近特に注目を集めている技術が大規模言語モデルです。今回は、不動産テックのイタンジ株式会社が主催したオンラインセミナー「【ChatGPTの基礎と応用】自然言語処理の最新動向からプロダクトでの活用を考える」の中で、株式会社GA technologiesの機械学習エンジニアである丸山拓己氏が、大規模言語モデルの活用方法について紹介しました。 GA technologiesでM&A仲介の業務支援ツールの開発を行う丸山拓己氏 丸山拓己氏：大規模言語モデルの応用についてお話しします。AISC（AI Strategy Center）の丸山です。よろしくお願いします。 本日の目次です。まず、Prompt Engineeringについてお話しします。その後、大規模言語モデルの使用上の注意、主にプロダクトを使う
Introducing fine-grained personal access tokens for GitHub
EnterpriseSecurityIntroducing fine-grained personal access tokens for GitHubFine-grained personal access tokens offer enhanced security to developers and organization owners, to reduce the risk to your data of compromised tokens. Stolen and compromised credentials are the number one cause of data breaches across the industry. GitHub has a long history of protecting developers and enterprises from
社内用GitHub Actionsのセキュリティガイドラインを公開します | メルカリエンジニアリング
この記事は、Merpay Tech Openness Month 2023 の4日目の記事です。 こんにちは。メルコインのバックエンドエンジニアの@goroです。 はじめに このGitHub Actionsのセキュリティガイドラインは、社内でGithub Actionsの利用に先駆け、社内有志によって検討されました。「GitHub Actionsを使うにあたりどういった点に留意すれば最低限の安全性を確保できるか学習してもらいたい」「定期的に本ドキュメントを見返してもらい自分たちのリポジトリーが安全な状態になっているか点検する際に役立ててもらいたい」という思いに基づいて作成されています。 今回はそんなガイドラインの一部を、社外の方々にも役立つと思い公開することにしました。 ガイドラインにおける目標 このガイドラインは事前に2段階の目標を設定して作成されています。まず第1に「常に達成したいこと
フロントエンドの歴史から React を知りたい
こんにちは、上條（mk-0A0）です。 早いものでこの web 業界に入って3年目に突入しました。新卒時にはすでに React が普及していたため、私はそれ以前の React を使わない開発の経験がありません。 ちょうど読んでいた『りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】』でフロントエンドの歴史について解説されていたので、React が誕生するまでの経緯を自分なりにまとめてみます。 React が生まれるまでのフロントエンドの歴史「8-1. React の登場に至る物語」 P.119 の内容をもとに年表を作成してみました。書籍では約8ページに渡って React が登場するまでの大きな出来事がまとめられています。私のように、すでに React が普及してから働きはじめた人にとっては過去のことが分かる内容なのでぜひ書籍を読んでみてください
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pythonプログラミング入門