[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 も全然使ったことのない、デザイナー上がりのディレクターです。こりゃやばいぞ…！ということで、備忘録も兼ねてしたためておくことにしました。結構焦ってます。

Nuxt.jsによるVue.js開発環境

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

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/ｘｘｘ/.anyenv/envs/nodenv/shims:/Users/ｘｘｘ/.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/ｘｘｘ/.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の公式サイトにて最新バージョンも確認してみました（目視ｗ）

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/ｘｘｘ/.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内にあるディレクトリを削除すれば良いとのこと。

 

江ノ島で本当に行きたいおすすめスポット

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

私の地元は神奈川。大学も湘南台まで通っていたこともあり、江ノ島へは時々遊びに行っていました。しかし灯台下暗しと言いますか、いつでも行けると思っているとなかなか有名どころのお店には行かないものでして。今回ソロサーフィン合宿をしてみて初めて江ノ島観光とやらをしてみました。

ガイドブックなんかを見て色々行ってみると、やっぱりいいな！と思った場所もあれば、うん…？と思ったところも結構ありました。

そこで今回は俺的江ノ島（駅周辺）観光スポットを独断と偏見でご紹介します。行って後悔はさせないぜ！

俺的江ノ島観光スポット

まず、江ノ島といってもエリアは大きく4つに分けられます。

  1. 小田急線片瀬江ノ島駅を降りて右側、江ノ島本島の西側の片瀬西浜ビーチエリア
  2. 橋を渡った江ノ島本島
  3. 江ノ電江ノ島駅を降りて左側、江の島本島に向かう川沿い
  4. 鎌倉市と隣接している腰越海岸エリア

それぞれに良いところがあるのですが、土日混雑するのは主に上の1〜3のエリアですね。みんなが観光している場所や、賑やかな雰囲気が好きな方は1、2を中心に周るのが良いです。逆に、ちょっと穴場を巡りたい！という方は3のエリアを攻めてみると、道中も比較的落ち着いてますし、穴場〜な店も見つけやすいです。

江ノ島本島の西側の片瀬西浜ビーチエリアでおすすめのスポット

このエリアは正直私がおすすめするべくもなく、ガイドブックに素敵なおすすめがたくさん載っています。このエリアを攻めるなら…

新江ノ島水族館

https://youtu.be/scJPy4Tji-U

クラゲの展示室で寝泊まりができるなど、面白い企画をよく考えておられる新江ノ島水族館。略してえのすい。新とついているだけあって、2003年に江の島水族館が閉館されてから、2004年に新しく生まれ変わりました…って書いていて10年近く前なのだなと気づき今戦慄しています。もう生まれ変わりました！とかようよう言えませんね。

休日は家族連れも多く、賑やかな雰囲気が楽しめます。ちょっと早めの時間帯に行って、2時間くらい見て回ったらランチして、海岸を散歩なんかしちゃったりして、夕方には江ノ島本島で夕焼けを…みたいなコースがよろしいのではないでしょうか。

コロナ禍により入場は完全予約制になっているようですので、訪れる際は事前に新江ノ島水族館公式サイトをチェックしておきましょう。

https://www.enosui.com/

  • 入場料：大人2,500円
  • 開館：9:00〜17:00 （最終入場16:00）
    ※開館時間は時期により異なります。詳しくは公式サイトをチェック！
  • アクセス：片瀬江ノ島駅から徒歩3分

 

サーフィン

江ノ島
お店からの景色

江ノ島に来るなら一度はやってみましょうぞ！江ノ島近辺をプラついていると、サーフショップは至る所にあります。基本的にどのお店にお願いしても皆さん優しく教えてくれますが、私がご贔屓にさせていただいているのはSTAY SEAサーフィンスクール。プロサーファーの綿貫直也さんが2019年から運営されているサーフィンスクールで、ビーチも目の前！アクセスが良いのが特徴です。

ショップの下にはカフェも併設されていたりと、サーフィン後の一杯やご飯も楽しめる充実ぶり。

スクールは1回6,600円から。3回券は16,500円、5回券は26,400円と、チケットを買うとお得に利用できます。回数券は友人と分けてもOKなので、この内何回かを誰かとシェアするのも良いですね！

詳しい料金表はこちら

4月くらいからはもう、ウェットスーツを着れば思っていたより全然寒くなくサーフィンを楽しめます。朝からサーフィンを楽しんで、江ノ島で食べるご飯は格別ですよ！

江ノ島小屋

漁師汁定食

朝強い人にはぜひとも行っていただきたいのがこちら。江ノ島小屋です。江ノ島近辺ではモーニングのあるお店が少ないのですが、ここは朝8:00から営業しています。シーズンには1時間もの待ち時間になることも…！

正直私は行列に並ぶのがあまり得意ではないのですが、ここの朝食は並ぶ価値のあるお店だとはっきり言えます。絶対食べて欲しいのは漁師汁定食。「魚を骨ごと煮込んだ濃厚スープ」ってもうその言葉だけでご飯3杯いけるんちゃいますの…？

朝食メニュー
金目鯛の煮汁卵かけご飯も捨てがたい…

朝ごはん以外のメニューでは、魚のたたきを味噌で味付けしたなめろうに秘伝のゴマたれをかけた「名物まかない丼」が有名です。くう〜説明だけでよだれ出てくるわい！

 

江ノ島本島エリアのおすすめスポット

江ノ島本島にも、カフェやごはん屋さんなどがたくさんあります。有名なのはやはり「とびっちょ」というお店ですが、正直この辺りのお店はどこも美味しいですし、大体しらす出してますし…という感じで、プラプラ周りながら良さげなお店に飛び込むのがいいんじゃないかなあと個人的には思います。

江ノ島神社

江ノ島神社

江ノ島駅から海岸沿いに長い橋を渡ると正面に見えてくるのが江ノ島神社。江ノ島神社に行くまでにも江ノ島アイランドスパや各種売店などが並んでおり、休日は多くの人で賑わいます。

階段を上がり道なりに進むと、各所には定食屋さんやカフェもちらほら…。トイレも随所にあるので、長い散歩にも困りません。

ランナーなら、朝ランニングしながら江ノ島本島を観光するのも一興。起伏があってなかなか厳しいコースですが、色々なところを一気に見て周りながら気になったところをチェックしておき、後からゆっくり観光すると時間の短縮にもなります。私の旅行は基本このスタイルです。

数年前には江ノ島アイランドスパにも訪れましたが、夏場はプールも楽しめてカップルにはなかなか良い施設でしたよ。ワンデイスパ（プール＋温泉）で料金3,000円なのも良心的！

江ノ島アイランドスパ
出典：江ノ島アイランドスパ

日曜日は子どもNGなので、大人だけでゆっくりしたい…！という方にもおすすめです。

江の島本島に向かう川沿いのおすすめスポット

江ノ電の江ノ島駅改札を出て左手、江ノ島本島までの川沿いにも、江ノ島ならではのお店がいくつかあります。私のおすすめはこの2つ。

L＆LハワイアンBBQ

ハワイアンBBQ
出典：Googleマップ

ハワイ発のL＆LハワイアンBBQ。いわゆる「ハワイアンBBQ」を出すお店で、リーズナブルにお肉とご飯をいただけます。海に入った後や潮風に当たった後のハワイアンBBQの美味しいこと美味しいこと…。

晴れていたらテイクアウトして海辺で食べるのも最高です。

お店にはWi-Fi、電源も完備されているため、ちょっとした作業を行いたい時にも便利ですよ。

DIEGO BY THE RIVER

ハンバーガー
出典：公式サイト

店名にもある通り、川沿いに位置するのがこのDIEGO BY THE RIVER。シグネチャーはなんといってもこのぷっくりとしてプリティーな見た目のアボカドチーズバーガーです。

ここ江ノ島にはハンバーガーを出しているお店がすこぶる多く、至る所で様々なハンバーガーを食べられるのですが、私はこの店のハンバーガー推しです。ぷっくりしたバンズとジューシーなパティ、食べ応えのあるピクルスはDIEGO BY THE RIVERならでは！

テラス席

晴れた日にはテラス席での食事も楽しめます。

鎌倉市と隣接している腰越海岸エリアのおすすめスポット

私がどこよりもおすすめしたい江ノ島のスポットはこちら、腰越海岸エリアです。どういうわけか人が他のエリアよりも少なく、穴場スポット。少し歩けば珊瑚礁など、有名なお店も近くにあります。そんな腰越エリアの中でも特におすすめしたいのが、以下の2つです。

腰越漁協直営店

腰越漁業直営店

腰越漁港で、朝獲れた魚をフライにして販売しているお店です。ふわふわのアジフライから、脂のったサバフライ、サバコロッケ…メニューや価格はその日の入荷によって異なりますが、朝どれのスーパーフレッシュな魚の美味しさたるや！

一番人気はアジだそうですが、私が訪れた際にはサバのみだったため、サバのフライとサバコロッケをオーダー。

サバフライ
うまくて目ん玉飛び出そう

揚げ物だけなのでご飯、飲み物（ビール）は持ち込みできます。しっかり持ち込みましょう。笑

営業時間は13時〜17時と限られているため、訪れる際は時間に余裕を持って行ってください！

 

HOME taco bar

タコス

アメリカ人の友達を連れて行ったら、「日本で食べたタコスの中で一番だ！」と言わせしめたのがこの店、 HOME taco bar。サンフランシスコで出会った3人が始めたお店で、アメリカン〜なタコスが食べられます。

タコスならメキシカンじゃないのかよ！というお声もありましょうが、お味はどちらかというとTEXMEX寄りなのではないかなと個人的には思います。そのせいか、お店にはアメリカン〜な方も多いようでした。皆さん故郷の味が恋しいんですね。

私のおすすめはここのチミチャンガ！

チミチャンガ

チミチャンガとは、豆やライス、肉、サワークリームなどを入れたブリトーに追いカロリーを揚げて、ソースをぶっかけたもの。写真ではタルタルっぽいですが、本番はもっと液体なソースがビシャっとかかっています。ちなみにこのチミチャンガ、日本で食べられるところは本当にレアです。私もまさか湘南で食べられるとは思いませんでした。嬉しい〜美味しい〜

おわりに

すみません、なんかおすすめスポット紹介しようと思ったんですけど、本当に厳選したら紹介できるところは案外少なかったです。江ノ島まで来てしまったら正直どこに行っても楽しめると思うのですが、敢えて私が友達を連れて行くならここだな〜というおすすめスポットをご紹介しました。

小さなお子様連れやカップル、あるいは車で行くのであればまた異なったチョイスがありますよね。遊びに行くのは下調べも含めて楽しいものですので、ぜひ色々調べてみて、素敵な休日を過ごしてください。

 

江ノ島で作業できるおすすめのお店7選

GWに1人サーフィン合宿を実行し、1週間江ノ島に籠っていました。そう。セルフ自主隔離。午前はサーフィンして、午後はリモートで仕事をしていたわけですが、ずっとステイ先で仕事をするのも飽きるものです。

というわけで、江ノ島駅近辺で作業するのに素敵なお店をまとめてみました。 お仕事で使う方はVPN使ったり自分のWi-fi使った方が良いかと思いますが、念のためWi-Fiが使えるかや電源の有無なども記載しています。

書いている内容は独断と偏見によるものですので、ご覧くださる方は過度な期待や落胆をせぬよう。
また営業時間はコロナ禍により異なる場合があります。訪れる際は事前に公式サイトやお店にお問い合わせください。

そして当然ですが、お店が混み合っている際にまで何時間も居座るのはマナー違反です。お店にも、他のお客さんにも悪いので避けましょう。

江ノ島で作業できるおすすめのお店7選

今回ご紹介するお店はGooleマップのリストにもまとめています。ご査収ください。

DIEGO BY THE RIVER（ディエゴバイザリバー）

片瀬江ノ島駅から徒歩5分。江ノ島方向の橋を渡って川沿いにあるおしゃれなお店がこのDIEGO BY THE RIVER（ディエゴバイザリバー）です。お店のドアを開けるとまず目に飛び込んでくるのが、ずらりと並んだショーウィンドウのクッキー！！夢のような光景です。

クッキー
全部欲しい

上から下まで買い占めたい気持ちをグッと抑えて2階の飲食スペースに上がります。

クッキーに心を奪われたファーストインプレッションでしたが、ここDIEGO BY THE RIVERのシグネチャーは何といってもハンバーガー！ぷっくりしたプリチーなバンズに、肉厚のパティ、そしてトップには可愛らしく、ミニトマトとピクルスがぶっ刺さってます。

ハンバーガー
出典：DIEGO BY THE RIVER

私はブリトーをいただきました（バーガーは以前食べたような気がしたので笑）。ブリトーの中は野菜たっぷりでとってもヘルシー。アメリカのブリトーとは大違いだ（主にカロリー的な意味で）。

ブリトー
ヘルシー！！

テラス席もあるので、晴れた日にはゆったり江ノ島方面へと流れる境川を眺めながらリラックスするのも良いですね。

テラス席

作業の利便性といった点を言及すると、窓際の4人席にも電源はありますが、北側のカウンター席にも電源があるのが嬉しいところ。ただし土日や祝日のランチやディナーの時間帯には混むので、長い時間作業するには不向きかもしれません。

 

  • Wi-Fi　★★★
  • 電源　⭐︎★★（一部の席であり）
  • 営業時間
    平日：ランチ11:00～15:00　ディナー：17:00～21:30（L.O）
    土日祝日　ランチ10:00～15:00　ディナー　17:00～21:30（L.O）
  • 定休日：火曜日（祝祭日、イベントの場合は翌日）月に一度火曜、水曜連休
  • 住所：〒251-0035 神奈川県藤沢市片瀬海岸1-13-8
  • 電話番号：0466-63-7711
  • 公式サイト
  • Instagram

 

L＆LハワイアンBBQ 江ノ島店

片瀬江ノ島駅から端を渡ったすばな通りにあるのが、L＆LハワイアンBBQ。最初にここを見つけたときは「日本にもあるの！？」と発狂しました。アメリカにはハワイのみならず、カリフォルニアにも何店舗か出典しているお店です。いわゆる「ハワイアンBBQ」を出すお店で、リーズナブルにお肉とご飯をいただけます。

ハワイアンBBQ
出典：Googleマップ

ところでいわゆるハワイアンBBQって何じゃい！という話なのですが、私のイメージでは甘じょっぱい系のタレに漬け込まれた照り焼きビーフや骨つきリブ、マカロニサラダ on ライス…というのがハワイアンBBQですね。

公式サイトによれば、このスタイルは「プレートランチ」と呼ばれるそうで。かつてプランテーション時代に各国の労働者たちがおかずを持ち寄って交換したことから始まった…と言われているそうです。

プレートランチの起源
出典：L＆Lハワイアンダイニングカフェ

この日は2軒目だったのでもうようよう肉は…ということでガーリックシュリンプをいただきました。見よこのガーリック！！酔っ払った時に食べるガーリックシュリンプの美味しいことよ…。オイルを千切りレタスとライスに絡めて食べるこの背徳感もたまりません。

ガーリックシュリンプ
もちろんビールと一緒に。

このようなお店にしては意外なのですが、こちらではWi-Fi、電源も完備されています。お店も広々しているので、空いている時ならば作業もかなりしやすいような気がしますね。

  • Wi-Fi　★★★
  • 電源　★★★
  • 営業時間
    7:00～21:00（L.O20:00）
    ※7:00～11:00はモーニングメニューのみ（平日）
  • 定休日：なし
  • 住所：〒251-0035 神奈川県藤沢市片瀬海岸1-13-18 ライオンズマンション片瀬江ノ島 1F
  • 電話番号：0466-47-8787
  • 公式サイト
  • Instagram

 

麹町珈琲　江ノ島店

片瀬江ノ島駅を出て右手に向かい、5分ほど歩いた建物の2階にあるのが麹町珈琲です。こちらはここ江ノ島のカフェには珍しく朝8時からオープンしており、11時まではモーニングメニューもあるのが嬉しいところ。メニューをざっと見たところ、スフレパンケーキが売りのお店のようです。

View this post on Instagram

A post shared by えみ (@matsuemi0730)

おおーおしゃれだな、と思いつつメニューのラミネート感に違和感を覚え調べてみたら、どうやらこの麹町珈琲はセブン＆アイホールディングスが運営しているようです。うん、安定感すごい。朝メニューが充実しているところや絶妙な値段設定など、しっかりマーケティングされている感じがします。まんまと企業の思う壺ですわ！

この日はサーフィン後だったため、時はすでにランチタイム。この日は「平飼い卵とローストビーフのサラダ〜バゲットつき」というおしゃクソランチを注文しました。

サラダ
意識たか〜い！

壁際の席には電源があるし、お店は広々しているので黙々と作業していてもあまり気兼ねがありません。この日は仕事だったため自分のWi-Fiを使っていたのですが、近くのお客さんが店員さんにWi-Fiパスワードを聞いていたので多分Wi-Fiあります（すみません不確定で）。

何より海沿いというのがいいですね！気持ちいいです。海見えないけど。

  • Wi-Fi　⭐︎⭐︎★
  • 電源　⭐︎★★（一部の席であり）
  • 営業時間　8:00～20:00（L.O 19:30）
  • 定休日：なし
  • 住所：〒251-0035 神奈川県藤沢市片瀬海岸2-18-17　ENOTOKI 2階
  • 電話番号：0466-24-7100
  • 公式サイト

GARB  江ノ島（ガーブエノシマ）

国道134号沿線。先ほどご紹介した麹町珈琲よりも駅側、Egg’s Things の隣の、THE BEACH HOUSE2・3階と屋上に鎮座しているのはレストラン GARBです。

レストランガーブ
出典：食べログ

くつろぎ感のあるテーブルと風の吹き抜ける心地よいテラス、ピザ釜を目の前にしたカウンターなどは、これぞまさに湘南！という感じ。お店では広いスペースを生かしてウェディングパーティも受け付けているようです。キッズルームもあるため子連れの方にも嬉しいお店ですね。

 

  • Wi-Fi　⭐︎★★★
  • 電源　⭐︎⭐︎⭐︎
  • 営業時間
    平日：11:30～14:30(L.O.) 15:30、17:00～20:00(L.O.) 21:00
    土日祝日：ランチ11:30～17:00、カフェ11:30〜20:00(L.O.）ディナー17:00～20:00(L.O.) 21:00(close)
    日曜営業
    定休日：不定休
  • 住所：〒251-0035 神奈川県藤沢市片瀬海岸2-17-23 THE BEACH HOUSE 2・3F 屋上
  • 電話番号：0466-22-3355
  • 公式サイト
  • Facebook

 

番外編　〜行ってないけど調べてみたお店

せっかく江ノ島に来ているならわざわざチェーン店行かんでも…派なので今回は訪れていませんが、江ノ島駅周辺にはチェーン店でWifiがあるお店もいくつかあります。

1年前（2020年6月あたり）までは江ノ島水族館前にスタバもあったんですけど、今回久しぶりに訪れたらものの見事に潰れていましたね…平日のお客さん少なかったんでしょうか。というわけでその他のお店もご紹介します。

McDonald’s（マクドナルド）

ハイ安定のマック。

駅からは徒歩15分ほどと少し距離がありますが、こちらは店内も広々していて24時間営業（コロナ禍では違うかな？）。Wi-Fiもあります。海で遊んだ後のハンバーガーって美味しいですよね。何より安定感あるし、フレンチフライ美味しいし。

バイクかっこいいですね〜

View this post on Instagram

A post shared by Hide Endo (@666chop)

他のサイトを拝見する限り、電源はなさそうです。ちょっとした作業に。

 

  • Wi-Fi　★★★
  • 電源　⭐︎⭐︎⭐︎
  • 営業時間：24時間営業
    定休日：なし
  • 住所：〒251-0037 神奈川県藤沢市鵠沼海岸1−11
  • 電話番号：0466-34-9010
  • 公式サイト
  • Instagram

 

モスカフェ　江ノ島店

こちらも安定！モスカフェです。朝マックも美味しいけど、朝モスも結構好きなんですよね。朝のバランスプレートとか、ファストフードっぽくなくて健康にいいことした気分になります。気休め〜！

こちらは朝7：00からオープンしているのもポイント。テラス席もあり、マックよりくつろげるのも良いですね。

店内
出典：食べログ

 

  • Wi-Fi　★★★
  • 電源　⭐︎⭐︎★（カウンター席のみ）
  • 営業時間：7:00〜24:00
    定休日：なし
  • 住所：〒251-0037 神奈川県藤沢市鵠沼海岸1-6-18
  • 電話番号：0466-33-8533
  • 公式サイト

Tully’s Coffee （タリーズコーヒー）

こちらは片瀬江ノ島駅というより江ノ電の方の江ノ島駅に近いカフェですが、歩いて1分という極近にタリーズがあります。Wi-Fiもあるし、席数も見たところ多いですし、作業をするには言うことなしですね。

タリーズ店内
出典：食べログ

2回席からは窓から見える景色も良さげです。

出入り口では大きなくまが出迎えてくれます。かわいい。

タリーズクマ
出典：Google マップ
  • Wi-Fi　★★★
  • 電源　⭐︎⭐︎⭐︎
  • 営業時間：24時間営業
    定休日：なし
  • 住所：〒251-0037 神奈川県藤沢市鵠沼海岸1−11
  • 電話番号：0466-34-9010
  • 公式サイト

 

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

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

【おすすめ】日本中期滞在の私が狭いシェアハウス暮らしで買ってよかったもの

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

いきなりですが、今日は日本に半年〜1年、中期滞在する方向けに、私が買って良かったものをご紹介します。

私は今年、COVIDやVISAの関係で、中〜長期的（でも一生じゃない）に日本に住むことを余儀なくされました。
余儀なくされた…とは言え、せっかく日本にいるなら日本生活を楽しみたい。
いずれは海外に出てしまうとは言え、日本にいる間だって、私の人生に他ならないんだもの。今この瞬間2021年に日本にいる時間を充実したものにしたい…！

と、そんな訳で、兼ねてから暮らしてみたかった浅草に引っ越してみました。1月中旬に引っ越し、今3カ月が経とうとしています。
浅草に引っ越してからの3カ月はと言えば、毎日観光気分。束の間だと思うと外食に使うお金も糸目がつかず、あれよあれよと言う間にぶくぶく太りました。OH YEAH.

引っ越し先は、家具などがついているシェアハウス。

シェアハウスを選んだのは、単純に引っ越し先として手軽だったこと、浅草で友達が欲しかったことなどが理由としてあります。
長く住む訳じゃないなら冷蔵庫や掃除機、洗濯機を買ってもしょうがないですもんね。

なので、これからおすすめする品々はあくまで

  • 家具付き物件
  • シェアハウス

などに住む方向け（もちろんそうじゃなくてもいいだろうけどｗ）です。

サステナブルというより、今！この瞬間を楽しみためのもの！としてのコスパで購入しておりますので、長く使いたいものを探している方にとっては、この記事は当てにならないかもしれません。（だって、電化製品なんかは電圧も違うしどうせ持っていけないんだもの…売るのも面倒くさい…）

 

日本中期滞在で買って良かったもの　〜家具編〜

ロフトベッド

日本にいる間は、楽しもうとは言ってもそれなりに節約もしたいなと考えていました。（わかっています。人間とは常に矛盾した存在なのです。）そんなわけで格安のシェアハウスを見つけて越したのですが、これがまた…狭い！！

なんと私の部屋、225cm*225cmという極小正方形！

ぬう、これではおちおち筋トレもできまい。そんなこんなで購入したのがこちらのロフトベッド。

スペースを活かすなら、基本は高さの有効活用です。

天井が狭くなると少し狭苦しい印象になるため、好みはあるでしょうが、私はこのベッド、買って本当に良かったと思っています。

COVIDの影響で私も在宅勤務が増えたのですが、1ルームに普通のベッドが鎮座しているとどうしても気軽に寝っ転がれてしまうんですよね。自分をモチベートするためにも、すぐに寝られない環境づくり＋スペースの有効活用ができるロフトベッドの購入は正解でした。

ロフトベッドはちょっとな〜という方はこちらもおすすめ。

これ実家で使っていたのですが、こちらはベッドとして使わない時はソファにできるのでスペースの有効活用が図れます。ロフトベッドより安定感もあるので、高所恐怖症の方にもおすすめ！（？）

ちょっといい照明

照明なんてね、どの部屋も勝手についてくるんですよ。別にわざわざ購入する必要なんてない。

でもね、私気づいちゃったんです。

部屋の満足度を手っ取り早く上げるには照明が一番だって。

 

いや本当に帰ってきて照明が白いとやっぱりちょっと味気ないもんですよ。とは言えスタンド式のライトは場所も食う。だったら！ということで、照明をシーリングライトにしてみました。これも大正解。

ロフトベッドから電気を消せるのもいいですし、真ん中どちらかの電球は一個外しておいておくと夜には本を読むのもちょうどいい。ベッド脇のライトいらず。

電球はこちらを買いました。

この電球は4個つきなんですけど、余った1個はIKEAで買ったライトにつけて使っています。仕事中はベッド下も明るくしたいからね！

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【LED電球 810lm 電球色 3000K 4球セット】
価格：3000円（税込、送料別) (2021/3/21時点)

楽天で購入

 

 

折りたたみデスク

私みたいな根なし草には折りたたみデスクがお似合いですよってに…

実は近々別の街への引越しへも考えていて（どうせなら他の街にも住んでみたいｗ）、そうした引越しのことなどを考えると折りたたみデスクはなかなか秀逸ですね。移動が楽ちん！

こちら、カラーも豊富なのでベッドの色と合わせてお部屋のコーディネートができるのも嬉しいポイントです。

 

S字フック（Sカン）

ロフトベッドを買うと、S字フックはめちゃくちゃ重宝します。ドライヤーをひっかけたり、コンセントをひっかけたり、干からびた花を逆さに吊ってドライフラワーにしたり…もう何から何までS字フック。あんまり雑多にかけると見た目がよろしくないですが、あって困るものではないですね。特に狭い部屋では！

S字フックなんて何でもいいんで、近くの100均などで買っていただいても良いかと思いますが、デザインの面で私が気に入ったのはIKEAのやつ。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【IKEA/イケア/通販】 GRUNDTAL S字フック, ステンレススチール/ 5 ピース(a)(20176381)
価格：459円（税込、送料別) (2021/3/21時点)

楽天で購入

 

ただ上記の商品だと、ベッドの太いアームにフィットしない場合もあるため、大きいものを買っておくと失敗がないはずです。

こちらなんか、黒くてデザイン的にもなかなか良いのではないでしょーか！

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【CURRO】 アイアン S字フック Lサイズ（5個入り）【メール便発送可】
価格：440円（税込、送料別) (2021/3/21時点)

楽天で購入

 

 

吊り下げ棚（ハンギングラック）

これはお部屋に吊り下げられるちょうど良い場所があれば、の話なのですが、ちょうど板一枚の棚で、高さが有効活用できそうならこちらがおすすめです。

「吊り下げ棚」や「ハンギングラック」など色々な名前で売っているので、探してみてください。これはいくつものラックを吊り下げられるのが良くて購入したのですが、1個だけで良ければseriaなんかにも安くで売っているので探してみてください。

タオルとか入れてます。無駄に縦幅のある本棚で有効活用できます。あとロフトベッドの下の網部分にも頑張れば取付けられます！

すき間収納

部屋が狭いと困りがちなのが、収納ですよね。持ち物に関しては私は割と身軽な方ですが、部屋は収納が皆無なので小さな隙間はとことん利用する所存です。

そこでデザイン・価格共に合格ラインに達したのがこちら

すき間収納で探すとどうしても、安いのは白いプラスチック製だったり、金属丸出し銀色だったりでしっくり来るのがなかったんですけど、これはデザイン的にもなかなかじゃあないですか！？

幅も、ちょうどロフトベッドの宮幅くらいなので、ロフトベッドの宮棚側の下部にこのすき間収納を置いて、その横にデスクを置くと細々としたものが置けて便利です。

日本中期滞在で買って良かったもの　〜番外編〜

まだまだおすすめしたいものがあるような気がしますが、ひとまずこれは買っといてなかなか良かったぞ！と思い出したものをご紹介しておきますね。

 

オシャレさと便利さの中庸を捉えたスリッパはこちらでござい〜

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

お掃除スリッパ 履くだけでお部屋がきれい [キャンセル・変更・返品不可]
価格：1832円（税込、送料無料) (2021/3/21時点)

楽天で購入

 

シェアハウスに住んでるとね、やっぱり床のぺたつきが気になったりするわけですよ。「あれ？トイレとか立ちションしてる人いるんじゃね？」「んでもってそのスリッパで入ったトイレの後にそのスリッパで自分の部屋に入りたくなくて？」といった理由で私は部屋用と共用部用とで別々のスリッパを購入しました。

これならモップ部分は丸洗いもできるし便利！

デザインもモップモップしていない！ちょうどいい！

 

冬は室内でこれ使ってます。可愛いしあったか。コスパも最強では！？

なんか、中期的に日本滞在する人向けというより狭い部屋に住む人向けの記事になってしまいました。今度はちゃんとおすすめのネット回線とかおうちの探し方とか書きますんで…！

 

GAIQ勉強の道のり – 上級者編レッスン1（データの収集と処理 ）

これまでに、QAIQ試験突破のためのGoogleアナリティクスアカデミーレッスン1〜4の内容を、問題と回答セットでご紹介しました。

https://nolyc.net/gaiqstudy-beginner1/

https://nolyc.net/gaiqstudy-beginner2/

https://nolyc.net/gaiqstudy-beginner3/

https://nolyc.net/gaiqstudy-beginner4/

Google アナリティクス アカデミーのGoogle アナリティクス上級者向けコースは、初級者向けコースと同様全4回から成っています。本記事では、ユニット末に用意されているテストの突破も視野に入れ、実際のテスト内容に解説をつけるという形でまとめました。

記事全体の構成は下記の通りです。

1ページ目：問題
2ページ目：問題＋回答

・Googleアナリティクス上級者向けコースのレッスン1の内容はこちらから
・問題ぶっ飛ばして解説から読みたいという方はこちらから

では早速行きましょう。

テスト 1　問題

1. ドメインが異なる複数のページにデフォルトの Google アナリティクス トラッキング コードを設置した場合、アナリティクスではそれらのユーザーとセッションが別々にカウントされます。

  • 正しい
  • 誤り

 

 

2. レポート用にデータ パラメータを渡す URL のことを、Google アナリティクスでは何と呼びますか。

  • A タグ
  • ヒット
  • ディメンション
  • 指標

 

 

3. Google アナリティクスのトラッキング コードからアナリティクスにページビュー ヒットが送信されるタイミングはいつですか。

  • ユーザーが動画をクリックしたとき
  • ユーザーがショッピング カートに商品を追加したとき
  • ユーザーがウェブサイトで検索するたび
  • ユーザーがウェブページを読み込むたび

 

 

4. Google アナリティクスのトラッキング コードからアナリティクスにイベントヒットが送信されるタイミングはいつですか。

  • ページビューがトラッキングされる操作をユーザーが行ったとき
  • ユーザーが予約サイトで予約を行うたび
  • ユーザーがカレンダーにイベントを追加するたび
  • イベントがトラッキングされる操作をユーザーが行うたび

 

 

5. Google アナリティクスでは何を使って新規ユーザーとリピーターを区別しますか。

（該当する回答をすべて選択してください）

  • ブラウザの Cookie
  • 人工知能
  • ランダムに割り当てられた一意の ID
  • 順番に割り当てられる一意の ID

 

 

6. ユーザーがアナリティクスの Cookie をブラウザから削除するとどうなりますか。

（該当する回答をすべて選択してください）

  • 新しいアナリティクス Cookie を設定するようにユーザーに通知される
  • トラッキング コードで収集された過去のデータとユーザーの行動データをアナリティクスで関連付けられなくなる
  • トラッキング対象のページが次に読み込まれたときに、一意の ID と Cookie が改めて設定される
  • アナリティクスがリピーターを自動的に認識するようになる

 

 

7. Google アナリティクスではブラウザやデバイスが変わっても、複数のセッションにわたってデフォルトでリピーターを認識できる。

  • 正しい
  • 誤り

 

 

8. Google アナリティクスのセッションは、デフォルトでは何分後にタイムアウトしますか。

  • 5
  • 15
  • 30
  • 60

 

 

9. インターネットに接続されたデバイス（POS システムなど）から Google アナリティクスにデータを送信するには、どの機能を使用すればよいですか。

  • データ インポート
  • ブラウザの Cookie
  • ネットワーク プロトコル
  • Measurement Protocol

 

 

10. 動画の再生として定義されるイベントの目標については、同じセッションでその動画が 3 回再生される場合、Google アナリティクスは目標コンバージョンの数を何回記録しますか。

  • 1 回
  • 2 回
  • 3 回
  • 4 回

 

 

11. Google アナリティクスの目標タイプはどれですか。

（該当する回答をすべて選択してください）

  • 到達ページ
  • ショッピング カート
  • ページビュー数 / スクリーン ビュー数（セッションあたり）
  • 滞在時間

 

 

12. フィルタを使ってビューから除外したデータは 30 日以内に回復できる。

  • 正しい
  • 誤り

 

 

13. ディメンションと指標に関して使用できるスコープは、次のうちのどれですか。

  • イベントレベル、セッション レベル、トランザクション レベルのスコープ
  • 地域レベル、滞在期間レベル、ユーザーレベルのスコープ
  • ヒットレベル、セッション レベル、ユーザーレベルのスコープ
  • イベントレベル、滞在期間レベル、トランザクション レベルのスコープ

 

 

14. 計測プランを定義する場合、ステップの順序はどうなりますか。

  • ビジネス目標 > KPI > 主要な操作
  • KPI > 主要な操作 > ビジネス目標
  • 主要な操作 > KPI > ビジネス目標
  • ビジネス目標 > 主要な操作 > KPI

 

 

15. 計測プランのマクロ コンバージョンとは何ですか。

  • ビジネスの成果測定で使用する指標データ
  • 定義されたビジネス目標を達成するためにユーザーにウェブサイトで行ってもらいたい主要な操作
  • ユーザーにウェブサイトで行ってもらいたい主要な操作につながる補助的な操作
  • Google アナリティクスで行う測定タスクのキーボード ショートカットのリスト

問題は以上です。次のページに、問題と回答のセットを記載しています。

Pages: Page 1, Page 2

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になったぞ！！