ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。 その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
Nuxt.js＋Firebase＋GAEで作った個人サービスが半月で2万PV超えたので実績値を全て公開する - Qiita
こんなサービス作りました 【#拡散希望】 🙌🎉🎊サービス開始🎊🎉🙌 ボケをツイートして 「いいね❤️」「リツイート🔁」 の数でランキング！ Twitter連動型 大喜利サイト 「ついぎり」 サービス開始しました‼️#ついぎりhttps://t.co/bkXfzHyVSs — ついぎり@公式アカウント (@twigiri_app) August 14, 2019 Twitterで大喜利するサービスです。 ８月中頃にローンチしたのですが、有難いことに半月で約2.5万PVいきました。 開発に至ったポエム記事はCrieitに投稿しています。 なぜ大喜利サービスを作ったのか この記事について やっぱり公開直後は怖かったです。 そう、クラウド破産。 Firebaseの設定を間違えて72時間で300万円以上請求されてしまったウェブサービス BigQueryで150万円溶かした人の顔 上記以
Nuxt.js+Firebaseの認証・認可を実装した雛形プロジェクトを公開しました - Qiita
この記事について NuxtとFirebaseを使って、これまでいくつかサービス開発をしていますが、認証/認可の実装はどのサービスでも毎回同じようなコードを書いている気がします。 サービスとしてのコア部分ではないですが、センシティブな部分なのでしっかりと調べながら実装すると結構大変ですよね（毎回時間がかかってしまいます）。 ここ最近のサービスはNuxt +Firebaseで開発することが多く、認証 / 認可のコードベースのTipsが貯まってきたので公開したら需要あったりするのかな？ サンプルになりそうなプロジェクト見当たらないし、コアな部分ではないのであまり楽しくないし...。 雛形のプロジェクトとして需要あれば公開します👍 — フジワラユウタ | SlideLive▶️ (@Fujiyama_Yuta) June 7, 2020 自分だけではなく、いろんな人が同じような課題感を感じている
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
池田 泰延 on Twitter: "noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 GoogleキャッシュやWaybackMac… https://t.co/tKRHfiKPnE"
noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 GoogleキャッシュやWaybackMac… https://t.co/tKRHfiKPnE
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
2019/6/1 初夏のJavaScript祭りで使用したスライドです。 Atomic Designの考え方をNuxt.jsのコンポーネント分割に取り入れてサービス開発してみました。フロントエンドエンジニア、デザイナー両面からの視点でやってみて良かったことやハマりどころをご紹介します。
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
Nuxt.js × GAS Execution API で同人頒布会向け予約システムをごにょごにょする PWA を作る - Qiita
はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日本最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 （こちらからの声かけ後を含め）QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケーないしキャリアメールのため、QRコード自体を受信できていない という問題にぶち当たりました。 QR コードが提示されなかった場合、スマホの Google スプレッドシートアプリから予約番号 or 名前を検索していましたが、いまいち操作性がよろしくない1。 というわけで、いっそスプレッドシートを外部 API 化して、スマホアプリから予約情報の検索＆購入確定できるようにして、なんならアプリに QR コード読み取り機能も埋め込んじゃおう、というのが今回の趣旨です。 PWA (Prog
Nuxt TypeScript
Code completion One of the biggest advantages of TypeScript is its code completion and IntelliSense. IntelliSense provides active hints as a code is added. Type safety Types increase your agility when doing refactoring. It’s better for the compiler to catch errors than to have things fail at runtime. Code quality Types have a proven ability to enhance code quality and understandability. Large team
Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... - Qiita
Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースしました!! 開発中にいろいろとハマったので、そのポイントを整理してみました。 内容的にはドキュメントをよく読めば書いてあることばかりですが、 作った or 思いついた後に、ドキュメントを見つけるので、手戻りが多く... あらかじめ、知っていたら良かったなと思う点をまとめています。 作ったのはこんなサービスです！ 積んでる本の総額がわかる読書管理サービス 『積読ハウマッチ』 積んでいる本を登録する書籍管理サービスで、 すこし違うのは、積んでる本の総額がわかること。 積んでるだけの本の総額がわかるとすこしは読む気になるかなと(´ω｀) シェアしたときに金額が表示されるOGP画像も用意していて、 どれくらい積んだか
【実録】WordPressサイトをAWS+Laravel+Nuxtにフルリプレイスした話 - Qiita
概要 創業2期目のスタートアップ株式会社NoSchoolにて、WordPressで開発された自社サービスを、2ヶ月掛けてAWS+Laravel+Nuxt.jsにフルリプレイスした際の技術選定について書きます。 対象読者 Laravelを使ってみたい/使えるライブラリを一通り知りたい AWS構築の全体感を知りたい Nuxt.jsやVuetifyの使用感を知りたい WordPressを脱却したい 技術選定の背景 技術選定と言っても好きな技術を選べばいいというわけではありません。自社が持っている技術力、事業の状況によるところが大きいため、まずは背景としてそのあたりを説明していきます。 先に技術が気になる方はここは読み飛ばして、あとで戻ってきてください ①自社の技術力 CTO @mejileben NoSchoolは創業2期目で2019年6月現在、フルタイムメンバーが僕と社長しかいません。 そして
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
JAMスタックのNetlify、Denoを採用したサーバレス環境「Netlify Edge Functions」ベータ公開。Deno Deployの分散エッジでNext.js/Nuxt/SvelteKit/Remixなど実行
JAMスタックのNetlify、Denoを採用したサーバレス環境「Netlify Edge Functions」ベータ公開。Deno Deployの分散エッジでNext.js/Nuxt/SvelteKit/Remixなど実行 Webホスティングサービスを提供するNetlifyは、Denoを採用した新しいサーバレス環境「Netlify Edge Functions」をパブリックベータとして公開しました。 We know some of you have been on the edge of your seats for this one, but the wait is over because Edge Functions is here! Learn more about how you can leverage our edge network to deliver faster s
【Firebase, Nuxt】リアルタイムなスライド共有サービスを作ってハッカソンで優勝した話 - Qiita
昨年末にFirebaseのアイデアソン/ハッカソンに参加しました。 その場で出会った３名で即席チームを結成して、約1ヶ月でFirebaseを使ったサービスを開発しました。 その結果、最優秀賞を獲得し、更に１ヶ月で機能を追加して、サービスを正式リリースしました! 自分なりに大きな経験になったので、その経緯をサービス紹介を含めて公開します。 個人開発したいと思っているエンジニアで、参考にしてくれる人がいたら幸いです。 どんなサービスか "SlideLive（スライドライブ）"といいます。 勉強会やセミナーのライブ感を飛躍的に高めるリアルタイムスライド共有サービス です。 SlideLiveのコンセプト 勉強会をライブに 私はプレゼンが苦手です。 「アイスブレイク」ってどうやったらいいのでしょうか？ 「勉強会でプレゼンしている時にリアクションが無く緊張する」ことってありませんか？ そんな課題認識
Nuxt + Sails + TypeScript + Fargateでタスク管理ツールを作ったら快適だった話 - Qiita
Repsona LLCの@GussieTechです。無料ガントチャート、無料カンバン、無料ドキュメント管理が便利な「理想のプロジェクト管理ツール」を作っています。 タスク管理ツール、情報共有ツール、便利ですね！ これまでいろんな仕事で、いろんなツールを使ってきました。それぞれ、特に不自由もなく、乗り換えるほどのモチベーションもなく使い続けていたんですが、不満が全くなかったわけではありませんでした。 ・遅い ・ダサい ・わかりにく ・カンバンがない ・ガントチャートがない ・Wiki的なものがない ・なぜか仕事がうまく進まない ・SNSみたいな感じで、社員がもっと楽しくつながれたらおもしろそう ・スキルがレベルアップしてる様子とか、可視化されたらおもしろそう ・勝手に仕事してくれたりしないかな、AIとかで ・使ってたら無意識にPMBOKみたいになるように、レールが敷かれていると便利な気がする
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
これはなに これはDeNA20卒内定者エンジニアによるアドベントカレンダーDeNA 20 新卒 Advent Calendar 2019の記事として書かれています。 はじめに 僕は趣味の一環でWebサービスを作ったり作ろうとしたりしています。ちょうど一年程前に企画・開発を始めたのですが、リリースまで至らなかったサービスがあったことを思い出したのでこれを機にコードを全公開して振り返ってみることにします。 公開したコードはこちらになります。 https://github.com/tockn/emukone_public 自分で実装しておきながらすごく無責任なのですが、正直どういう思想で実装していたのかその詳細はもう忘れてしまっているので、コードを読んで思い出しながら書く形になります。 なぜリリースしなかったのか？ まずはこれです。当時DDDやクリーンアーキテクチャといったソフトウェアアーキテク
こんなサービスを作りました 『みんなの感想文』というWebアプリをリリースしました！ 『みんなの感想文』 インターネット上で読書感想文を書けるサービスをリリースしました！ 紙とペンがなくても感想文を書ける、そしてアーカイブとして残す世界を実現したくて作りました。400文字か200文字の原稿用紙で書くことができるので、みんなも書いてみてください📖https://t.co/DkCThMPpPl — フジワラユウタ@みんなの感想文 (@Fujiyama_Yuta) October 9, 2019 この記事について 今月から個人でサービスを開発・運営をしている人たちの組織「運営者ギルド」のOrganizationの一員として所属することになりました。 所属してから初めてのサービスローンチなので、忘れないうちに作った開発技術などを備忘録として残しておきます。合わせて個人開発の運用にかかっている費用
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
一休.com、Yahoo!トラベルのNuxtをNuxt3にアップグレードしました - 一休.com Developers Blog
CTO室プラットフォーム開発チームの山口(@igayamaguchi)です。 プラットフォーム開発チームではさらに内部でプロジェクトチームが分かれており、私はフロントエンド改善チームというチームでリーダーをしています。 フロントエンド改善チームでは主に一休.com、Yahoo!トラベルのフロントエンドの改善を行っております。 今回は一休.com、Yahoo!トラベルで使用しているNuxtのバージョンを2から3にアップグレードしたお話をさせていただきます。 一休.com、Yahoo!トラベルではトップページや検索ページ、ホテル・旅館の詳細ページなど主要なページのフロントエンドはNuxtで開発されています。 NuxtのバックエンドにはGo+gqlgenでGraphQLのサーバーを立てており、NuxtからはApolloを使用してバックエンドと通信を行っています。 このNuxtのバージョンは2とな
Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku) - Qiita
最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。 いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。 いままで試したものをまとめてみた。 ほしかったもの 主に開発してるのがCGM系のWebサービスなので、 動的なOGP画像などが設定できる(OGP芸) カスタムドメインが使える 日次のランキング集計などの定期実行ができる が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。 試した5つのパターン 試したのは以下の5パターン。試してみた順で記載。 Nuxt(SSR) + Cloud Function 起動がかなり遅かった。。実装も大変なのでNG Nuxt(SPA) + Firebase Hosting 構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要 Nuxt(SPA) + Netlify プレレンダリ
本連載では、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サ
【独学・未経験】Nuxt.js, Rails, Docker, AWS ECS(Fargate), TerraformなSPAポートフォリオを作成しました。 - Qiita
【独学・未経験】Nuxt.js, Rails, Docker, AWS ECS(Fargate), TerraformなSPAポートフォリオを作成しました。RailsAWSDockerTerraformNuxt はじめに プログラミング歴半年（独学）の実務未経験者がSPAなポートフォリオを制作しましたので紹介していきたいと思います！ 今後もアップデートしていくのでフィードバックなど頂けますと嬉しいです。 記事の最後には、お世話になったWebサイトや教材をまとめておきましたので参考になれば幸いです。 作者のスペック 年齢は27歳で今までにプログラミング経験は全くなし。 サーバーサイドエンジニアを目指してプログラミング学習中の初学者です。 本記事を執筆している時点でプログラミング学習期間は半年。（2021/1/29時点） ポートフォリオに関わる技術のキャッチアップをしながら約4ヶ月程かけて完成
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
Nuxt.js + FastAPIを使ったデータエンジニアリングなデモ作り - 社内勉強会でデブサミのデモをしました - JX通信社エンジニアブログ
（今更ですが）新年あけましておめでとうございます！ JX通信社でシニア・エンジニアをしています, @shinyorke（しんよーく）と申します. 最近は週に2, 3回, ジムで10kmちょい走っています.*1 JX通信社のエンジニアチームでは, 月に一度みんなが集まる月次勉強会というイベントがあります（基本的に第2金曜日開催）*2. tech.jxpress.net ※過去の開催レポです 2020年初（かつ, 飯田橋オフィス最後*3）の勉強会は, 「普及したいことや年末年始に勉強したことなどを発表するLT大会」 ということで, 私は デブサミ2020登壇時に披露するデモアプリを披露 弊社プロダクトでも使っているFastAPI僕もやりました&Nuxt Core UI ええやで！っていう布教 （ちょっとだけ）野球選手の評価指標を紹介 という発表をさせてもらいました. このエントリーではそんな発
Visual Studio Code で Nuxt.js を使った Docker コンテナ内での開発 - Qiita
はじめに 以前、環境を汚さず（選ばず）Nuxtプロジェクトを作成しGitHub Pagesで公開するまでの一部始終 という記事を書きました。 その後、より簡単にNuxtの開発環境を作れないかと何回かやっているうちに、 Visual Studio Code をうまく使えばよりシンプルにできることがわかってきたので、再度まとめました。 Nuxtのバージョンが上がってプロジェクト作成時の設定が若干変わっています。 事前準備 Docker, Visual Studio Codeをインストールしておきます。 これからインストールする方は以下を参考にしてください。 Windows 10 Home に Docker for Desktop をインストールする手順 Visual Studio Code のインストール手順(Windows) ※今回は Windows 10 Home 環境で作業していますが、
Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる - SMARTCAMP Engineer Blog
エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne
AWS LambdaとNuxt.jsでServer Side Renderingする（2020年版） - Sweet Escape
サーバーレスでサーバーサイドレンダリング（SSR）の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.yaml 最後に はじめに 前回、SSRとはって話を簡単にしました。今回はSSRをAWSのサーバーレス、つまりAWS Lambdaでやってみたいと思います。 今回はVue.jsのフレームワークであるNuxt.jsで作ったサンプルアプリのSSRをLambdaで試してみます。 前回のブログでNuxt.jsでの例という説明をしましたが、今回はそこを実際にやっていく感じです。 なお、Nuxt.jsをLambdaで動かす場合の話って実はググってもあまり出てきません。いくつかの記事が出てくるだけです
Firestore、とっても便利ですが、Firebaseのコンソールがイケてないので、 ローカルで動かせる簡易の簡易ツールを作ってみました。Nuxt.js製です。 Firebase Admin SDKを使ってるので、秘密鍵を配置すればOK。 セキュリティルールの変更も不要です。 動いているところはこんな感じ。 GitHubで公開してます。ただ書きなぐりなので、ソースはイケてないです。。 まだα版くらいなので、機能は限定的です。。 memory-lovers/simple-firestore-admin: Simple Firestore Admin なんで作ったか Firestoreを使ったWebサービスを作ってみたところ、 ちょこっとしたDBの変更にもデータが多かったり、1ドキュメントのサイズが大きいと、 Firebaseコンソールだと重い感じに。。 いろいろ見ていると、Webサービスな
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω｀) pic.t
Nuxt.js(SPA)+FirebaseのWebアプリで初マイグレーションをしてけど、いろいろ失敗した話。。 - Qiita
これはただの失敗談です。。役に立つかわからないけど、誰かの参考になるといいな。。 Nuxt.js+Firebaseで開発したWebサービスをリリースして2ヶ月目くらい。 サービス止めて、初マイグレーションしてときの失敗談です。 サービスを止めてやりたかったこと いままではちょこっとした変更が多かったため、 サービスを止める必要なく、Nuxtアプリの更新だけで十分でしたが、 新しい機能を追加する際に、Firestoreのスキーマを変える必要が出てきました。 やりたいことは、 「 今までのデータを読み取って、別の形式に再構成する 」 という感じのことで、止めないとダメかなと。 メンテンナンスのときの手順 手順はこんな感じ。 メンテナンス画面に遷移するようにmiddlewareを変更 firestoreのルールを全部ブロックするように変更 スキーマ変更処理を実行 メンテナンス画面を解除し、hos
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩
Vue.js、Nuxt JSを学習するときにやったこと
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
Nuxt.js × Atomic Designのサービスデザインフロー
Nuxt 3 を今すぐオススメしたい 15 のポイント
Nuxt.js + Firebaseで釣具の管理サービスを作った
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
Vue.js と Nuxt の 2023年まとめ
リリースまで至らなかった個人開発サービスのコードを全公開して反省してみる【Nuxt + Go】 - Qiita
Nuxt + Firebaseで読書感想文を書けるWebアプリを開発しました - Qiita
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
はじめに｜Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル
祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力
「Nuxt.js」で作ったWebページをインターネットで公開する方法
Firestoreの簡易管理ツールをNuxt.jsでつくってみた - Qiita