先輩に「メソッドを実行して結果を変数に突っ込め」と言われたら

java coding

javaのコーディング中にこんな風に言われた時に、どんなことを考えているのかを整理しておきます

調査

まず対象となるメソッドが何なのかを調査します

  1. メソッドはインスタンスメソッドかクラスメソッドか
  2. 引数の型は何か
  3. 戻り値の型は何か

たとえば

class StringUtil {
int getLength(String text) { /* 実装省略 */ }
}

ならこう

実装

調査が終わったら次は実装です
最初に書くのは戻り値の型です

int

個人的にはここが最もハードルが高いように感じます
どうしてもメソッドの実行を最初に書きたくなるみたい
ただ文法上、変数宣言が先なのでしょうがない

次に書くのはメソッドの結果を入れる変数名

int length

クーーーッ！
まだメソッド実行させてくれないのかー！
て感じですが変数名を決める必要があります
ここで変数名を迂闊にhogeとかにすると叱られます
適切な名前をつけましょう

次にようやくメソッドの実行です
メソッドがインスタンスメソッドなら変数名.メソッド名()
クラスメソッドならクラス名.メソッド名()の形式で書きます

今回はインスタンスメソッドなので前者の形式ですが、インスタンスが入ってる変数がないのでそれを先に書きます

StringUtil util = new StringUtil();
int length

次にメソッドを書きます
とりあえず引数は空で良い

StringUtil util = new StringUtil();
int length = util.getLength();

最後に引数を書きます
引数の型を意識して書きます

StringUtil util = new StringUtil();
int length = util.getLength("あいうえお");

以上

まとめ

コーディング中に「メソッドを実行して結果を変数に突っ込め」と言われたときの思考を整理しました
普段は体が勝手に反応するレベルでコーディングしてますが、整理してみるといろいろ考えてるものだな
とりあえず調査してから実装することが重要だと思います

タスクの依存性を表現したタスクボードをmermaidjsで書くと良い

タスク管理の方法としてバックログやタスクかんばん(TODO,DOING,DONEのやつ)を使っていますが、ちょっとツラみを感じています
これらの方法はタスクの優先順位が見える意味では良いけど、タスク間の依存関係が見えない
最近やってる案件がウォーターフォール的なので、優先順位よりもタスクの依存の方が知りたい
そうゆう意味でタスクを管理する方法としてはバリューストリームマップやアローダイアグラムのような図で表現して、終わったらチェックマークをつけていく感じにしたいなぁと
ただなかなかイイツールが無くて...
と思ってたらmermaidjsでイイ感じにかけたーー！

百聞は一見に如かず

説明するより見た方が早いので今回作った図を載せます

9月
1w
2w
3w
リリース
サービスイン
テスト
リリース準備
設計
コーディング

タスクの依存関係がわかる！

図から以下のことがわかります

  • タスク同士が矢印で繋がっている => の依存関係がわかる
  • 大きな枠が月、小さな枠が週 => 週ごとのスケジュールがわかる
  • 色 => タスクの状態がわかる
    • 赤: 私にアサインされたタスク
    • グレー: 完了したタスク

mermaidjsのコード

書いたコードはこちら

graph LR
T0[設計]
T1[コーディング]
T2[テスト]
T3[リリース準備]
T4[リリース]
T5[サービスイン]

T0 --> T1
T1 --> T2
T2 --> T4
T3 --> T4
T4 --> T5

subgraph 9月
  subgraph 1w
    T0
    T1
  end
  subgraph 2w
    T2
    T3
  end
  subgraph 3w
    T4
    T5
  end
end

classDef done fill:#aaa;
classDef naosim fill:#faa;
class T0,T1,T3 done;
class T2 naosim;
  • タスクの内容と依存関係はフローチャートの記法で書く
  • スケジュールはsubgraphで書く
  • タスクの状態は独自のclassを定義する

タスクで表現したいこと毎にかける

で、mermaidの何が良いかって、コードを見ればわかる通りタスクの内容・依存・スケジュール・状態を別々に管理きる！
やべーーmermaid最高やーー！

まとめ

  • mermaidでタスクの依存性表現したタスクボードが作れる
  • mermaidならタスクで表現したいこと毎にかけるから良さそう

【GAS + kotlin】コードを分割してメンテしやすくする

kotlin javascript gas

前回、GASをkotlinで開発する方法を書きました

naosim.hatenablog.jp

この記事で「3万行を超えるkotlin.jsをコードに直接コピペする」と書きましたが、さすがにそれでは辛い

幸いGASは同一プロジェクトのスクリプトを簡単に呼べるのでそれを利用してファイル分割してみました
以下、その方法

前回の最終形態

コード.gs (呼び出し元スクリプト)

// おまじない
var ArrayBuffer = Int8Array = Int16Array = Uint16Array = Int32Array = Float32Array = Float64Array = function(){};

// kotlin.jsのコード 3万行超え

// gaskotlin.jsのコード 20行くらい

// 呼び出し
function myFunction() {
  gaskotlin.com.naosim.gaskotlin.run();
}

ファイルを3つに分割する

kotlin.js.gs

function initKotlin() {
  // おまじない
  var ArrayBuffer = Int8Array = Int16Array = Uint16Array = Int32Array = Float32Array = Float64Array = function(){};

  // kotlin.jsのコード 3万行超え



  return kotlin; // 最後にkotlinオブジェクトを返す
}

gaskotlin.js.gs

function initGaskotlin() {
  var kotlin = initKotlin(); // kotlinを読み込む


  // gaskotlin.jsのコード 20行くらい


  return gaskotlin;// 最後にgaskotlinオブジェクトを返す
}

コード.gs (呼び出し元スクリプト)

var gaskotlin = initGaskotlin();
function myFunction() {
  gaskotlin.com.naosim.gaskotlin.run();
}

結果

可読性が上がった

当たり前ですが...
3万行のコードは読みにくいので...

ファイルの保存時間が早くなった

3万行のコードを保存した時は保存だけで結構時間がかかっていましたが、それを外だししたら早くなった
GASは保存時に何してるんだろう...
保存するファイルだけシンタックスエラーのチェックが走るのかな？

まとめ

  • kotlin.js等を別gsファイルに外だしした
  • 保存時間が短くなったりしてよかった

GASをkotlinで開発する方法

javascript gas kotlin

ちょっと強引な方法ですが動いたのでメモ
動いたと言ってもhelloworldが出ただけなので、その先に落とし穴があるかもしれない...

  • intellijでkotlinjsのプロジェクトを作成し、コーディングする
    • build.gradle
    • Main.kt
  • ビルド
  • GASでコードを読み込む
    • おまじない
    • kotlin.jsとgaskotlin.jsをコピペ
    • runメソッドの呼び出し
    • コード全体
  • 実行
  • まとめ
続きを読む

BLUDITを入れて最初にやったこと

家で作ったものを動く状態でそのまま公開できるサイトが欲しかったので、BLUDITというPHP製でDB不要のCMSを使って作ってみた

naosim.sakura.ne.jp

BLUDITはうたい文句の通り一瞬でブログが完成するからイイ感じでした

www.bludit.com

今回のサイト構築でBLUDITの初期状態に対していくつか変更を加えたのでその内容をメモしておきます

  • 自分専用のテーマを作成する
    • デフォルトテーマをコピーして自分専用テーマを作る
      • デフォルトテーマをコピーする
      • テーマ名を変更する
    • CMSでテーマを変更する
  • 開発環境(ローカルホスト)でも動くようにする
  • jqueryを駆除する
  • コードハイライトに対応する
  • ナビゲーションバーの色を変える
  • mermaid.jsで図が表示できるようにする
    • 管理用変数の作成
    • タグをみて判断するプログラムを追加
    • 上記プログラムを読み込む
    • mermaid.jsを読み込む
  • まとめ
続きを読む

wordpressにバージョン番号を入れたら開発が楽になった

php wordpress

wordpressに機能追加するのは正直つらい...
本番環境で開発できないし、ローカルだと本番DBとの差異がでちゃってデプロイしにくいし...
何故1つのDBにコンテンツとデザインとアカウント情報を共存させてるんだよ...

バージョン番号をつけて本番環境で直接開発する

とにかくwordpressの開発がしにくいので、もう本番環境で直接開発しちゃいますw

まず適当な場所にバージョンを取得できるコードを書く

<?php
global $version;
$version = 201601; // 現行バージョン
if($_GET['version'] == '201801') {
  $version = 201801;
}

これで通常は$versionに201601が入ってますが

/path/to/contents/?version=201801

こんな感じに書くと201801が入ります

このバージョン番号を使って開発をします
たとえば機能追加ならこんな感じ

<?php if($GLOBALS['version'] >= 201801) { //version201801 ?>
<div>追加機能だよーーー</div>
<?php } //version201801 ?>

これで通常は追加機能は表示されないけどURLでversionを指定した場合のみ表示さるようにできました

バージョンを上げて公開完了

先程のversion分岐を駆使して開発を進めたら、最後にバージョンを上げます

global $version;
$version = 201801; // 現行バージョンを上げる

これで公開完了
もちろん各コードに散らばったらif文も消しましょう
コーディング時にバージョン用if文に//version201801みたいなコメントを入れておくとgrepしやすいです

とはいえ本番環境での開発は怖い

本番環境で直接コーディングしてるとシンタックスエラーになっただけでサービスが止まって怖い...
なので実際はローカルで作ってgitで管理しつつこまめに本番に上げて作ってます
ちょっと面倒だけど常に本番で動作確認でるから安心です

まとめ

wordpressにバージョン番号を入れて出し分けできるようにしておくと開発が楽になるよ