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

今、「ウェブサイト制作をぐっと楽にするウェブサービス」を制作している。 ナウいウェブサービスを目指しているので、ログインフォームやアカウント作成フォームにはreCAPTCHAを設置して、ロボットによる不正なアクセスから防御したい。 今回、初めてreCAPTCHAを使うので、ざっと概要を確認してみた。 バージョンが１～３まである クライアントサイドとサーバサイドの両方で処理が必要 クライアントサイドでtokenを取得サーバサイドでtokenをAPIに送信して結果を取得する バージョンの違いについては、以下のとおり。 バージョン１ 画像に埋め込まれた文字をタイプするやつ（面倒くさい）バージョン２ ブロック状に並んだ画像から、提示された条件を満たす画像を選択するやつ（画像によっては選択しづらい）バージョン３ – New! ユーザーの行動パターンを捕捉してAIで自動判定するナウいやつ。ユーザーは何

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

異なるコンポーネントから共通で利用できる関数を定義したかったので、試してみました。 以前の記事ではmixinを使って実現しましたが、この方法では asyncData や fetch 内で共通の関数を利用できませんでした。 そのため、今回はinjectを使って実現しています。 この方法では、 asyncData や fetch 等のSSR時も関数を利用できるため、こちらの方が良いかもしれません。 共通の関数を定義する plugins/ 内に utils.js というファイルを作成し、ここに関数を定義していきます。 今回は例として hoge() と fuga() という、2つの関数を定義するものとします。 使用する際は this.$huga() のように記述します。 const hoge = () => { return "hoge"; } const fuga = () => { retur

定義の仕方 /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 はドキュメントが多くて助かりますね！ 引用 この記事は @mya_ake さんの Nuxt.js と axios のエラーハンドリング周りの話 から引用させていただきました。 この場を借りてお礼申し上げます。 対象読者 「エラーハンドリングで冗長なコードを書きたくない」と考えている方 「他のプロジェクトでもコードを使い回ししたい」と考えている方 個人開発をしている方 はじめに Nuxt.js にはモジュールという Nuxt のコア機能を拡張するもの存在します。 有名所は以下の Github にリストがあります。 nuxt-community / modules 実際に使っている方は多いのではないでしょうか。

前回は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

背景 業務上でフロントの速度改善をやることになり、lighthouseのパフォーマンススコアをだいぶ改善されたのでやったことや知見をシェアしたいと思います。 改善前のパフォーマンススコア 問題点を探す 速度改善にあたって、まずやることは問題点を分析することです。lighthouseの計測結果ではJSのパースに時間かかるとのことで、まずdev toolのnetworkタブからJSのサイズを確認してみることにしました。 app.jsのサイズは408kbでかなり重いので、まずapp.jsのサイズを削減することからチューニングすることに決めました。 分析 app.jsの中身を分析するためbundle analyzerを使いました。使い方はターミナルに下記コマンドを叩いたら分析のレポートを表示されます。 分析の結果は下記です。 app.jsのサイズは2.11MBでした。 .nuxtは約1.34MBで

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

やりたいこと ・外部scssを使いたい ・vueファイルで変数、mixinを使いたい 実際の運用ではVueファイルで変数を使うことも出てくることもあるので、両方設定するのがほとんどかと思います 前提条件 create-nuxt-appで環境が構築されていること 参考：https://ja.nuxtjs.org/guide/installation 外部scssを使いたい 必要なパッケージをインストールする これでscss記法を使えるようになります。

最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？ そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。 具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。 Vuex ストア - Nuxt.js そもそも何に使うものなのか？ Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。 具体的にどうやって使うのか Nuxt.jsの場合、まず store/index.js に状態の定義を

Nuxt.jsとVuetifyで画像の指定方法について色々と詰まったので今回はそのことについてまとめてみました。 画像の格納場所 Nuxt.jsには画像ファイルを「assets」と「static」のどちらかに格納することができます。 それぞれの格納場所によって指定方法が異なります。 「assets」からの指定方法 assets配下のファイルを使用する場合は「~/assets」を指定します。 「~」（チルダ）をつけることが普通のHTMLとは異なり、これがないと表示されません。 「~」の代わりに「@」（アットマーク）でも表示されました。 公式ドキュメント内で書かれているようにCSSでエイリアスを参照する場合は注意が必要です。 アセット Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし

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アプリケーションハンズオンハンズオン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 vuex-persistedstateを使ってLocal Storageにデータを保存する 作成日 2019.12.25 更新日 2020.07.21 nuxt.js Vuetify Local Storage, nuxt.js, vuex-persistedstate vuex-persistedstateの簡単な使い方のサンプルコードです。入力したテキストとカウンターにより増加させた数値をLocal Storageに保存します。

nuxt.jsで再読込しても入力中の内容を保持したい という動機から、状態をlocalstorageに保存することにしました。 日本語での知見はあまりなかったので、投稿しておきます。 localstorageに保存が可能になるとどうなる？ 再読込しても、storeの状態を保つことができます。 入力中のフォームの内容や、画面の状態を復元することができます。 store中のstateはlocalstorageを消し去らないと新しい値とかを追加しても状態が変わらなくなってしまいます。 vuex-persistedstateを使う Reduxでも経験がありますが、こういうときにはstoreが変わった瞬間に自動的に保存してくれて、ページが始まった瞬間に復元してくれる、ライブラリを用いるべきです。 探した結果、最終的にnuxt.jsのissueなどで見ることの多かった"vuex-persistedst