年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。 その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。
こんにちは、柴田（@shibe97）です。 突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました！ リポジトリはこちら。 https://github.com/microcmsio/microcms-blog 経緯microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。 しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。 ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。 そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。 microCMSブログはデータソースとしてmicroCMS、フロ
Vue.js、Nuxt JSを学習するときにやったこと以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 Web デザイナーのための Vue.js 事始め 1. Vue.js 公式 Web サイトを確認まずはVue.js の公式 Web サイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックすることに
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
どっちの API SHOW？SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
今回は最近その存在感がますます上がっているNext.jsとサーバーレスの話です。 はじめに サンプルアプリ Serverless Next.js Component デプロイ 作成されるリソース CloudFrontのディストリビューション Lambdaファンクション S3バケット 大まかな挙動 できないこと まとめ はじめに この投稿は2020年11月27の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass.com もし間に合えば、かつ時間があればぜひライブ配信のほうにも参加ください。 さて、今回は11/9に登壇させていただいたFront-End Studyでの話でも少し紹介したServerless Next.js Componentについて取り上げます。 僕は昨今のフロントエンドWeb周りの技術では最近は一番N
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N
CTO室プラットフォーム開発チームの山口(@igayamaguchi)です。 プラットフォーム開発チームではさらに内部でプロジェクトチームが分かれており、私はフロントエンド改善チームというチームでリーダーをしています。 フロントエンド改善チームでは主に一休.com、Yahoo!トラベルのフロントエンドの改善を行っております。 今回は一休.com、Yahoo!トラベルで使用しているNuxtのバージョンを2から3にアップグレードしたお話をさせていただきます。 一休.com、Yahoo!トラベルではトップページや検索ページ、ホテル・旅館の詳細ページなど主要なページのフロントエンドはNuxtで開発されています。 NuxtのバックエンドにはGo+gqlgenでGraphQLのサーバーを立てており、NuxtからはApolloを使用してバックエンドと通信を行っています。 このNuxtのバージョンは2とな
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサ
はじめに プログラミング歴半年（独学）の実務未経験者がSPAなポートフォリオを制作しましたので紹介していきたいと思います！ 今後もアップデートしていくのでフィードバックなど頂けますと嬉しいです。 記事の最後には、お世話になったWebサイトや教材をまとめておきましたので参考になれば幸いです。 作者のスペック 年齢は27歳で今までにプログラミング経験は全くなし。 サーバーサイドエンジニアを目指してプログラミング学習中の初学者です。 本記事を執筆している時点でプログラミング学習期間は半年。（2021/1/29時点） ポートフォリオに関わる技術のキャッチアップをしながら約4ヶ月程かけて完成させました。 ポートフォリオ制作に着手した時点では、ProgateとRailsチュートリアルを終えた程度の実力。 至る所に詰みポイントがありひたすらググりまくって問題解決してました。（Google先生は神） アプ
ポートフォリオサイトをNuxt + Netlifyに移行しましたWordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 移行を決めた理由元々私のポートフォリオサイトは、まだ私が学生だった頃に WordPress の勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPress でなくてもいい気がしてきていました。また、WordPress や PHP のバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsbyや Nuxt といった 静的サイトジェネレ
開発部の横溝です。 昨年、弊社ANDPADの機能「施工管理」をNuxt化するプロジェクトが始動し、停止しました。 「停止」というと残念な感じがするので、充電期間に入ったと言い直しておきます。 「Nuxt化するプロジェクト」とは？ 背景 改めて、この記事について Nuxt化が始動して、停止した話 まず、エンジニアがそれを「やりたかった」 Nuxt化のはじまり 停止 いま、Nuxt化のリポジトリはどうなっているか プロジェクトの恩恵 残された課題 さいごに 追記(2021.03.12) 「Nuxt化するプロジェクト」とは？ 2020年3月~2020年11月に実施した、レガシーコードをリプレイスするプロジェクトです。 前述の「施工管理」は、社内でも特に昔からある機能なのですが、フロントエンドに、主にRuby on Rails（slimテンプレート）+ AngularJSを利用しています。それを、
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは! akiと申します！ 当記事はほぼ独学・未経験者がモダンな技術でポートフォリオ（以下PF）を作ってみたので、ご紹介させて頂きたいと思います。 昨今、未経験者がモダンな技術を使用して作成した、PFの作成記事も多く存在するので、何番煎じかにはなってしまいますが、この記事も同じ初学者の方の参考になれば幸いです。 自己紹介 私は22歳・高卒で、現在(2021年3月時点）も工場で製造の仕事を続けております。 そんな私ですが「Webエンジニア」という職種に興味を持ち、2020年4月よりプログラミング学習を開始しました。 今回紹
2025年7月時点の npm trends は以下の通りです。 Vue ― 小さく始めて大きく育てられる「プログレッシブフレームワーク」 Vue は 「プログレッシブフレームワーク」 として紹介されています。 「プログレッシブ」とは、小さな機能から段階的に導入でき、必要に応じてフル機能のフレームワークへと拡張できる柔軟性を指します。 例えば、既存のWebサイトにあるお問い合わせフォームや商品の絞り込み検索ウィジェットなど、特定の「動く部分」だけをVueで開発し、既存のHTMLに <script> タグを数行追加するだけで組み込めます。 <body> <h1>私の素敵なWebサイト</h1> <div id="app"> <button @click="count++">カウント: {{ count }}</button> </div> <script src="https://unpkg.
Announcing Nuxt 3.0 stableWe are thrilled to announce the first stable version of Nuxt 3.0.0 ✨ Nuxt 3 is a modern rewrite of the Nuxt framework based on Vite, Vue3, and Nitro with first-class TypeScript support and the result of more than two years of research, community feedback, innovation, and experiment to make a pleasant full-stack Developer Experience for Vue development to everyone. [Read M
フロントエンドエンジニアの小林和弘です。 去年の 4 月に「Web アプリを 3 つ使ったサービスを 3 ヶ月でつくりたい」という話が降ってきて、無茶を現実にした話をします。 新規サービス「やくばと」で Workspaces のモノレポを使って、医療機関画面、薬局画面、患者画面の 3 つの Nuxt を構築しました。 やくばととは 医療機関、薬局、患者さまの間でやり取りされる医療機関起点の薬局向け処方せん画像事前送信サービスです。処方せんに関する業務負荷を軽減すると共に、患者さまの大きな負担である医療機関、薬局での待ち時間を軽減するということを主な目的としたサービスです。 医療機関、薬局の DX を進め、患者さまの負荷軽減に貢献できる素晴らしいサービスになっています。 開発チームでは医療機関、薬局、患者さまに提供している Web 画面をそれぞれ医療機関システム、薬局システム、患者システムと
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
GEEKERS NITE #2 で発表したスライドです。 https://geekersnites.connpass.com/event/265046/
こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。 経緯 フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください) そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って
STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nuxt2 が EOL を迎えたため、 Nuxt3 へアップデートしました。 この記事では、複数のプロダクトチームが開発する環境でどのように 機能開発を止めずに Nuxt のメジャーアップデート に取り組
ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるようになって2年ほど経ち、いわゆる技術的負債と呼ばれるようなものも少しずつ増えてきました。 そういった状況を改善するアプローチの1つとして、Nuxt.js の既存リポジトリにおける型チェックのルールをより厳しい設定に変更する、という取り組みを2ヶ月ほどかけて行いました。 今回はその取り組みにおける道のりを振り返って、苦労したことや良かったことなどを書いてみたいと思います。 導入を決めるまでの流れ きっかけは noUncheckedIndexedAccess を知ったことから 弊社のSlackにはtimes文化
Nuxt自体の動きを外部から変えたいと思ったことはありませんか? もちろん、ベタに nuxt.conf.js を弄るのもよいのですが、共通分に関しては切り分けて個別の部品として管理したいですよね。そんなときに、 モジュール が役に立ちます。 Nuxt モジュールができること モジュール は nuxt.conf.js で記述するようなビルドの動きを拡張することができます。例えば、ミドルウェアを追加したり、事前に特定のファイルを作成したいときなどに便利です。 一方で、Nuxt は混乱しやすい用語として プラグイン という仕組みが存在します。 プラグインは、Vue インスタンスと、サーバコンテキストから特定のオブジェクトを利用できるようにするために利用されるものです。 Nuxt モジュールからは、Nuxt プラグインを追加することができるので、使い分けとしては以下のようになります。 種類 用途
Vue.jsのフレームワークであるNuxtには便利なプラグインがたくさんあります。マークダウンファイルとNuxtを連携するNuxt Contentはその中のひとつとしてよく用いられています。 読者の中には「NuxtってVue.jsのフレームワークでしょ？ 私はReact派だし興味ないかな…。」という人も多くいると思います。 しかし、Nuxtの強みとして、コミュニティ主導で質の高いモジュールが管理されていることが挙げられます。NuxtコミュニティではNuxt Modulesという名前でライブラリが管理、提供されています。Nuxt Contentもそのひとつです。 Nuxt Modulesに追加されるライブラリについてはコミュニティ内で実装ガイドラインが定められており、Nuxtチームのレビューを受けて追加されるため品質が担保されています。また、Nuxtで使いやすい形になっているため導入が容易で
この記事は何？ これは「Next.jsのISRを独自に実装する」という記事の続編になります。 この記事では、上で紹介しきれなかった、CSRなページ・SPAなコンテンツをスタティックなページに変換して配信するということについて紹介していきます。 前提となる情報は上の記事で述べられているため、まずはそちらをご覧ください。 全体像 上の記事にでも説明されていた概要図をそのまま引用しています。 本記事で説明するのは、Cloudflare Workers以外の部分です。 ここではオリジンをNext.jsにしていますが、Create React Appで作ったようなプレーンなSPAサイトでも構いません。 Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~ Workerとオリジンとの間にレンダリングミドルウェアを挟むことで、事前に代理レン
こんにちは。エンジニアの大野です。主にフロントエンド周りを担当しています。 去年の話題にはなりますが、2021年10月にNuxt3のベータ版がリリースされました。 Nuxt3beta 公式のリリーススケジュールでは、このブログを書いている2022年3月にrc版、 そして2022年6月には安定版をリリースする予定となっており、着々とバージョンアップへの準備が進められている雰囲気が伺えます。 弊社にもNuxt2の環境で運用しているプロジェクトがあるのですが、vue3のリリース直前に作成した環境であるため、Composition Api やTypeScriptは別途runtimeやbuildのモジュールを個別に入れたりしており、package.json やnuxt.config.ts の設定周りがやや煩雑になっていました。 Nuxt3ではこのあたりのモジュールが標準搭載されるということもあり、チ
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
はじめに 挫折 Vue 3 への移行の手順 Vue 2.6.12 から 2.7.16 にアップグレード 依存関係 主な修正箇所 @vue/composition-api の削除 from '@vue/composition-api' を from 'vue' に変更 root.$route を root.proxy.$route に変更 root の型定義を SetupContext['root'] から Vue に変更 補足など vue-cli から vite に移行 依存関係 主な修正箇所 コマンドの変更 環境変数の修正 babel.config.js の修正 jest.config.js の修正 tsconfig.json の修正 index.html の修正 App.vue の修正 vue.config.js の削除、vite.config.ts の追加 補足など Vue 2.7.
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
はじめに こんにちは。APP/UXグループの大谷と申します。 寒くなってきてグラコロが美味しい季節ですね。年がわりで発売されるデミグラスソースがかかっているバージョンより、ノーマルバージョンのグラコロが個人的には好みです。 バージョンといえば先日Node.jsのバージョンを更新した際に困ったことについて書いていきたいと思います。 何が起きたか 弊社では一部の機能の画面をNuxtを使って提供しており、server middlewareをBFFとして利用しAPIリクエストはserver middlewareを経由して投げられています。 (詳しい構成についてはこちらの記事に添付の資料をご参照ください) 今回はNode.jsのバージョンを v12 → v14 → v16に段階的に更新する作業をおこなっていました。(バージョンが一部歯抜けになっているのは依存関係の解消の関係でやりやすかったバージョン
Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nuxt モジュールです。 執筆時点で GitHub, Google, Discord など 17 の OAuth プロバイダーに対応していますので、通常用途では充分だと思います。 さて当記事では、そんな Nuxt Auth Utils を使った実装と、後半では OAuth 以外の認証方法であるマジックリンク認証とワンタイムパスワード認証を追加実装する方法を解説します。 完成形のイメージ 完成したログインフォームはこの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
平素よりOLTAおよびFINUX（INVOY）のサービスをご利用いただき誠にありがとうございます。 2023年11月7日（火）に判明した、弊社関連会社（FINUX）が提供するクラウド請求書プラットフォーム「INVOY」において特定の条件に該当した一部のユーザー様の顧客情報が他のINVOYユーザー様から閲覧できる状態になっていた事象について、恒久対応が完了しましたので再発防止策とあわせてご報告いたします。 本事象の解消に向けて2023年11月7日（火）18時10分より緊急メンテナンスのためサービスを一時停止しておりましたが、2023年11月8日（水）2時58分に復旧し、現在は通常通りご利用いただけます。 なお、他ユーザー様が閲覧できる状態にあった可能性がある情報は、ご登録のメールアドレス、ユーザー名、ユーザーの種別と権限（管理者か否か）であり、第一報よりお伝えの通り、クレジットカード情報など
Nuxt for React devs in development everything you need to get started with Nuxt, from a React perspective. join waitlist with GitHub by registering you are signing up for email updates what will it cost? I'm still working out the details. I am aiming to be accessible to most developers. There will be purchasing power parity discounts. I'll also offer an early adopter discount for users who purchas
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
