Gitlabでリポジトリのprivateとpublicを切り替える方法

Gtihubでの方法は簡単に見つかるのですが、Gitlabはあまり見かけなかったので書いておきます。

1. 切り替えたいリポジトリのページの左カラムの「設定」>「一般」をクリック

2. "Visibility, project features, permissions"を展開する

3. "Project visibility"をprivate⇔publicを切り替える

以上です。

microCMSで取得したデータを参照して表示すると"undefined"になる

国産のヘッドレスCMS「microCMS」を使うときに、APIを叩いて取得したデータ（今回の場合個別の記事）を表示しようとすると"undefined"と怒られてしまうことがありました。

そのときのコードがこちら。テンプレートで、取得した記事のタイトルを表示させようとしています。

<template>
  <div class="container">
        <h2 class="title">{{ post.title }}</h2>
  </div>
</template>

<script>

export default {
  data() {
    return {
      post: null
    }
  },
  mounted() {
    this.fetchArticle()
  },
  methods: {
    // 個別の記事を取得
    fetchArticle() {
      axios
        .get(
          'https://shimotsu-test.microcms.io/api/v1/shimotsutest/' +
            this.$route.params.slug,
          {
            headers: { 'X-API-KEY': process.env.API_KEY }
          }
        )
        .then((res) => {
          this.post = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }
}
</script>

これで、取得した記事データpostからタイトルを抜き出して表示できるかと思ったのですが、titleがundefinedになるエラーが発生。

しばらく悩んでいたのですが、以下の方法で解決できました。

<template>
  <div class="container">
        <h2 class="title">{{ post.title }}</h2>
  </div>
</template>

<script>

export default {
  data() {
    return {
      post: {
        // 追記
        title: null
     }
    }
  },
  mounted() {
    this.fetchArticle()
  },
  methods: {
    // 個別の記事を取得
    fetchArticle() {
      axios
        .get(
          'https://shimotsu-test.microcms.io/api/v1/shimotsutest/' +
            this.$route.params.slug,
          {
            headers: { 'X-API-KEY': process.env.API_KEY }
          }
        )
        .then((res) => {
          this.post = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }
}
</script>

返ってくるデータはpostというオブジェクトに格納していたのですが、そこで使用するtitleプロパティを定義する必要があるみたいです（初期値としてnull）。
タイトルの他に、たとえば本文（body）を使いたいときは `body: null` として個別に定義していきます。

`this.post = res.data` の部分でpostにすべてのデータが格納されているので、そこからは好きに抜き出して使えると思っていたのですが、それだとちょっと問題があるようです。

githubでmasterブランチを作る方法（SourceTree）

developブランチとfeatureブランチのみで開発を進めていたプロジェクトで、途中ｍasterブランチを作る必要があったのですがちょっと迷ってしまったのでメモしておきます。なお、今回はSourceTreeを使います。

ローカルで「master」ブランチを作ってpushする

難しいことはなにもなくて、ローカルリポジトリで「master」というブランチを作り、そのままリモートリポジトリにPUSHすればOK。

てっきり「masterブランチを作成する」みたいなコマンドがあるかと思いきや、そういうのが一切なかったのでちょっと「あれ？」と悩んだのですが、解決策はシンプルでした。

masterブランチは、それだけで特別な意味を持つわけではない

masterブランチはたいていのリポジトリにあるコアなブランチかと思っていたのですが、どうやらそういうわけでもなさそうです。慣用的にマスターとなるブランチを「master」ブランチとして用意して運用するだけで、名前は別にどうだっていいんですね。

Google Maps APIで地図を正しく表示する

今おこなっているプロジェクトでGoogle Masp APIを使ってWebサイトに地図を表示させたのですが、カンプデータとおりに地図を”正確”に表示するのにちょっとしたコツが必要だったのでメモしておきます。
cloud.google.com

まず、表示自体はこのあたりの記事を参考にしてみてください。
hacknote.jp

Chrome拡張「Google Maps Platform API Checker」でちゃんと機能しているか確認する

まず、ここ1〜2年でGoogle Maps APIの仕様はちょこちょこ変わっており、普通に地図を表示させるだけでも従来の方法は間違っていたりするので、表示の有無をチェックするのをオススメします。
ここでは、Chrome拡張「Google Maps Platform API Checker」を使います。

インストールして、有効化すると、Google Maps APIが正しく機能できているかどうか判定できます。

▼こんな感じで歯抜けのAPIキーを含んだ形で結果を出力してくれます。

ジオコードはGoogle Mapからではなく外部ツールを活用する

Google Map上でターゲットとなる位置をクリックし、アクセスバーの値から緯度／経度（ジオコード）を取得し、以下のように設定したのですが、リロードするごとに微妙に位置が変わっちゃうという症状が発生しました。

const myLatLng = {
      lat: [任意の値],
      lng: [任意の値]
    }

そこで、外部のツールを使ってジオコードを取得するとこの問題は解消できました。今回は「Geocode Viewer」というツールを使いました。最初から横着せずにこちらを使えばよかった。

www.geosense.co.jp

地図のzoomは整数で指定する

カンプデータに合わせようと、zoomの値を小数点以下第一位までいじってみたのですが、こんな感じでぼやけてしまいました。

Google Maps APIで地図を表示するときZoomの値は整数にしなきゃいけないんだ。10.5とかにすると地図がボヤける。 pic.twitter.com/036338JZPK

— shimotsu (@shimotsu_) August 17, 2019

整数に戻すとちゃんとくっきり表示されたので、zoomの指定は整数で行うほうがよさそうです。

const map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: myLatLng
    })

javaScriptのモジュールパターンについて

JavaScriptでは関数内で定義した変数は外からアクセスできないようになっている（関数スコープ）。これを利用してプライベートな空間を作れる。

モジュールパターン に則ってモジュール化するメリットは以下のとおり。

• 機能ごとにモジュール化できるので、全体が見通しやすく、可読性が高い。
• 簡単にプライベートな空間が作れる（他で定義した関数などと干渉しなくなる）

 
qiita.com

参考記事にあるように、returnで公開する機能を限定できる。

var userModel = (function(){
    //private
    var users = [
        // ここに処理
    ];
    function add(name) {
       // ここに処理
    }
    function getList() {
       // ここに処理
    }
    function getUserById(id) {
       // ここに処理
    }
    return {
        add: add,
        getList: getList,
        getUserById: getUserById
    }
})();