【npm】「Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)」エラーの解消方法！ | あきぞらてっく
Node.js 【npm】「Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)」エラーの解消方法！ あきぞらです。 フロント開発をしていてnpm run dev を実行しようとしたときに、 表題のエラーが発生しました。 nodeのバージョンを上げたことによるエラーでしたが、今回はその対処方法を書いていきます。 起きた事象とエラー文の確認 npm run dev を実行したときに以下のエラーが表示されました。 $ npm run dev ...( 一部省略)... ERROR Failed to compile with 1 errors friendly-errors 13:45:12 Module build failed (from ./no
Nust.jsで制作中のサイトにGoogle reCAPTCHAを設置して不正なアクセスから防御する
今、「ウェブサイト制作をぐっと楽にするウェブサービス」を制作している。 ナウいウェブサービスを目指しているので、ログインフォームやアカウント作成フォームにはreCAPTCHAを設置して、ロボットによる不正なアクセスから防御したい。 今回、初めてreCAPTCHAを使うので、ざっと概要を確認してみた。 バージョンが１～３まである クライアントサイドとサーバサイドの両方で処理が必要 クライアントサイドでtokenを取得サーバサイドでtokenをAPIに送信して結果を取得する バージョンの違いについては、以下のとおり。 バージョン１ 画像に埋め込まれた文字をタイプするやつ（面倒くさい）バージョン２ ブロック状に並んだ画像から、提示された条件を満たす画像を選択するやつ（画像によっては選択しづらい）バージョン３ – New! ユーザーの行動パターンを捕捉してAIで自動判定するナウいやつ。ユーザーは何
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編） - Qiita
異なるコンポーネントから共通で利用できる関数を定義したかったので、試してみました。 以前の記事ではmixinを使って実現しましたが、この方法では asyncData や fetch 内で共通の関数を利用できませんでした。 そのため、今回はinjectを使って実現しています。 この方法では、 asyncData や fetch 等のSSR時も関数を利用できるため、こちらの方が良いかもしれません。 共通の関数を定義する plugins/ 内に utils.js というファイルを作成し、ここに関数を定義していきます。 今回は例として hoge() と fuga() という、2つの関数を定義するものとします。 使用する際は this.$huga() のように記述します。
【Nuxt.js v2】プロジェクト内共通の定数を定義する
定義の仕方 /plugins/constants.js 定数を定義したpluginを用意し、injectを使用してプロジェクト内で共通化します。 const COLOR_PRIMARY = '#2196F3' const SITE_DOMAIN = 'kokota_example.com' const IPA = { fe: '基本情報技術者試験', ap: '応用情報技術者試験', sa: 'システムアーキテクト試験', nw: 'ネットワークスペシャリスト試験', db: 'データベーススペシャリスト試験', pm: 'プロジェクトマネージャ試験' } export default (context, inject) => { inject('COLOR_PRIMARY', COLOR_PRIMARY) inject('SITE_DOMAIN', SITE_DOMAIN) inject
Nuxt.jsモジュールを自作して開発効率を向上させる
Nuxt.js のモジュールを自作して簡単に使い回す 基礎知識があるのとないのとでは理解度に違いがあるので、 モジュールとは何？という方はこちらを読んでみてください。 Nuxt.js はドキュメントが多くて助かりますね！ 引用 この記事は @mya_ake さんの Nuxt.js と axios のエラーハンドリング周りの話 から引用させていただきました。 この場を借りてお礼申し上げます。 対象読者 「エラーハンドリングで冗長なコードを書きたくない」と考えている方 「他のプロジェクトでもコードを使い回ししたい」と考えている方 個人開発をしている方 はじめに Nuxt.js にはモジュールという Nuxt のコア機能を拡張するもの存在します。 有名所は以下の Github にリストがあります。 nuxt-community / modules 実際に使っている方は多いのではないでしょうか。
Nuxt.jsでpluginを使ってみた（郵便番号検索）
前回はaxiosをnuxtに導入して、郵便番号apiやqiita apiを動かしてみました。 今回はnuxtで郵便番号検索プラグイン作ってみたので、自作プラグインの作り方を書いています。 公式のこちらのドキュメントを参考に作ってみました。 プラグインファイルを作成する plugins/ 配下に作りたいプラグインのjsファイルを配置します。 plugins/zipcode.js という名前で作成しました。 ファイルの内容は下記です。 export default (context, inject) => { const zipcode = async function(zipcode) { return await this.$axios.get(`/zipApi/api/search?zipcode=${zipcode}`); } inject('zipcode', zipcode); c
【Nuxtjs】パフォーマンス改善した件 - fontawesome、date-fnsのimport周りチューニング
背景 業務上でフロントの速度改善をやることになり、lighthouseのパフォーマンススコアをだいぶ改善されたのでやったことや知見をシェアしたいと思います。 改善前のパフォーマンススコア 問題点を探す 速度改善にあたって、まずやることは問題点を分析することです。lighthouseの計測結果ではJSのパースに時間かかるとのことで、まずdev toolのnetworkタブからJSのサイズを確認してみることにしました。 app.jsのサイズは408kbでかなり重いので、まずapp.jsのサイズを削減することからチューニングすることに決めました。 分析 app.jsの中身を分析するためbundle analyzerを使いました。使い方はターミナルに下記コマンドを叩いたら分析のレポートを表示されます。 分析の結果は下記です。 app.jsのサイズは2.11MBでした。 .nuxtは約1.34MBで
バンドルファイルの分析(Vue.js, Nuxt.js) - わくわくBank
Webpack Bundle Analyzerを利用すると、バンドルサイズを可視化できます。可視化することで「容量の大きいモジュールの把握」「複数ページで共通モジュールを保持してないかの確認」といった分析がしやすくなります。 バンドルファイルの確認方法 Webpack Bundle Analyzer Webpack Bundle Analyzer を利用してバンドルファイルを分析できます。 Vue CLI で生成したプロジェクトや Nuxt.js であれば、すぐに利用できる状態になっています。 Vue CLIの場合 Vue CLI で生成したプロジェクトであれば、 yarn run build --report を実行すると、Webpack Bundle Analyzer によるレポートファイルも一緒に生成されます。 $ yarn run build --report yarn run v
Nuxt.jsのvuexでMoment.jsを利用する - Qiita
import 'moment/locale/ja' import moment from 'moment' moment.locale('ja') export default moment 解決への道のり 「nuxt format.replace is not a function」で検索すると、Problem with third-party pluginsというIssuが見つかりました（ただし解決済み）。 また、Qiitaで検索すると、 @dasisyouyu さんの記事がありましたので、早速導入。 nuxtでmomentを動かす nuxtでmomentが使えない しかし、Vuexで動作しませんでしたOrz... @dasisyouyu さんもIssueを投げられていました^^； can't use in store. こうなったら発想を転換して、AxiosモジュールのようにMome
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる - Crieit
最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？ そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。 具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。 Vuex ストア - Nuxt.js そもそも何に使うものなのか？ Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。 具体的にどうやって使うのか Nuxt.jsの場合、まず store/index.js に状態の定義を
【Nuxt.js】imgファイルの指定方法について - Qiita
Nuxt.jsとVuetifyで画像の指定方法について色々と詰まったので今回はそのことについてまとめてみました。 画像の格納場所 Nuxt.jsには画像ファイルを「assets」と「static」のどちらかに格納することができます。 それぞれの格納場所によって指定方法が異なります。 「assets」からの指定方法 assets配下のファイルを使用する場合は「~/assets」を指定します。 「~」（チルダ）をつけることが普通のHTMLとは異なり、これがないと表示されません。 「~」の代わりに「@」（アットマーク）でも表示されました。 公式ドキュメント内で書かれているようにCSSでエイリアスを参照する場合は注意が必要です。 アセット Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
nuxt.jsを使う時にlocalStorageでstoreを永続化する - Qiita
nuxt.jsで再読込しても入力中の内容を保持したい という動機から、状態をlocalstorageに保存することにしました。 日本語での知見はあまりなかったので、投稿しておきます。 localstorageに保存が可能になるとどうなる？ 再読込しても、storeの状態を保つことができます。 入力中のフォームの内容や、画面の状態を復元することができます。 store中のstateはlocalstorageを消し去らないと新しい値とかを追加しても状態が変わらなくなってしまいます。 vuex-persistedstateを使う Reduxでも経験がありますが、こういうときにはstoreが変わった瞬間に自動的に保存してくれて、ページが始まった瞬間に復元してくれる、ライブラリを用いるべきです。 探した結果、最終的にnuxt.jsのissueなどで見ることの多かった"vuex-persistedst
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NuxtJSのサイトにGoogle Recaptcha v3を導入してみました
プラグイン | Vuex
Nuxt.jsで外部scssを読み込む - Qiita
Nuxt.js vuex-persistedstateを使ってLocal Storageにデータを保存する
