第17回 Tokyo Atlassian ユーザーグループ に参加した
こちらも2カ月くらいたってしまって今更感がありますが、参加したので感想を書いておきます。
Confluence上でKPIをレポート自動生成によって共有する
レポートにテンプレートエンジンを使用して、Webアプリのようにレポートを作成するという内容でした。ConfluenceはREST APIを提供しているので、色々なことが出来るのだなと思いました。
Bambooによる継続的デリバリー
ConfluenceやJIRAに比べて、取り上げられる機会が少ないBambooについてまとまった内容を発表されていました。また、Gebという画面周りのテストを行うツールを使ったテストのやり方なども取り上げられていました。
質疑応答でプルリクエストの様子(マージされるためには何人のレビュー承認が必要か等)の話もあり、勉強になりました。
JIRA / Confluenceの必須プラグインはこれだ
便利そうなプラグインが色々と紹介されていました。庶務さんがConfluenceを使用しているというのが面白かったです。それとプラグインをインストールすると管理者の仕事が増えるというのは、導入して見ないとわからないことだなと思いました。
あと、スピーカーの方の発言ではないのですが、ネットワーキングの時間にAtlassian社員さんに聞いたConfluenceの使い方で、
「まずはユーザースペース(自分用スペース)にメモを残していって、他の人にも役に立ちそうだったり、マニュアルとして残す必要が出てきたときに清書する」
が良さそうだったので、がんばらずに使っていこうと思いました。
イベント情報サイト(プレゼン資料が公開されています)
CodeIQの忘年会に参加した
4カ月近くたってしまいましたが、昨年末にCodeIQ大忘年会に参加したのでその記録を残しておきます。
最初は元グーグルエンジニアの及川さんの話を聞いた。Qiitaの社内で行われている取り組みなどが知れて興味深かった。ChatOpsすごい。
次に、倉貫さんと栗栖さんの対談があった。リモートワークの話。採用の話。コードの品質の話があった。リモートワークはなかなか自分がその状態になることは想像できないのですが、エンジニアの仕事は時間に縛られるものではないので有りなのかもしれないと思った。
採用の話では、面接を何度も行う事や、仕事を一部まかせてみる、1年以上検討するなど、息の長い丁寧な取り組みが必要なのだと思った。また、重視することとして、技術力はもちろんだけど、向上心が重視されていて、それを会話でを通じて引き出し見極めるというのが、よく考えられているなと思った。
その次は、Caveさんの話。ゲーム会社の生々しい話で面白かった。ゲーム会社もコミュニケーションでなんとなるということで意外とSIerみたいなところがあるなあと感じた。
その次は、澤さんのプレゼンのプレゼンでした。プレゼンで重要なのは1.ビジョン:Why何のためと2.What何を伝えるが大事で、3.話術:Howどうやってはその次だというのが印象でした。内容盛りだくさんなのでプレゼン資料を見ると良いと思います。
LT前の最後は、伊藤さん、増井さん、喜屋武さんによるパネルディスカッション。伊藤さんの影響力はすごいと思う。寿司対談の最終回が炎上した話をされていて、そう言えば見逃していたので見ようと思った。
あとはLT。ちょまどさんが可愛い外見に反してガチなエンジニアだったのですごい。あときゃんちさんは美人。
他の方のレポート他:
Angular 2のビルド周りについて調査した
以下の記事で入門して、公式チュートリアルの学習には、Plunker を使用していたので、手元で試していなかった。
npm i angular2してHello World!するところまで - Qiita
いざ、自作プログラムを作成しようと思った時に、色々とわからなかったので、調べたことをまとめた。
TypeScriptのコンパイル方法
tsファイルから、jsファイルへの変換(トランスパイルというらしい)には、tscコマンドの-pオプションで現在のディレクトリを指定する。
beta.6でtsconfigの書き方が変わったことによるエラーが出て、自分のミスと切り分けがつかず、少し悩んだ。targetに"es6"を設定することでエラーが出なくなった。
tsconfigのfilesは、エントリポイントを指定すると書いてあったので、boostrapメソッドを記述したファイルを指定した。 公式チュートリアルのフォルダ構成だと、app/main.ts になる。
jsファイルをBrowserifyで一つにまとめる
tscによって変換したjsファイルを一つにまとめる。とりあえずコマンドの引数にjsファイルを複数指定したら動作した!
でもtsファイルを作るたびに、指定を増やすなんてことはしたくないなあ~と思い、解決方法について調べた。
これはbrowserify-handbookというサイトに書いてあった。requireメソッドのツリーをたどって依存関係を構築してくれるらしいので、こちらもエントリポイントだけで良いみたい。
その結果、なんとか複数ソースファイルを使用したHello Worldが動作することを確認できた。
Httpサーバーで実行するにはどうするのか?とかリリースどうするのか?とかあるけど、とりあえず作成に入ろうと思う。
Angular 2 Router挑戦
Routerでつまずく。browserifyでやろうとすると壁があちこちにあるな。......そうか!Routerを使う場合はサーバー上で実行しなければならないのか。
browserifyのサイトにあったbeefyを-gオプションでインストールして実行。beefyにbundle.jsを渡したら動いた。
ところが翌日に、昨日は動いたのに今日は動かないという現象が発生。buf.copyでエラーになる。リソースの読み込みに関するエラーのようだ。 そこでbudle.jsの代わりに、bundle.jsを読み込んでいるindex.htmlをbeefyに渡すようにしたらエラーが出なくなった。
Firefox, Chromeでの動作確認
今までEdgeで動作確認をしていたが、他の人に確認してもらうために、FirefoxやChromeで試してみると、動作しない!変換されたJSを見てみると、classという文字がある。つまり、ES6形式のJSになっていた。
そこで入門に使用した記事を再び見ると、beta.6対応版になっていた。それに従って、babelifyを使用すると、今度はbabelifyでエラー。presetsで指定したes2015が見つからないというので、babel-preset-es2015をインストール。
そうすると、FirefoxやChromeで動作するようになった。 index.htmlで指定していたxxxpolifill.jsも不要になった。
今後
チュートリアルに手を加えて、検索機能や保存ボタンを作ってみた辺りで、調査は一区切りとした。Angular2の開発が進んで、ng2-bootstrapとかIonic 2の情報が増えてきたら、また調べようと思います。
参考までにpackage.json、tsconfig.json、index.htmlの内容を残しておく。
package.json
{ "name": "angular2-sample", "version": "1.0.0", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "tsc": "tsc -p ./", "browserify": "browserify ./app/main.js -t babelify -o ./bundle.js", "beefy": "beefy ./index.html", "build": "npm run tsc && npm run browserify", "bs": "npm run tsc && npm run browserify && npm run beefy" }, "babel": { "presets": [ "es2015" ] }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-preset-es2015": "^6.5.0", "babelify": "^7.2.0", "browserify": "^13.0.0", "typescript": "^1.7.5" }, "dependencies": { "angular2": "^2.0.0-beta.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "^0.1.2", "rxjs": "^5.0.0-beta.0", "zone.js": "^0.5.14" } }
tsconfig.json
{ "compilerOptions": { "target": "es6", "noImplicitAny": true, "removeComments": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "moduleResolution": "node" }, "files": [ "./app/main.ts" ] }
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Angular 2 Sample</title> </head> <body> <my-app>Loading…</my-app> <script src="./bundle.js"></script> </body> </html>
Angular 2をさわってみたので、参考になったサイトをまとめる。
とあるシステムを作り変えることになって、現在のシステムの解析や、システムの使われ方の聞き取りなどタスクが割り振られる中で、アーキテクチャの検証タスクになり、Webアプリによる実装の検証担当になり、Anugular2をさわってみたので、参考になったサイトなどをまとめる。
本
- JavaScriptoon2
最初に読んだのがこれ。概要がわかりました。残念ながら、ソースはそのままでは動作しなくなっていました。いくつかのサイトを読んでみましたが、まだSystemJSを使用してローカルでの確認はできていません。
サイト
このサイトを見ながらやることで「Hello World」を動作させることができました。
わからないながらも、Angular2カテゴリを一通り読みました。
一通り目を通した後、ほかのサイトを読んでいて気になったところを何回か読み直しています。最初のサイトは、これの2日目の記事ですが、17日のDIに関する記事もおすすめです。
公式のQuickstartです。ほかのサイトでQuickstart相当の内容は確認していますが、次に読むことになるTutorialの前提となっている内容なので、目を通しました。
公式のチュートリアルです。今読んでいるところです。
公式などからリンクされているブラウザ上で動作確認ができるサイトです。アップデートなどでローカルだとビルドや実行がうまくいかないことがあるので、このサイト上で動作を確認しながら学んでいます。
開発状況や更新情報を日本語でまとめてくれているサイトです。公式のQuickstart通りにやってもうまくいかない時は、ここを参照すると良いと思います。
とりあえず、こんなところ。
(小ネタ)2重ループをLINQを使って書く
コレクションが二つあって、片方のコレクションの値で、もう片方のコレクションを検索して処理を行う時に、2重ループを使うことがありますが、これはLINQを使用して書くことも出来ます。
ただしサイト内で言われているように、LINQのメソッド構文で行う場合はSelectManyメソッドを使用するのですが、使い方と理解するのがなかなか難しい。
クエリ式を使用すると、このケースにおいては、SQLを知っていればだいぶ理解しやすくなるのでクエリ式を使用するのが良いようです。
ちなみに、片方のコレクションに含まれているインスタンスに、もう片方のコレクションのインスタンスの値を代入する場合は、以下のようにforeach文を使用した方が楽な気がします。
foreach (var obj in listB) { var single = listA.SingleOrDefault(o => o.Id == obj.Id); if (single == null) { continue; } single.prop1 = obj.prop1; single.prop2 = obj.prop2; }