システム改修を実施してみての反省点

システム開発

概要

システム間データ連携の改修。
連携するデータの種類を増やすという内容。

悪かった点

以下の2点に時間がかかってしまった。
・改修内容の明確化
・他チームとのコミュニケーション

改修内容の明確化

改修内容の明確化には、対象システムについての理解が必要。
そうでないと、どのシステムのどの部分をどのように改修するのかが見えてこない。
システムの理解に時間がかかったのが根本原因。

ドキュメントが整備されていない、レクチャーが特にないという外部要因は色々あるが、今回は内部要因のみにフォーカスする。
内部要因を一言でいうと、システム理解という作業のゴールと道筋が明確でなかったこと。
どこまで理解すればいいのか、そのためにどのように調査をすればいいのか、
と言ったコンセプトがなく、漫然と調査にあたってしまった。

他チームとのコミュニケーション

他チームとのコミュニケーションは基本的に時間がかかるもの。
即時で連絡が来るわけでもないし、ものによっては調査が必要だったりする。
また、狭間の領域はたらいまわしになって、結局自分で調べるハメになるということもある。
このコミュニケーションコストを甘く見積もっていたことも反省点。
ここを踏まえて早め早めに進めておくべきだった。

改善方法

上記を踏まえ、次回以降どのように進めればいいか。

まずは、進め方をデザインすることが挙げられる。
これをすることで、なんとなく取り掛かって、どこが終わりなのかわからない作業をはじめないで済む。
進め方のデザインは、以下の3つのフェーズに分けられる。
・ゴールの明確化
・WBSの作成
・不確定要素の解消方法の検討

ゴールの明確化

ゴールとは目的の個所に適切な修正を入れること。
つまり、何のシステムの、どこを、どのように修正するのか、ということ。
この明確化を一番最初に実施しないといけない。

そして、そのためにはシステムの理解が必要。

まず、調査する範囲をタスク化して明確化する。
これをすることで際限なく調査するということを回避できる。
知る必要があるのは、改修に関わる部分のみ。
また、調査の過程で当初の範囲よりも調査範囲が増えることもあり得る。
その場合は、増えた範囲の分のタスクを追加することを忘れないようにする。
これを怠ると、調査作業の管理ができなくなり、終わりの不明確な作業に時間を浪費してしまうことになる。
また、不明点を極力残さないということも重要。
ここで曖昧な部分を残すと、後々の作業に取り返しのつかない影響を及ぼす可能性があるため。

次に、実際の調査に取り掛かる。
システムを理解するには、まず概要、その後詳細を調査すればいい。
概要を見て、今回の改修に関わる部分のあたりをつける。
その後、その部分の詳細を見ていけばいい。

概要は、ドキュメントを見るのがいい。
当然ドキュメントだけではすべてを理解することはできない。
その部分を解消するために、ドキュメントから理解できない部分を明確化する。
これが難しい場合は、絵を描いてみるといい。
書けない部分が不明な点ということになる。

不明点を解消する方法としては、推理するということが挙げられる。
これは、わかっていることから可能性の高いものを考えるということ。
周りが埋まっていれば、このピースしか当てはまらない、と言うような考え方。
「A→?→C」であるならば「?=B」みたいな感じ。
何の要素が確定すれば、その要素が明らかになるかという逆のアプローチ。

ただ、これでは限界があるので、その場合は人に聞くのが良い。
その場合、質問はなるべく具体的、ピンポイントなものがいい。
そうしないと具体的な情報が引き出せず、結局役に立たないことが多い。
質問が具体的でないと、教える側も何を教えていいのかわからず、(聞き手にとって)有益な情報が提供できない。
また、概略的な情報だと、教える側は些細なことだと思っていても、聞き手にとって重要な部分が抜ける可能性がある。

WBSの作成

改修内容が明確化されたら、それをもとにWBSを作成する。
その際に、不明点、不安要素、懸念点などがあると思う。
それらは、仮置きの状態でつくってしまう。
ただし、それらを解消するというタスクは作っておく。

不確定要素の解消方法の検討

WBSの虫食いの部分の解消方法を考える。
「どうすれば解消できるのか」と「いつまでに解決しないといけないのか」を考える。

【Three.js】静止画面表示のサンプル

threejs
three.jsをコーディングするなら、コード補完も使えるTypeScriptでの開発が断然おすすめ!
【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

単純なオブジェクトをレンダリングするサンプル。
アニメーションなどはなし。

デモ

JavaScript

TypeScript

【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

threejs
three.jsに限った話ではないが、開発をする上ではできればコード補完(インテリセンス)を効かせたい。
開発効率も上がるし、タイプミス、それに伴うバグを防ぐことができる。
three.jsでもTypeScriptを使うことによって、コード補完を効かせることが可能。
そのためには、ライブラリのオブジェクトの型を定義した型定義ファイル(.d.ts)をソリューションに追加する必要がある。
以下にTypeScriptによるコード補完を使用したthree.js開発環境の構築手順を記す。

型定義ファイルのインポート

TypeScriptからthree.jsのライブラリを参照するためには、型定義ファイルと呼ばれるファイルが必要。
これは、ライブラリ(ここではthree.js)で定義されているオブジェクトの定義情報を記載したファイルのこと。
TypeScriptからこの情報を参照することで、型判定やコード補完を効かせることができるようになる。

型定義ファイルは、GitHub上の「DefinitelyTyped」と呼ばれるリポジトリに配置されている。
上記はコミュニティ主導のリポジトリではあるが、実質TypeScriptの公式リポジトリである。
TypeScriptから参照したいライブラリがある場合、このDefinitelyTypedリポジトリからファイルをCloneやダウンロードすればよい。

ただし、VisualStudioを使って開発を行う場合はNuGetを使用して、もっと簡単に型定義ファイルの設定ができる。
ソリューションエクスプローラーからソリューションを選択し、「右クリック>NuGetパッケージの管理」などからNuGetパッケージマネジャーを起動する。
NuGetパッケージマネジャーの検索バーに「threejs DefinitelyTyped」と入力し、「threejs.TypeScript.DefinitelyTyped」をインストール。
1.threejs.TypeScript.DefinitelyTyped

ソリューション直下に、Scrripts>typings>threejsのようにフォルダが作成され、配下に型定義ファイル(d.ts)が配置されていればOK。
2.インストール確認

TypeScriptから型定義ファイルを参照する

NuGetから型定義ファイルをダウンロードしただけでは、TypeScriptから参照することはできない。

TypeScriptのファイルに以下のように記述することで、型定義ファイルを参照することができるようになる。

また、直接記述する以外にも、参照元TypeScriptファイルに型定義ファイルをドラッグ&ドロップすることでも可能。
こちらの方が記述間違いなども起こらないので、特別な理由がない場合は、こちらを推奨。

また、NuGetからインストールしただけだとビルドが通らないので、以下を実施する必要がある。
three.d.tsをソリューションの直下にコピー、その後TypeScriptに型定義の参照設定の記述をする。
Scripts配下のフォルダーをソリューションから除外する。

three.js本体をソリューションに追加

以下からthree.js本体をダウンロード。
https://threejs.org/

ダウンロード、展開すると大量のファイルがあるが、ひとまず必要なのは、build配下のthree.jsやthree.jsなどのファイルのみ。
それらのファイルをソリューションに追加する。
(ソリューションを右クリック>追加>既存の項目 から上のファイルを選択)

最終的なソリューション構成は以下のような感じになる。
3.ソリューション構成

これでTypeScriptからコード補完を使用しながらthree.jsのコーディングが可能になる。
4.コード補完

参考

Visual StudioとTypeScriptでJavaScriptライブラリを活用する – Build Insider
[TypeScript][WebGL][Three.js] 3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~ ― 準備編 (プログラミング C# – 翔ソフトウェア (Sho’s))

【jQuery】Class属性の追加、削除、切り替えのサンプル

jQuery
jQueryでは直接インラインでスタイルを指定することができるが、これを多用してしまうとどこでスタイルを設定しているのか、スタイルを確認するためにJavaScriptのコードを読まないといけないといった問題が起きる。
そのため、スタイルはCSSで設定し、Class属性を着脱、切り替えることでスタイルを適用する方が良い。
以下は、スタイルを切り替える際のサンプル。

■デモ

  • アイテム1



■HTML

■JavaScript

【jQuery】フォトギャラリーのサンプル

jQuery
jQueryを使ったフォトギャラリーのサンプル。
上の画像をクリックすると、下に拡大表示される。
(サンプルコードでは、リストにマウスオーバー時にサムネイルの色が変わるが、デモでは機能していないので注意)

■デモ


■HTML

■CSS

■JavaScript

【jQuery】基本セレクターのサンプル

jQuery
■デモ

id=listの下にあるa要素のCSSを変更
class=itemの直下にあるa要素のCSSを変更
class=itemの次にある兄弟ノードのp要素のCSSを変更
class=itemの次以降にある兄弟ノードのp要素のCSSを変更
id=list配下すべての要素のstyleをリセット

■HTML

■JavaScript

【jQuery】属性セレクターのサンプル

jQuery
■デモ

  • アイテム1
  • アイテム2
  • アイテム3

id属性を持つli要素にスタイルを設定する。
id属性がitem3であるli要素にスタイルを設定する。
id属性がitem3でないli要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。

■HTML

■JavaScript

【jQuery】複数スタイルを設定するサンプル

jQuery
ハッシュを使用することで、複数のスタイルをまとめて設定することができる。
ハッシュで指定する場合、CSSのプロパティ名は以下のようにキャメルケースとなるため注意。
background-color → backgroundColor

  • アイテム1

複数スタイルをまとめて設定。

■HTML

■JavaScript

【jQuery】要素フィルターのサンプル

jQuery

■デモ

  • アイテム1

全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する
奇数と偶数要素にスタイルを設定する。
n番目の要素にスタイルを設定する。
n番目より前/後ろの要素にスタイルを設定する。
テキストの内容で絞り込む。
特定の子要素を持つ要素を絞り込む。
親要素を起点に合致する最初と最後の要素を取り出す。
n個おきに要素にスタイルを設定する。
唯一の子要素にスタイルを設定する。

■HTML

■JavaScript

【JavaScript】関数内で引数の数をチェックするサンプル

JavaScript
argumentsオブジェクトは関数に渡された引数を全て持つ。
なので、argumentsオブジェクトを使用することで、以下のように引数の数をチェックすることができる。