Remix の SPA モード
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
Webの次世代アーキテクチャ - PESPA - Qiita
PESPAというアーキテクチャについて、みなさんご存じでしょうか？ これはWebにおける次世代のアーキテクチャを表しており、MPAやPEMPA、そしてSPAの欠点を解決し、シンプルかつプログレッシブエンハンスメントなアーキテクチャとなっている素晴らしいアーキテクチャのひとつとなっています。 そう、Remixフレームワークが採用しているアーキテクチャです。 このPESPAという概念について、Kent C.Doddsさんが、2022年の10月21日に投稿し話題を呼びました。 日本ではあまりまだ浸透していない概念ということもあり、本当に素晴らしいアーキテクチャと思想を兼ね備えていることから、今回その記事を翻訳しました。 みなさんがこれから開発していくアプリケーションに、ぜひこのアーキテクチャを採用していただきたいと願っております。 この記事は、あくまで翻訳であり、意訳の部分も含まれているため間違
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
CloudFront と S3 の階層化 TTL でシングルページアプリケーション (SPA) をホストする | Amazon Web Services
Amazon Web Services ブログ CloudFront と S3 の階層化 TTL でシングルページアプリケーション (SPA) をホストする 数多くのお客様がシングルページアプリケーション(SPA) のデプロイのために Amazon CloudFront と Amazon Simple Storage Service (Amazon S3) を利用しています。ウェブアプリケーションは React、 Angular、 Vue 等のフレームワークで実装されています。これら SPA を開発しているチームは、一見相反するようにも思える以下のような要件を持っていることが多いです。 ウェブアプリケーションをダウンロードする時のユーザーが体感する遅延をできるだけ小さくしたい。そのために、ユーザーの近くにある CloudFront のエッジロケーションにウェブアプリケーションをキャッシュさ
リクルートテクノロジーズのフロントエンド計測 | Recruit Tech Blog
同時に、redux-protoはリクルートテクノロジーズならではの大規模Web開発に必要な機能を盛り込んだ高機能なフレームワークでもあります。主なもので以下のような機能があります。 サーバサイドでHTMLを描画するためのSSR機能(Server Side Rendering) マイクロサービス化されたAPIを組み合わせて利用するためのBFFサーバ機能(Backend For Frontend) Atomicデザインを採用し、表示(Presentation)とロジック(Container)を切り分けるデザインパターンの徹底 titleタグ、metaタグ等のheadタグ要素の動的な変更のサポート URLに対応したルーティング、データフェッチとルーティングおよび描画の同期を行う機能 戻る操作時に以前の状態とスクロール位置を復帰する機能 ルーティングに応じたwebpackのコードスプリット、および
結局 PWA は来るの？来ないの？
昨日 Twitter でこんな記事を発見しました。 PWA が来るって言っているエンジニアは今すぐ辞めろ 「instagram の PWA が最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、オワコンであった。」 もしかしてこれのことかな？ Instagram PWA is sooooooo impressive. I probably won't be able to distinguish it with its native app. InstagramのPWAが、デキが良すぎて感動してる。ネイティブアプリと見分けられる自信ない。 pic.twitter.com/DS8TfceBZ6 — Eiji Kitamura / えーじ (@agektmr) 2018年1月26日 確かに、この言い方は若干煽り気味のと
「Remix」という哲学を学ぼう──学習コストを最小限に抑えるReactベースの注目フレームワークを解説！
対象読者 RemixがNext.jsなどとはどんなところが違うのか知りたいJavaScriptエンジニア WebブラウザとNode.jsという異なるランタイムをそれぞれキャッチアップするのが辛くなってきたエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.5.1 Remix 1.7.1 Webフロントエンド技術の広がり Webブラウザ上で動くアプリケーション周辺のエンジニアリング分野は、JavaScriptの進化とともにサーバーサイドの責務から分離され、「Webフロントエンド」という名前で呼ばれることが多くなりました。この分野は、Webブラウザをランタイムとしてリッチなアプリケーションを効率良く開発し、ユーザーに良い体験を与えることを主な目的としていると、筆者は認識しています。 ここで着目したいのが、このWebフロントエンド分野においては「Webブラ
React(SPA)での認証についてまとめ
Reactでの認証は厄介です。 Reactでコードを書いているとReduxやら外部ライブラリやら様々な「覚えること」「理解すべきこと」が出てきますが、結局ググればなんとかなることが多いです。 私がReactでアプリケーションを作るにあたって最も頭を悩ませたのが、今回取り上げる「認証」です。 認証はとにかくググっても結論が見いだせず、途方に暮れました。ネット上には様々な意見があったのですが、それらをまとめつつ私なりの結論を書いていきたいと思います。 こんな方におすすめ これからSPAの認証を学びたいという方認証について調べてみたけど、「つまり、、、どういうことだってばよ、、？」となってしまった方
これから始める、Next.js | 第1回 Next.jsとは
これから始める、Next.js 第1回 Next.jsとは Next.jsの特徴を簡単なデモを使って確認してみます。Reactをベースとし、用途に合わせSSRやSSGを組み合わせた柔軟なサイト書き出し機能を試してみましょう。 はじめに Next.jsは、Reactをベースとしたフレームワークです。アメリカに籍を置くVercel社によって管理されているOSSプロジェクトでもあります。 この記事の執筆時点では10.0.5が最新バージョンとなっています。 Vercel社は、Webサイトのデプロイ・ホスティングサービスとしての「Vercel」も会社と同じ名前で運営しており、Next.jsとVercelを合わせて利用することで簡単にハイパフォーマンスなWebサイトが作れるということを掲げています。 Vercel社は2016年にZEITという名前でスタートして、ホスティングサービスのnowを運営してい
フロントエンド・ SPA 研修
フロントエンド・ SPA 研修フロントエンド・ SPA 研修 このドキュメントは何か GMO ペパボ株式会社エンジニア・デザイナー向けフロントエンド・ SPA (Single Page Application) 講習のドキュメントです。エンジニア・デザイナーがモダンなフロントエンド開発について入門するための教材として書いてありますが、いかんせん著者がエンジニアなのでエンジニアリングについてある程度わかっていることを前提に書いてしまっています。（特にデザイナーで）ここわかりにくかったとかあったら Pull Request して改善してください。お願いします。 この研修プログラムを一巡することで、エンジニアはすでに作っているであろう Rails Tutorial の Micropost アプリから SPA (Single Page Application) バージョンを作り、モダンなフロントエ
AWS 環境の SPA で動的 OGP を実現する
はじめに フロントエンドが SPA のプロジェクトで OGP 対応した際に、割と大変だったので備忘録としてまとめます。結論から言うと、Lambda@Edge を使って User-Agent で bot かどうか判断し、HTML を返すというお決まりの手法で行いました。 その中でも、今回は REST API から画像 URL を取得する必要があったので Lambda@Edge 内で API へアクセスする処理も実装しました。 前提 今回は、AWS 環境上で S3 + CloudFront によって構成されています。 SPA(シングルページアプリケーション) では、単一の Web ページがあたかもページ遷移するかのようにコンテンツの切り替えが行われます。それらのコンテンツの切り替えは、ブラウザ上で JavaScript によって処理されます。 しかし、SNS などでシェアされた際に OGP を
CloudFront+S3なSPAにLambda@EdgeでOGP対応する | DevelopersIO
吉川@広島です。 案件でCloudFront+S3なSPAに対してOGP対応が必要になってきそうなため、Lambda@Edgeを使った対応について検証しました。 現状、FacebookやTwitterのBotは基本的にクライアントサイドJSを解釈できず、SPA単体でのOGP対応は難しいとされています。OGPメタタグはSSRで返してあげる必要があるため、「UserAgentでBot判定し、その時だけOGPメタタグ入りのHTMLをエッジサーバでレンダリングして返す」というのが基本戦略になります。 SPAをホスティングするCloudFront+S3を作成する S3バケットを作成する バケット名だけ入力し、後はデフォルト値で作成します。 そして、本来であればSPA用のHTML/JS/CSSリソースをアップロードするのですが、今回はLambda@Edgeの動作確認ができれば良かったためパスしました（
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ
AWS Amplify × Next.js で Server Side RenderingのデプロイおよびCI/CD環境を構築する
本記事では、AWS Amplify と Next.js を使って SSR 構成のデプロイ、および CI/CD の構築について考えていきたいと思います。 ※2021/05/19 更新 Amplify Console が SSR ホスティングをサポートしたので記事の内容を更新しました Amplify ConsoleがNext.jsで作成されたアプリのSSRに対応しました🎉 去年9月にAmplify LibrariesがNext.js/Nuxt.jsのSSR対応したので、SSRがAmplifyで完結できるようになります！https://t.co/igYF9Vz61a#AWSAmplifyJP — Jaga@AWS Amplify (@jagaimogmog) May 18, 2021 (参考) https://aws.amazon.com/jp/blogs/mobile/host-a-next
JWTを使った今どきのSPAの認証について | HiCustomer Lab - HiCustomer Developer's Blog
TL;DR JWTはCookieを使った認証の代わりに使うのはきつい。 コードを静的にホスティングしているSPAの話。 JWTの有効期間を長くすれば危険で、短くすればUXが犠牲になるというトレードオフがある。 AWS AmplifyはlocalStorageにJWTを保存 悪意のあるThird partyライブラリが混ざっていたらJWTを抜かれる。 yarn.lockが依存している全ライブラリを監査することはつらい。 Auth0ではiFrameを活用してメモリ上にJWTを格納できる Auth0いいね😍 まくら Youtubeが大好きなHiCustomerの小田です。ちょっと遅いですが年明け最初のエントリーです。今年もテックブログをよろしくお願いします😎ちなみに、気分がいいので年明けに観ていたYoutubeのエントリーの中で一番おもしろかった動画を紹介します。世界中で有名な「Auld L
Client Side Rendering（SPA）・SSR・SSG を整理してみた - 7839
Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機能が本格的に導入されたので、Next.js は SSR はもちろんのこと、SSG も対応可能となった。） SSR を理解する上で、Client Side Rendering または SPA と対比しながら整理を行った。 Client Side Rendering SSR SSG まとめ Client Side Rendering Client Side Rendering は、SPA（= Single Page Application）とほぼ同意義である。 ブラウザからリクエストされると、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【セッション資料・動画】SPAとWebアプリケーションでCognitoの使い方はどう変わるのか？ #devio2022 | DevelopersIO
ブログサイトを作りながら学ぶGatsby入門
スタイリッシュな管理画面のReact対応デザインテンプレート 11選 | sounansa.net
