August 2021 – ﾉﾘｰｰｰﾝ’s Blog

[Sourcetree基礎]プロジェクトで使用する際の最初の一歩

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

Sourcetreeを使用したGitの管理方法について、会社でやったことを備忘録として残しておきます。

当方、Sourcetreeを使うのはもう10年以上前に遡りまして…記憶もクソもなかったため、使い方がおぼつかなくとても恥ずかしかったです、はい。

そもそもGitの管理はVSCodeでできるという話もありましょうが、Sourcetreeを使用しているところはまだまだたくさんあると想像しますので、この記事がいつかの誰か（主に自分ｗ）のためになればなと思います。

そもそもSourcetreeってなに？という方は、Googleさんに聞けば私なんぞのところより詳しい記事がたくさん転がっておりますのでそちらをご参照ください。

プロジェクトで主に必要なSourcetreeの使い方

プロジェクトのソースを自分のPCに引っ張ってきたい

「これ、プルして動かせるようにしておいて」

そう言われて渡されたのはあるURL。

https://xcompany. backlog.com/git/PROJECT/task.git

URLをブラウザで叩いてもアクセスできません。（←バカ〜！）

どないせーっちゅうんじゃ！とあわてふためき、調べつつもう一人の同僚に相談させてもらいつつ何とかプルして動かせるようにできました。

まずはSourcetreeを開きます。

メニューバー下の新規から「URLからクローン」を選択します。

こんな具合で保存先に空のディレクトリを指定し、「クローン」を押します。パス？何じゃら？という方は赤枠の「…」を選ぶと、GUI形式で保存先を指定します。空のファイルを作成しましょう。

クローンできました！あとは、VSCodeなり何なりでプロジェクトを開き、runさせるだけです。（これにまた時間がかかったのですが、こればっかりは開発環境に左右されますので個別のツールやアプリケーションのやり方を調べてください。

自分の作業範囲をメインブランチと分ける

さあ、プロジェクトをクローンできたのは良かったものの、このままローカルで自分の作業範囲を終えプッシュしたら袋叩きに会います。というわけで、新しく自分のブランチを切り（ブランチの作成）、切り替えましょう（チェックアウト）。

Sourcetreeのプロジェクト画面の右上アイコンの中の、「ブランチ」を選択します。

こんな感じでスラッシュを入れるとフォルダっぽく管理できます。

これで「ブランチを作成」ボタンを押すと、ブランチが作成できます。

該当ブランチへ切り替えるには、ダブルクリックするだけ。太字で◯がついているのが、現在選択されているブランチです。試しに何かファイルを作成し、コミットしてから他の作業ブランチに切り替えると、finderから確認できるファイル構成が変わっていることが確認できると思います。

自分の作業範囲をプロジェクトで共有

さて、適宜コミットしつつ、この作業範囲をプロジェクトで共有したいとするでしょう。実はこれ、あなたの役割ではございません。作成した作業範囲をプロジェクトにマージするのは、プロジェクトを管理している方のお仕事。

なぜかというと、競合が起こった際の直しをする必要があるから。

なので、あなたはひたすらコミットコミットコミット、プッシュ。絶対に、元のブランチにマージなどということはしてはなりません。袋叩きです。

キリのいいところまでできたらプロジェクト管理者に報告。管理者は都度あなたのブランチを確認し、必要に応じてマージして行きます。

会社の誰かが、自分の作業範囲に必要なソースをアップした

ある機能の実装作業を行うのに、「〇〇追加しといたからdevelop（マージ元）を自分のブランチにマージしといて〜」などと言われます。他の方が作った機能を、今自分が作業しているブランチに取り入れたいのですが、ここでただマージを行うと、自分のところで競合が起きないとも限りません。

そんなわけで、このような際には

まずはマージ元（今回は仮にdevelopとします）をプル
自分の作業ブランチ（上画像のfeature/20210823_invoiceDetail）から新規ブランチ（仮にtmpと名付けましょう）を作成
developをtmpへマージ
競合が起きないか確認
問題なければtmpをfeature/20210823_invoiceDetailへマージ

マージ元を選択した状態でマージ元を他へマージできないため、マージする際はマージ先を選択した状態で、マージ元を右クリックします。（伝わる？ｗ）

具体例で説明すると、上記ステップ3（developをtmpへマージ）において、developを選択した状態でdevelopをtmpへマージできないんです。ので、まずはtmpをダブルクリックし、ブランチの切り替えを行ってから(tmpが太字になって、◯がついていますね)、developを右クリックし、「developをtempにマージ」を選択します。

これを確認したら、同じように今度はブランチをfeature/20210823_invoiceDetailに切り替えて、tmpを右クリックしてtmpをfeature/20210823_invoiceDetailにマージします。

問題なくマージが完了したら、tmpを右クリックし、「強制的に削除」にチェックを入れ、削除しておきます。

まとめ

ひとまずはこんなもんでしょうか。

会社によってやり方は異なると思いますので、適宜先輩や上司に確認しながら進めるのが良いですよ。また、Gitはあくまで手動管理なので、人的ミスで消してしまったり、以前のバージョンに戻れなくなったりしてしまうこともあります。

そんな時はTimeMachine機能を使用し、いつでも以前の状態に簡単に戻れるよう保険をかけておきましょう（Macの場合です）。

こちらの記事が詳しかったですよ！

https://smart-phone.783783783.com/2015/02/23/mac-timemachine/

[Nuxt.js, Vue.js, ESLint]監視プロパティwatchではアロー関数が使えない

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

監視プロパティwatcherの挙動を勉強していて気づいたことを備忘録。

監視プロパティwatch内ではアロー関数を使うべきではない

nuxt.jsで、監視プロパティであるwatchのオプションdeepの挙動を調べていたら、怒られました。

<script>
export default {
  data() {
    return {
      colors: [
        { name: 'red' },
        { name: 'blue' },
        { name: 'green' },
      ],
    }
  },
  watch: {
    colors: {
      handler:(newValue, oldValue) => {
        console.log('updated!')
      },
      deep: true,
    },
  },
}
</script>

ESLint caution: You should not use an arrow function to define a watcher — はい

なぜなら、アロー関数はthisの挙動が変わってしまうため。アロー関数は親のコンテキストをバインドしており、thisの挙動が意図しているVueインスタンスとは異なってしまう。

This rules disallows using arrow functions to defined watcher.The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect.(see here for more details (opens new window))

eslint-plugin-vue

thisの挙動についてはここがわかりやすかったです！

https://qiita.com/mejileben/items/69e5facdb60781927929

というわけで、こう


<script>
export default {
  data() {
    return {
      colors: [
        { name: 'red' },
        { name: 'blue' },
        { name: 'green' },
      ],
    }
  },
  watch: {
    colors: {
      // handler:(newValue, oldValue) => {
      handler(newValue, oldValue) {
        console.log('updated!')
      },
      deep: true,
    },
  },
}
</script>

江ノ島観光はレンタルサイクルが便利だったー

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

友人と、「朝サーフィンしよう！」ということになり、朝6：00時に江ノ島のスクールを受けに行くことにしました。
しかし都内からではどう頑張っても6：00時には間に合わない…

ということで今回は由比ヶ浜で安い宿を取りました。

http://319.jp/b_and_b/yuigahama/

こちらの宿、2人、素泊まりで9千円とそこそこお手軽ですし、駅近。シャワー、トイレ、共に綺麗ですし、チェックインは9時まで受け付けています。
スタッフの方も親切ですし、コロナ禍出なければ1階は居酒屋が夜営業しているという好立地！コンビニも近い！！

そしてこの価格帯のゲストハウスだと大抵タオルも有料貸し出しなのですが、こちらは1枚まで無料でした。ロフトベッドが苦手な方にもおすすめです。

※写真は公式サイトから

当初、都内から朝一の波に乗るには始発が間に合わないという理由で由比ヶ浜に宿を宿を取ったはずだったのですが、なんと後から由比ヶ浜から江ノ島駅までは始発が6:00には間に合わないことが判明（！！）

アホですか、と。

自分の思い至らなさを恥じつつタクシーアプリなどを探してみても、やはり早朝は予約を受け付けておりません。念の為当日の朝も探してみたのですが、やはりこの時間のこの場所でのタクシーは見つかりませんでした。

仕方がないので稲村ヶ崎まで歩いて（30分）、そこから始発で江ノ島まで向かおうと4：50に宿を後にしたのですが、

コンビニで軽い朝食を調達した際、レンタルサイクルが私たちの目に止まる。

この手があったか。

早速チラシに記載のHELLO CYCLINGアプリをダウンロードし、登録。友人が先に登録し、私が招待コードを受け取る。これで30分無料乗車コードが利用できます。Win-winですね。短時間の利用料金は、15分70円です。12時間などの長時間は1,000円！あちこちまわりたい時には便利。

アプリのダウンロードはこちら

気が向いたら招待コード、お使いください。→ INFFQJgQuELN

しかもラッキーなことに、ちょうど2台停車していた自転車がフル充電でした。これで坂道の多い江ノ島への道も楽々です！

行きしなは朝日が登るのを拝めたり、由比ヶ浜や七里ヶ浜の美しい波を望みながら爽やかな朝の潮風に吹かれるなど、電車やタクシーを利用したのとはまた違った趣を楽しめました。というか最高でした。

夏場出なければ日中も使いたいです。電動アシスト、初めて使いましたけどすごいですね！感動しちゃいました。個人的にはいつも乗ってるクロスバイクの方が乗りやすいけどね（そりゃそーだ）

返却場所は地図から簡単に探せます。

マップの希望場所をつつくと（つつくと？）この場所は空き何台だよ〜と言ってくれます。

返却場所に返したらアプリでちょちょいと操作して、終了。

あまりに良かったので都内のレンタルサイクルもたまには利用してみようかな、という気になりました。まあ自分の自転車あるからいらないか。

という訳で今日ちょっと感動したレンタルサイクルの情報シェアでした。

[VSCode]Prettierの自動整形がうまくいかないんですけど！？　チートコード

Nuxt.jsを使用したプロジェクトで、ESLint（文法チェックツール）とPrettier（コードの自動整形ツール。コードフォーマッター）を使用しているのですが、上司と画面共有を行いながらコードレビューをしていた際、どうやらPrettierが機能していないことが発覚！（自分で気づかんかい）

今までESLint様のお眼鏡に叶うようちまちまコードを直していたのですが、Prettierさえ動いてくれればそんな手間暇とはオサラバ！！

ということでPrettier機能有効化までの道のりを残しておきたいと思います。

command + ,(Windows: Ctrl + ,)

で設定画面を開き

右上のこのマークをクリック

VSCodeのsettings.jsonファイルを開きます。

ESLint、Prettier関連の設定も含めたコード全部コピペしました（チートやん）。

{
    "php.executablePath": "/usr/bin/php",
    "php.validate.executablePath": "/usr/bin/php",
    "git.enabled": false,
    "git.path": "/usr/bin/git",
    "workbench.editor.enablePreview": false,
    "workbench.startupEditor": "newUntitledFile",
    "editor.tabCompletion": "on",
    "editor.quickSuggestionsDelay": 500,
    "editor.snippetSuggestions": "top",
    "editor.hover.enabled": false,
    "php-cs-fixer.rules": "@PSR2",
    "php-cs-fixer.formatHtml": true,
    "php-cs-fixer.executablePath": "/usr/local/bin/php-cs-fixer",
    "editor.minimap.enabled": false,
    "editor.insertSpaces": false,
    "editor.detectIndentation": false,
    "terminal.integrated.rendererType": "dom",
    "C_Cpp.updateChannel": "Insiders",
    "editor.acceptSuggestionOnEnter": "smart",
    "php-cs-fixer.onsave": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnPaste": true,
    /*
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    */
    "eslint.options": {
        "configFile": "./.eslintrc.js"
    },
    "editor.formatOnSave": false,
    // vueはfalse
    /*
    "[vue]": {
        "editor.formatOnSave": false,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    */
    "editor.codeActionsOnSaveTimeout": 3000,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.tslint": true,
        "source.fixAll": true
    },
    // "eslint.autoFixOnSave": true,
    /*
    "files.associations": {
        "*.vue": "vue"
    },
    */
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        /*
        {
            "language": "vue",
            "autoFix": true
        }
        */
    ],
    "javascript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "liveSassCompile.settings.generateMap": false,
    "terminal.integrated.copyOnSelection": true,
    "terminal.integrated.rightClickBehavior": "paste",
    "nativescript.analytics.enabled": false,
    "vscode-php-cs-fixer.toolPath": "/usr/local/bin/php-cs-fixer",
    "yaml.format.enable": true,
    "yaml.completion": true,
    "yaml.validate": true,
}

後から個別に調べるから今は許して…

個人ブログだから…

（懺悔）