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
Deno、Node.js、Cloudflare Workersなど、非Webブラウザ系JavaScriptランタイムのコード互換を目指す「Web-interoperable Runtimes Community Group」（WinterCG）が発足
Deno、Node.js、Cloudflare Workersなど、非Webブラウザ系JavaScriptランタイムのコード互換を目指す「Web-interoperable Runtimes Community Group」（WinterCG）が発足 JavaScriptはWebブラウザで実行することを想定して開発されたプログラミング言語ですが、現在ではNode.jsやDenoなどに代表されるようにWebブラウザ以外の環境でも実行されるようになってきました。 そこで、こうした非Webブラウザを中心としたJavaScriptランタイムにおける相互運用性の改善を目指したコミュニティグループ「Web-interoperable Runtimes Community Group」（WinterCG）がW3Cで発足しました。 設立メンバーはDeno、Cloudflare、Shopify、Vercel
Auth0 は認証・認可サービスをクラウドで提供している SaaS ベンダーです。 「認証」という機能はどのアプリケーションにも求められる重要な要件ですが、プロダクトの本質的なビジネス価値を持たない場合が多いでしょう。Auth0 を使用することで、この「認証」機能という Undifferentiated Heavy Lifting な作業を排除できます。 本記事では、簡単な React アプリケーションを作成して Auth0 を使用した認証機能を実装します。また、作成したアプリケーションを Vercel（旧 Zeit now）にデプロイする方法を解説します。ユーザのサインアップ後の確認メールなどは SendGrid から送信されます。 以下は、本記事で紹介するアプリケーションの簡単な構成図です。また、本記事で実装されたアプリケーションは Vercel にデプロイしています。こちらからアクセ
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vercel はもっと薄く使える
はじめに Vercel Ship、アツい発表が続いていますね。 特に初日の Storage は、KV、Postgres、Blob と 3 つのプロダクトが公開され、「とりあえず何か試したい！」「今の構成のあのコンポーネントは Vercel で済ませられるようになりそう！」となった方も多いんじゃないでしょうか。 Vercel で何かしら関数を動かすとなった時に一番最初に思い付かれがちな選択肢は、とりあえず create-next-app して pages/api/hello.ts を作成して... というあれですが、Vercel を使ってみたい人（またはプロジェクト）のうち全員が React を使っているわけではありませんし、そもそもフロントエンド無しで完結するユースケースも多いはずです。 Vercel の Serverless Functions は（ご存知の方も多いと思いますが）実際には
前回までのあらすじ：2020年に作ったソフトウェアや開発技術をふりかえる - laiso Write Code Every Day プログラマーの人にありがちな趣味だと思うんだけどWrite Code Every Day （John Resig - Write Code Every Day）を2008年ぐらいからやっていて、昼に仕事でコード書いて夜になったら自分の楽しみのために何か作るか〜というのを繰替えして生活してる。 John Resig の記事との違いは今読みながら比較していたんだけどGitHubに上げるっていう部分はやらなくなってしまった。クレデンシャルとかハードコードしてるやつとか半分他人のコードコピペしたやつとかの清書がめんどくさいというのがあるし、クローラーなどは自分だけが使うぶんにはいいけど公開した方が迷惑になる——みたいなジャンルのコードが結構あって段々省くようになってし
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
金が掛からないRailsの本番環境を求めて、
そして私は家を飛び出した。 旅路の果てで、以下の構成に辿り着いた。 データベース: TiDB Cloud ストレージ: Cloudflare R2 Railsの実行環境: Fly.io ~ 20xx年某月某日 ~ 私はRuby on Railsを使ってWebアプリを作ろうとしていた。 そして同時にこう思っていた。 「お金かけたくない🥺」 当たり前だ。 なにせ私はこの荒れ果てた日本の片隅で、ひっそりと呼吸し、そして下界に転がる食料を貪る、一匹のしがなく卑しい動物だ。 いや、虫だ。 PR TIMESで「大規模な資金調達したぜ！」なんてPRできるようなニュースは無いし、タクシーの後部座席のディスプレイで上級国民にゴマをするサービスもない。 だから「できるだけお金を掛けない構成にせねば」と最初に考えた。 そんなことを考えながら、我が家のくたびれたドアノブを回した。 何に金が掛かるのか 以下の要素
Next.jsで整える。デザインとロジックの分離
先日開催されたジャムジャムJamstackで登壇させていただいた時の記事になります。 簡易構成のリポジトリを作成しましたので、参考になればと思います。 経緯 メディアサイトを作成することになった デザイナーコーダー ×1 フロントエンドエンジニア ×1（ワイ） Next.jsとmicroCMSでSSGしてvercelにデプロイ 私的、Jamstack王道構成ですね デザイナーコーダーさん「Jsわからんです」「抵抗感あります」 SSGをする為のpages/配下のファイルにはいろんな処理が記載されます。 getStaticPropsやgetStaticPathsとか ページネーションとかパンクズとか作る為の処理が色々記述されます。 この辺なんらかの方法で・いい感じに・分離できたら・いいですね^^ デザイナーコーダーが触るViewの部分 フロントエンドが触るロジックの部分 これを目指していきます
【Next.js 12 コラム追加版】2021年からReactを始めるなら React Server Components 一択ではないか？
【Next.js 12 コラム追加版】2021年からReactを始めるなら React Server Components 一択ではないか？ VTeacher所属の Masaki Suzuki です。 この記事では、私が在職する SUZUKI SOFTWARE LABO, LLC というスタートアップにて、 VTeacher のプロジェクトで得た知見を紹介していきます。 前回の記事 にコラム（Next.js 12）を追加した記事です。 Next.js 12 から！正式に React Server Components が発表されましたね。 さすが 約113億円を資金調達 したVercel。Rust製コンパイラ（swc）を採用してビルドを高速化したり、ミドルウェア（エッジ関数等）導入でIaaSらしいことをしたりと目が離せません。「おまえたちはフロントに集中しろ！それ以外は俺たちがやってやる」
【個人開発】フローチャートで診断を作れるWebサービスをリリースしました【全コード公開】 - Qiita
こんにちわ。れとるときゃりー(@retoruto_carry)と申します。 2年ほど前からwebを勉強しはじめて、ひとりでwebサービスをたくさん作っている大学4年生です。 また新しいWebサービスを作りました なにを作ったの？ 診断チャートメーカー あなたにおすすめのお菓子を診断します | 診断チャートメーカー フローチャートで診断を作れるWebサービスです。 選択形式の診断を簡単に作成できます。 新しいサービスを作りました🎉🎉 選択形式の診断を簡単に作成できます！ フローチャートで簡単に編集できます いろんな診断などを作って遊んでみてね！ 拡散していただけると嬉しいです！https://t.co/SFmJP7YQwE pic.twitter.com/S4dCIrwqqg — れとるときゃりー@TwiCall(ツイッター通話アプリ)作った (@retoruto_carry) June
How to choose the best rendering strategy for your app – Vercel
How to choose the best rendering strategy for your appOptimizing performance in the way you deliver code. Web rendering has evolved from simple server-rendered HTML pages to highly interactive and dynamic applications, and there are more ways than ever to present your app to users. Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regenerati
サービスについて Skillfulsというプログラマのスキルのレベルを記録して、その情報を元にスキルマップを簡単に作ることができるWebサービスです。作ったきかけは、僕自身が様々な技術を扱ってきて、自分のどのスキルがどのくらいできるのだろう？という疑問を可視化して解決できないかと思ったことです。 また、個人のスキルをデータとして蓄積すると、それを活用して開発チームのメンバーのスキルマップを簡単に作れると気づき、スキルマップ作成機能もつけてみました。 スキルマップはチーム内で技術の得意、不得意を一覧で見ることができ、技術選定の参考や特定の技術に詳しい人に質問しやすくなったりするようです。 URL: https://skillfuls.dev ↓スキルを記録 公開ページ ↓複数人の情報をまとめてスキルマップに 公開ページ 技術構成 Nuxtとnestjsを採用し、TypeScriptで型共有が
signal
Orchestrate freely with the multi-track piano roll editor. Of course, you can use velocity, pitch bend, expression, and modulation to create expressive sound.
Thredot はスレッド形式でメモを書けるサービスです。 Google アカウントがあればログインできます。 こういうの Playground ページを用意しているので、気軽に使い心地を試してみてください。 Thredot のコンセプト Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。 メモを整理させない 爆速な検索機能 公開範囲を設定できる WYSIWYG エディタを採用 メモを整理させない Thredot では徹底的にメモを整理させない方針を取っています。 僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。 でも整理するのって超面倒くさいです。 ( 支離滅裂 ) 結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。 Thre
一年以上温めに温めまくった個人開発サービス Moyuk を Product Hunt でローンチしたので、技術的な知見を書きます🚀 About Me 株式会社ヘンリー でソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on GitHub @kohii00 on Twitter 作ったもの 説明 詳しい説明： サービスの詳しい紹介はこちらに書いたので読んでみてください 🙏 雑な説明： Moyuk は TypeScript で書いた関数を、ブラウザ上で実行、管理、共有できる Web アプリ（”App”）に変換するプラットフォームです。 技術的要素の概要 Moyuk には一般的なアプリケーション（データの出し入れやUIの描画など）としての要素に加えて、以下のような特徴的な要素があります。 ユーザーが書いた TypeS
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
ある Vercel ユーザーが「空っぽの状態」の画面に適切な導線が表示されているのを褒めたら、 Check out this delightful empty state by @Vercel! pic.twitter.com/qFkhFcUlwq— usrnk1 (@usrnk1) 2023年6月14日 Vercel の CEO が GitHub の new repo screen を参考にして意図的にやっているのだといい、 My love language is thoughtfully designed empty states See: @github's timeless new repo screen with `git` copypasta. https://t.co/ADFg52G7Ba— Guillermo Rauch (@rauchg) 2023年6月14日 それを受け
GitHub - vercel/virtual-event-starter-kit: Open source demo that Next.js developers can clone, deploy, and fully customize for events.
This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 live attendees. It includes the following features: Multiple stages - with the ability to add multiple sessions on each stage Each stage can be configured as - An embedded YouTube stream OR A live interactive audio-video experience powered by 100ms Sponsor expo, including individual virtual booths Career Fair
Node.jsアプリケーションのDockerイメージのサイズを削減する方法について調べた - The Third Law
Next.jsアプリケーションのDockerイメージのサイズが大きくて困っていたので調べていたところ、Next.jsの公式ドキュメントにDocker Imageというセクションがあり、おすすめ設定が記載されているのを見つけました。以前はここまで詳細な記述はなかったのですが、つい10日ほど前に追加されたようです。 ドキュメントには一番おすすめの方法だけ書かれているのですが、もともと「What is the best way to use NextJS with docker? · Discussion #16995 · vercel/next.js · GitHub」というdiscussionがあり、ドキュメントの記述はここでの議論が元になっているようです。Discussionではいくつか例が示されているのですが、それぞれさまざまな最適化テクニックが利用されており、どれくらいの容量になるか気
皆様、ChatGPTでCode Interpreterの機能がリリースされましたがお使いになりましたか？ 僕は大変有りがたーく日常使いさせて頂いており、活用方法について各方面のご意見を伺いたいですが、その話はさておき… こうした劇的な開発体験の変化が予感されると、度々繰り返される議題の１つが「エンジニアやコードの不要論」かと思います。 私自身がローコードツールを提供している会社の経営者なのですが（ヒューマンエラーを減らせる管理画面構築SaaS「ベースマキナ」をよろしくお願いします！）、この類の議論の盛り上がりと日頃情報を追っている最新のツール群との間を照らすと、ギャップを感じます。 端的に言うと、少なくともここ１年くらいで新しく登場するデベロッパー向けのツールを見ていると、コードが不要になる場面が増えると思いきや、逆にコードをしっかり書くツールが増えてきたな、という印象を持っています。 D
🍃はじめに 「これからのWebコーディングのスキルは、はじめからJamstack志向でも良いのではないか？」 と考えたことが本記事執筆の理由です。 先日エビスコムさまから作って学ぶNext.js/React Webサイト構築が発刊され、これであれば普段Webコーディングを専門にされている方がJamstackに入門できると考えました。 一方でJamstackに関連する資料は中上級者向けのものが多く、初学者向けの体系だった資料がありません。 この課題を解決すべく作って学ぶNext.js/React Webサイト構築を目標に掲げ、それまでの道を整備したいと思い本記事を書くに至りました。 🙋対象 これからフロントエンド(Jamstack)を勉強される方 コーディングの基礎を整理したい初中級者 Macユーザー(Windowsでも可能ですが適宜読替えが発生する可能性があります) 🏁ゴール 作って
本日11月23日Remixが正式にリリースされたので早速触ってみました。 Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRはサポートしていない Next.jsにはSSGやISRなどあらかじめデータをビルドしておいてその結果をリクエスト時に返すといった機能がありますが、Remixにはありませんでした。 その代わりRemixでは以下のようにページコンポーネントごとにheadersをexportするだけでHTTP headerをコントロールできる仕組みがあるので、そこでCache-Control
健常者エミュレータ事例集Wiki 集合知を構築しよう トップページページ一覧メンバー掲示板編集 トップページ 最終更新： contradiction29 2022年10月17日(月) 23:44:38履歴 Tweet 投稿はこちら→https://hpe-form.vercel.app/ 十選*1 横浜のデートで北朝鮮の工作船を見に行こうとしてはいけない （辛くなる言葉を書かれたり、生命的危機を感じたとしても）他人を刺してはいけない 友人の誕生日を1000日ごとに祝ってはいけない 結婚式をやるなら親を呼んだほうがいい むやみやたらに他人様の家のトイレを借りてはいけない ブラウザにタブを溜め過ぎてはいけない 大学の学生証をレンチンしてはいけない オタクとオタクは恋仲になれると思わない方がいい 相手の声が聞き取れない時は適当な相槌を打ってはいけない お◯ん◯んごっこをしてはいけない 十速*2
Next.js × NextAuth × Prisma × VercelPostgresで構築するモダン認証機能システム
はじめに 認証機能を一から作成したいと思い、Next.jsとNextAuthを使ったGithub認証機能の実装を行ったので、その手順を記事していきます。ユーザーデータ管理にPrismaを、データベースはVercelPostgresを使用しています。 ソースコード 実装したサンプルデータは下記リポジトリに格納しています。 バージョン情報 今回実装したバージョン情報のです。 next.js: v13.4.1 next-auth: v4.22.1 prisma/client: v4.14.1 vercel/postgres: v0.3.0 typescript: v5.0.4 技術詳細 Prisma PrismaはNode.jsとTypeScriptによる、オープンソースORM(Object Relational Mapping)です。SQL(select, insert, update, de
next.js で自分のブログを作る
next.js で自分のブログを作る 自分のブログとして mizchi.dev を作った話 at 隅田川.js #1(オンライン) - connpass 何を作ったか このブログ自身(mizchi.dev)。スライドツールも突貫で自作 ソースコード mizchi/dev Lighthouse Full AMP GA 対応 Git から編集ヒストリの生成 どんなブログがほしかったか Lighthouse で満点出したい 普通の Markdown じゃつまんないから MDX で書きたい サーバーの運用をしたくない next.js の最適化に乗りたい 作った どうせ動かないし CDN 上で静的サイト + Full AMP MDX コンパイラを自作 (amdx) netlify + 買ったまま忘れてたカスタムドメイン(mizchi.dev) pages/*.tsx が公開される仕組みを、そのまま採
はじめに はじめまして！株式会社Rivine のつかもとです！ この度 Zenn 初投稿 & 弊社 Zenn Publication の初記事となります。どうぞお手柔らかに・・ 2022 年 11 月より 株式会社Rivine を設立し、エンジニア＆取締役として働いております。 「テクノロジーで、もっと生きやすい世の中へ」をモットーに主に受託開発と開発支援（SES / ラボ型開発）を行っております。 Rivine と書いて、リヴァインと読みます。名前だけでも覚えて帰ってください・・🙏 さて本題ですが、弊社は昨年 11 月に法人設立後、早くも今年の 4 月に自社ホームページをリニューアルしました。今回は主にリニューアルの概要について、少しお話しをさせていただきます。 ※ 本記事タイトルの「ほぼ0円！」という表現について ※ ほぼ0 円 や ほぼ無料 という表現には「ドメインの更新料」は含ん
GPT-4V x LINE Bot を Cloudflare Workers で実現するためにやったこと・やらなかったこと - hatappi.blog
この記事では OpenAI が提供する Vision API (GPT-4V) を使用して、LINE に投稿した画像に反応する Bot を作成した際にやったこと・やらなかったことを書いています。 Bot の実装を細かく解説はしていないので、それを知りたい方は「ChatGPT LINE」などでググると参考になる良い記事が沢山でてくるのでそちらを参照してください！ モチベーション LINE Bot は昔実装したものがありグループ LINE で身の回りのあれこれを通知する君になっていました。機能としては通知のみだったので何か反応してほしいなーと思ったのが最初のきっかけでした。冬休みで時間もあったので OpenAI 周りのプロダクトを整理するためにドキュメントを一通り見てその中から Vison API を使えば画像にも反応できる Bot にもなり面白そうなことがわかったのでガッと実装することにしま
Next.js + Prisma + NextAuth.js + React Queryを試した - $shibayu36->blog;
2分コーディングの一環でNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代をやった。とにかく簡単に認証 + DBアクセスがあるアプリケーションを作ってvercelにデプロイできるサンプルが出来て非常に良かった。趣味プロダクトをちょっと作ってみるのに良さそう。 shibayu36/next-prisma-auth-tutorialに試した例を置いているので参考にどうぞ。 やれたこと Googleのアカウントを使ってサインインし、TODOを追加できるアプリケーション herokuのPostgreSQL dbをデータソースとして動くアプリケーションをvercelにデプロイ 作業メモ prisma、migrationのツールも入ってるし便利すぎる。 migrationしたけどpsqlでdocker内にアクセスできなか
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
背景 先行・類似事例 自作のメリット Rustで局面画像生成 盤・駒画像の素材 画像処理 入出力 Generatorと下準備 Publish Web Appで使う CDN Edgeで動かす wasm-packでWebAssembly作成 Deno Deploy Vercel Edge Functions Cloudflare Workers Fastly Compute@Edge その他 まとめ Repository 背景 ATrium という AT Protocol のためのライブラリを自作している が、まったくドッグフーディングしていなかった ので、Blueskyに詰将棋の問題を放流するBotを作ってみることにした gfx氏が作ったBot を参考に というわけで、詰将棋の問題の局面を画像で投稿したい が、あまり自分好みの画像を生成できるライブラリやWebサービス等がない ので、結局それ
はじめに KODANSHAtechという会社でFRIDAYの開発案件に携わっています。 FRIDAYは講談社から発行されている写真週刊誌です。スクープ記事が注目されがちですがグラビアも多くやっており、撮影時の動画をウェブで提供しています。本記事では、FRIDAYにおける動画特典ページをNext.js ＋ Vercelでリプレースした事例を紹介します。 上記の画像はユーザーが動画を見るまでのフローを示したものです。ユーザーはFRIDAY紙面に掲載されたQRコードを読み込み、遷移先のページでパスワードを入力します。入力すると、動画を視聴できるようになります。 移行の経緯・技術選定 FRIDAYには古くから存在する月額課金のサービスが存在し、そのサービスに相乗りする形で紙面の動画特典ページを運用していました。しかし、サブスクリプションのサービスにリプレースしたタイミングで、動画特典ページを別アプ
「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】 - Qiita
3.インフラ（全体構成）について ここから技術的なことについて話していきます。 まず大前提として、プロジェクトの全体構成は、Happiness Chain の卒業課題の条件に基づいて決めれらていました。これらの条件には以下が含まれます Rails APIモード / Reactで完全SPAのポートフォリオを作る。 本番環境と開発環境にDockerを使う。 本番環境にはECS Fargateを使う。 GitHub Actionsを使ってAWSに自動デプロイする。 Terraformでインフラをコード化する。 なので、これに倣って実装しています。 アーキテクチャの全体像 フロントエンドはVercelにデプロイして、バックエンドはAWSのECSにデプロイしています。 ブランチ運用は、GitHub flowを採用しています。 プルリク時にテストが走り、mainブランチにマージされるとデプロイされる感
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) Faust.jsとは？ Faust.jsとはについては公式サイトのトップに書いてありましたので引用します。 Faust.js is the Headless WordPress Framework. Faust.js provides a set of tools to make building front-end applications with WordPress as the headless CMS a pleasant experience for both developers and publishers. This framework consists of a WordPress plugin, a
風船屋さんを支える技術。200時間でゼロからweb検索システムを構築した裏側のすべて。(Next.js, Firebase...)
はじめに こんにちは、フロントエンドエンジニアの多田です。 フロントエンド領域の勉強をはじめて 1 年が経ち、今回個人でゼロからアニプラさん(バルーンショップを経営してる会社)のバルーンサイトの検索システムを作らせていただく機会に恵まれました。 開発にかけられる総時間が 200 時間(つまり工数 1 人月ちょいぐらい、、)というだいぶヤバめなチャレンジングな時間的制約の中、要件定義・デザイン・フロントエンド・バックエンド・インフラ周りまで通して全て 1 人で開発し、完成させることができました。 はじめてfigmaでデザインしてみた アニプラさんより記事を書く許可をいただいたので、開発の裏側の話を記事にまとめます。 開発したサイトはこちら ↓ (今回の記事のメインとなる Next.js で作ったバルーンプラン一覧検索画面) 本記事の内容 (ほぼ)個人開発においての、要件定義 → デザイン →
エッジは誰のもの？ - ゆーすけべー日記
CDNの文脈でいうエッジコンピューティングはフロントエンドのものとされることが多い気がするけど、そうじゃない。フロントエンドの技術を使ったバックエンドである。 フロントエンド？ ユーザーに近いところで実行されるという意味ではフロントエンドかもしれない。あと、VercelのNext.jsのように、フロントエンドフレームワークのファンクションがエッジで動くからフロントエンドでしょというのはある。そしてエッジのファンクションはたいていフロントエンドで使われているJavaScriptもしくはTypeScriptで書く。そうするとツールチェーンも、例えば「Vite」と聞いてそれが何であるか？を答えられる人はフロントエンドやってる人の方が多いだろう。 2つのユースケース エッジには2つのユースケースがある。 CDNの機能を拡張する。オリジンありき。 サーバーレスコンピュート。オリジンそのものになる。
2021年お世話になったReact関連ライブラリ10選 #techtekt Advent Calendar 2021 - techtekt
この記事は techtekt アドベントカレンダー2021 の 12日目の記事です。 こんにちは！ テクノロジー本部 エンジニアリング統括部 サービス開発部でエンジニアをしている Yuto SAGAWA です。*1 皆様今年もReactライフを満喫できていますでしょうか？ 個人的にはたくさんReactに触れる機会があり、非常に満喫することができました！ そんな2021年の個人的にお世話になったReact関連のライブラリ、フレームワーク、ツールなどの紹介をしたいと思います。 next nextjs.org Next.jsはReactのフレームワークで、昨今では使用例も多く人気のフレームワークであることが伺えます。 SSR / SSG だけではなく、ISR（Incremental Static Regeneration）など、 Webアプリケーションのパフォーマンス改善の手助けとなることが期待
Relayで見るNext.jsとSSGの未来
現在自分が取り組んでいるプロジェクトでは、Next.jsとRelay Modernを採用して開発を進めています。 RelayはFacebookが開発しているGraphQLクライアントライブラリです。 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい、ということを説明します。 Example公式のexampleがすでにあるので見てください。 https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern 以下が典型的なpagesの構成です。 pages/index.js
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React アプリに Auth0 でシュッと認証を組み込んで Vercel に爆速デプロイする - Qiita
Remix vs Next.js - React Japan
2021年に作ったモノや技術をふりかえる - laiso
プログラマのスキルを記録できるサービスを作ってみた【個人開発】 - Qiita
スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
ブラウザ上でTypeScriptでツールを作成・実行できるサービス「Moyuk」を支える技術
GitHub の実用的な新規リポジトリ画面は偶然から生まれた - @kyanny's blog
コード不要論からコード表現への回帰 - デベロッパーツールの現在｜Seiji Takahashi@ベースマキナ
JamstackなWeb制作者になるためのロードマップ
触ってみてわかったNext.jsと比べた時のRemixの特徴
健常者エミュレータ事例集Wiki
【ほぼ0円！】Hugo + Cloudflare Pages + AWS でホームページをリニューアル
Rustで将棋の局面画像生成、そしてCDN Edgeで動的生成 - すぎゃーんメモ
週刊誌の動画特典ページをNext.js + Vercelで構築した話
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) - necco note | necco inc.