SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - Pepabo Tech Portal
カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント
2023年の話題＆ベストセラーをまとめて紹介！ Udemyで今年最大級のセール開催、生成AIなど対象講座が1,200円より - はてなニュース
世界中を席巻した生成AIは、ブームに終わることなく着実に社会のさまざまな場面で利用が進んでいます。特にChatGPTを始めとするテキスト生成はビジネスシーンですぐに適用可能なケースも多く、使いこなす人とそうでない人には大きな差が生じつつあります。 使いこなすノウハウにも一定の知見が貯まっており、定番となるセオリーが整理されています。正しく学ぶことができれば一気にキャッチアップできるでしょう。Udemyの講座でも、ChatGPTを使いこなすプロンプトの作法や、アプリケーションにLLM（大規模言語モデル）を組み込むノウハウ、AIをより深く知る数学知識などに人気があります。 この記事では、2023年11月17日（金）に始まるブラックフライデーセール（24日まで）、そして26日（日）から2日間のサイバーセールの対象になる人気講座から、エンジニアリングやビジネスシーンにおいて読者の成長を助けてくれる
Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass の発表内容のテキスト版です。 発表に載せられなかった参考資料集 StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share The "Developer Experience" Bait-and-Switch - Infrequently Noted JavaScriptよ。文明を捨て、自然に還れ。 ::ハブろぐ Deno - A secure runtime for JavaScript and TypeScript Rome Toolchain Blitz.js - The Fullstack React Framework | Blitz.js ⚡️ Prisma - Da
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Testing JavaScript をやってみたら学びがあって良かった話 - Adwaysエンジニアブログ
こんにちは。リファクタリングが大好きなフロントエンドおじさん梅津です。 自信を持ってリファクタリングするには信頼できる自動テストが必要ですよね。 じゃあ信頼できる自動テストとはなんだろう？どう書いたらいいんだろう？と考えていました。 とくにコンポーネントを含む UI テストに対しての悩みが強かったです。 そんなときに出会ったのが Testing JavaScript です。 この記事ではその Testing JavaScript の紹介をしたいと思います。 Testing JavaScript とは Testing JavaScript は PayPal のエンジニアである Kent C. Dodds によって作成された教材です。 ページを開いてすぐ目に飛び込んでくるテスティングトロフィーが特徴的ですね。 Testing JavaScript では、ここに記されている Static, Un
こんにちは。サービスグループの武田です。このエントリは、2018年から公開しているAWS全サービスまとめの2022年版です。 こんにちは。サービスグループの武田です。 このエントリは、2018年から毎年公開している AWS全サービスまとめの2022年版 です。昨年までのものは次のリンクからたどってください。 AWSにはたくさんのサービスがありますが、「結局このサービスってなんなの？」という疑問を自分なりに理解するためにまとめました。 今回もマネジメントコンソールを開き、「サービス」の一覧をもとに一覧化しました。そのため、プレビュー版など一覧に載っていないサービスは含まれていません。また2021年にまとめたもののアップデート版ということで、新しくカテゴリに追加されたサービスには[New]、文章を更新したものには[Update]を付けました。ちなみにサービス数は 223個 です。 まとめるにあ
Dockerfileを書かずにBuildpacksで圧倒的に軽量なDockerイメージを作成する(539MB->245MB) - 🤖
はじめに 2018 年 10 月に Cloud Native Buildpacks は Cloud Native Computing Foundation (CNCF)に Sandbox として受け入れられました。 CNCF には Kubernetes, Prometheus, Envoy, Fluentd など有名プロジェクトも多く受け入れられています。 Buildpacks を使うことで、Dockerfile を書かなくても Docker イメージを作成できます。 また、作成されるイメージはかなり軽量でした。 buildpacks.io 試してみた 今回は、以下のリポジトリの Java アプリケーションの Docker イメージを作成します。 github.com インストール # Mac $ brew install buildpacks/tap/pack # Linux $ wge
Geolonia 住所データ
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
はじめに プロジェクト作成 プロジェクト構成 コンポーネント レイアウト ページ ビルド Blog テンプレート Portfolio テンプレート Documentation テンプレート まとめ はじめに 先日1.0リリースとなった、静的サイトジェネレータのAstroの紹介です。 JSで作成したページをビルドして、JSを含まない早いサイトを生成し、必要な場合には React や Vue といった好きなフレームワークを簡単に組み込むことができるのが特徴になります。 プロジェクト作成 Node は、v14.18.0 以上、または v16.12.0 以上が必要です。 npm や yarn、pnpm で create astro でプロジェクトを作成します。 # npm $ npm create astro@latest # yarn $ yarn create astro # pnpm $ p
会社の支給PCがMacBook Pro M1なので、新しく開発環境を構築した話 - 食べチョク開発者ブログ
Next.js + TypeScript + AWS Amplify でアプリケーション開発 - 虎の穴開発室ブログ
事業を支える技術選定 / Engineering Decision Making Process For Business - Speaker Deck
Transcript 事業を支える技術選定 コネヒトマルシェオンライン「事業を支えるWeb開発」@itosho 1 自己紹介 ▪伊藤 翔 @itosho ・コネヒト株式会社 執行役員CTO ・Backend Engineer / PHP, Go ・stand.fm はじめました ・https://stand.fm/channels/5ec2e733f654bbcab4c123a2 Follow me! 今日のテーマ「技術選定」 4 何故、技術選定は難しいのか？ ▪正解がない ・判断軸が多岐に渡り、会社の状況によっても変わる ・イデオロギーが対立しやすいトピックであり、合意形成が難しい 難しいからこそ向き合う価値がある ▪今日話すこと ・技術選定をするにあたり、どうやって意思決定をしているか ・正解がないトピックなので一つの考えとして聞いてください ※話のトピック的に、何かを「選ぶ」ので必然
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それを使う 本番と同じスキーマを持つ DBMS に対して、実際に insert したり select してテストする DBMS は docker-compose upとかで事前に立ち上げておく 双方にそれぞれ良さがあって、プロダクトによってどっちでやるか変わってくると思います。 この記事では 2 の手法を Prisma でどうやるかについて紹介します。 前提 実際のテストコードの例 テストヘルパーを作る 別解: ヘルパーを自動生成する je
Perl製アプリケーションからGraphQLを喋ってみたい、ということがあって昨年末に2週間くらいでプロトタイピングしていた。 CPANにGraphQLというライブラリが公開されていて、社内の利用実績もあるので、これをいきなり使ってみても良かったのだけど、自分はGraphQLについては、耳では知っていて、GitHubのAPIを呼び出したことがある、くらいで、実際に実装したことはなかった。 このような状態で突き進むと、問題に遭遇したときに2パターンの怪しさが出てきて、切り分けていくことになる。未知のものが多すぎて、プロジェクトXの、トンネルを掘るだけで難しいのに現地の言葉はわからない、みたいな回をイメージしてください。 GraphQL自体への理解が間違っているパターン スキーマ、クエリの書き方が悪い、概念を勘違いしている、など PerlでのGraphQLライブラリの使い方が間違っているパター
こちらの記事はRDS ProxyがGAされる前に執筆した記事です。現在はLambdaからRDSを利用する場合、間にRDS Proxyを挟むという選択肢が増えているので、まずはRDS Proxyを使う/使わないの検討をお願いします。以後で紹介しているトピックの一部はRDS Proxy利用時は考え方が変わってきます。 CX事業本部@大阪の岩田です。私が現在関わっているプロジェクトではLambda × RDSというアーキテクチャを採用して開発を進めています。開発を進める中でLambda × RDS(RDB)という構成についてある程度ノウハウが貯まってきたので、注意したいポイントやオススメの設定をTIPS的に紹介していきます。 環境 以後の説明では以下の環境の一部もしくは組み合わせを利用しています。具体的なコードやSQLの例はプログラミング言語やDBエンジンに依存しますが、根底の考え方はどの言語、
yarn と npm の栄枯盛衰
yarn と npm の栄枯盛衰2021 年 8 月に yarn の v3 がリリースされました。2020 年の同月あたりに yarn v2 がリリースされたので、約 1 年ぶりのメジャーバージョンアップになります。 v1 → v2 のパラダイムシフトは強烈でしたが、 v2 → v3 は berry というパッケージ名は相変わらずで、 v2 の正統なバージョンアップでありちょっとだけ物足りなさを感じてます。 Get Started なにはともあれ、とりあえずは触ってみましょうか。 Node.js ≥ 16.10 であれば、 Corepack を使って以下のコマンドで yarn v3 をインストールできます。 $ corepack enable $ corepack prepare yarn@3.0.0 --activate # yarn.lock や README.md が生成される $
個人的にTypeScriptプロジェクトで使って良かったと感じたライブラリやツール、役立ったノウハウ・情報源へのリンクをまとめていきます。随時更新します。 記事更新時に通知を受け取りたい方はこの投稿を「ストック」してください。 追加された内容は更新履歴をご覧ください。 書籍 『実践TypeScript ~BFFとNext.js&Nuxt.jsの型定義~』 - JavaScriptからTypeScriptに来た人が読むと、JSとTSの差分を学ぶことができる本。 『JavaScript Primer: ECMAScript 2019時代のJavaScript入門書』 - すでにプログラミング経験がある人が読むとJavaScriptの文法や機能を中心に学ぶことができる本。TypeScriptを書くにもJavaScriptの知識が必要不可欠なので、雰囲気でJSを書いてきた人やちゃんとおさらいしたい
AWS Lambda Node.js runtime の EoL に疲れたので Go にしていっている話 - KAYAC engineers' blog
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
GitHub - microsoft/beginners-intro-javascript-node: Beginner's Series: Introduction to JavaScript (Node.js)
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
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
REST API開発に特化したWebフレームワークがもたらす生産性の向上 | IIJ Engineers Blog
Node.jsやめる(Rustにする？) · Issue #11078 · misskey-dev/misskey
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
GraphQL と Prisma から考える次のN年を見据えた技術選定 / Architecture decision for the next N years at StudySapuri
JSConf JP 2021 で登壇した資料です #jsconfjp #jsconfjp_b Links: [Active Recordから考える次の10年を見据えた技術選定](https://speakerdeck.com/yasaichi/architecture-decision-for-the-next-10-years-at-pixta) [GraphQL を活用したスキーマ駆動開発の実践](https://speakerdeck.com/qsona/schema-driven-development-with-graphql) [GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-pract
GitHub、パーソナライズした「あなたがコントリビュートしやすいオープンソースのイシュー」を機械学習で推奨してくれる機能など公開
GitHub、パーソナライズした「あなたがコントリビュートしやすいオープンソースのイシュー」を機械学習で推奨してくれる機能など公開 オープンソースになにか貢献したいと考えたとしても、どこから手を付けたらいいのか、自分が貢献できそうなプロジェクトやイシューはどれか、選択するところから始めなければならないとすると、貢献へのハードルはやや高いものになってしまいます。 GitHubはこうした課題を解決し、オープンソースへの貢献をより手軽に行えるよう、ユーザーにとって貢献しやすいオープンソースのプロジェクトやイシューを推奨する新機能を発表しました（発表は約1カ月前の1月22日でしたので、やや少し前のことですが）。 この機能は大きく以下の3つで構成されます。 興味のある分野のオープンソースプロジェクトを推奨 特定の分野に興味があり、その分野のオープンソースを探しているのであれば、「github.com
Webアプリケーションの堅牢化に欠かせない知識を凝縮！ セキュリティ学習のスタートに最適の一冊！ 本書は、安全なWebアプリケーションを開発するための基本知識を、フロントエンドエンジニア向けに解説したセキュリティの入門書です。 これまでWebアプリケーションの開発で、セキュリティは「バックエンドの仕事」というイメージの強い領域でした。しかし、アプリケーションの安全性を高めるためには、フロントエンドエンジニアにも、セキュリティの基礎知識や具体的な対策の実践が求められます。 本書では、Webセキュリティの必須知識である「HTTP」「オリジン」などの基礎トピックや、「XSS」「CSRF」といったフロントエンドを狙ったサイバー攻撃の仕組みを、サンプルアプリケーションを舞台にしたハンズオンで学びます。 もちろん、攻撃からユーザーを守る防御の手法もしっかりおさえます。個々の攻撃手法に応じた対策のほか、
先日、静的サイトに特化した全文検索ライブラリとして「Pagefind」というソフトウェアがあることを、下記の記事が話題になったことで知りました。 参考：静的サイトに特化した検索ライブラリ Pagefind を試す | grip on minds 実は、いまお読みのPublickeyはまさに、Movable TypeというCMSを用いて生成された静的なWebサイトです。現在、PublickeyではGoogleが提供している「Googleカスタム検索エンジン」を全文検索エンジンとして採用しています（右上の虫眼鏡アイコンから呼び出せます）。 しかしPublickeyでは以前からGoogleに依存しない、自前の全文検索エンジンを持てないかと模索しており、まさにPagefindは私が探し求めていたソフトウェアだったと言えます。 そこでさっそくPagefindがPublickeyに導入できるかどうか、
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
Node.js,Python,RubyなどのWebアプリを完全無料でホスティング可能な「Unubo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンドによる静的なWebページだけでなく、Node.jsなどのサーバサイドも含めた動的なWebアプリを無料でホスティングしてくれるサービスをご紹介します。 GitHubのリポジトリと連携することで、とにかくWebアプリを公開するまでの作業が簡単かつ高速に実現できるのが大きな特徴です。 サーバレスによる実行も可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Unubo 】 ■「Unubo」の使い方 それでは、「Unubo」をどのように使っていけば良いのか見ていきましょう！ まずは、サイトにアクセスしたら【SIGN UP】ボタンをクリックします。 無料のユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう。 登録したメールアドレス宛にリンクが送られてくるので、それをクリックすれば登録完了
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontend Study #1: 基調講演 - Frontend 領域を再定義する
Google 公式ウェブ開発者向けリソースのご紹介
【2022年】AWS全サービスまとめ | DevelopersIO
JavaScriptのエキサイティングな新機能7選 - Qiita
npm-scripts を書く時の手癖 - mizdra's blog
令和にふりかえる C10K 問題
Webフロントエンド開発(2021)の見取り図をつくりたい
モダンで早い静的サイトジェネレータ Astro の始め方 - A Memorandum
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog
未知の道に突入せず、まずは半分知ってるくらいの状態になる - hitode909の日記
Node.jsを過去の物にする最速の肉まん - Qiita
ソフトウェアエンジニアとして2年半くらい勤めたマッキンゼーを退職しました
GitHub Copilotを使いこなしてプログラミングの生産性を上げる大切なコツ｜erukiti
LambdaからRDS/RDBを利用する際に意識したいポイント5選 | DevelopersIO
厳選TypeScript 〜おすすめしたいライブラリ、ツール、ノウハウ、情報源のリンク集〜 - Qiita
BudouX: 読みやすい改行のための軽量な分かち書き器
RustではじめるWebAssembly入門～JavaScriptを超える高速なWebアプリ開発を実践しよう
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
イベントループと TypeScript の型から理解する非同期処理
フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 | 翔泳社
静的サイトに特化した全文検索ライブラリ「Pagefind」、さくらのレンタルサーバで動かしてみた
JavaScriptの非同期処理をじっくり理解する (3) async/await