momo

Gitのコマンドって使っていないとすぐ忘れちゃうよね。。

mito

そう！毎回「あれどうだっけ〜？」と調べています。

momo

逆引き辞書みたいなものがあると便利だよね！

mito

最近、Gitコマンドでよく使っているものを逆引き的にまとめてみました！

ブランチを作りながら移動する

git checkout -b [branch-name]

momo

移動の際、移動元のブランチで何か修正をしていた場合は、移動元の修正内容が引き継がれるよ！

作業ディレクトリにある変更を一時的に保存する

作業ディレクトリにある変更を一時的に保存し、作業ディレクトリをクリーン（最後のコミットの状態）に戻すために使用されます。

momo

異なるブランチに切り替える必要があるが、現在のブランチで完了していない作業がある場合などに便利だよ！

現在の変更をスタッシュに保存し、作業ディレクトリをクリーンな状態にする

git stash

momo

 git stash save "スタッシュの名前"とすると後から識別しやすくなるよ！

スタッシュから復元

最新のスタッシュ項目を現在のブランチに適用

git stash pop

momo

スタッシュされた変更のリストを表示するには git stash list で見るよ！

特定のスタッシュを適用したい場合は識別子を使用します。

git stash apply stash@{0}

リモートのブランチをローカルに持ってくる

「bug対応だからブランチきって対応してるよ〜、途中までcommitしたからそのブランチで続きの修正して！」と言われた時にどうぞ〜！

git checkout -b [local_branch]  origin/[remote_branch]

momo

local-branchとremot-branchは任意のbranch名に変えてね！

ローカルでまだコミットしていない修正を取り消す

mito

git pullで更新したコードに対して色々触っていたら、わからなくなったからgit pullした状態に戻したい！という時にどうぞ〜。

git reset --hard HEAD

コミット忘れがあるので統合したい！

コミットした後に、「あっ！このファイルも一緒にコミットしたかった…」という時にどうぞ〜。

コミットした後で、忘れていた変更や修正を加えたい場合、その変更をステージングへ

git add [file_name]

それから統合するコマンドを実行します。

git commit --amend

mito

最後のコミットのメッセージを変更したい場合、何もステージングせずに git commit --amend を実行します。これによりテキストエディタが開き、新しいコミットメッセージを入力できます。

自分のブランチ修正をoriginの最新をpullしてからpushしたい

最新の変更を取り込むことで早期に、コンフリクトを解消できます。また、mainブランチにマージする際に、マージプロセスがスムーズになります！

リモートブランチの最新情報を取得

git fetch

リモートリポジトリ（通常は origin）から最新のブランチ情報を取得します。これにより、ローカルリポジトリの情報が更新されますが、作業ブランチの内容は変更されません。

現在の作業ブランチに未コミットの変更やステージイングされている変更がないか確認

git status

mainブランチの最新をマージ

git merge --no-ff origin/main

リモートの develop ブランチ（origin/main）の最新内容を現在の作業ブランチにマージします。--no-ff オプションは「ノーファストフォワード」というマージオプションで、マージコミットを作成することを保証します。

マージ後の状態をプッシュ

git push origin [branch-name]

まとめ

よく使うけれど、忘れてしまいがちなコマンドをまとめてみました。

mito

その他、よく使うコマンドが増えたら更新していきます〜！

GitHub アイコン by Icons8

mito

Vueを学びコードを書く面白さに目覚め始めました！

いつもは2023年3月現在、推奨されているVue3でVite環境で開発していますが、バージョンを下げ、Vue2のclass-styleを使い、Vue-CLI環境で開発をしたのでVue3との違いも含めてまとめます。

momo

特にtypescriptのclass-styleの書き方が公式ドキュメントも1ページしかなく試行錯誤したのでもしお困りの方いらっしゃたら参考になればうれしいです！

開発環境

以下、使用したパッケージのバージョン情報です。

mito

Vue-CLIは古いバージョンを使用すると、ほかのパッケージとの互換性でエラーがでるので最新バージョンがよさそうです！

momo

エラーを読み解き解消を試みたけど、結局は最新にバージョン上げたら解決したね！

mito

そう！@types/vueを入れるとよさそうなどいろいろ試しましたが、パッケージの開発が終了していたり…。色々勉強になりました！

Vue-CLIでプロジェクトを作る

ターミナルで以下のコマンドを実行。

vue create sample-app

momo

sample-appの部分はプロジェクト名になるよ(好きな名前でOK)！

Presetを選んでいく

Manually select featuresを選び独自に設定していきます。

momo

色々選択項目が出てくるけど大事なことは、typescriptでclass-styleの書き方がしたいのでUse class-style component syntax? Yesとすること。

最後まで質問に答えるとインストールが始まります。

ローカルサーバーを立ち上げる

完了すると次の指示が表示されます。

ターミナルの指示通り進みます。

cd sample-app
npm run serve

mito

コンパイルが成功して問題もなし！という情報が出たら成功です！

無事、サイトが立ち上がりました！

Vue3で書いた場合

プロジェクト作成に時間がかかるのでその間にVue3で書いたコードを紹介します。

仕様はこちら↓

mito

要約すると、ユーザーが入力したテキストがローカルストレージに登録される。登録したものを削除できる。といった簡単な投稿アプリです。

<script setup lang="ts">
import { isTemplateNode } from "@vue/compiler-core";
import { ref, computed } from "vue";
const newsList = ref([
  {
    id: 0,
    description: "新しい靴を買ったこと",
  },
  {
    id: 1,
    description: "好きなアニメの続編が公開された",
  },
]);
const disabled = ref<boolean>(true);
const limitInputCheck = computed(() => {
  if (inputDescriotion.value.length >= 30 || inputDescriotion.value.length <= 0) {
    disabled.value = true;
  } else {
    disabled.value = false;
  }
  return inputDescriotion.value.length >= 20 ? "20文字以内でお願いします😮" : "";
});
const inputDescriotion = ref<string>("");
const input = () => {
  const news = { id: Date.now(), description: inputDescriotion.value };
  newsList.value.push(news);
  inputDescriotion.value = "";
};
const deleteItem = (id: number) => {
  newsList.value = newsList.value.filter((value) => {
    return value.id != id;
  });
};
</script>

<template>
  <div>
    <h1>🎉Post Good News of the week🎉</h1>
    <div class="l-container">
      <div class="l-container__form">
        <label for="post">今週のうれしかったこと、楽しかったことを共有してください</label>
        <input type="text" id="post" v-model="inputDescriotion" />
        <p v-if="limitInputCheck.length > 0" class="p-alert">{{ limitInputCheck }}</p>
        <button type="button" class="p-btn-post" @click="input" :disabled="disabled">Post</button>
      </div>
      <div class="l-container__list">
        <p v-if="newsList.length <= 0">投稿お待ちしています～😉</p>
        <ul class="p-list">
          <li v-for="item in newsList" :ley="item.id">
            <p>{{ item.description }}</p>

            <button type="button" class="p-btn-delete" @click="deleteItem(item.id)">Delete</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
input[type="text"] {
  padding: 0.5rem;
  font-size: 1.5rem;
  width: 500px;
}
.l-container__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.p-btn-post {
  background-color: #f70a8d;
  color: #fff;
}
.p-btn-delete {
  padding: 0 2rem;
  background-color: rgb(128, 194, 233);
  color: #fff;
}
.p-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.p-list li {
  padding: 1rem 0.5rem;
  background-color: rgb(203, 240, 252);
  font-weight: bold;
  width: 500px;
  display: flex;
  justify-content: space-between;
}
.p-alert {
  color: #f70a8d;
  font-weight: bold;
}
</style>

vue-vite-goodnews/goodnews-step1/src/App.vue

Vue2のclass-styleで書いた場合

親子間のデータの受け渡しも実装してみたかったので、コンポーネントを分けました。

簡単なディレクトリは

APP.vue

components

|_Form.vue

|_List.vue

となっています。

vueファイルの中身

<template>
  <div id="app">
    <h1>🎉Post Good News of the week🎉</h1>
    <FormItem @input-item="inputParentsItem($event)" />
    <List :postList="postList" @delete-item="deletParentItem($event)" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import FormItem from "./components/Form.vue";
import List from "./components/List.vue";
import { Post } from "./newsItem";

@Component({
  components: {
    FormItem,
    List,
  },
})
export default class App extends Vue {
  postList = [
    {
      id: 0,
      description: "新し靴を買ったこと",
    },
    {
      id: 1,
      description: "早起きできた",
    },
  ];

  inputParentsItem($event: string): void {
    const post: Post = { id: Date.now(), description: $event };
    this.postList.push(post);
  }
  deletParentItem($event: number): void {
    this.postList = this.postList.filter((val) => {
      return val.id != $event;
    });
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button {
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
}
</style>

vue-cli-goodnews-/blob/main/src/App.vue

<template>
  <div class="l-container__form">
    <label for="post">今週のうれしかったことを共有してください</label>
    <input type="text" id="post" v-model="inputDescription" />
    <p v-if="limitInputCheck" class="p-alert">{{ limitInputCheck }}</p>
    <button type="button" class="p-btn-post" @click="inputItem" :disabled="disabled">Post</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Emit } from "vue-property-decorator";
@Component
export default class Form extends Vue {
  inputDescription = "";
  disabled = true;
  //emit
  @Emit("input-item")
  inputItem(): string {
    return this.inputDescription;
  }
  //computed
  get limitInputCheck(): string | null {
    if (this.inputDescription.length >= 20 || this.inputDescription.length <= 0) {
      this.disabled = true;
    } else {
      this.disabled = false;
    }
    return this.inputDescription.length >= 20 ? "20文字以内でお願いします😮" : "";
  }
}
</script>

<style scoped>
input[type="text"] {
  padding: 0.5rem;
  font-size: 1.5rem;
  width: 500px;
}
button:disabled {
  border: none;
  filter: opacity(0.4);
  cursor: not-allowed;
}
.l-container__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.p-btn-post {
  background-color: #f70a8d;
  color: #fff;
}
.p-alert {
  color: #f70a8d;
  font-weight: bold;
}
</style>

vue-cli-goodnews-/blob/main/src/components/Form.vue

<template>
  <div class="l-container__list">
    <!-- <ul>
      <li v-for="post in postList" :key="post.id">{{ post.id }}</li>
    </ul> -->
    <p v-if="postList.length <= 0">投稿お待ちしています～😉</p>
    <ul class="p-list">
      <li v-for="post in postList" :key="post.id">
        <p>{{ post.description }}</p>
        <button type="button" class="p-btn-delete" @click="deleteItem(post.id, post.description)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from "vue-property-decorator";
import { Post } from "../newsItem";
@Component
export default class List extends Vue {
  @Prop() postList!: Post[];
  @Emit("delete-item")
  deleteItem(id: number, description: string): number | null {
    if (confirm(`${description}を削除してよいですか？`)) {
      return id;
    }
    return null;
  }
}
</script>

<style scoped>
.p-btn-delete {
  padding: 0 2rem;
  background-color: rgb(128, 194, 233);
  color: #fff;
}
.p-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.p-list li {
  padding: 1rem 0.5rem;
  background-color: rgb(203, 240, 252);
  font-weight: bold;
  width: 500px;
  display: flex;
  justify-content: space-between;
}
</style>

vue-cli-goodnews-/blob/main/src/components/List.vue

型定義ファイルの中身

export type Item = { [key: string]: string | number };
export type Post = {
  id: number;
  description: string;
};

vue-cli-goodnews-/blob/main/src/newsItem.ts

Vue2のclass-styleで書いたコードのポイント

mito

最初はvue3の書き方と全然違う！と戸惑いましたが、よく読んでいくと、理解できるようになりました。

ポイントは、以下2つだと思います。

もう少し詳しく書きます。

import { Component, Vue } from "vue-property-decorator";

とvue-property-decoratorからComponentとVueをインポートしています。vue-property-decoratorはTypeScript固有のclass構文を書くためのパッケージです。

momo

「Use class-style component syntax」をyesにすると使えるよ！

mito

property-decoratorによってさまざまなデコレーターが使えるようになっています

個人的に違うと感じたポイント

Netlifyでサイトを公開する(おまけ)

今回は静的サイトを簡単に公開できるnetlifyを使って公開してみました。

下準備(本番環境用にビルドする)

npm run build

を行い、作ったファイルを本番環境用にビルドします。

momo

本番公開用にdistフォルダが出来上がるよ！

netlifyにsign upする

mito

githubアカウントを使いました。

distフォルダ一式をアップロードする

Sitesタブに移動し、下準備で作成したdistファイルをドラッグ&ドロップでアップロードします。

mito

なんとそれだけでURLが発行されサイトが公開されます！

momo

URLを変更したい場合はSite settingsから変更できるよ！

公開したサイトはこちら↓

Special Thanks

以下サイトとUdemy教材をとても参考にさせていただきました。

mito

こんにちは、久々のJavaScriptの投稿です。

momo

今回はsortについてわかりやすく解説していくよ！

私自身sort関数を使う際に出てくるa,bやreturnの条件が毎回「どういう意味だっけ？？」となるのでわかりやすく図解も含めて解説していきます。

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

やりたいことの概要

mito

エクセルで例えると、リストデータを昇順にしたり降順にして見え方を変えるイメージです。

使用するJavaScriptの組み込みオブジェクト

Array.prototype.sort()

このまま引数なしで以下のようにソートすると昇順に並びます。

const originalAry = [2, 8, 3, 100, 70];
originalAry.sort();
console.log("originalAry引数なし", originalAry);
// 結果：2,3,8,70,100

mito

引数なしだと、昇順にしか並ばないため、降順にしたいや要素が文字の場合文字数で並び替えたいといった場合の並び替え方法を見ていきます。

sortの引数に関数を持たせる

sortは引数に関数を持たせることができます。

momo

このようなsortのようなオブジェクトを高階関数と呼ぶよ！

mito

map、filter、reduceなどの組み込みオブジェクトが同じ仲間です！

const originalAry = [2, 8, 3, 100, 7];
originalAry.sort((a, b) => {
  //昇順に並べたいとき
  if (a - b < 0) {
    return -1;
  } else if (a - b == 0) {
    return 0;
  } else if (a - b > 0) {
    return 1;
  }
});
console.log("originalAry", originalAry);
//結果：2,3,7,8,100

momo

sortの引数の中はアロー関数で記載しています。またいきなりアロー関数にaとbという引数がでてきてびっくりしたと思うのでまずはここから解説していくよ！

参考：MDN webDocs Array.prototype.sort()

つまり、昇順に並べたい場合は、aからb減算し、マイナスであれば、前に並べたいので-1を返し、プラスであれば、aはbより大きいということになり、bの後ろに並べたいので1を返します。

momo

文字だけだとわかりずらいと思うので、図を使って解説していくよ！

sortでは実際何が行われているのか？(図解)

次は、コンソールに出した結果を図解しながら解説します。

originalAry.sort((a, b) => {
  //昇順に並べたいとき
  console.log("比較開始ーーー");
  console.log("a", a);
  console.log("b", b);
  console.log(a - b);
  console.log("比較終了ーーー");
  if (a - b < 0) {
    return -1;
  } else if (a - b == 0) {
    return 0;
  } else if (a - b > 0) {
    return 1;
  }
});
console.log("originalAry", originalAry);
//結果：2,3,8,70,100

つまり　、、、

というような順番で並び換えが行われているようでした。

降順に並び替えてみる

momo

もし、降順に並べかえたい場合hどうなるかな？

const originalAry = [2, 8, 3, 100, 7];
originalAry.sort((a, b) => {
  //降順に並べたいとき
  console.log("比較開始ーーー");
  console.log("a", a);
  console.log("b", b);
  console.log(a - b);
  console.log("比較終了ーーー");
  if (a - b < 0) {
    return 1;
  } else if (a - b == 0) {
    return 0;
  } else if (a - b > 0) {
    return -1;
  }
});
console.log("originalAry", originalAry);
//結果：100,8,7,3,2

mito

retunの値を入れ替えればOKです。

もっと簡潔に書く

昇順の場合

ということなので、

originalAry.sort((a, b) => {
  //昇順の場合
  return a - b;
});
console.log("originalAry", originalAry);
//結果：2,3,4,8,100

降順

ということなので、

originalAry.sort((a, b) => {
  //降順の場合
  return b - a;
});
console.log("originalAry", originalAry);
//結果：100,8,7,3,2

図解してみると、

おまけ

const items = [
  { name: "banana", cost: 100 },
  { name: "suger", cost: 580 },
  { name: "chocolate", cost: 450 },
  { name: "milk", cost: 125 },
  { name: "egg", cost: 250 },
];

items.sort((a, b) => {
  let costA = a.cost;
  let costB = b.cost;
  return costB - costA;
});

console.log("値段の降順", items);

mito

今回は、マークダウン記法で書いたものをpdfに書きだす方法を解説していきます。

momo

テキストエディタのVisual Studio Codeを使うとプラグインで簡単にpdf化できるよ！

簡単なメモや議事録、資料作りもVisual Studio Codeを使ってマークダウン記法でできると効率的だと思い、実験中です。

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

マークダウンとは何か

前回こちらの記事で、マークダウン記法の書き方については書いています。

よく使うマークダウン記法まとめ 今回は、そんな知っていると案外使いどころの多いマークダウン記法についてよく使うものをまとめました。 それで...

mito

上記の記事を見ていただくとわかると思いますが、HTML似ていますが、タグを書くことなく簡略化した表現で文字の装飾ができます。

momo

マークアップは「<h3>見出し3</h3>｣といったタグと文字列を書き、文字列を装飾しますが、マークダウンは「***」と入力するだけでよいよ！

mito

つまり、キーボードのタイピング数が減って効率的ですね～。

あまり激しい装飾はできませんが、基本のシンプルな装飾であれば、マークダウン記法で事足りることが多いです。

書くときはマークダウン記法→共有はプレビュー画面

そんなとても効率的に書くことのできるマークダウンですが、通常の仕様書やメモなどのドキュメントであれば、マークダウンのまま共有…ではなく、プレビュー画面を共有したいとなります。

momo

そこで登場するのがVisual Studio Codeの拡張機能Markdown PDF

mito

「書くときはマークダウン記法で書き、共有はpdfで書きだして共有する」を実現してくれる拡張機能です。

pdf書き出しを行うMarkdown PDFの使い方

momo

それではMarkdown PDFのインストールからpdf書き出しまでやってみよう！

まとめ

いかがだったでしょうか。もっと工夫をすると、色を変えたり、背景画像の差し込みをしたりなどいろいろできると思います。

mito

夢が広がりますね！

mito

マークダウンで書いたものをpdfで書きだせることに気がついてからマークダウンをよく使うようになりました！

momo

タスク管理などもできるNotionもマークダウン記法が書けるよね

今回は、そんな知っていると案外使いどころの多いマークダウン記法についてよく使うものをまとめました。

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

やりたいこと一覧

• 見出し
• リスト・番号付きリスト
• 空行・改行
• インラインの表示
• コードの挿入
• リンクの挿入
• 画像の挿入
• 引用
• テーブル挿入
• 太文字
• 斜体
• 打消し線
• ボーダー線

使用頻度の高い上記について書き方を紹介します。

作成環境

VScodeで「test.md」というファイルを作り、プレビュー表示を確認しながら作成します。

見出し

#の数で見出しの階層を表します。#6まであります。

momo

#の後ろは半角スペースを空けてね！

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

リスト・番号付きリスト

momo

-(ハイフン)や.(ピリオド)の後ろは半角スペースを空けてね！

リスト

- リスト
- リスト
- リスト

番号付きリスト

1. リスト
2. リスト
3. リスト

momo

番号付きリストの場合、番号はなんでもいいよ。

入れ子構造にしたいときはtabをいれる。

momo

番号付きリストの場合、tab二つだよ。

- リスト
  - リスト
  - リスト
- リスト
- リスト

1. リスト
    1. リスト
   1. リスト
1. リスト

空行・改行

文末にスペース2つ入れて改行。空行を1行入れる。

コードのインラインの表示

`tree`コマンドを実行

コードの挿入

バッククウォート(`)3つで囲みます。

momo

言語名を書くことで、適切な色付けをしてくれるよ！

```typescript
let greeting = (name: string): void => {
  console.log(`Hello,{$name}!`);
};
```

リンクの挿入

[参考URL](https://mito-lab.com/)

画像の挿入


![step1-6.png](./img/step1-6.png)

引用

>　引用　mito-labより

テーブル挿入

| 種類           | 概要                                       |
| -------------- | ------------------------------------------ |
| 仮パラメーター | 関数宣言時に渡される値(パラメーター)       |
| 実パラメーター | 関数を呼び出すときに渡す値(実パラメーター) |
| 戻り値         | 関数が返す値                               |

左寄せ「:–」

右寄せ「-:」

中央寄せ「:-:」

太文字

**太字テキスト**

斜体

*italic 斜体*

打消し線

~~打消し線~~

ボーダー線

---

まとめ&補足

Web上で直接打ち込み確認できるプレビューサイトもあります。

https://markdownlivepreview.com/

mito

VSCodeでマークダウン記法を書く場合は、拡張機能の「Markdown All in One」を入れておくとさらに使い勝手が向上します。

PHPを使って制作をしている中で、お問い合わせフォームを作りたいということ、よくあると思います。

momo

設定をしないとローカル環境からはメール送信の確認はできないよ！

mito

設定ファイルをいじると、ローカル環境からでもメール送信テストが可能になります。

今回は、ローカル環境からメールを送信するための設定方法を確認します。

環境の確認

使うツール、サービス

momo

Postfixとはメールを転送するソフトウェアのことだよ！Macではデフォルトでインストールされているよ！

mito

今回はこのPostfixの設定を変えることでローカルのMAMPからでもメール送信可能にしていきます。

設定手順

MAMPを止める

MAMPが立ち上がっている場合はMAMPをStopしてください。

Gmailのアプリパスワードを取得する

momo

アプリパスワードとは、安全性の低いアプリやデバイスにGoogleアカウントへアクセスを許可する16桁のパスコードだよ！

mito

つまりGmailはメールを送信する際に認証が必要になるということです。

momo

アプリパスワードが使えないエラーが出る人は、アカウントの2段階認証を行なっていないことが原因だと思うのでまずは2段階認証の設定をしてね！

Postfixの設定にgmail情報を追加する

修正ファイルは、以下のファイルパスにあるファイルです。

取得したアプリパスワードを記述するためのファイル作成

momo

ここまででPostfixの設定は終わりだよ

テストメールの送信

きちんと設定ができたか確認します。

ターミナルから、以下を実行します。

date | mail -s test 受信したいアドレス@gmail.com

送信日時が書かれたメールが届いたら設定はOKです。

momo

お疲れ様でした〜。

momo

前回、GitHubを使ってコードのバージョン管理する方法をお伝えしました。

mito

今回は、「管理」しているものを「納品」するためにコマンドを使う方法ですね！

momo

そう！少し抵抗がる人がいるかもしれないけれど、黒い画面（ターミナルor コマンドプロンプト）を使って必要な差分ファイルのみを納品していく方法を解説するよ！

【GitHubDesktop】Githubでコードの履歴を管理する〜基本編〜 Gitとは CUIツール（コマンドラインツール）の一種です。 ソース...

なぜ、差分ファイルの抽出を自動化するのか？

1、2個のファイルを納品する場合は良いのですが、10個以上のファイルを納品する場合、目視＆手作業で行っていると納品ミスの原因になります。

momo

極力楽をしつつ、ミスを減らしたいよね

安全に、確実に、効率的に納品ファイルを作成するために自動化は必要だと思います。

差分ファイルのリストを作る方法

まずは、納品するファイルのリストを作る方法です。

コマンドで、2つの差分をとります。

mito

「コミット1」「コミット2」の部分は抽出したい差分が抽出できるように指定するよ

mito

例えば、コミットIDなどですね！

ローカルリポジトリのファイルパスでターミナルを立ち上げる

macの場合での差分リスト抽出を解説します。

ローカルリポジトリのフォルダ名を右クリックし、「フォルダに新規ターミナル」をクリックします。

momo

ターミナルが立ち上がるね！

差分を指定する

今回は、前回納品したものに対して、新しく納品する分のみ差分を抽出したいので、コミットIDを指定しました。

mito

前方に書くコミットID(①コミットID)の方が古いバージョンです

momo

コミットID以外でもブランチ名やタグ名などで指定可能だよ

コマンド入力後、enterキーを押す

mito

非表示にしている部分もあるのでわかりづらいとは思いますが、今回は2つのhtmlファイルが取得できています。

差分ファイル名をエクセルなどにコピー

差分ファイル名を確認し、取得したファイル名をコピ＆ペーストでエクセルなどに貼り付けたら完成です。

差分抽出したファイルをzipでまとめる

こちらがいわゆる、自動で納品ファイルを作る方法になります。

mito

この様に書くと先ほど一覧で取得したファイルの実態を取得し、zip化してくれます。

momo

かなり便利だね！

手順は先ほどと同じく、ターミナルを立ち上げ、上記のコマンドを実行します。

momo

zipファイルができる場所は、ファイルパスとして指定しているローカル時ポジトリの配下だよ！

コマンドの解説

ファイルをアーカイブするコマンド

差分を抽出するコマンド

A=追加、C=コピー、M=変更、R=リネームのステータスファイルのみ返すというオプションコマンド

「archive.zip」というファイル名で生成するというオプションコマンド

まとめ

コマンドを使うことで、納品作業が楽になり、ミスも減ると思います。

mito

一度公開したサイトについて、ページ追加やページ内のデザイン変更など更新作業が多く発生してしまって、過去の状態が分からなくなってしまう..ということありませんか？

momo

そんな、コードのバージョンを管理したい時に便利なサービスがGithubだよ！

mito

例えば、お店のサイトを公開した後に、ヘッダーの上に長期休暇のアラートを追加、それをまた戻したいという時に、過去の状態のバージョンを置いておけば、すぐに元に戻せますね！

momo

今回コードをバージョン管理するにあたり、GitHubDeskTop、Github、Gitと様々な用語が出てくるので一つ一つ用語説明していくよ！

mito

ちなみに..わかりやすくコードのバージョン管理としていますが、コード以外でもバージョン管理は可能です！

Gitとは

CUIツール（コマンドラインツール）の一種です。

ソースコードをいつ誰がどこを編集したのか、最新のバージョンはどれかを管理するツールとして作られました

momo

コマンドプロンプト、ターミナルと呼ばれる（黒い画面）からキーボードでコマンドを入力して実行するツールですね！

mito

つまりエンジニア、コーダにとってとても便利ということです。

GitHubとは

OOSホスティングサービスである

OOSホスティングサービスとは、Open-Source Softwareの略で、ソフトウェア開発のためのソースのバージョンや修正を共有するWebサービスです。

momo

つまり、自分が作成したソースを公開し、他も閲覧＆編集可能にするプラットフォームのようなイメージだね

mito

他の人も編集できる..ということで誰がいつどんな修正をしたか？がわかるようにバージョンの管理が重要ということですね

momo

オープンに公開しない場合でも、初期状態に戻したい時など仕様変更を考えるとバージョン管理は重要だね

Gitをまとめたサービスである

GitHubということなので、そのまま解釈するとGitの集まりです。

momo

正確には、Gitのリポジトリーをまとめたサービスと言われたりします、

GitHubを使う上で理解しておきたい用語

mito

GitHubを使っていると様々なカタカナ用語がでてきます。

momo

まず用語の意味から抑えていこう！

リポジトリ （repository）

リポジトリーとはファイルやディレクトリの状態を保存する場所のようなものです。

管理したいディレクトリをリポジトリと連携させることで、そのディレクトリ内のファイルの変更履歴を記録し、保存できます。

mito

つまり、自分のPCの一部のフォルダをリポジトリと連携させてバージョン管理機能を活用するというイメージです。

ローカルリポジトリ

自分のPC上のリポジトリ

リモートリポジトリ

GitHub上のリポジトリ

momo

つまり状況によっては、ローカルリポジトリとリモートリポジトリでコードの内容が異なるということがあるね。

操作上の名称

mito

GitHubを使う上で必要になる用語を解説します。

クローン（clone）

リモートリポジトリをローカルにダウンロードするコマンドです。その時の最新版のデータと変更履歴などがまとまっていますので、クローンしたタイミングのリモートリポジトリと全く同じ環境をローカルに作成します。これにより、他の人の影響を受けずに自分のPCで作業ができるようになります。

プル（pull）

ローカルリポジトリをリモートリポジトリと同期させること

momo

つまり、ローカルとリモートの両方の状態を合わせる作業です。

コミット（commit）

ファイルの追加や変更の履歴をリポジトリに登録すること。

プッシュ（push）

ファイルの追加や変更の履歴をリモートリポジトリに送信・反映すること。

ブランチ（branch）

作業を細かく枝分かれさせて、それぞれで開発を進めていくためのもの。

プルリクエスト（pull request）

ローカルリポジトリの変更を他の人に確認してもらうこと。

マージ（marge）

枝分かれしたブランチを統合させること。

GitHubDesktopとは

GitHubを使うにあたり、ほぼ操作の知識なく簡単に使えるデスクトップ用のアプリケーションです。

mito

コマンドが打てない人でも気軽に使うことができそうですね。

momo

ここでは、GitHubにはアカウントを作った状態として解説します。

mito

GitHubのアカウントはこちらからusername、emial、passを設定すると作成できます。

GitHubDesktopをダウンロードする

GitHub Desktopの公式ページからダウンロードします。

インストール後、アイコンをダブルクリックし、起動させます。

GitHubとGitHubDesktopを連携させる

GitHubのアカウントでログインするボタンをクリックします。

「Authorize desktop」をクリックします。

「GitHub Desktop.appを開く」をクリックします。

「Use my GitHub account name and email address」にチェックをしている状態でgithubのName とEmailを入力し、「Continue」ボタンをクリックします。

できました！

GitHubでリポジトリを作成する

GitHub上でバージョン管理を行いたいリポジトリを作成します。

momo

イメージとして、ローカルで作成したWebサイト1つ分のフォルダがまるっとGitHubにも共有されるイメージです。

GitHub上でリポジトリを作成

Repositoriesの右にある「New」ボタンをクリックします。

リポジトリの設定

リポジトリー名や説明文を書きます。記入できたら「Create repository」をクリックします。

mito

リポジトリー自体を公開したくない場合はprivateの設定で、自分しか閲覧できない状態を作れるよ

ローカルリポジトリの設定

GitHub上にリポジトリができました。次は、ローカルにもリポジトリを作り、GitHubとつないでいきます。

GitHub上からデスクトップリポジトリ設定を立ち上げる

先ほどGitHubで作成したリポジトリにある「set up in DeskTop」をクリックします。

Clone a Repositoryからローカルのファイルパスを指定

ローカルで作成したWebサイトのフォルダ最上位を指定します。入力を終えたら「Clone」をクリック。

「GitHub Desktop.appを開く」をクリック

ローカルとリモートの繋がりを確認

ローカルとリモートのリポジトリが繋がりました。

おまけの工程

mito

もともと、フォルダに入れておいても良いのですが、リポジトリ作成後にローカルリポジトリの配下にファイルを移動させました。

コミットする

ファイルが認識されると添付の様な表示になります。summaryとDescriptionを入力し「Commit to main」をクリック

リモートリポジトリへプッシュする

ローカルリポジトリにコミットしたものをリモートリポジトリへプッシュします。

「Publish branch」を押す

momo

押し忘れると、リモートリポジトリへは反映されないので注意！

GitHub上でリポジトリを確認

GitHub上でも履歴が表示され、pushしたファイル名および、中身を確認することができます。

修正内容を反映させたいとき

ローカルで編集を加えるごとに、リモートリポジトリとのコードと差が生まれるのでGitHub Desktopで確認すると差分が見られます。

momo

差分を確認し、間違いなければ、先ほどと同じ様にcommit→pushをするよ！

まとめ

GitHubでコードの履歴を管理することで、Web制作の運用案件の管理がグッと楽になると思います。

mito

最近、静的サイト以外にも、データーベースから値を取得し表示するなど、少し複雑なロジックが入ったアプリケーションを作りたいな..と思うようになりました。

momo

検索結果を検索条件に合わせて表示する。ユーザーが入力したコメントをDBに保管し、表示するなどできると制作の幅が広がるね！

ということで、webアプリを作ろうと題し、webアプリ作成に必要な基礎知識を備忘録的にまとめていこうと思います。

Webアプリケーションに必要な開発環境とは？

Webアプリケーションのポイントはサーバサイドプログラムと呼ばれるプログラムです。

momo

ブラウザのリクエストによって、サーバ上で動作し、その実行結果をHTMLでレスポンスするよ！

mito

ユーザーがブラウザを使い、何かしらのサーバプログラムの実行を指令してその結果をまたブラウザ表示で確認するという流れでWebアプリケーションは動くのですね。

momo

サーバサイドプログラムのしくみを実現する技術はいくつかありますが、サーバサイドプログラムをJavaで開発する場合、「サーブレット」と「JSP」という技術を使うよ！

mito

通常のHTMLのコードと同じようにフォルダごとサーバにアップするとブラウザで確認できるのですか？

momo

通常のWebサーバはHTTPを使ってブラウザと通信する機能は持っているけれど、プログラムを実行する機能は持っていません

mito

では、Webアプリはフォルダをサーバアップしただけでは動かないと言うことですか？

momo

はい！なので、Webサーバーに加え、プログラムを実行する機能（実行環境）を持った（Web）アプリケーションサーバが必要になります。

特にサーブレットクラスの実行環境をサーブレットコンテナといいます。

mito

ということは..Webアプリケーションを開発するには、サーブレットコンテナをもつ（Web）アプリケーションサーバーが必要なんですね！

mito

Webアプリケーションを作成するために、2種類の機能が必要ということはわかりました。で..どうやってそのサーバを用意したら良いのでしょう？

momo

今回は統合開発環境Eclipse(イクリプス)にPleiades(プレアデス)というソフトウェアをインストールして環境を作ります。

mito

ややこしいので用語説明挟みます！

mito

つまり、EclipseとPleiadesの設定を行えば開発ができるということですね！

Eclipseのインストール

こちらより最新のEclipseをダウンロードします。

mito

以下、mac PCのやり方です。

momo

JavaのFull Editionをダウンロードしましょう！

Pleiadesのインストール

Eclipseの実行

任意の場所に展開したEclipse.appをダブルクリックし、実行します。

日本語化されたWorkspaceが表示されていればOKです。

参考図書はこちらです！

–End–

mito

今ブラウザ表示しているこのページ全てが写っているキャプチャが欲しい！！そんなことありませんか？

momo

キャプチャを取得しようとした際に、画面サイズより大きいところは取得できない..という時もあるよね

そんな方に今回は、chromeの検証ツールを使った簡単にフルスクリーンショット（全画面キャプチャ）が撮れる方法をご紹介します。

• 拡張機能なし
• さくっと簡単に

mito

皆さんもぜひこの方法で一瞬で全画面キャプチャを取得してみてください！

Google Chromeで該当のWebサイトを表示する

Google Chromeで該当のWebサイトを表示し、右クリック→検証で検証ツールを開く。

もしくは、以下のショートカットキーでも開けます。

検証ツールの詳細機能を表示

ショートカットキーを使い、検索窓を表示させます。

検索窓にfullと入力

検索窓に「full」と入力することで候補が絞られ、フルスクリーンショット機能のみが表示されます。

mito

そのままEnterを押してください。

momo

数秒で保存されるよ！（ローカル環境へダウンロード）

ダウンロード完了

ダンロードしたものを開くとフルスクリーン（全画面キャプチャ）が表示されます。

フルスクリーン（全画面キャプチャ）は容量が大きくなるので、適宜圧縮するのことをおすすめします。

【Webサービス】画像圧縮をブラウザ上で簡単に、無料でできる便利なツール 今回は、Webサービスを使って、 ブラウザ上で、 簡単に、 無料で 画像を軽...

おまけ

オンラインサービスの画像圧縮サービスではサイズが大きすぎて圧縮できない..と言う場合には、こちらもおすすめです。

momo

インストールして使う、無料の画像圧縮ツールだよ！

–End–