React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 - エンジニアHub｜Webエンジニアのキャリアを考える！

2022/10/21 122 users エンジニアHub React+Redux 負債 jQuery

React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債... 続きを読む

SPAセキュリティ入門 by 徳丸 浩 | トーク | PHP Conference Japan 2021 #phpcon #phpcon2021 #php - fortee.jp

2021/09/08 264 users localStorage phpcon 徳丸 SPA トークン

シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、... 続きを読む

SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - ペパボテックブログ

2020/09/23 193 users ペパボテックブログ Webアプリケーション セッション管理

カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげま... 続きを読む

ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA

2020/04/09 11 users React Reactアプリケーション アプリケーション

Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。 Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。 2020年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状... 続きを読む

Vue + TS に触れて2週間でシングルページアプリケーションを作ってリリースした話 - GS2 Blog

2019/07/16 180 users Vue GS2 Blog 2週間

みなさん、こんにちは。GS2の丹羽です。 本日 Game Server Services は次世代版のベータテストを開始しました。 これまで提供していた GS2 を GS2 Classic と呼び、次世代版 GS2 を単に GS2 と呼びます。 gs2.io GS2 のリリースにあたっては非常に多くの新しいチャレンジを行いました。 それについては少しずつブログや... 続きを読む

SPAにおける状態管理: 関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2019/05/23 528 users SPA エンジニアHub 変遷 Electron アプローチ

こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登... 続きを読む

SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog

2019/03/05 985 users ベストプラクティス SPA JSON サーバーサイド 台頭

最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバ... 続きを読む

はじめてSPAのフロントエンドを担当することになった僕がワクワクしながら考えた構成について | 東京上野のWeb制作会社LIG

2019/02/14 31 users 歓喜 待望 SPA 案件 恐怖

そんなおりに舞い込んだ待望のWebサービスの案件がありました。しかもシングルページアプリケーション。S.P.A！ S.P.A！ いままでSPA案件なんてやったことなかったし、やってみたかったしで、恐怖と歓喜の入り混じったゾワゾワとした感覚につつまれました。 ってことで、今回はいろいろと考えて準備した構成をご紹介しま... 続きを読む

フォーム作成管理ツール「formrun」が刷新--SPAを導入、サイト埋め込みも可能に - CNET Japan

2018/07/10 33 users mixtape formrun ユーザーインターフェース

ベーシックの子会社であるmixtapeは7月10日、フォーム作成管理ツール「formrun（フォームラン）」にシングルページアプリケーション（SPA）技術を導入し、管理画面におけるユーザーインターフェースを刷新したことを発表した。 formrunは、問い合わせや申し込みなど目的に応じた20種類のテンプレートから選択し、必要項... 続きを読む

Vue.js で始めるシングルページアプリケーションの開発 - HDE BLOG

2018/03/05 580 users Vue.js HDE BLOG 開発 ウェブアプリケーション

2018 - 03 - 05 Vue.js で始めるシングルページアプリケーションの開発 Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力... 続きを読む

Vue.js 製フレームワーク Nuxt.js ではじめる Universal アプリケーション開発 | HTML5Experts.jp

2017/10/13 253 users Nuxt.js Vue.js Nuxt 本稿 リリース

Vue.jsでUniversalなSPAを開発できるフレームワークである Nuxt.js のバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートする Nuxt ついて、その魅力と基本的な使い方をご紹介い... 続きを読む

AMP/PWA をどこで/いつ使うか - Qiita

2017/07/07 260 users Qiita Pwa ネイティブアプリ PWAMP AMP

某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのため... 続きを読む

触って覚えるサーバレス入門！！『サーバーレス シングルページ アプリケーション』 - プログラマでありたい

2017/06/19 87 users サーバーレス 監訳者 プログラマ 本書 しん

2017 - 06 - 20 触って覚えるサーバレス入門！！『サーバーレス シングルページ アプリケーション』 監訳者の @yoshidashingo さんに サーバーレス シングルページ アプリケーション を頂きました。ありがとうございます。 　 本書の内容 本書の内容としては、名前の通りサーバーレスでシングルページアプリケーションを構築する方法がテーマとなっています。ただどちらかと言うと、シン... 続きを読む

非SPAなサービスにReactを導入する - クックパッド開発者ブログ

2016/10/26 412 users hokaccha React 外村 フレームワーク View

2016 - 10 - 26 非SPAなサービスにReactを導入する 投稿開発部の外村（ @hokaccha ）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）につい... 続きを読む

Gunosyのフロントエンド - Qiita

2015/12/08 30 users Qiita Gunosy axross メシ フロントエンド

この記事はGunosy Advent Calendar 2015の8日目の記事です。 お疲れ様です。おはようございます。@axrossといいます。シングルページアプリケーション書いてメシを食わせてもらっている人間です。 今日は、「Gunosyでフロントエンド」って言葉がピンと来ない方が多いなという印象があるので、そのあたりの話をしようと思います。 Gunosyのフロントエンド領域 Gunosyは今... 続きを読む

AngularJSのngRouteを使ってシングルページアプリケーション（SPA）を作ってみよう (1/3)：CodeZine（コードジン）

2015/10/14 47 users カスタムディレクティブ CodeZine TODO管理 以下

今までで一通りの機能が作れるような各機能の紹介や、本格的なアプリケーションを作成するためのカスタムディレクティブなどを含めて少々深い部分まで紹介してきました。今回は、ngRouteモジュールを使ってシングルページアプリケーション（以下、SPA）を作成します。 作成するアプリケーションは以前紹介したTODO管理のアプリケーションと同様のアプリケーションですので、実際の各登録機能などの説明は省略します... 続きを読む

Electron + Mithrilで、ふつうのデスクトップアプリを作る - Qiita

2015/08/20 124 users Electron Qiita Mithril お陰 手間

最近は、Mithrilのお陰で、シングルページアプリケーションが大分作りやすくなりました。仕事でも使ってます。あ、ドキュメントの日本語訳もありますよ。 http://mithril-ja.js.org/ 社内ツールを作るのにMithrilとElectronで作ってみたのですが、ふつうのデスクトップアプリを作るのにちょっと手間が多いので(これはMithrilを使わなくても)、ふつうを実現するためのフ... 続きを読む

Ginza.rb で Quipper のシングルページアプリケーション開発について発表しました - @kyanny's blog

2015/08/19 47 users Rails Quipper Ginza.rb

2015-08-20 Ginza.rb で Quipper のシングルページアプリケーション開発について発表しました Ginza.rb 第26回 シングルページアプリケーションのためのRailsとJavaScript フレームワークginzarb.doorkeeper.jp Ginza.rb 第26回 シングルページアプリケーションのためのRailsとJavaScript フレームワーク という勉... 続きを読む

JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Vue」を作る - フルスタックエンジニアに

2015/05/22 37 users TODO-Module angular ViewModel

2015-05-23 JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Vue」を作る TODO Module TODO Module-TODO Module Vue 今回はTODO-ModuleのSPA（シングルページアプリケーション）クライアントをVue.jsを使って作っていきます。 Vue.jsとはViewModelに特化したフレームワークです。Angular... 続きを読む

リアルタイムウェブな観点からElixir / Phoenix について - Qiita

2015/05/16 314 users Elixir サーバサイド Qiita POSTD 観点

ここ最近、 [翻訳] Elixir - 次に来る大物Web言語 - Qiita とか 超高速なJSON APIをElixirフレームワークのPhoenixでビルドしてテストしよう | POSTD を読んで基になっていたので、勉強していた。 前提: 自分はシングルページアプリケーションに特化したフロントエンドエンジニアであり、サーバサイドのプロダクション運用にはそこまで強くない。あとこれはここ2日の... 続きを読む

いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【後編】 （1/7）：CodeZine

2015/03/30 134 users ToDoアプリ CodeZine アプリケーション 過程 前回

前回は、React.jsを使った簡単なアプリケーションの作り方について説明しました。今回は、前回で途中まで作成したTODOアプリに画面遷移機能を追加して、完成まで持っていきます。その過程で、快適で継続的な開発環境の構築方法とテストについて見ていきます。 なお、執筆時点でのReact.jsのバージョンは0.12.2です。サンプルとして、次の4つを、本記事のタイトル下にある［ダウンロード］から入手でき... 続きを読む

RestAPIサーバのセキュリティテストを実現しました - 継続的WEBセキュリティテスト VAddyブログ

2015/03/09 25 users セキュリティテスト Put Delete VAddy POST

VAddyはCIツールと連携し、継続的なセキュリティテストを実現するクラウド型Web脆弱性検査ツールです。 既にGET/POST/PUT/DELETEのパラメータの検査、URLパスに含まれるパラメータの検査を実現しています。 現在は、SQLインジェクションとXSS検査を行っています。 機能の一覧はこちらをご覧下さい。 最近のモバイルアプリケーションやシングルページアプリケーションのような構成ですと... 続きを読む

いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【前編】 （1/3）：CodeZine

2015/02/25 655 users CodeZine AngularJS React.js 選定

近年のフロントエンド開発の大規模化・複雑化に伴って、JavaScriptフレームワークの需要がますます拡大しています。既にBackbone.jsやAngularJSなど、MV*フレームワークは数多く登場していますが、本記事では最近注目を浴びているFacebook製のライブラリReact.jsについて解説します。フレームワーク・ライブラリの選定に悩んでいる方から、本格的にJavaScriptを触るの... 続きを読む

rest - HTMLでWeb APIをつくる - Qiita

2014/08/04 195 users サーバサイド JSON REST Qiita items

シングルページアプリケーションやモバイルアプリなどの普及により、サーバサイドではJSONを出力するWeb APIの必要性が高くなってきています。みなさんはどのようにWeb APIを作っているでしょうか。 JSONはビュー http://qiita.com/yuch_i/items/f6b04e2875f432f8f806 RailsでJSON APIを定義する時、素のままでやろうとすると コントー... 続きを読む

重い初期化の誤魔化し方 - mizchi's blog

2014/04/15 18 users mizchi's blog SQLite ガワアプリ 事前

2014-04-15 重い初期化の誤魔化し方 なんかいろいろあって裏側で大量のデータを初期化しないといけないケース、ゲームやシングルページアプリケーションだとよくある。 そういうときに誤魔化し方を考えてたりする。 保存先 localStorage IndexedDb WebSQL(deplecated) ネイティブ側のSQLite(ガワアプリ) 事前に初期化したいデータ マスターデータの類 月1で... 続きを読む