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

お仕事PCを購入してから早3年半。今回また新たにPCを買い換えました。

mito

どんなスペックのPCをなぜ買い替えたのか？を備忘録も兼ねて書いていこうと思います！

momo

ご自身の状況や用途に合わせて参考にしてみてね！

ちなみに前回の記事はこちらです。

https://mito-lab.com/work-tool-pc/

買い替え前のMacBook Pro 15-inch,2019のスペック

momo

改めてこんなスペックでした！

mito

ポイントとしては、Adobe系のツールやその他のツールを複数立ち上げてもサクサク動作するようにというところで、ストレージとメモリを増設しました。

買い替え前のMacの問題点

ストレージとメモリを増設したことで、画面が固まることなくサクサク動くようになりました。

ただ、新たな問題点として、PCが熱い！！！！

mito

真夏には50°超えているのでは？？という熱さになって故障が心配になるくらいでした。

momo

色々調べた結果、処理が増えるとCPUをたくさん使うので、それが原因のようだよ。

直接的な原因は、デザインツールとプログラム制作で開発環境を作って仮想サーバーを立ち上げる…ということをやっていたからかと思います。

ひとまずの解決策として、デザインをするときはこのMacのPC、プログラミングをする時はWindowsのPCと分けていました。

買い替えに踏み切った理由

デザインとプログラミングでPCを分ける戦略で何とか使い続けていたのですが、以下のような理由で買い替えに踏み切りました。

• デザインもプログラミングも1つのPCで完結させたい
• プログラミングで開発環境を構築する際にMacでないと上手くいかない、Macの方がやりやすいという事態

mito

ということで熱暴走を起こさない、高スペックなPCに乗り換えることにしました！

買い替え後14インチMacBook Pro(M2 Pro)のスペックについて

新しいPCのスペックは以下です。

mito

ディスプレイのサイズは小さくなりましたが、プロセッサがApple M2 Proということで処理能力が大幅にアップしました。

使用レビュー

ひとまず、AdobeのPhotoshop、Illustratorを立ち上げ、slackも立ち上げて、Google Chromeも2つのアカウントで立ち上げ、Dockerを使っていても特に熱暴走もなくスムーズです。

momo

左が新PCで右が旧PCだよ！

かなり初歩的なミスではあったけど、つらつら要領を得ない質問とコードも適当にペタッと貼って質問するとど真ん中来るような回答..。

そうだ、型定義がおかしかったんだ…
これはもう相棒！！ pic.twitter.com/0vMy6AmpYR

— mito@『デザインのネタ帳 プロ並みに使える文字デザイン』発売中 (@mito_works) March 2, 2023

mito

初歩的なプログラムのミスもすぐに解析してくれる！

ということで、これからの未来を考えるにあたって、一度過去を振り返ってみようと思い、アルビン・トフラーの「第三の波」という本を読みました。

mito

1980年に出版されている本ですが全く古さを感じさせない本です。

mito

人類誕生から、農耕時代、産業時代、情報時代のそれぞれの時代の節目を波と表現してわかりやすく何がどう変化したか？が書かれているよ！

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

テーマ

人類の歴史をイノベーションという観点から総合的な考察でひも解いています。

世界はけっしてまっとうな道をはずれて、狂気のなかをさまよっているわけではなく、一見したところ無意味な出来事が次から次へと不協和音を立てているようでありながら、実は、それらの背後に驚くべき傾向、十分希望を持たせるに足る傾向が読み取れるというのが本書の主張である。本書を通じて私は、そうした希望につながる傾向について語ってみたいのだ。

過去の時代のイノベーションを考察し、未来来るべきイノベーションの波をポジティブに考察しています。

農耕時代のキーワード(第一の波)

約1万年前の農耕時代。人々はどんな生活をしてその前の狩猟時代とはどんな変化でくらしていたのか？

食料を探すことに大半の時間を使う生き方から計画的に生産する時代へ

mito

探索から生産への変化はかなり大きいですよね。

それによる変化として、

• 一か所に定住するようになった
• どこにだれが住んでいるということも認識できるようになり、情報交換をするようになった
• エネルギー源は、人間や動物の筋力と、太陽熱、風力、水力といった自然の力
• 全て再生可能なエネルギー源で循環していた
• 自ら生産し、自ら消費するスタイル
• 計画的に生産できるようになったことから余暇が生まれ、文化が生まれた

産業時代のキーワード(第二の波)

約200年前の産業時代。

再生不可能なエネルギー源を使用し、急激な経済成長を実現させた。

mito

科学技術の発展は大きいですよね。

分業化

家族単位で生活をし、小さな共同体の中で生きていた人々ですが、この時代、教育は学校、看護は病院、仕事は工場など人々は画一的に否応なしに分けられるようになりました。

必要な労働力は家庭から工場へ移動したため、大家族である必要がなく、核家族化が進みました。

mito

この大家族から核家族への移行の中でたくさんの悲劇的な事件もあったようです。

集中化

人間の筋力やどこにでもある自然エネルギー、資源、燃料を使っていた時代からほんの数種の特定の場所にあるエネルギー、資源(化石燃料、石炭)へ移行しました。

また、都市に工場や政治的な機能など一点集中としてすべてが集められうようになりました。

同時化・同質化

仕事＝工場でものを生産する、つまり機械と一緒に機械のリズムに合わせて機械のように働くことを求められていた時代。大事な価値観は以下3つに集約されています。

• 時間厳守ができる
• 反復作業に耐えられる
• 服従(上司には逆らわずに黙々と働く)

mito

学校教育も上記3つを徹底的に教えるような内容。現在でもその面影は無きにしも非ずな気がします…

momo

みんなが同じことを同じようにできることを望まれた時代だね。

また、生活スタイル、人生における変化もみな似たり寄ったりになり、この時代からラッシュや受験戦争が生まれました。

規格化

人もどんどん同じようなライフスタイル、同じようなスキルセット..と機械のように同質化していった時代、物の価値も規格化されていきました。

• 金銭という単位での取引
• 大きさ、長さなどの統一的な単位
• 作業工程のマニュアル化
• 製品の規格化

これにより物事はどんどん効率的に処理され、意思決定の時間は短く、生産できるようになりました。

極大化

上記、規格化による効率化はどこにつながっているか？というと「大量生産大量消費」。「大きいことはよいことだ」という価値観につながっていきます。

momo

統一的な単位で、機械的に作られたものを人々は大量に生産し、またそれを大量に消費していったんだね。

第二の波の問題点

第二の波の問題点として

生産者と消費者が分断された

農耕時代、人々は基本的に自給自足で過ごしていました。

産業時代になると、大量の食糧、日用品、サービスがほとんどすべて売買や物々交換を目的として、生産、提供されるようになります。生産者自身とその家族が自分で消費するためにだけ物を作るということは事実上なくなりました。

momo

ほぼ自給自足で暮らす人がいなくなってしまって、自分以外の人によって提供されるサービスに依存して生活するようになったんだね。

消費者はできるだけ安い製品を求め、生産者は高い賃金を求める。また、一人の中に生産者と消費者という2つの相反する性格を備えた人間を作り出したと著者は書いています。

• 個人的な満足は後回しにし、他者貢献に徹する生産者
• 慎重に行動するよりは、欲望に身を任せて個人的な楽しみを追求する消費者

男女の役割の分離もこの時代に生まれたといわれています。

mito

分離するということは、対立関係が生まる要因なんだね！

GNPなどの数値は経済活動のみにフォーカスされており、生きるための本質的な活動は除かれている

GNP(国内外で生産した財やサービスによって得た収入の総額)という新たな指標で、評価し、この数値を上げるために競争を激化させていきました。

その結果、給与の対象にならない、子育てや家事、大量生産大量消費の背後にあった生態系の破壊や公害病などは軽視する結果となります。

mito

これが現在の問題として語られる、エネルギー資源の枯渇、戦争、環境破壊、未曽有の自然災害、貧困や飢餓などにつながっているんだね。

少数のエネルギー源を使い、再生不可能な商品を大量生産大量消費する。その結果一部に富が集中するという社会構造は、地球全体のマクロな視点で見た際に、あまりに犠牲が大きいと感じます。

第三の波(情報時代)

インターネットの登場により、産業時代のカギを握っていた「移動」が不要になりました。また、情報に関しても、マスメディアから大衆へという一方通行に供給されるものではなく、相互に受発信するものへと変化をしました。

消費者と生産者の境界をあいまいにし、共通点よりも相違点が望まれる時代

多様化

仕事での必須要件であった、通勤が通信に変わったため、様々な働き方ができるようになりました。〇〇の時間に合わせて動くという必要性も軽減されたためフレックスタイム制という新しい概念も生まれました。

momo

一斉に動かなければいけないという必要性が減ってきたんだね。

mito

この時間に対する変化は大きいね～

家族形態を含めた人生設計についての価値観も多様化しています。

生産者＝消費者

通信網が発達し、例えば冷蔵庫が壊れた場合、修理窓口に連絡し、窓口の人のレクチャーに従い、自分で修理をしたり、ガソリンスタンドでは自分でガソリンを入れ、ATMでは自分でお金を引き出す。

産業時代では考えられなかった、消費者でありながら、生産者の仕事の一部も担うというようになってきています。

複雑化

人々の仕事や生活が多様化した結果、求めるもの(商品)についても多様化します。

momo

つまり、今までのように規格化された商品でみんな一緒ではなく、一人一人の要望を聞いてる作るようなオーダーメイド型に変化したんだね

ということは、大きな工場も、一か所に集中させる大量の労働力も不要となります。

材料に無駄がなく、適切な規模がよいという価値観になります。(small is beatiful)

共通点より相違点

多様化した人々の要望、業務は複雑化を極めるようになり、求められるスキルも、みんなと同じことが同じようにできる人ではなく、人と違う視点でものを見て、アイデアを出せる人や人と違うものを持っている人が重宝されるようになります。

変化を表にまとめると

さいごに

過去から未来へマクロの視点でとらえるとすべてが線となりつながること、また、一つの産業や文化が生まれる背景にはそこには動力源(エネルギー源)の変化があるのだなと思いました。

今回は、「イノベーションの歴史を知りたい、ターニングポイントを知りたい」という目的ドリブンで本を読んだのですが、面白いくらいにスラスラ読めました。

世界史とかカタカナ多いし、苦手だな…と思っていたのは、枝葉ばかりを見ていたからかもしれません(笑)。

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を使ってマークダウン記法でできると効率的だと思い、実験中です。

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

マークダウンとは何か

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

https://mito-lab.com/md/

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」を入れておくとさらに使い勝手が向上します。

mito

こんにちは〜！最近、DTPの案件をちょくちょく取り組み、DTPの魅力に気づき始めたmitoです。

momo

今回は、そんな案件で「Webにもアップしたいので、トンボ線なしで原寸大のpdf貰えますか？」と言われた時にどう書き出したかをまとめるんだよね。

mito

そうです！ちょっとした小技が必要だったので忘れないように書き留めておきます！

PDFのトンボ線を削除し、塗り足しを含めない原寸大の大きさで書き出す方法。

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

やりたいことの詳細

mito

具体的に、何をしていきたいかというと以下2つです。

• 紙で印刷するだけではなく、Web上にpdfを載せたり、印刷会社を通さずpdfを普通の印刷機で印刷したいのでトンボ線はいらない。
• A3の縦両面印刷でしたが、普通の印刷機で印刷する場合はA4で4枚印刷するのでA4に分割したサイズも納品してほしい

トンボ線を削除する

まとめ

一手間必要ですが、印刷用に作成したデータをWebにもファイルとしてアップしたいなどの要望がある時には必要な知識かと思います！
ぜひ試してみてくださいね。

–END–

mito

無料で提供してくださっているアイコンはすごくありがたい！でもそのまま使うと自分のデザインイメージと合わなくなってしまう..ということありませんか？？

momo

塗りの面積が広い視認性の高いアイコンから少し手書き風の要素を加えたいな..ということ、あるよね！

少し、加工するだけ一味違うデザインになります。今回は2つの方法でアイコンを手書き風に加工する方法をご紹介します。

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

完成イメージ

まずは完成イメージから。

今回は、こちらの無料アイコンを使わせていただきました。

momo

左側が元々ダウンロードしたpngのアイコンイメージ、右の2つが手書き風に加工したものだよ！

mito

ブラシツール を使う方法とアピアランスで加工する方法を解説していきます！

ブラシツール を使って手書き風アイコンに変える方法

アイコンをトレースする

ダウンロードしたpngデータをアートボードに貼り付ける

先ほどのサイトよりアイコンをダウンロードし、データをイラストレーターのアートボード上に貼り付けます。

オプションバーの「画像トレース」をクリック

上部にあるオプションバーの「画像トレース」ボタンをクリックしてトレースします。

オプションバーの「画像トレースパネル」をクリック

トレース結果を細かく調整するために、オプションバーの「画像トーレスパネル」をクリックします。

カラーモードを「白黒」にします。

momo

詳細の三角矢印を押すとより詳細の数値を変更できるようになるよ！

プレビューを見ながら数値を調整していきます。

トレースを確定する

「拡張」をクリックし、トレースを確定します。

mito

レイヤーパネルを確認すると、画像がパスに変更されていることがわかると思います。

momo

ダイレクト選択ツールで全体を選択しても、パス化を確認することができるよ！

トレース後の微調整

トレース結果をレイヤーパネルで確認しつつ、不要なパスを削除します。

また、パスは単純化している方が扱いやすいので、メニューバーの「オブジェクト＞パス＞単純化」からパスを単純化しておきます。

ブラシツールを使う

ブラシツール の選択

先ほどトレースしたパスを全て選択した状態で、ツールバーのブラシツール を選択します。メニューバーより「ウィンドウ＞ブラシ」でブラシパネルを出し、ブラシを選びます。

momo

今回は、ライブラリーからアート＞アート_木炭・鉛筆を選んだよ！

さらに、その中の「鉛筆(斜め)」を選びました

ブラシツール の適応

「鉛筆(斜め)」をクリックし、パスにブラシのテクスチャを適応させます。

色を変える

ブラシの色を変えていきます。

まず、今適応させた「鉛筆(斜め)」をブラシパネルからダブルクリックし、「アートブラシオプション」を表示させます。

mito

着色の方式が「彩度」になっていることを確認します。

ツールバーの色パネルの色を変える

ブラシツール を選択したまま、色パネルを見ると、今はデフォルトなので添付のような黒っぽい色になっていると思います。

色パネルの塗りと線、両方順番にクリックし、色を変えます。

momo

今回は#FFDE2Aにしてみたよ！

上手く色が反映されい場合の確認事項

mito

黄色を指定したはずなのに、灰色になってしまう..など上手く色が反映されない時は、カラーパネルを確認してみてください。

momo

グレースケースになっている可能性があるよ！

メニューバーから「ウィンドウ＞カラー」でカラーパネルを開きます。

グレースケールになっている場合は、右のメニューより「RGB」に変更してください。

mito

塗りと線両方のカラー指定をRGBにします。

完成

ブラシが反映され、色も変えることができました。

momo

ちなみに、線だけにするとこんな感じだよ！

アピアランスで手書き風アイコンに変える方法

続いて、ブラシではなくアピアランスで変えていく方法です。

mito

トレースする手順はブラシを適応させる方法と同じですのでそちらをみてください。

レイヤーを選択し、アピアランスを適応させる

まずは、時計の針のレイヤーのみ選択します。

アピアランスパネルを開き塗りを変更

アピアランスパネルを開き、そこから塗りの色を変更します。

効果をつける(落書き)

塗りのレイヤーを選択した状態で、新規効果を追加＞スタイライズ＞落書きをクリックします。落書きオプションウィンドウを開きプレビューで確認しながら数値を調整します。

効果をつける(ぼかし)

続けて、塗りのレイヤーを選択した状態で、新規効果を追加＞スタイライズ＞ぼかしをクリックします。ぼかしウィンドウを開きプレビューで確認しながら数値を調整します。

完成

同じ手順で他のパスにも効果をつけて完成です。

-THE END –

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

お疲れ様でした〜。