API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
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
Nuxt.js × GAS Execution API で同人頒布会向け予約システムをごにょごにょする PWA を作る - Qiita
はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日本最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 （こちらからの声かけ後を含め）QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケーないしキャリアメールのため、QRコード自体を受信できていない という問題にぶち当たりました。 QR コードが提示されなかった場合、スマホの Google スプレッドシートアプリから予約番号 or 名前を検索していましたが、いまいち操作性がよろしくない1。 というわけで、いっそスプレッドシートを外部 API 化して、スマホアプリから予約情報の検索＆購入確定できるようにして、なんならアプリに QR コード読み取り機能も埋め込んじゃおう、というのが今回の趣旨です。 PWA (Prog
Nuxt.js(SPA)とFirebaseで強制リビジョン（バージョン）アップするならPWAモジュールを使おう - Qiita
これはなに？ SPAのキャッシュコントロールは難しい問題だけど、ちゃんと仕組みを理解してただしい戦略を使えばそんなに難しくないよという話。 Disclaimer この記事は2019年10月くらいにおける筆者の経験と見解に基づくものです。だいたい間違ってないとは思いますが内容の正確性は保証しませんし、2ヶ月くらいするとFirebaseないしNuxt.jsの進歩によりココに書かれていることが嘘になる可能性はあります。また、特定の記事や個人を中傷する意図はありません。筆者の所属する組織やその類とは関係がありません。 なんで難しい(と思われている)の？ そもそもの前提としてちゃんとやらないとアプリケーションのリリースがままならないというプレッシャーがあります。 そのうえで... (1) SPAの構成ファイルをキャッシュしようとする輩がたくさんいる Hostingサービス（ブラウザキャッシュ） CD
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
Nuxt.js + Firebase + fabric.jsでイラスト付きメッセージカードを贈れるサービスを作った - Qiita
去年あたりからWebアプリの構成としてよく聞くようになったNuxt.jsとFirebase。 今回はこの構成と、canvasを簡単に扱えるfabric.jsを使用してwebサービスを作ったので 使用したライブラリやサービスを紹介したいと思います。 つくったもの 「cards」 https://cards.hauer.jp/ 言葉やイラストを描いてメッセージカードをつくり、web上で贈ることができるサービスです。1分ほどでつくれます。 カード表面でデザインテンプレートを選んだあと、裏面がcanvasになっているので手書きで自由に文字やイラストを書いたり、textboxを使って文字を打ったり絵文字を挿入することができます。 LINEやメールの言葉だけじゃ素っ気ないし手紙を送るほどでは。。。といったときに使えるサービスがあればと思い作りました。 デザインを選ぶ 目的に合わせてカード表面のテンプレ
【VSCode Remote】10秒でNuxt環境を構築【脱WebStorm】 - Qiita
先日、Visual Studio Code Remote Developmentが発表されました。これを使うと拡張機能や実行環境をリモートで完結きます。 NuxtでVSCode Remoteを使うメリット ローカル環境にNode.jsやyarnをインストールせずに開発でき、ローカル環境を一切汚さずに開発できる。 Node.jsのバージョン管理をしなくてよくなる。 拡張機能をリモート環境に事前にインストールできるため、一緒に開発する人の環境を統一できる。 ESLintやPrettierやデバッグ環境の設定を個々人で設定しなくていい。 パッケージをインストールするとき、OS依存パッケージを考慮しなくていい。 Dockerが使えるのでCI/CD環境と開発環境が統一でき、k8sやCloud Runにデプロイするときも楽。(AppEngineやCloud FunctionsもVSCode Remot
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
nuxt.js による UX/DX フレンドリーな Web サービス開発 | VirtualCast Blog
初めまして。ザ・シードオンライン開発担当の山岸です。 バーチャルキャスト社が提供している 3D モデル流通プラットフォーム ザ・シードオンライン では、フロントエンド技術に nuxt.js を採用しています。 nuxt.js を一行で説明すると、「 Vue.js エコシステムをベースに、 UX/DX フレンドリーな Web サービスを作れるフレームワーク」 です。 つまり、そのサービスを利用するエンドユーザの体験もよく、そのサービスを開発するエンジニアユーザの体験もよく、という利用者・開発者どちらにもメリットのあるフレームワークとなっています。 どのような部分でフレンドリーなのか、紹介します。 ユーザーエクスペリエンス・フレンドリー 実際に Web サービスにアクセスするエンドユーザへのサポートです。 パフォーマンス Web サービスの指標として最も注目されるのは、やはりパフォーマンスです
nuxt.js は axios を捨てて ky になる様子 - Qiita
nuxt.js は node.js でもブラウザ上でも動作することが求められるため、統一したインターフェースで HTTP リクエストを行うには、何かしらのライブラリを利用する必要があります。 これまで nuxt.js が公式でサポートし、強く推奨していたのは axios と呼ばれるライブラリです。 これは、ブラウザでは XMLHttpRequest を用い、 node.js では http モジュールを用いる基本的なユニバーサル HTTP リクエストライブラリです。 しかし、 service worker によるサポートを受けるためには fetch API を利用する必要があったり、 axios の実装自体が結構煩雑で使いづらいように見えたりと、弱点もありました。 そこで、コミュニティでは新しく @nuxt/http というモジュールを開発し始めました。 現在では WIP ですが、ほとんど
Nuxt.js で ESLint ＆ Prettier を導入する - Qiita
ESLint だけでもコード整形はできるようですが、Prettier のコード整形の方が優れているらしい。 Nuxt.js の公式ドキュメントの通り、併用して導入することにします。 Nuxt.js で ESLint を使う インストール $ npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier module.exports = { root: true, env: { browser: true, node: true }, parserOptions: { parser: 'babel-eslint' }, extends: [ "eslint:recommended", // htt
Nuxt.jsのinjectを使ってDIする - CYDAS Developer's Blog
大阪からこんにちは、福山健（@kenfdev）です！ 先日「v-kansai Vue.js/Nuxt.js meetup #2」で「Nuxt.jsのinjectでインジェクトしてみる話」という内容で登壇させていただきました。その内容について記事にも残しておこうと思います。 スライドに関しては以下で公開しています。 speakerdeck.com 前提知識 基本的なNuxt.jsの機能 Vuexをなんとなく知っている TypeScriptがなんとなく読める Nuxt.jsの inject 皆さん、Nuxt.jsには inject という機能があるのをご存知でしょうか？意外と知られていないんじゃないかと思うのですが、公式ドキュメントの「統合された注入」にも記載されているNuxt.jsのプラグインの機能です。この inject を使うことで、Nuxt.jsのアプリケーションで、いろいろな場所から
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた - LiBz Tech Blog
目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ
Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
はじめに こんにちは。イベント事業部の上井（ウワイ）と申します。 Nuxt.jsのv2が9月に正式バージョンとしてリリースされました 🎉 mmedium.co またそれに先立って、Google Cloud PlatformからGoogle App Engine Node.js Standard Environment（以下、GAE/SE）が6月に一般公開されました。GCPからサーバーレスでNode.jsが実行できるPaaSの登場です。さらには、つい先日にLTSとなったNode.js 10に対応しました！ cloud.google.com 今回は、Nuxt.js v2のPWAをGAE/SE上で動作させる方法をご紹介いたします。 私が以前書いた記事では、Firebase上でNuxt.jsを動作させたのですが、いかんせん構成が複雑でコードの実装・管理が大変でした。しかし、GAE/SEの場合はシ
Nuxt.jsでポートフォリオサイトを作製する - Qiita
フロントエンドについての学習のため、Nuxt.jsでポートフォリオサイトを作製してみました。 fmatzy.github.io GitHub Pagesで (お金をかけずに) ホスティングしつつ、多少動的なこともしてみました。Vue.js、Nuxt.jsについてほぼ知識のないところから作製したのでかなり荒削りです。 fmatzy/fmatzy.github.io-dev 工夫した点は以下の通りです。 GitHubのリポジトリとQiitaの投稿をそれぞれAPIで取得して表示した。 トップページはMarkdown形式で書くようにした。 Nuxt.jsで静的なページを生成してGitHub Pagesでホスティングした。 GitHubのリポジトリとQiitaの投稿をそれぞれAPIで取得 せっかくSPAのフレームワークを使用するので、なにかのAPIを叩いて動的にコンテンツを生成することにしました。
Nuxt.js でスクロールでふわっと要素が出現するやつを「カスタムディレクティブ」で実装する - Qiita
Nuxt.js でWEBサイト作っていると、スクロールで何か処理をしたいことがある。 そんなときはカスタムディレクティブが便利。特にスクロールでふわっと要素が出てくる系は、様々な箇所で同じアニメーションロジックを再利用する為、カスタムディレクティブは相性が良いです。 Nuxt.jsでの実装上でのポイント ポイントはドキュメントにも書いてある通り、「カスタムディレクティブは Vue インスタンス作成前に登録されなければならない」という点。Nuxt.js では Vue インスタンス作成前に実行したい処理は plugins ディレクトリがその責務を担います。plugins/README.md に書いてある通りです。 This directory contains your Javascript plugins that you want to run before instantiating t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsプロジェクトの改善テクニック
「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩
SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development of own service using Nuxt.js by inexperienced SPA development
Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event - Speaker Deck
