はじめまして！NARIです。
フリーランスエンジニア / TEAMKITのCTOをやっております。

このnoteでは日々サービス開発する中で私が調べたことや学習したこと、問題にぶちあたったこと・考えたことなどをメモしていき、作業ログとして公開します。

Webのプログラミングをする方々にきっと役立てることもあるかと思います。TIPSのボリュームが増えてきたら有料化にしていくつもりです。
（もっと増えてきたらマガジンに分ける可能性もあります。続けば笑）

丁寧なチュートリアルとか解説サイトにはならない想定なので、そこだけはご理解ください。個人の作業ログとして閲覧してもらい、少しでも参考になれば幸いです。

【VS Code】ショートカットを作ってコマンド実行を簡単にする方法

ターミナルで操作するnpm系とかgit系の操作をショートカットでできるようになると作業がスムーズになって快適になります。

[1] コマンドパレットからTasks: Configure Taskを選択し、さらにnpm: devを選択してjsonを開きます。
"label": "npmRunDev" を追加します。

▼task.json 

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558 
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
   {
     "label": "npmRunDev",
     "type": "npm",
     "script": "dev",
     "problemMatcher": []
   }
 ]
}

[2] コマンドパレットからOpen Keyboard Shortcuts(JSON)を選択してjsonファイルを開き、次のように入力します。
(keyは任意のショートカットを指定）

▼keybindng.json

// Place your key bindings in this file to override the defaultsauto[]
[
   {
       "key": "cmd+d n",
       "command": "workbench.action.tasks.runTask",
       "args": "npmRunDev"
   }
]

＜実際に登録したTaskおよびショートカット＞

よく使う以下のコマンドをショートカットで実行できるようにしました。

(1) npm run dev
(2) git remote update --prune
(3) php artisan migrate
(4) GitHubのissuesページを起動
(5) ローカルの開発環境を起動

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558 
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
   {
     "label": "npmRunDev",
     "type": "npm",
     "script": "dev",
     "problemMatcher": []
   },
   {
     "label": "gitRemoteUpdate",
     "type": "shell",
     "command": "git remote update --prune",
     "problemMatcher": []
   },
   {
     "label": "artisanMigrate",
     "type": "shell",
     "command": "php artisan migrate",
     "problemMatcher": []
   },
   {
     "label": "openGitIssues",
     "type": "shell",
     "command": "open https://github.com/{秘密}/issues",
     "problemMatcher": []
   },
   {
     "label": "openTeamkitLocal",
     "type": "shell",
     "command": "open https://local.hogehoge.jp",
     "problemMatcher": []
   },
 ]
}

// Place your key bindings in this file to override the defaultsauto[]
[
   {
       "key": "shift+cmd+n",
       "command": "workbench.action.tasks.runTask",
       "args": "npmRunDev"
   },
   {
       "key": "shift+cmd+u",
       "command": "workbench.action.tasks.runTask",
       "args": "gitRemoteUpdate"
   },
   {
       "key": "shift+cmd+m",
       "command": "workbench.action.tasks.runTask",
       "args": "artisanMigrate"
   },
   {
       "key": "shift+cmd+i",
       "command": "workbench.action.tasks.runTask",
       "args": "openGitIssues"
   }
   {
       "key": "shift+cmd+t",
       "command": "workbench.action.tasks.runTask",
       "args": "openTeamkitLocal"
   }
]

【CSS設計】共通クラスはある程度定義しておいた方が実装が速くなる

bootstrapなどcssフレームワークを使わず独自にstyleを定義している実装の前提です。Vueを使うとstyleをscopedで書くことによってコンポーネント単体でUIを完結することができる (Single File Componentと呼ばれる) ので、ドンドンscopedで書きまくればいいじゃん！と思ってはいたが、実際コーディングする際に毎度同じようなこと書いてたり、１ファイル内の<template>と<style>のコードの部分を行ったり来たりするの地味に面倒！って思いました。なので極力「cssは書かないようにしたい」と考えて、Tailwind CSSみたいなユーティリティークラス(共通クラス)をちゃんと定義していこうと切り替えた。

以下実際に作ったクラスの一部。common.scssに記載

/* 共通Layout */
.padding-8 {
 padding: 8px;
}
.padding-12 {
 padding: 12px;
}
.padding-16 {
 padding: 16px;
}
.padding-buttom-16 {
 padding-bottom: 16px;
}
.padding-buttom-24 {
 padding-bottom: 24px;
}

/* margin */
.mg-auto {
 margin: auto;
}
.mg-16 {
 margin: 16px;
}
.mg-right-8 {
 margin-right: 8px;
}
.mg-right-12 {
 margin-right: 12px;
}
.mg-right-16 {
 margin-right: 16px;
}

/* flex */
.flex-row {
 display: flex;
}
.flex-col {
 display: flex;
 flex-direction: column;
}
.justify-center {
 justify-content: center;
}
.space-bw {
 justify-content: space-between;
}
.align-right {
 justify-content: flex-end;
}

/* border */
.border-none {
 border: none;
}
.border-gray {
 border: 1px solid $line-gray;
}
.border-dark-gray {
 border: 1px solid $text-color;
}

/* border-radius */
.rounded-s {
 border-radius: 2px;
}
.rounded-m {
 border-radius: 5px;
}

/* font size */
.text-size-xs {
 font-size: 10px;
}
.text-size-s {
 font-size: 12px;
}
.text-size-14 {
 font-size: 14px;
}
.text-size-l {
 font-size: 16px;
}

こうするとHTMLの実装時に適用したいstyleも理解している状態で書く場合以下のような感じで簡潔になり個別のstyle指定が入らなくなる。
classを見ればどういうUIになるかだいたい想像できるので可読性も上がる。

<div class="padding-16 border-gray rounded-m bg-white">
    <span class="text-size-l">HogeHoge</span>
</div>

▼参考実装(codepen)

scopedは完全にクローズドの状態ではなく、上書きされる可能性は十分あるので、そうなら最初から共通的なstyleはやはりcssファイルに書いて外部読み込みをして適用させる。仕様上componentで独自にスタイル指定、拡張しなければいけないようなプロパティだけscopedに書いていくハイブリッドスタイルがいいと今の段階では落ち着いた。

というのをやっていたタイミングで以下の資料も見つけたので参考になった。一読してみてください。

CSSの共通化だけではなく、いろんな画面で利用するような部品は小さくコンポーネント化していくことなど実装をより速くするためには他にも色々できることはあるので、これが正解とか正攻法って理解をせず、「自分なりに考えて工夫する」というのが大事。めんどくさいことを放置しない、解決するために実践あるのみ。

【作業効率化】”作業を楽にする"ことを常に考える

エンジニアの仕事はコーディングだけではない。いつまでに何をやるのか計画を立てて、どうやって作るのか設計をして、コードを書いて、想定通り動くことを検証して、想定外の事象は修正して、期日までに完成させて、顧客に使ってもらう、といういくつものフェーズを経て仕事が終わります。

淡々とコードを書くこと自体は基本的には知的労働ではなく"作業"です。
ある機能・ある業務を遂行できるようにビジネスロジックを考えたり、アルゴリズムを考えることは、情報や思考を整理するため単純な作業ではないです。そのためロジックを形成し、コードにしていくことは作業が多く、ルーティン化します。例えば新しいDBを設計し、それの登録や編集などCRUD処理を実装する時は、こう書けば動くという完成形をイメージできた状態でコードにしていくと思います。完成形がわかっていてあとは手を動かすだけの状態をできる限り少なくする工夫をして「楽をする」という意識が大事です。開発には想定外のトラブルがつきものであり、コーディング作業以外にも差し込みの仕事やチーム内のコミュニケーションなど日々いろんな業務を並行しながらプログラミングをするため、作業の効率化・短縮化をして開発速度のアップをして前倒しで終わらす、自分の中で納期を早め、仕様変更やトラブル対応、周りのフォローをしたりできる余白を作っていけると良いでしょう。

作業効率化は細かいものをあげれば切りがないですが、例えば私は以下のような工夫をしています。

● コンソールで打つgitコマンドを簡単にする（Laravelコマンド）
● CRUDの必要クラスの自動生成化（Laravelコマンド）
● 共通クラス化(css)、コンポーネント化(vue)（フロント）
● オンラインエディタでリアルタイム編集してコーディング（フロント）
● snippetを使ってコーディングの効率化
● ブラウザで操作する作業をシェル化してワンクリック

「ルーティン化を撤廃」
「面倒なことはやらない」
仕事は早く終わることに越した事はないです。（品質も最低限意識）

よりレベルアップをし、スキルを高めるためには、ただタイピングを速くするのではなく、そもそも「その作業をなくす」ところに着眼点をおきましょう。作業をなくす・簡単にするために頭を使う、必要な技術を習得する事／試す事が自分を成長させ、またそれを周囲に発信する事で周りにも良い効果を与え好循環を生み出します。今日からぜひトライしてみましょう。

【AWS操作】EC2インスタンスの起動や停止などを簡単にする（＋Slack通知）

ec2インタンスは従量課金で、起動している時間が長いほどお金がかかってしまう。開発環境など常に利用しない環境なら止めないと余計なコストがかかっていることになるので、「使う時だけ起動する」ようにしたい。

まず以下に沿ってAWSアクセスキーを作成

以下の記事のまんまで起動、停止それぞれのコマンド内容をshellスクリプトにしたら無事完成！

次にSlackに起動・停止の通知ができたらいいなと思ったのでやってみる。

＊TODO＊（やったら追記する）

このメモは以上。また順次書いていきます。

参考になったらぜひシェアしていただけたら喜びます。
どれだけ見られたか、シェアされたかで今後のコンテンツの量・質が変化します。笑
ブログ系の継続は苦手なのでぜひ応援してください。笑

私のTwitterはこちら