【GitHub Actions】Next.jsプロジェクトを自動でビルド→EC2にデプロイする仕組み作ってみた - Qiita
はじめに こんにちは、皆さんは普段どうやってデプロイをしていますか？ オンプレ、AWS、GCP…デプロイ先の環境は様々だと思いますが、デプロイが自動化されているプロジェクトの方が多いのではないでしょうか。 自分も仕事の環境ではAWSに自動でデプロイされる仕組みになっています。 今日はそんな仕組みを個人開発環境にも導入してみようかと思います。 設計 ▼デプロイするもの この記事で作成したTodoアプリ（Next.jsで静的なwebアプリ） ▼デプロイ先 AWSのEC2 ▼CI/CDツール GitHub Actions ▼デプロイの流れ 対象リポジトリのmainブランチにpushされたら、ビルドが実行され静的ファイルをEC2にデプロイする Github Actionsとは github上の様々なアクションをきっかけに、あらかじめ設定しておいた動作を行ってくれる機能です。（雑まとめ） なのでma
ブログをNext.jsで作り直した
#metaをのぞいてみると、より詳細な記録が残っている。だいたい1年おきに当時興味のあったフレームワークを学ぶために作り直していたが、ここ2, 3年は使い慣れたRubyでフルスクラッチしたシステムで落ち着いていた。だけど、ここにきて今回興味のあったNext.jsを学ぶために作り直すことになった。 途中でブログサービスなどに投稿していた記事をインポートしたり、ドメインを移したり、リポジトリを分割したり統合したりしながら、今のブログに至る。 ブログというのはWebフロントエンドのフレームワークを学ぶためのお題として実益も兼ねていて気に入っていて、今後も何度も作り替えるんだろうなと思っている。 ReactやNext.jsは以前から触っていたためだいたい理解していたが、Next.js v13.4で導入されたApp Routerであったり、最近のReactについてキャッチアップできていなかったことが
【JavaScript・初学者】Reactでよく使われる頻出記法 / 関数について - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は関数について少し調べました。 関数の種類
2023-10-31のJS: Next.js 14、MSW 2、Node.js 21.1.0
JSer.info #667 - Next.js 14がリリースされました。 Next.js 14 | Next.js Release v14.0.0 · vercel/next.js Node.js 16のサポート終了、next exportコマンドを非推奨化、next/imageのdomainsオプションを非推奨化などの変更が含まれています。 また、Server ActionsのStable化、Metadata APIの改善が含まれています。 実験的な機能として<Suspense>を使ったPartial Prerenderingのサポートが追加されています。 今回のリリースに合わせて、Next.jsのチュートリアルも新しいものが公開されています。 Next.js by Vercel - The React Framework | Next.js by Vercel - The Reac
Next.jsのStatic Exportsを本番プロダクトで利用してみた感想と注意点 - Tabelog Tech Blog
目次 はじめに Static Exportsとは Static Exportsを採用した経緯 Static Exportsを利用する際の注意点 Dynamic Routingが使えない 対策 運用してみての感想 まとめ 最後に はじめに こんにちは。食べログ ウェブ開発部 FEチームの原田です。 昨年リリースした食べログノートではNext.jsを利用しており、Static Exportsを採用しています。 今回は食べログノートでStatic Exportsを採用した経緯や採用するための注意点、実際に運用してみての感想をお伝えします。 食べログノートの詳細については以下の記事も是非ご覧ください。 https://note.com/tabelog_frontend/n/na9a2ce24a4d5 Static Exportsとは Static Exportsとは、Next.jsのウェブアプリケ
各種Prompt Engineeringの日本語実例集（Zero-CoT、mock、ReAct、ToT、Metacog、Step Back、IEPなど） - Qiita
各種Prompt Engineeringの日本語実例集（Zero-CoT、mock、ReAct、ToT、Metacog、Step Back、IEPなど）Python機械学習入門ChatGPTLLM CoT、Zero-CoT、ToT、mock、ReAct、Step Back、Metacog、IEPなど、各種Prompt Engineering手法の概説と、日本語での実際のプロンプト例をまとめた記事です。 各種Prompt Engineering手法を日本語で実装したい方向けの記事となります。 本記事で取り扱う手法は以下の通りです。 項目数が多いため、記事右下の目次リンクもご活用ください。 本記事の内容 01: 通常のPrompt 02: Few-shot Learning 03: CoT（Chain of Thought） 04: 出力形式の指定方法 05: Zero-shot CoT（≒
クラスメソッドのReact事情大公開スペシャル -「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました #クラスメソッド勉強会 | DevelopersIO
クラスメソッドのReact事情大公開スペシャル -「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました #クラスメソッド勉強会 先日、クラスメソッドのReact事情大公開スペシャルというイベントにて、「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました。 登壇資料 登壇資料はこちらです。 フロントエンド開発、順調に進んでる？ 会場でも来場者のみなさんに軽く聞いてみましたが、首を横に振られている方が多かったように思います。 （残念ながら私もNoです🥺） なぜそんなに苦労しているのか、それはフロントエンドならではの難しさがあるからだと私は考えています。 一つは変化の激しさです。 Reactを例にとって考えてみると、直近では従来からあるSPA・クライアントサイドでのレンダリングが主流だったものからServer Componentが出てきたりして、関心がサーバ
FigmaのデザインをReact Nativeにエクスポートする方法
FigmaのデザインをReact Nativeにエクスポートする方法について、開発者向けのガイドが公開されました。このガイドでは、FigmaのDev Modeやさまざまなプラグインを使用することで、デザインと開発のギャップを埋める方法が詳しく解説されている。 FigmaのデザインをReact Nativeにエクスポートする方法について、開発者向けのガイドが公開されました。このガイドでは、FigmaのDev Modeやさまざまなプラグインを使用することで、デザインと開発のギャップを埋める方法が詳しく解説されている。 FigmaのDev Modeは、デザインアセットと開発環境をリアルタイムに接続することで、デザイナーと開発者の間でのコミュニケーションとコラボレーションをスムーズにする機能を提供している。デザイナーはFigmaでUIコンポーネントや画面を作成し、Dev Modeを使用して開発者と
丁寧なDeno+JSX - laiso
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。 その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。 これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもある しばらく考えてみたところ、私にとっては「TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい」という所に落ち着
Next.js(最新version)でChatGPTのCloneアプリを作成してみた。(Gitで確認できます) - Qiita
Next.js(最新version)でChatGPTのCloneアプリを作成してみた。(Gitで確認できます)PythonJavaScriptVue.jsReactChatGPT ChatGPTをゼロから作ってみた 作成したアプリの画像 下記でアプリを実際に動かせるのでよかったら確認してみてください。 ChatGPT-Clone-AppのURL プロジェクトはGitで管理してますので、クローンして使ってみてください。 chat-gpt-clone-appのGithubリポジトリのURL 自己紹介 お久しぶりの投稿です。本業と個人の仕事で忙しく1年振りの投稿になります。 株式会社DYMのエンジニアをしております、永松です。 普段はインフラはAWSを使い、Python(FastAPi), Golang(net/http), PHP(Laravel), TypeScript(Nuxt.js or
Next.js 13 vs Remix: An In-depth case study
Next.js 13 vs Remix: An In-depth case studyLast updated on 29 Sep 2023 by Prateek Surana • - min read When it comes to building web applications, React has been at the forefront for a while now, and its adoption continues to grow. Among the most common approaches to building web applications with React, Next.js stands out as one of the most preferred options. Next.js has also been in the limel
【永久保存版】0からReactを勉強するならこのロードマップに従え！ - Qiita
はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めました。 最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるようになることで個人開発で多くのサービスが作れるようになりました。 そんな私が去年の自分にアドバイスするなら、 0からReactを学ぶならこのロードマップで勉強しろ と言いいます。 Reactを学ぶことで 勉強することが楽しい ↓ モノを作ることが楽しい というマインドに変われたの
Open Interpreterを使ってReactプロジェクトを自動生成してみた - Taste of Tech Topics
こんにちは、最近アニメ「葬送のフリーレン」を観て、漫画を全巻購入してしまった安部です。 今回は、Open Interpreterを使ってみます。 Open Interpreterは、ChatGPTのAdvanced Data Analysis（旧Code Interpreter）のように、プロンプトから判断して自動で処理を実行するという動きを、ローカル環境で実現してくれます。 ローカル環境で動くため、ディレクトリに置いてあるファイルを読み込ませたり、ファイルを特定の場所に出力させたりできます。 今回は、OpenAI のAPIで、gpt-3.5-turboを利用していますが、API Keyを持っていない場合は、Metaが公開した大規模言語モデル（LLM）である「Code-Llama」が自動でダウンロードされて利用できるようになります。 Open InterpreterのChatGPTとの一番
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
use – React
他のあらゆる React フックとは異なり、use は if のようなループや条件文内でも呼び出すことができます。他の React フックと同様に、use を呼び出す関数はコンポーネントまたはフックでなければなりません。 プロミスを引数にして呼び出した場合、use フックは Suspense やエラーバウンダリ (error boundary) と協調して動作します。use を呼び出すコンポーネントは、use に渡されたプロミスが保留中 (pending) である間、サスペンド (suspend) します。use を呼び出すコンポーネントがサスペンスバウンダリでラップされている場合、フォールバックが表示されます。プロミスが解決 (resolve) された時点で、サスペンスフォールバックは、use フックから返されたデータを使用してレンダーされたコンポーネントの内容に置き換わります。use
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上 Reactベースのサーバサイドフレームワークとして知られるNext.jsの最新バージョン「Next.js 13.5」正式版がリリースされました。 使用メモリの削減、ローカルサーバの起動高速化などの強化が行われています。 Next.js 13.5 22% faster local server startup 29% faster HMR (Fast Refresh) 40% less memory usage Optimized package imports `next/image` improvements And over 438 bugs patched!https://t.co/edW10gB19X — Vercel (@vercel) Sept
Reactを始めるためのJavaScriptとES6基礎知識 - Qiita
はじめに 仕事でReactを実装することになり、今更ですがJavaScriptとECMAScript 2015（通常ES6と呼ばれます）の基本的な知識についてまとめようと思います。 この記事では、Reactを始めるために必要なJavaScriptとES6の要点に焦点を当て、それらの概念を一部ですが詳しく説明し、実際のコード例を交えて理解を深めていきます。 let、const、var：変数宣言 まずは基本となる変数宣言を見ていきます。変数を宣言するための主要なキーワードは let、const、および var です。それぞれの特徴と適切な使用法について見ていきましょう。 let
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ＆ドロップでWebページを作成できるセルフホスト可能なReact向けコンテンツエディター・「puck」
'Israel's 9/11': Political analysts react to deadly Hamas attack
Best Practices for Developing Complex Form-Based Apps with React Hook Form and TypeScript Support - Oren Farchi