google/claspにコントリビュートした

Google/claspとは

GitHub - google/clasp: 🔗 Develop Apps Script projects locally.

Google Apps Scriptのコマンドラインツール.

TypeScriptとかで書いてある.

 

PRの内容

Fix terminal error when calling clasp logs with invalid projectId and refactor clasp logs by tawAsh1 · Pull Request #535 · google/clasp · GitHub

 

commandsファイルが肥大化しているので、ツールのコマンドをそれぞれファイルに分けようとかいうリファクタリングが行われていたので、logsコマンドを別ファイルに分離.

 

存在しないproject id を指定するとlogsコマンドが終了しないバグを修正.

 

所感

TypeScript初めて書いたけど、すごく良い.

また、このプロジェクトなんですが、結構質の高いコードレビューをしてくれるのでとても良い.これからもコントリビュートしていきたい.

しょうもない感想だが、あの”google”のリポジトリにPRしてマージされたのがとても嬉しい.

 

Web制作者のためのSassの教科書 を読んだ

フロントを書くのは辛い. フロントは辛い...
フロントをちゃんと書いていく必要性ができてきたので,とりあえず雰囲気で書いていたSassをちゃんと勉強しようと思った.

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

所感

網羅性が高くて良いが,結構デザイナ向けに書かれているので,冗長だと感じることが多かった.

機能まとめを書いた
sakura-lov.hatenablog.com

Sassの基本機能まとめ

Sassを学んだので基本機能をメモした.

ルールのネスト

ルールをネストで表現できる

.item {
  p {
    margin: 0;
  }
}

セレクタの参照

セレクタ& で参照できる

a {
  background: #eee;
  &:hover {
    background: #ccc;
  }
}

プロパティのネスト

プロパティもネストできる

section {
  border: 1px solid #999 {
    top-color: #a99;
    bottom: 0;
  }
}

プレースホルダセレクタ

CSSへの変換後には直接書き込まれないプレースホルダ% で使える

%btnBase {
  text-align: center;
  text-decoration: none;
}
.btn {
  @extend %btnBase;
}

変数

$val_name で変数が宣言できる

$red: #cf2d3a;

.notes {
  color: $red;
}

演算

四則演算とか剰余とかの演算ができる

.e1 {
  width: 500px + 80;
  // 580px
  width: 500px - 80;
  // 420px
  width: 500px * 8;
  // 4000px
  width: 500px / 8;
  // 62.5px
  width: 20px % 4;
  // 0px
  content: "hoge" + fuga;
  // hogefuga
}

基礎関数

色々な関数が用意されている

.e1 {
  width: abs(-15px);
  // 絶対値 15px
  width: round(100px / 6);
  // 四捨五入 17px;
  width: ceil(100px / 3);
  // 切り上げ 34px;
  width: floor(100px / 6);
  // 切り下げ 16px;
  color: rgba(#6a5468, 0.3);
  // 16進RGB(色キーワード)+alpha値->RGBA rgba(106, 84, 104, 0.3);
  color: lighten(#000, 30%);
  // 明度上げる #4d4d4d
  color: darken(#fff, 20%);
  // 明度さげる #cccccc
  color: mix(#000, #fff, 50%);
  // 中間色求める gray

if文

@ifで if文が使える

$cond: true;
@if $cond {
  .e1 {
    width: 15px;
  }
}

for文

@for でfor文が使える

@for $value from 1 through 3 {
  .hoge_#{$value} {
    margin-bottom: 1px * $value;
  }
}

for-each文

@each でfor-each文が使える

$list: a, b;
@each $val in $list {
  .hoge_#{$val} {
    content: #{$val};
  }
}

while文

@while でwhile文が使える

$val: 20;
@while $val > 20 {
  .hoge_#{$val} {
    content: #{$val};
  }
  $val: $val - 10;
}

ミックスイン

@mixin でプロパティの寄せ集めが作れる

@mixin kadomaru($value) {
  border-radius: $value;
  webkit-border-radius: $value;
}

.box {
  @include kadomaru(3px);
}
// .box {
//   border-radius: 3px;
//   webkit-border-radius: 3px;
// }

入門 Kubernetes -Kubernetes: Up and Running を読んだ

表題の通り、オーケストレーション周りとかクラスタ周りとか勉強する必要が発生したので、入門Kubernetesを読んだ.

入門 Kubernetes

入門 Kubernetes

概要

Kubernetesについての基礎要素を解説した本.
GCP/Azureを使って実際に手を動かしながら学ぶ.

所感

基礎的な要素がしっかりまとまっており、これとチュートリアルである程度のことはできそう.
実践的な例 Redis/Ghostなどのアプリケーションのデプロイ例が載っていて参考になる

悪いところ

ノード クラスタ Pod Label オブジェクトという言葉があまり定義されずに出てきて、混乱した.

アジャイルサムライ−達人開発者への道− を読んだ

突然ソフトウェア開発の方法論とか思想の話に興味ができたので,
アジャイルサムライ−達人開発者への道− を読みました.

www.amazon.co.jp

はじめに

自分がプログラミングを始める前からよく言われていた「アジャイル開発」とかいう単語.
いい加減ちゃんと勉強してみようと思ったのでとりあえず本を読んでみた

思ったこと

アジャイルとは開発手法の一つではなく,開発手法の総称,手法の思想的なものであると感じた.
目標とすること,思想にマッチしプロジェクトの特性に合うことであれば柔軟に取り入れ,効率化をはかっていく.
逆にアジャイル開発に含まれる道具でも,プロジェクトの特性に合わなければ使わないというのがアジャイルの流儀っぽいと感じた.

要約メモ

ここからは要約です!
かなりポエム!

プロジェクトのスタート期

アジャイル流今からコンテンツを作る時の流儀/方法には次のようなものがある

柔軟なチーム

役割はあっても担当はない. メンバーが柔軟に幅広く対応していく.
脱線しますが,これは俺の仕事じゃないから...とかやらない だとか逆に, これ苦手だからやりたくない!イエーイ!みたいなのはよろしくないですよね.

インセプションデッキを使って全体で共通認識を作る

プロジェクトの全体像をはっきりさせ,メンバーの認識を統一し,価値観を共有することはチーム作業をするなら一番大事ですね...
インセプションデッキというもので全体像をはっきりさせましょう とかいう話
ここに詳しくまとまってます.
プロジェクトを始める時にオススメのインセプションデッキの紹介 | toyoshiの日記

ユーザーストーリーを使ってやることを明確に

やることが見えていると安心するし,やることを一つ一つプチプチ終わらせていくのって快感ですよね(私はそうです)
作る時は自分たちだけで考えずに,ちゃんと顧客(そのプロダクトを届けたい人)を入れて考えていきましょうね〜 とかいう話
この記事が面白かったです.
簡単!楽しい!5分でわかるユーザーストーリーマッピング(User Story Mapping) - Qiita

プロジェクトを回していくぜ!期

アジャイル流よし,今からものを作るぜ!プロジェクト回すぞ〜!な時の流儀/方法には次のようなものがある

イテレーションを回すぜ!

二週間程度の期間を決めてプロジェクトにメリハリをつけていきましょう...!
あとは必要以上の分析を行わないようにしよう...
イテレーションnで計画したことを,イテレーションn+1で実行していく.
脱線しますが,分析とか勉強ばっかりやっていても物はできないし,物ができてこそ見えてくる世界がありますね... 百聞は一見に如かず 的な .

意思疎通!フィードバック!で風通しをよくしよう!

人々が協調して働く上で意思疎通はとても大事です. それはそう. という話ですね.
作ったプロダクトのフィードバックもちゃんともらって軌道修正もちゃんとしつつ,必要ならストーリーとかデッキを作り直してしまえ!
よくある意思疎通/フィードバックの方法にはこんな感じがあるよ

貼りものを使って状況が見えるように!

リリースボードやストーリーボード,バーンダウンチャートを壁に貼り付けるなりして,常に進捗状況が見えるようにしましょう.

プログラミングの進め方

これはよくわかっている話ですが,

  • テスト自動化をする
  • リファクタリングを細かくやって,技術負債を貯めない
  • CI/CDをしましょう

をしましょう. という話.
ところで最近ようやく自分の小さなプロダクトを作る時にテスト駆動開発ができるようになってきました. 嬉しい.

まとめ

良書でした.
でも,これ,当たり前の話じゃない?

コードが書けない

コードが書けない

この書き方、汚いな...
これ、設計おかしくないかな...
これ、変じゃないかな...
この変数名...うーん...
なんか冗長なことやってる気がする

そんな事を考えてたらいつのまにかコードが書けなくなった.おわり.プログラミングやめます.

たんぽぽ載せる仕事くらいしかできない.おしまい....