[node.js]バージョン切り替え方法

node.jsバージョン切り替え方法

npm run dev

(thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134

複数のプロジェクトを扱うようになると、プロジェクトごとにnode.jsのバージョンを切り替えなければならないシーンが出てきます。上記のエラーは、現在使用しているnode.jsのバージョンが合わなかった際に出てきたエラー。

別のプロジェクトのブランチを切ってきて、npm run devした時のものです。

いろいろ調べてみて、nodeのバージョンを落としたりfiber取り除いたりしてみたのですが解決せず…。

結局、上司に泣きついて解決した作業工程をまとめておきます。

※当方Max OS 11.2.3使用

問題はnode.jsのバージョンにあった!

結論から言うと、今回の問題はプロジェクトにマッチしないnode.jsを使用していることがエラーの原因でした。というわけで、パッケージマネジャを使用し、プロジェクトにマッチしたnode.jsに切り替えます。

node.jsのバージョン管理には、nodebrewを使用する方法や、nodenvを使用する方法など、いろいろあります。

プロジェクトによって使用しているパッケージのバージョンは異なるため、それに合わせたnode.jsを使用する際、こうしたパッケージマネジャを使えば簡単にnode.jsのバージョンが切り替えられるというわけです。

今回は、nodenvを使用してnode.jsのバージョンを切り替える方法を記載します。

nodenv,anydenvが入っていることを前提として書き進めます。双方のインストール方法はこちらから

MacにNode.jsをインストール(anyenv + nodenv編) – Qiita

nodenvを使用してnode.jsのバージョンを切り替える

node.jsのバージョン確認は、 node -vでできます。

@MeowBook nks-frontend % node -v
v15.14.0

つづいて nodenvででコマンドを確認。

@MeowBook nks-frontend % nodenv
nodenv 1.4.0+3.631d0b6
Usage: nodenv <command> [<args>]

Some useful nodenv commands are:
   commands    List all available nodenv commands
   local       Set or show the local application-specific Node version
   global      Set or show the global Node version
   shell       Set or show the shell-specific Node version
   install     Install a Node version using node-build
   uninstall   Uninstall a specific Node version
   rehash      Rehash nodenv shims (run this after installing executables)
   version     Show the current Node version and its origin
   versions    List installed Node versions
   which       Display the full path to an executable
   whence      List all Node versions that contain the given executable

See `nodenv help <command>' for information on a specific command.
For full documentation, see: <https://github.com/nodenv/nodenv#readme>

nodenv versions で既にインストール済みのバージョンを確認。

@MeowBook nks-frontend % nodenv versions
  system
* 15.14.0 (set by /Users/xxx/Documents/xxx-frontend/.node-version)
  16.0.0
  16.2.0

つづいてnodenv install --list で、node.jsインストール時に登録されたバージョンを確認します。

@MeowBook nks-frontend % nodenv install --list
0.1.14
0.1.15
0.1.16
0.1.17
0.1.18

中略

15.13.0
15.14.0
16.0.0
16.1.0
16.2.0
chakracore-dev
chakracore-nightly
chakracore-8.1.2

中略

この時点で任意のバージョンが表示されていなければ`anyenv update `でリストをアプデし、再度`nodenv install --list `で任意バージョンがインストールされていることを確認。

anyenvについてはこちら。

nodenv,anydenvを使ったNode.jsのアップデート

任意のバージョンが表示されていることを確認したら、

nodenv install 16.1.0 のようにバージョンを指定し、node.jsをインストールします。

@MeowBook xxx-frontend % nodenv install 16.1.0 
Downloading node-v16.1.0-darwin-arm64.tar.gz...
-> <https://nodejs.org/dist/v16.1.0/node-v16.1.0-darwin-arm64.tar.gz>
Installing node-v16.1.0-darwin-arm64...
Installed node-v16.1.0-darwin-arm64 to /Users/xxx/.anyenv/envs/nodenv/versions/16.1.0

nodenv local 16.1.0 カレントディレクトリで適用したいバージョンを指定し、設定したら、最後にnode -v できちんと設定できているか確認。

@MeowBook xxx-frontend % nodenv local 16.1.0  
@MeowBook xxx-frontend % node -v              
v16.1.0

npm install で消したnode_modulesを再ダウンロードし、npm dev runでページが見られるか確認しましょう。

補足:vueとvue-template-compilerのバージョンが合わないよ!と言うエラーが出ることがあります。

その際は、package.jsonのdependenciesオブジェクト内のバージョン部分を変更し、古い方のバージョンを新しいバージョンの数値に合わせましょう。

"dependencies": {
  "@nuxtjs/axios": "^5.3.6",
  "@nuxtjs/device": "^1.2.7",
  "@nuxtjs/markdownit": "^1.2.9",
  "@nuxtjs/pwa": "^3.0.0-0",
  "axios": "^0.19.0",
  "chart.js": "^2.8.0",
  "chartjs-plugin-annotation": "^0.5.7",
  "chartjs-plugin-datalabels": "^1.0.0"
  , "cookie-universal-nuxt": "^2.0.18",
  "cookieparser": "^0.1.0",
  "crypto-js": "^4.0.0",
  "flatpickr": "^4.6.3",
  "js-cookie": "^2.2.1",
  "markdown-it-toc": "^1.1.0",
  "nuxt": "^2.0.0",
  "tabulator-tables": "^4.4.3",
  "vanilla-autokana": "^1.1.6",
  "vue": "^2.6.14", // ここか
  "vue-chartjs": "^3.4.2",
  "vue-flatpickr-component": "^8.1.4",
  "vue-server-renderer": "^2.6.14",
  "vue-template-compiler": "^2.6.14", // ここ
  "vuetify": "^2.2.11",
  "vuex-persistedstate": "^2.5.4",
  "vuex-shared-mutations": "^1.0.2"
},

おしまい

[Nuxt.js]フィルターを作成する

Nuxtのファイル構成を意識したNuxt.jsでのフィルターの作成方法です。Vueのやり方だと上手く行かなかったため、備忘録。

グローバルフィルター

pluginsディレクトリ内にjsフォルダを作成し、どのページでもフィルタが読み込めるようにする方法です。今回は、数字を3桁ごとにカンマで区切るフィルタと、英語の文字列を全て大文字にするフィルタを作成します。

詳しく

まずはpagesディレクトリ内にfilter.vueの雛形を作成します。

<template>
  <div>
    <Header />
    <v-container>
      <!-- local filter -->
      <h2>Mustash</h2>
      <p>{{ price | numberFormat }}</p>
      <p>{{ text | toUpperCase }}</p>
      <h2>b-vind</h2>
      <input type="text" :value="price | numberFormat" />
      <input type="text" :value="text | toUpperCase" />
    </v-container>
  </div>
</template>


<script>
export default {
    data() {
      return {
        price: 25400,
        text: 'Hello, Nuxt.js!',
    }
  },
}
</script>
グローバルフィルターはpluginsディレクトリ内にjsフォルダを作成し、その中にフィルターの機能を記述します。
import Vue from 'vue'

Vue.filter('toUpperCase', (value) => {
  return value.toUpperCase()
})

Vue.filter('numberFormat', (value) => {
  return value.toLocaleString()
}

最後に、nuxt.config.jsにグローバルフィルタの場所を追記します。

export default {
  plugins: [ { src: '~plugins/filter.js' } ],
}

ローカルフィルター

ローカルフィルターは、pagesディレクトリ内の各ページに定義するそのページ限定のフィルターです。せっかくなので、次は長い文字列を短く表現し、省略した以降の文字は「…」と表現させる「引数あり」のフィルターを作成します。

長文
これを
こう

詳しく

まずは雛形を作成します。

<template>
  <div>
    <v-container>
      <p>{{ longText }}</p>
    </v-container>
  <Footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    }
  },
}
</script>

この時点ではこれです。

フィルターを加えます。

<script>
export default {
  filters: {
    readMore: (text, length, suffix) => {
      return text.substring(0, length) + suffix
    },
  }

  data() {
   // 省略
}
</script>

readMoreの第一引数が適用する文字列、lengthが長さ、suffixが接尾辞です。

文字列textに対し.substringメソッドで0番目の文字から第二引数で渡した文字数(length)の、文字列の部分集合を返し、最後に指定したsuffixを加える、という処理が書かれています。

上記フィルターをlongTextに適用すると、コード全文は下記のようになります。

<template>
  <div>
    <v-container>
      <p>{{ longText | readMore(20, '...') }}</p> // フィルタを適用
    </v-container>
  <Footer />
  </div>
</template>

<script>
export default {
  filters: {
    readMore: (text, length, suffix) => {
      return text.substring(0, length) + suffix
    },
  }

  data() {
    return {
      longText:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    }
  },
}
</script>

フィルターでは第三引数まで指定していたのに、textの引数は書かれていないことに注意してください。

 

フィルターはv-bind式でもできる

mustache構文を使わないでフィルターを適用させたい時もあるかと思います。2.1.0以降でサポート。

https://jp.vuejs.org/v2/guide/filters.html

<!-- mustaches -->
{{ message | capitalize }}

<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>

v-bind式の構文は、

<div v-bind:id=”フィルタに渡すデータ | フィルタ”></div>

です。

 

おしまい

[Nuxt.js]AccuWeatherのAPIを使ってお天気アプリを制作

Nuxt.jsでAPIを使う修行を自分に課していました。というわけで、今回はお天気アプリです。

トップページのカードに、このように表示させます。

取ってきている情報自体は、任意の場所のその日のお天気と気温(と日付)だけなのですが、なかなかどうして時間のかかったものです。さて、復習しますか。

雛形となるカードを用意

まずは雛形を用意。お馴染みVuetifyを使っています。

<template>
  <div>
    <v-card class="mx-auto" max-width="374">
      <v-img
        height="250"
        src="https://images.unsplash.com/photo-1558486012-817176f84c6d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8"
        gradient="to top, rgba(255,255,255,.4), rgba(255,255,255,.9)"
      >
        <v-list-item two-line>
          <v-list-item-content>
            <v-list-item-title class="text-h5">
              CURRENT WEATHER
            </v-list-item-title>
            <v-list-item-subtitle>YYYY-MM-DD</v-list-item-subtitle> // 今日の日付を取ってくる
            <v-list-item-subtitle>TOKYO</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-card-text>
          <v-row align="center">
            <v-col text-h2 cols="12">
              <v-list-item-subtitle>お天気ステータス</v-list-item-subtitle>
            </v-col>
            <v-col cols="12">
              <v-card-subtitle class="text-h1 temp">温度
                <span class="celcius">&#8451;</span>
              </v-card-subtitle>
            </v-col>
          </v-row>
        </v-card-text>
      </v-img>
    </v-card>
  </div>
</template>

AccuWeatherから情報を取ってくる

さてこのAccuWeather、ちょっと苦戦しました。アクセス1日50回(だったかな?)なら無料のお天気APIです。

https://developer.accuweather.com/

必要なことは大体公式サイトに載っているのですが、ここからお天気の情報を取ってくるには何段階かステップが必要です。

  1. AccuWeatherに登録する
  2. AccuWeatherでAppを作る
  3. APIキーゲト
  4. ロケーションキーをゲト

AccuWeatherに登録する

まずは公式サイトでアカウントを作成します。

https://developer.accuweather.com/

右上のREGISTERからですね。

AccuWeatherでAppを作る

諸々入力し終え、アカウントが作成できたら、メニューバーのMY APPからAdd a new Appを選択します。Appの名前とかはどうでもいいです。今回は無料版を使うため、Productの箇所ではLimited Trialを選択しましょう。

 

APIキーゲト

上記の設定を終えたらCreate Appボタンを押します。

APIキーが取得できました。

ロケーションキーをゲト

APIキーをゲットしたら次はロケーションキーが必要ですね。

こちらにアクセスするとロケーションキーがわかります。

https://www.accuweather.com/

検索窓から取得したいロケーションを入力します。「東京」や「サンフランシスコ」などで選択肢が表示されます。

ページ遷移した先のURL最後の数字がロケーションキーです。

AccuWeatherのメニューバーAPI REFERENCE > Forecast APIを選択し、取りたいデータを選択します。今回はHour of Hourly Forecastsを選択しました。

https://developer.accuweather.com/accuweather-forecast-api/apis/get/forecasts/v1/hourly/1hour/%7BlocationKey%7D

一番上のResource URLの部分に、お天気情報を取得するためのURLが書かれていますね。

http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/{LOCATIONKEY}

この{LOCATIONKEY}の部分を先ほど取得した数値に置き換え、APIキーをつけてアクセスすると格納されている情報が見られるようになります。

例:http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396?apikey=XXX

XXXの箇所は、先ほど取得した自分のAPIに置き換えてください。

アクセス先

Chromeの拡張機能JSON Viewを使うと見やすいです。

こちらのURLをスクリプトのmounted部分で使います。

取得したお天気情報をaxiosでゲットし、変数に代入する

 

APIキーはconstantsディレクトリのdefine.jsに記載しました。またaxiosはダウンロードしている前提です。インストール方法はこちらから

https://www.npmjs.com/package/axios

export const API_KEY = 'xxx'
<script>
import axios from 'axios'
import { API_KEY } from '~/constants/define'


export default {
  data() {
    return {
      forecasts: [],
    }
  },
  mounted() {
    axios
      .get(
        'http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396' +
        `?apikey=${API_KEY}`
      )
      .then((response) => (this.forecasts = response.data))
  },
}
</script>

これで、先ほどアクセスした http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396?apikey=XXX の情報をforecasts[]に代入することができました。

画面に天気を表示させてみます。カードにv-forを追加しました。

    <v-card-text v-for="forecast in forecasts" :key="forecast.id">
      <v-row align="center">
        <v-col text-h2 cols="12">
          <v-list-item-subtitle>{{
            forecast.IconPhrase
          }}</v-list-item-subtitle>
        </v-col>
        <v-col cols="12">
          <v-card-subtitle class="text-h1 temp">
            {{ forecast.Temperature.Value | toCelsius | mathFloor }}
            <span class="celcius">℃</span>
          </v-card-subtitle>
        </v-col>
      </v-row>
    </v-card-text>

気温は華氏表記だったため、フィルターを作成し摂氏表記にします。

        <v-col cols="12">
          <v-card-subtitle class="text-h1 temp">
            {{ forecast.Temperature.Value | toCelsius | mathFloor }}
            <span class="celcius">℃</span>
          </v-card-subtitle>
        </v-col>

Scriptには下記を追記

<script>

// 省略
export default {
  filters: {
    toCelsius(value) {
    return ((value - 32) * 5) / 9 // fahrenheit to celsius
    },
    mathFloor(value) {
    return Math.floor(value)
    },
  },

 

 

<script>
import axios from 'axios'
import { API_KEY } from '~/constants/define'


export default {
  filters: {
    toCelsius(value) {
    return ((value - 32) * 5) / 9
    },
    mathFloor(value) {
    return Math.floor(value)
    },
  },
  data() {
    return {
      forecasts: [],
      hasError: false,
      loading: true,
      now: '',
    }
  },
  mounted() {
    this.now = this.$dayjs().format('YYYY-MM-DD')
    axios
      .get(
        'http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396' +
        `?apikey=${API_KEY}`
      )
      .then((response) => (this.forecasts = response.data))
      .catch(function (error) {
        console.log(error)
        this.hasError = true
      })
      .finally(() => (this.loading = false))
  },
}
</script>

あとは、dayjsを使い今日の日付を表示、error時とloading時の表示を追加して完成です。

 

      <v-list-item-content>
        <v-list-item-title class="text-h5">
          CURRENT WEATHER
        </v-list-item-title>
        <v-list-item-subtitle>YYYY-MM-DD</v-list-item-subtitle> // 今日の日付を取ってくる
        <v-list-item-subtitle>TOKYO</v-list-item-subtitle>
      </v-list-item-content>

    <v-card-text v-for="forecast in forecasts" :key="forecast.id">
      <section v-if="hasError">Error.</section>. // エラーメッセージを表示
      <section v-else> // エラーじゃない時は正常に表示
        <div v-if="loading">Loading...</div> // ローディング時の表示を追加
          <v-row align="center">
          </v-row>
        </section>
      </v-card-text>
 // 省略

export default {
 // 省略
  data() {
    return {
      forecasts: [],
      hasError: false,
      loading: true,
      now: '',
    }
  },
  mounted() {
    this.now = this.$dayjs().format('YYYY-MM-DD')
    axios
      .get(
        'http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396' +
        `?apikey=${API_KEY}`
      )
      .then((response) => (this.forecasts = response.data))
      .catch(function (error) {
        console.log(error)
        this.hasError = true
      })
      .finally(() => (this.loading = false))
  },
}
</script>

完成コード

すみません所々 インデントが合ってないかもしれないです

<template>
  <div>
    <v-card class="mx-auto" max-width="374">
      <v-img
        height="250"
        src="https://images.unsplash.com/photo-1558486012-817176f84c6d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8"
        gradient="to top, rgba(255,255,255,.4), rgba(255,255,255,.9)"
      >
      <v-list-item two-line>
        <v-list-item-content>
          <v-list-item-title class="text-h5">
            CURRENT WEATHER
          </v-list-item-title>
         <v-list-item-subtitle>{{ now }}</v-list-item-subtitle> // 今日の日付を取ってくる
         <v-list-item-subtitle>TOKYO</v-list-item-subtitle>
       </v-list-item-content>
     </v-list-item>

      <v-card-text v-for="forecast in forecasts" :key="forecast.id">
        <section v-if="hasError">Error.</section>
        <section v-else>
          <div v-if="loading">Loading...</div>
          <v-row align="center">
            <v-col text-h2 cols="12">
              <v-list-item-subtitle>{{
                forecast.IconPhrase
              }}</v-list-item-subtitle>
            </v-col>
            <v-col cols="12">
              <v-card-subtitle class="text-h1 temp">
                {{ forecast.Temperature.Value | toCelsius | mathFloor }}
                <span class="celcius">℃</span>
              </v-card-subtitle>
            </v-col>
           </v-row>
         </section>
        </v-card-text>
      </v-img>
    </v-card>
  </div>
</template>


<script>
import axios from 'axios'
import { API_KEY } from '~/constants/define'


export default {
filters: {
toCelsius(value) {
return ((value - 32) * 5) / 9
},
mathFloor(value) {
return Math.floor(value)
},
},
  data() {
    return {
      forecasts: [],
      hasError: false,
      loading: true,
      now: '',
    }
  },
  mounted() {
    this.now = this.$dayjs().format('YYYY-MM-DD')
    axios
      .get(
        'http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396' +
        `?apikey=${API_KEY}`
      )
      .then((response) => (this.forecasts = response.data))
      .catch(function (error) {
        console.log(error)
        this.hasError = true
      })
      .finally(() => (this.loading = false))
  },
}
</script>


<style scoped>
.temp {
  margin-top: -2rem;
}
.celcius {
  font-size: 1.7rem;
}
</style>

参考にしたのはこちらのサイト

https://www.npmjs.com/package/iobroker.accuweather

https://www.accuweather.com/

アクセスした際は日本語になっている可能性があるため注意。

axiosのmounted部分、なんでアロー関数じゃなきゃダメなんだろう?と思っていたら、こういうことでした。

なので、functionの外でページのインスタンスであるthisを違う変数に突っ込むと、アロー関数じゃない書き方でもthisが使えるようになるようです。

mounted() {
  this.now = this.$dayjs().format('YYYY-MM-DD')
  const self = this
  axios
    .get(
      'http://dataservice.accuweather.com/forecasts/v1/hourly/1hour/226396' +
      `?apikey=${API_KEY}`
    )
    .then(function (response) {
      console.log(response)
      self.forecasts = response.data
})
// 以下省略
あるいは宣言せずに.bind(this)する
.then(
  function (response) {
    console.log(response)
    this.forecasts = response.data
  }.bind(this)
)

 

[Nuxt.js]componentsのButtonを使ってDeleteボタンDeleteBtnを実装

いつもお世話になっております。

最近アトミックデザインなるものを覚えたのですが、具体的な使い方がピン…!と来ていませんでした。

componentsをatomsやorganismsに分けるのはわかるんですけどmoleculesって一体どんなもんに使うのよ?ってなもんでした。

ところがtodoリストでリストしたアイテムのdeleteボタンを$emitで実装する過程で、なるほど!と膝を叩いたので備忘録的に残しておきたいと思います。

to-do list

このアイテム1つ1つに入っているDELETEボタンです。

親であるtodo.vueはこんな感じ。UIはVuetifyを使っています。

<v-card
  v-for="(todo, index) in todos"
  :key="index"
  max-width="344"
  outlined
  style="margin: 10px"
  >
  <v-list-item>
    <v-list-item-content style="display: block">
      <input v-model="todo.isDone" type="checkbox" />
      <v-list-item-title
        class="text-h6 mb-1 item-title"
        :class="{ done: todo.isDone }"
      >
        {{ todo.item }}
      </v-list-item-title>
      <DeleteBtn @deleteTodo="deleteItem(index)" />
    </v-list-item-content>
  </v-list-item>
</v-card>

この後DeleteBtnで<v-btn>作って$emitしてもよかったのですが、既に<Button>コンポーネントは作成済みでした。

<template>
  <v-btn
    :color="color"
    :class="classValue"
    :tile="tile"
    :disabled="disabled"
    :text="text"
    :outlined="outlined"
    :block="block"
    :elevation="elevation"
    :small="small"
    :rounded="rounded"
    @click="click"
  >
  <slot></slot>
  </v-btn>
</template>

<script>
export default {
  props: {
    click: {
      type: Function,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
    classValue: {
      type: String,
      default: '',
    },
    tile: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    text: {
      type: Boolean,
      default: false,
    },
    outlined: {
      type: Boolean,
      default: false,
    },
    block: {
      type: Boolean,
      default: false,
    },
    elevation: {
      type: String,
      default: '0',
    },
    small: {
      type: Boolean,
      default: true,
    },
    rounded: {
      type: Boolean,
      default: true,
    },
  },
}
</script>
既に作成したButtonはデフォルトのButtonとして残すのがUIの統一性を考えるにしてもいいような気がします。
コンポーネントにコンポーネントも配置できるので、DELETEボタンのファイルであるDeleteBtn.vueのボタン部分にButton.vueを使用すれば良いのですね。
このように粒度の小さいコンポーネントを用意しておき(atoms)、小さいコンポーネントを組み合わせて大きめのコンポーネント(molecules)を作るようにデザインするのに向いているのがアトミックデザインの長所ですよ〜というのは私の師匠からの受け売りです。
<template>
  <div>
    <Button :click="itemDelete">DELETE</Button>
  </div>
</template>

<script>
export default {
  methods: {
    itemDelete() {
    this.$emit('deleteTodo')
    },
  },
}
</script>

【Nuxt.js】console.logでWarning :Unexpected console statementが出たときの対処法

いつもお世話になっております。今日もESLintに振り回されています。

検証のために入れたconsole.logにESLintがWarning出してきて、動くけどナンカキモチワルイ…という状態が続いておったのですね。

In JavaScript that is designed to be executed in the browser, it’s considered a best practice to avoid using methods on console. Such messages are considered to be for debugging purposes and therefore not suitable to ship to the client. In general, calls using console should be stripped before being pushed to production.

JavaScriptはブラウザで実行されるようデザインされているからconsoleで実行されるメソッドは避けるのがベストプラクティスだぜ!とESLintさんはおっしゃる訳です。そうは言ってもデバッグせにゃあ。

そんなわけで、プロジェクトディレクトリ直下の .eslintrc.js に下記を追加。

rules: {
'no-console': 'off', // console.log();OK
'no-unused-vars': 'off', // 使っていない変数あってもOK
},

しかしこちらを追記しても消えないWarning…なぜだ?

ESLint Warning

色々な記事を読み漁ってもルールを追記することしか書かれていません。同僚に相談したところ、「なんかESLint再起動?みたいなのした気がする」。とのこと。

yarn lintを実行。npm使ってる人はnpm run lintかな。

$ projectname % yarn lint
yarn run v1.22.10
$ yarn lint:js && yarn lint:style
$ eslint --ext ".js,.vue" --ignore-path .gitignore .
$ stylelint "**/*.{vue,css}" --ignore-path .gitignore
✨ Done in 3.24s.
$ projectname % yarn dev
yarn run v1.22.10

解決しました🥳🥳🥳

どうやらわざわざyarn devを実行しなくても、エディターとESLintをリンクさせる方法があるようです。

各種エディタでESLintのプラグインが提供されています。
これを使うことでいちいちコマンドを叩かずに済みます。
http://eslint.org/docs/user-guide/integrations#editors

Step by Stepで始めるESLint

[Mac] Nuxt.jsによるVue.js開発環境 その①Node.jsをインストール(anyenv + nodenv)

いつもお世話になっております。仕事でVue.jsを使うことになったのですが、当方、Vue.jsどころか Nuxt.jsもjavascript も全然使ったことのない、デザイナー上がりのディレクターです。こりゃやばいぞ…!ということで、備忘録も兼ねてしたためておくことにしました。結構焦ってます。

当方の環境は下記の通り。

MacOS Big Sur
バージョン11.2.3(20D91)
チップ Apple M1
メモリ16GB

早速、環境を構築していきます。

Node.jsはVue.jsの稼働に必要なJavaScript実行環境、

Vue.jsはJavaScriptフレームワーク、

Nuxt.jsはVue.jsでの開発に必要な機能を盛り込んだフレームワーク

という認識です。

いずれにせよNode.jsがないと始まらないっぽいのでNode.jsの環境を整えていくことにしました。

ここのサイトを参照→MacにNode.jsをインストール

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

順番としては

  1. Homebrewのインストール
  2. nodebrewのインストール
  3. Node.jsのインストール

としていけばいいのね…?と思ったら、anyenvとnodenvを使ってプロジェクト毎(フォルダ毎)にNodeのバージョンを指定して実行する方法もあるとのこと。

  1. Homebrewのインストール
  2. anyenvのインストール
  3. nodenvのインストール
  4. Node.jsのインストール

https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

そんなん便利な方を使った方がええですやん、ということで今回は下の記事を参照して進めました。nodistを使うという手もあるようなのですが、この辺は宗教みたいなもんです、と弊社エンジニアが申しておりましたので、ひとまずは目を引かれたanyenvとnodenvを採用し、今後色々試してみたいと思います。

Homebrewのインストール

Homebrewとは

Homebrewは、Mac用のパッケージマネジャです。ツールのインストールなどをするのに便利なものなのですが、今回はanyenvをインストールするために(nodenvも?)このHomebrewをインストールします。まどろっこしいな!と思いつつも、これがなかったらもっと大変なんだろうなと想像し拝みながらインストールします。開発者の方々に足を向けて寝れませんね!まあ地球は丸いからどこ向いても足向けて寝ることにはなるのかな。

Homebrewのインストール手順

https://brew.sh/index_ja.html

サイトに貼ってあるスクリプトをMacのターミナル上で実行します。コピペしてEnterです。

すると何やらカリカリ始まります。(初心者丸出しの語彙力)

Next steps:
- Add Homebrew to your PATH in /Users/n.okawa/.zprofile:
&nbsp; &nbsp; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/n.okawa/.zprofile
&nbsp; &nbsp; eval "$(/opt/homebrew/bin/brew shellenv)"
- Run `brew help` to get started
- Further documentation:&nbsp;
&nbsp; &nbsp; https://docs.brew.sh

とあります。

ほうほうNext stepsがあるのねと思いつつもこちとら初心者。具体的に何を打ち込めば良いのかまるでわかりません。

よく見るとこの記載の前に、

Warning: /opt/homebrew/bin is not in your PATH.

とあります。

PATHを追加しなきゃならんわけですね。PATHの通し方についてはこちらを参考にしました。

https://qiita.com/HORIZONium/items/b608f46c900ce527dbc9

そもそもパスを通すって何よ?という方はこちらをご覧ください。個人的にめっちゃ分かりやすくて感動しました。

https://qiita.com/Naggi-Goishi/items/2c49ea50602ea80bf015

さて、パスを通す上で場所が本当にWarningで指し示された場所で良いのか、試しに以下を実行します。

MacBook-Air:bin username$ /opt/homebrew/bin/brew -v

すると…おお!どうやらこの場所にHomebrewがあることは間違いなさそうです。

MacBook-Air: /opt/homebrew/bin/brew -v
Homebrew 3.1.8
Homebrew/homebrew-core (git revision af940f86e4; last commit 2021-05-21)

ではいよいよパスを通します。

MacBook-Air: export PATH="$PATH:/opt/homebrew/bin/"

通ったか確認

MacBook-Air: printenv PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin/

パスが加わってますね!ではbrewコマンドがHOMEから実行できるか、もういっちょ試してみましょう。

brew -v

というのはHomebrewのバージョン確認です。

brew -v
Homebrew 3.1.8
Homebrew/homebrew-core (git revision af940f86e4; last commit 2021-05-21)

やったあやったあ。

anyenvをインストール

では今しがたインストールしたHomebrewを使って、anyenvをインストールしましょう。

$ brew install anyenv

anyenvのインストールが完了しました。

スクショ brew install anyenv

こちらを初期化します。すると…

$ anyenv init
# Load anyenv automatically by adding
# the following to ~/.zshrc:

eval "$(anyenv init -)"

訳:

anyenvを自動でロードするには
以下の記述を ~/.zshrc: に記載してね

eval “$(anyenv init -)”

と書いてありますね。

というわけで下記を実行。

echo 'eval "$(anyenv init -)"' >> ~/.zshrc

ターミナルでファイルに追記する際の記述はこのようになっています。

$ echo “追記する文字列” >> ファイル名

参照:echoコマンドの詳細まとめました【Linuxコマンド集】

今回は記述に””(ダブルクオーテーション)があったので、全体を”(シングルクオーテーション)で囲いました。

 

ターミナルを再起動します。すると…

/Users/xxx/.zshrc:1: command not found: anyenv
$

ぴえん🥺

困ったら公式だ!ということで公式をチェケラ

https://github.com/anyenv/anyenv

You’ll see a warning if you don’t have manifest directory.

echoコマンドの詳細まとめました【Linuxコマンド集】

echoコマンドの詳細まとめました【Linuxコマンド集】

echoコマンドの詳細まとめました【Linuxコマンド集】

$ brew -v
zsh: command not found: brew

echoコマンドの詳細まとめました【Linuxコマンド集】

$ printenv PATH
PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

ぴえん🥺再起動したらさっき通したはずのパスが消えている…!

 

echoコマンドの詳細まとめました【Linuxコマンド集】

https://teratail.com/questions/159895

「PATHを通した後にターミナルを再起動すると、PATHが通っていない」…私じゃないですか。

新しいMacを使っている人やアプデをした人はbashでなくzsh が採用されたために、使い方を気をつけなければならんっちゅーわけですね。

というわけでエラー文言を元にググって解決法を発見。

【zsh, bash】macでPATHを通す方法 – not found と出てしまったら

https://qiita.com/k3ntar0/items/eb8cdbd8eba9da388def

 

ターミナルを開いた際、メニューバーにzshの記載があるため、私のデフォルトシェルはzshであることがわかりました。

ターミナルの設定ファイルが存在しない場合はシェルに応じた設定ファイルを作成してください。
– bashの場合 .bash_profile
– zshの場合 .zshrc

ひとまずホームディレクトリにて下記を実行し、.zshrcがあるかを確認します。

n.okawa@makkunoMacBook-Pro ~ % ls -a
.			.zsh_history		Downloads
..			.zsh_sessions		Library
.CFUserTextEncoding	.zshrc			Movies
.DS_Store		Applications		Music
.Trash			Creative Cloud Files	Pictures
.cups			Desktop			Public
.vscode			Documents
n.okawa@makkunoMacBook-Pro ~ % open ~/.zshrc

あった!

次に下記を実行。

$ touch .zshrc

.zshrcがテキストエディタで開くので、追記します。

私の場合は、先ほどanyenvのインストールを試みた際に入力した下記が記載されていました。

eval "$(anyenv init -)"

この下に、追加したかったパスの命令を書きます。

eval "$(anyenv init -)"
export PATH="$PATH:/opt/homebrew/bin/"

⌘+Sで保存し、再びターミナルへ戻り、追記した内容を下記で反映させます。

$ source ~/.zshrc

するとどうでしょう。待ち焦がれていた(?)Warningが…!Finally!!

Warning

ここでやっと、途中になっていたこちらの記事の「マニフェストディレクトリを作る」に戻れます。

https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

途中check outするかってきたので「y(もろちん ちん!)」で承諾してます。

何やねんもろちんちんて。

 

$ source ~/.zshrc       
ANYENV_DEFINITION_ROOT(/Users/xxx/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init
$ anyenv install --init
Manifest directory doesn't exist: /Users/xxx/.config/anyenv/anyenv-install
Do you want to checkout ? [y/N]: y
Cloning https://github.com/anyenv/anyenv-install.git master to /Users/xxx/.config/anyenv/anyenv-install...
Cloning into '/Users/xxx/.config/anyenv/anyenv-install'...
remote: Enumerating objects: 62, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 62 (delta 1), reused 1 (delta 0), pack-reused 57
Receiving objects: 100% (62/62), 10.52 KiB | 2.63 MiB/s, done.
Resolving deltas: 100% (8/8), done.

Completed!

Completed!!の記載を信じてドキドキしながらターミナルを再起動…

Last login: Fri May 21 15:16:17 on ttys000
$ .zshrc:1: command not found: anyenv

Ouch!! あ、でもbrewコマンドは使えるようになってる…

色々調べてみると、同じ症状で「zsh: command not found」表示が出る人々は多い模様

HOMEでls -aを実行してみると、ファイル群の中には.anyenvが。

ターミナル

http://blog.10rane.com/2014/08/19/install-anyenv/

上の記事を参考にしていると、anyenvのパスも通さなきゃダメっぽい?ということに気づく。そんな訳でファイル.zshrcを開き

$ open .zshrc

下記を追加。

export PATH="$HOME/.anyenv/bin:$PATH"

全部でこの3行が記載されたファイルとなりました。

export PATH="$PATH:/opt/homebrew/bin/"
export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"

保存後はお決まり、エディタを閉じてターミナルにて下記を実行し、変更を適用します。

source ~/.zshrc

再びターミナルを終了して開くと…やった!エラー消えた!

.zshrcに記載するパスの書き方がいまいちわかっていなかったのですが、再び下記を実行してPATH一覧をみてみると、homebrewのパスは最後に、anyenvのパスは最初に追加されていますね。

$ printenv PATH     
/Users/xxx/.anyenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin/

つまり

export PATH="$PATH:/xxx/yyy/zzz/"

の形では最後に、

export PATH="$HOME/.xxx/yyy:$PATH"

の形では最初にパスが加えられます。

 

さてさて、やっと第三段階に入れます。

nodenvのインストール

さあ、入れたてホヤホヤのanyenvを使う時がやっとやって参りましたYO!

$ anyenv install nodenv

$ anyenv install nodenv
/var/folders/4f/2th8vsqs47d8s72sn6ffv14m0000gp/T/nodenv.20210521213024.25472 ~
Cloning https://github.com/nodenv/nodenv.git master to nodenv...
Cloning into 'nodenv'...
remote: Enumerating objects: 4021, done.
remote: Counting objects: 100% (18/18), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 4021 (delta 5), reused 4 (delta 1), pack-reused 4003
Receiving objects: 100% (4021/4021), 732.74 KiB | 6.72 MiB/s, done.
Resolving deltas: 100% (2636/2636), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/node-build.git master to node-build...
Cloning into 'node-build'...
remote: Enumerating objects: 20477, done.
remote: Counting objects: 100% (253/253), done.
remote: Compressing objects: 100% (154/154), done.
remote: Total 20477 (delta 92), reused 172 (delta 81), pack-reused 20224
Receiving objects: 100% (20477/20477), 3.65 MiB | 3.79 MiB/s, done.
Resolving deltas: 100% (12994/12994), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/nodenv-vars.git master to nodenv-vars...
Cloning into 'nodenv-vars'...
remote: Enumerating objects: 211, done.
remote: Total 211 (delta 0), reused 0 (delta 0), pack-reused 211
Receiving objects: 100% (211/211), 31.82 KiB | 5.30 MiB/s, done.
Resolving deltas: 100% (76/76), done.
~

Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

 

おっ今度はスムーズに行きました。

Please reload your profile (exec $SHELL -l) or open a new session.とありますね。

exec $SHELL -l

言われるがままexec $SHELL -lを実行してみました。I’m a nodenv’s bitch…

printenv PATHで確認。

PATH=/Users/xxx/.anyenv/envs/nodenv/shims:/Users/xxx/.anyenv/envs/nodenv/bin:/Users/xxx/.anyenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/xxx/.anyenv/bin:/opt/homebrew/bin/:/opt/homebrew/bin/

あ、今度は最初にパスが通ってますね。

同じ轍は踏むまいともう一度ターミナルを再起動しパスを確認してみましたが、今回は手動でファイルに上書きしなくても大丈夫そうです。

node.jsのインストール

はあ。ここまで長かった。

やっとnode.jsのインストールに参ります。

$ nodenv install -l

とすればインストールできる最新のnode.jsが確認できるのですが(めっちゃある)、実は最新バージョンが表示されないこともあるそうです。

それを防ぐためには、anyenv-updateプラグインをインストールし、最新のNodeバージョンが取ってこれるよう準備しておく必要があります。下記を実行。

mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

こちら参考。

mkdir
ディレクトリを作成する
書式:mkdir [オプション] [ディレクトリのパス]

-p・・・途中のディレクトリを含めて作成する

gushernobindsme/これから学ぶmacOSターミナル.md

mkdir -p $(anyenv root)/plugins で.anyenv のルートにpluginsディレクトリを作成しました。

これで.anyenvに移動し、中のファイルを確認すると、

$ cd .anyenv
.anyenv $ ls -a
.	..	envs	plugins

. .. envs plugins計4つのディレクトリが確認できました。このpluginsディレクトリにプラグインをクローンしてきます。

.anyenv $ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
Cloning into '/Users/xxx/.anyenv/plugins/anyenv-update'...
remote: Enumerating objects: 87, done.
remote: Total 87 (delta 0), reused 0 (delta 0), pack-reused 87
Receiving objects: 100% (87/87), 13.33 KiB | 3.33 MiB/s, done.
Resolving deltas: 100% (33/33), done.

ヨシャこれでプラグインのインストールは完了。最後にanyenv updateを実行すれば、最新のNodeバージョンを取ってこれるようになります。

$ anyenv update
Skipping 'anyenv'; not git repo
Updating 'anyenv/anyenv-update'...
Updating 'nodenv'...
Updating 'nodenv/node-build'...
Updating 'nodenv/nodenv-vars'...
Updating 'anyenv manifest directory'...

更新されました!

先ほども確認したNode.jsのバージョン一覧を見てみます。

$ nodenv install -l

欲しいバージョンをインストールするには下記のように書けば良いのですが、

nodenv install {バージョン番号}

私、何を思ったのか、何も考えず最後に表示された数字で実行しちゃったんですよね。

nodeバージョン一覧

BUILD FAILED
BUILD FAILEDしてやんの

敢えなく撃沈。

あまり古いバージョンだと、 It no longer receives bug fixes or security updatesというわけでサポート対象外、インストールさえできないようですね。

気を取り直してもう一度。先ほどのリストから見ると16.2.0が最新のようです。その下はよくわからない。

node list

念には念を、ということで、node.jsの公式サイトにて最新バージョンも確認してみました(目視w)

node newest list
node.js

これで安心してインストールできるってもんです(涙目)

~ % nodenv install 16.2.0            
Downloading node-v16.2.0-darwin-arm64.tar.gz...
-> https://nodejs.org/dist/v16.2.0/node-v16.2.0-darwin-arm64.tar.gz
Installing node-v16.2.0-darwin-arm64...
Installed node-v16.2.0-darwin-arm64 to /Users/xxx/.anyenv/envs/nodenv/versions/16.2.0

はいお疲れ様でした。

 

さらに念には念を入れて、今入っているnodeのバージョンを確認しておきましょう。

$ nodenv whence npm
16.2.0

イエス!!!

nodenv global -16.2.0でコンピューターのデフォルトを指定し、node -vとすれば…

$ nodenv global 
$ node -v
<strong>v16.2.0
</strong>

ほあああ!

アンインストールするには

今お使いのnodeバージョンが何かしらの都合が悪くなりアンインストールしたくなったときは、~/.anyenv/envs/nodenv/versions内にあるディレクトリを削除すれば良いとのこと。

 

[VSCode] Live Serverを使ってHTMLコーディングを快適に!

以前、VSCodeの初期設定をする際、おすすめの拡張をご紹介しました。

https://nolyc.net/vscode-install/

あれから、JavaScriptでクイズゲームやカレンダーをいそいそと作り勉強しています。

カレンダーの作り方はこの動画がおすすめ!英語ですが、動画を見ながらメソッドを調べていけば比較的簡単に理解できると思います。

そして、こちらの動画を見ていて知ったのがLive Server。Visual Studio Codeの拡張機能で、HTMLやCSSを修正すると自動的にブラウザがリロードされ、表示のされ方を即座に確認できるというわけです。言ってしまえば簡易ローカルサーバ。ライブコーディングとも言うんですね。

インストール方法は簡単。左側のメニューから拡張メニューを選択し(画像①)、live serverを検索(画像②)。

あとはインストールするだけです!

live server
もうインストールしちゃった…

もし調子が悪いようなら、VS Codeを一度再起動してみましょう。

HTMLファイルを任意のブラウザで開き、中のソースをいじってみたら、きちんと動いているかどうかを確認できるはずです。

ではでは。備忘録でした。

VSCodeをインストールしてlangをjaに設定しよう!(MacOS)

転職先の会社の開発環境がVSCode(Visual Studio Code)だったので、意気込んでインストール下はいいものの、最初の設定でつまづきました。

こういう時は全部Googleが助けてくれるのですが、初学者は解説すらもよく理解できません。ということで備忘録的に私がVSCodeインストール時に行った設定をまとめておきます。

まずはVSCodeのインストール

インストール方法なんてそんな難しいことないでしょ!と思うのですが、最初に先人の知恵を見ておくと大変勉強になります。本体のインストールは特に問題なくできたのですが、人気の拡張機能を予めざっと知られるのは嬉しいですね。

Qiitaのこちらの方の記事が分かりやすくておすすめです。

MacOSでVisual Studio Codeをインストールする手順|Qiita

VSCodeの設定でlang属性をenからjaに変更しよう

ここまではよろしいでしょうか。

上記で紹介した記事で、別の記事が紹介されています。

HTMLを作成時にlang属性をenからjaに変更する方法が下記サイトで詳しく書いています。
VSCodeのemmetでhtmlのlangをjaに設定する方法|Qiita

VSCodeの設定ファイルを開くところが個人的には分かりずらかったので、追記しておこうと思います。

設定の前と後を比べるために、まずはVSCodeでHTMLのテストファイルを作成してみました。

Macであれば⌘+Nで新規ファイルが作成できるので、⌘+Sでファイル保存時に「test.html」などのように拡張子をhtmlにしてファイルを保存してください。

そして「!」を打ってtabキーを押すと、下記のコードが自動入力されます。

<html lang=”en”>になっていますね。日本語サイトを作る方であればいちいち直すのが煩雑なため、これを最初から<html lang=”ja”>にしようというのが今回の記事の趣旨です。

⌘+,」で設定を開きます。

Code > Preferences > Settings[⌘,] からでもOKです。

この設定から、VSCodeの設定ファイルを開くことができます(ここで私はつまずいた)。

この設定ファイルを開き、記事で紹介されている下記コードを{}内に記載し、⌘+Sで保存します。

  "emmet.variables": {
     "lang": "ja"
  }

保存できたら、VSCodeを再起動します。

先ほどのtest.htmlの全文を消し、再度「!」を打ってtabキーを押してみましょう。

わあ〜い、langがjaになったぞ!!

[Dreamweaver CC 2019]文字コードを変更する

はいはいどうもこんにちは。

最近必要にかられてJavascriptの勉強を始めました。 AtomとかSublime Textとか、便利な道具はたくさんあるのですが、せっかく仕事でAdobe CC契約してるのでもったいないと思い、Dreamweaverを使うことにしました。 貧乏性です。

 

Dreamweaverは学生の時にWebサイト制作で使っていたのですが、最近はからっきし。 もう全然わからないことばっかりで笑いました。 まさか文字コード1つに手間取るとはッ。

 

ということで備忘録的に書いておきます。

ファイルメニューからプロパティ行けばある

File > Page Properties… > Title/Encoding

property

Unicode meny

はい、おしまい。

 

外国かぶれなので英語で使っているとたまに困ります。

[WordPress]HTTPエラーにバックドロップ

どうもこんにちは、のりっくです。

 

WordPressを曲がりなりにいじくりまわして早2週間(くらいか?)。

画像をアップロードしようとしたらHTTPエラーざんまい。なんのこっちゃ!

こういうことです。

 

待てど暮らせどHTTPエラー。

見てくださいよこの画像の墓場!!

それでChromeの検索窓に「WordPress 画像 HTTPエラー」とか入力して調べてたら出てくるわ出てくるわ、同じ目に遭った人が!!ありがとう!

 

結果、エックスサーバーにてphp.iniの設定変更をすることで難を逃れましたのでここにご報告をいたします。


それでは行ってみましょう。

ワードプレスのHTTPエラーを解決する主な方法2つ

EWWW Image Optimizerの停止

これは画像などを自動で圧縮してくれるプラグインです。

多くの人はこのプラグインを停止することで、HTTPエラー問題が解決しているみたいですね。

そのほかにも、状況によって停止した方がいいプラグインとかもあるみたいなので、心配な方はとりあえず全てのプラグインを停止すればいいんでないかな!!

私はそもそもこのプラグインを入れていませんでした。というわけで解決せず!!無念!

 

php.iniの設定変更

ワテクシこれで解決できました。ふぇーい!!

要は、サーバー上で画像アップロード時の設定を変更するみたいな感じです。

 

私はみんな大好きエックスサーバーを使っているので、

そうと決まればエックスサーバーのサーバーパネルへGOGO!!



エックスサーバーのサーバーパネルへログインしたら、メニュ画面からphp.ini設定を選択します。

 

 

 

 

問題の起こっているドメインを選択し、

 

 

こいつ

 

さらにphp.ini設定変更を選択します。

 

 

 

 

したらページ下の方へスクロールしていただいて、max_execution_timeの値を初期値の30から60に変更していただき、ページ右下の「設定する(確認)」ボタンを押します。

 

 

 

←これ

 

ちなみにここで設定完了しないのが落とし穴ですよ。

お家に帰るまでが遠足なのでみなさん気を抜かないでくださいね。

もう一度ページ右下までスクロールしていただき、「設定する(確定)」を押して初めて設定が完了します。

 

 

 

ややこしいけどこういう小さいことが案外大事!!!!!!

 

その他

あとはですね、WordPressの更新とかも結構重要っぽいですよ。

更新の前にはバックアップもしておこうね!

 

まとめ

そんなわけで画像の墓場から脱出できました。

画像アップロードできないことがこんなにストレスだとは思いませんでしたが、結局なんかうまくいくようになったので結果オーライです。勉強になったわあ。

 

みなさまのHTTPエラーも解決されますように……

 

やっぱりエックスサーバーいいよ

こういうサーバーのエラーとかも対応していて思うんですが、やっぱりエックスサーバー至上な感じは否めないっす。初心者にはね。

ここ使う前はさ○らインターネットとか使わせていただいていたんですが、なんかあそこは玄人向きで使いにくかったというか、それ以前にやり方がわからなさすぎました。

 

エックスサーバーはその点、初心者向けですし、ユーザーの人口も多いのでトラブルシューティングな記事も他のサーバーに比べて多いような気がします。嘘です。圧倒的に多いです。



そんなわけで皆様、快適なサーバーライフをお送りくださいませ。