Rのつく財団入り口

ITエンジニア関連の様々な話題を書いているはずのブログです。

【雑記】2018年を振り返る【おしごと編】

 12月のAdvent Calendarしかり、年末年始の振り返り・抱負しかり、エンジニア界隈のブログはかなり賑やかでしたね。家にいるときに様々な方のエントリを拝見してスターをつけていきました。
 12月はAdvent Calendar4本とかけっこう大変だったんや!ということでだいぶ遅れましたが自分用に、KPT法のKPのあたり、YWT法のYWのあたりを振り返ってみたいと思います。

2017年の振り返りはこんなことを書いていました。 iwasiman.hatenablog.com

f:id:iwasiman:20151204125435j:plain:w500

おしごと編

 2018年は規模が大きいプロジェクトもあり、プロジェクト数としては少なめでした。

WebAPIを使うおしごと

 前の年から続いていた社内の仕事。文書管理パッケージのアプリケーションにデータを登録、これをWebAPIの口を通じてJSONで通信しまくって取得、これを表示したり検索したりできる一見Webサイトに見えるけど実際はPHPのWebアプリケーションを作るお仕事。WebAPIで通信する部品は前に僕がPHPで試作した部品クラス群、Webアプリの基盤部分は僕が別のプロジェクトで作ったMVC+S層アーキテクチャの軽量級のPHPフレームワークを統合させ、WebサーバはIISの上で動かしています。
 開発は事業部内の近いとこの部門と連携し、スクリプト系言語の高生産性とフレームワークを作った本人が開発している長所を活かし、技術的な課題は早期に解決してバンバン進めました。
 ある程度リスクとして予想していたのですが困ったのは、HTMLデザインはデザインをやってるグループ内他社から出てくるのですが向こうは開発をしてるわけではないので動的ページのことが色々分かってなかったり提供が遅れたり、凝りまくったCSSとJSを入れ込んだらjQueryが余計なイベント制御をしてたりして途端に動かなくなったり、あれこれ起こったこと。お陰でUI系のライブラリとかJSのjQueryに前より詳しくなれました。

 規模も小さいし金額的にも大きくはないのですが、会社的にはちょいと意味のあるおしごとでした。無事予定通り終わって社内サイトからリンクも貼られて公開が開始されました。イントラネットで守られた弊社グループの内側ではまだまだサーバーサイドJavaで動いている社内システムが多いのですが、事例の比較的少ないPHPで確かな実績を上げられたのも大きな収穫です。

フロントの技術をたくさん使うおしごと

 上司の司令でまず様子を見に行ってきてくれと言われた割と珍しい仕事がこちら。縁のあるお得意様でフロントはJavaScriptとライブラリ多用+サーバサイドはPHPフレームワークがLaravel、後ろにMySQLで開発中だったWebアプリケーションの案件。ちょいと事情があって開発が頓挫しており、共同開発で一緒にやって立て直してくれないかというお話。
 コードの現物をいろいろ調べて概算で規模も見積もり、最初はまずはリファクタリングして既存部分もチーム開発に耐えうるぐらいに綺麗にお掃除してからプロジェクトを立て直して先に進もうという方針を立て、コンサル的に提案していきます。

 この仕事も一番最初はプレッシャーでした。へーしゃの事業部の身の回りの観測範囲では社員でまずPHPerそのものが少ないし腕利きのLaravel職人やJavaScriptの達人は正直見当たらないし、フロントエンドの最新技術導入の事例もまだほとんどありません。
 しかし所属部門でたぶん自分ぐらいにしか対応できないこと、アーキテクトとしてフロントエンド技術に触れられる絶好の機会だと思ってピンチをチャンスに変え、取り組むことにしました。ものすごい勢いで本を何冊か読んでWebを調べまくって基礎を理解し、お得意様の前では「フロントエンドも分かる人です(キリッ」と前から詳しかったような顔をして進めていきます。
 当ブログで2018年3月ぐらいからJavaScript関連の本の感想エントリがずらーっと並んでいるのは、すべてこのおしごと関連でした(笑)。Qiitaとか技術系ブログとかも見まくって無言フォローとかよくやりました。調べた頃はまだVue.jsの本なども出揃う前の頃でしたが、本やWebで情報を公開してくださっていた先人の皆さんありがとうございます!

iwasiman.hatenablog.com

iwasiman.hatenablog.com

 この案件ではクライアントサイドのJavaScriptのコード比率が多かったので、まず関数を全部ES6対応のクラス形式にしてコメントも書いたりして整備、Node.jsを導入して使うJSライブラリはプロジェクトで固定してnpm経由で取ってくるように。Babel+PolyfillでIE11対応、全体はWebpackでビルドしてビルド後のまとまったコードが実際には動くようにしました。
 今はLaravelがVue.jsの公式スポンサーになっているのでLaravelプロジェクトを新しく作ると最初からVueを置く場所を用意してくれていますが、このおしごとは既存アプリケーションなのでその手は使わず、プロジェクトのディレクトリ構成も一部変更して改善、サードパーティライブラリが区別しやすくなるようにしました。
 実装もエディタは何でもよいのですが選択肢として流行りのVisual Studio Codeを導入、入れる拡張機能もESLintやPrettierなどなど定番系を開発標準で決めて……と、フロントエンド開発の基本の定番どころを一通り導入した感じです。
 フロントエンドフレームワークは比較検討の結果、対象アプリケーションはSPAではないし簡単な画面もあるので部分的な導入がしやすいことから、当時はまだ本が出揃う前でしたがVue.jsを選択しました。

 当初の思惑通りに行かなかったところもあります。最初はネット情報の「まだjQueryで消耗してるの?」的なやつに感化されて脱jQuery完全Vue.js化の夢を見たのですが、実際にコードを探っていくとjQueryを多用していて開発規模的にも外すのは無理と判明。クライアントサイドでのDOM操作が重く今後の拡張やメンテで問題になりそうな画面では部分的にVue.jsを導入してもよい、という方針に方向転換しました。
 特に難しい画面のひとつのリファクタリングとVue.js導入も自分が担当したのですが、込み入ったJSコードの内部構造と処理を解析して一部をVueコンポーネントに入れ替え。劇的ではないですが該当部分のコード規模が7割ぐらいに減り、ほとんどデバッグ不可能だった中の動きがChromeWeb Developer Toolsを見ながらだと内部のデータがいつも分かるように改善できました。
 このリファクタリングした画面も結局jQueryとVue.jsが共存する形になっているのですが、jQueryが主にclass指定のアクセスだったこともあるのですがDOM参照だけで書き換えをしなければVue.jsとも共存してふつうに動くんですよね。このへん含め、実際に導入して初めて分かった知見もいろいろ得られました。

 このおしごとはその後もメンバを増員して続き、追加機能の開発に最終的にはAWS上に移行とまだ続いています。会社のふだんのプロジェクト群に比べたら新規技術リスクがかなり高い中、この共同開発の基本のレールを定めてプロジェクトを発進させ、大きな問題なく軌道に載せられたのは2018年の最大の収穫でした。
 個人的にもサーバサイドのLaravel実装、クライアントサイドのモダンJavaScript実装にVue.jsの実案件導入にフロントエンドの各種定番技術経験と、内なる武器をどんどん増やすことができてオトクな機会でした。

社内の業務システムなおしごと

 RPAが最近周りで流行っているのですがその関連で出てきた案件。ザ・SIer伝統のマクロつきExcelでやっていたグループ社内の手続き業務をWeb化して便利にしてあげようという割とよくあるやつです。
 2019年1月以降のJavaライセンス有償化問題は各所で話題になっており、2000年台後半にJava(あるいは.NET)中心のSIer世界線を作り上げてそのまま進んで来ているへーしゃ界隈でも僕の周りではさすがに、新規案件ではそろそろJava以外の選択肢も…という雰囲気にはなっています。
 このおしごとは技術に縛りがないし、マネジメントする人も同僚の親しい人なので内部で提案し、じゃあ実績の出てきたPHPで今回は行こうかということに決定。クライアントサイドの画面制御は1画面内程度なのでjQueryで十分と僕が判断。
サーバサイドのフレームワークPHP界隈では今デフォルトになりつつあるし知見をより深めていきたいLaravelも候補に上げたのですが、ちょいと要件上の理由もあって僕が作った軽量級フレームワークで行くことになりました。うーん何気にこれで実績3案件目だ😇
 そして要件をいろいろ聞いていくと案の定やらなきゃいけないことが出てきたり、あーこれLaravelだと実現方法すぐには分からないし、改造や拡張を入れやすい自作フレームワークの方が取り回ししやすしこの選択でも良かったな、と後から思ったり。

 一般的にはこうしたオレオレフレームワーク車輪の再発明になるからアカン、定番のフレームワークで巨人の肩に乗るのが良い、とされています。概ねその通りなんですが、小規模の案件や個別要件、制限のあるおしごとだといわゆるフルスタック・フレームワーク的な重量級のやつを導入するより、軽めのフレームワークを使ったり仕組みを新たに自作したりした方が全体から見ると手間が少なく済んでやりやすい時もあるんですね。このへんはアーキテクトとしてもバランスよく、柔軟に対応していくべきところかなと思います。

 この案件で新たな試みとしては内部も高速化されたPHP7を使い文法上の表記もなるべく統一、メソッドの引数・戻り値は型をちゃんと書くルールにしてみて品質確保を試みることにしました。
PHPCon 2018などでも話題になっていましたが、今の最新はPHP7.3ですが将来のPHP7.4になるとTyped Propertiesで遂に変数の型も指定できるようになるんですよね。これはけっこう大きな動きになってネットでもかなり反響が出るのではと思います。

phpcon.php.gr.jp

qiita.com

 フレームワークの対応DBをSQL Serverにも増やしたりjQueryの定番ライブラリを使うことにしたモーダル画面周りを部品化したりドキュメントを改版したりしながら、現在も進んでいるところです。
 あとはこのおしごとは内部的なバージョン管理も自由なので、そろそろGit入れちゃおうZEということで進めたのですが、インフラ的なサーバマシンの事情で入れられなくてとりあえずSubversionを使うことに。まあ今はプロジェクトメンバーが少ないので別に困らないのですが、そろそろ『わかばちゃんと学ぶGit入門』を活用したいなぁ。

iwasiman.hatenablog.com

ふりかえり&Problem&Wakattaこと

 UIデザインにも凝ったシステムのサーバサイドを経験したことで、jQuery系のライブラリに触って前より詳しくなることができました。jQueryは決して悪ではないけどちゃんと使わないとまずいこと、今まではなんとなく使っていたので一回ちゃんと学び直したほうがいいなと思いました。
 ということで最初に読んだのがこの短い本。このJQueryの復習から始まって、モダンJavaScriptの理解とフロントエンドフレームワークの理解に進むことができたのできっかけとしては丁度良かったです。

iwasiman.hatenablog.com

 その後次の案件でフロントエンドの基礎を調べまくって本の感想エントリもいろいろ上げたりしました。

iwasiman.hatenablog.com

iwasiman.hatenablog.com

iwasiman.hatenablog.com

iwasiman.hatenablog.com

分かったのは、

  • 自分もJSがまだ信頼できない時代からサーバサイド開発していたのでなんとなくJSを敬遠していた節があったが、ES6時代でだいぶ進化している。一回JS自体を学び直すと良い。
  • フロントエンドは新しい概念や道具としてのツール、各種JSライブラリなど言葉が沢山あって混乱しがちだが、言葉のひとつひとつの指している定義を理解していくとだんだん分かってくる。
  • AngularもReactもVue.jsもその他のJSフレームワークも、雑に言うと素のJSやjQueryのコードで直接DOM操作していると大規模開発でどんどん辛くなるので見た目/ロジック/データを分離してメンテナブルに開発していくことをそれぞれのアプローチで実現している…という、本質を理解すると分かってくる。
  • フロントエンドはサーバサイドを駆逐して取って代わるものではなく、フロントに重きを置くならサーバサイドはAPIに徹してJSONのやりとりだけする、SPAでないなら特定画面にだけ導入するやり方もある、あるいはサーバレスアーキテクチャでサーバ側はAWSGCPにお任せして開発者はフロントだけ作る…など、アーキテクチャの多様性をもたらすものである。

 というあたりを理解しながら進んでいくと惑わず前に進めるなということです。
おしごとで分析してフレームワークの比較もしたので、せっかくなので表形式にして記事にしました。

iwasiman.hatenablog.com

はい、当ブログでこれ以上のバズりはもう起こらないのではというぐらいバズりました……😇😇😇
フロントエンド初心者の記事なもので詳しい人ホンマすいませんという感じです。この記事がバズった後の5月の連休の頃は、しばらくアクセス解析のグラフが天井を突き抜けていました(笑)

 あとは今やっている業務システム的なおしごとでは僕が作ったPHPフレームワークを使っているのですが、最近別のおしごとでも引き合いが来たりしました。実績のないものは採用されにくく、一度実績ができるとどんどん続く…というのは大企業だとよく起こるパターンだなと思います。

 そしてProblem的なところとしては……部門にいる前に面倒を見た後輩君で「いわしまんさんからも開発技法とかもっと学びたいです!」的な感じでもっとコードを書く仕事を常々やりたがっているメンバーがいて、こっちの案件に引っ張りこんできたいな〜と思っていたのですが、アサインの事情諸々で2018年はリクルートできませんでした。よし2019年にまたチャンスを狙おう。

 振り返ると2018年は社外との直接交渉や社内の距離が遠いところとの調整が必要になったり納期の厳しい大規模プロジェクトなどなどリスクが高かったりタフ度合いが大きいおしごとはなく、調整が必要なところは管理職やプロマネ担当の人、実際にものを作り上げていくところは自分が指揮とうまく分担できました。自分の主軸である技術力をメイン武器として存分に使うことのできた幸運な1年でした。

 フロントエンド系をモダンJSとVue.jsを実案件投入、PHPのLaravelも本格経験と、学びも多かったですね。こうしたチャンスに備えた生存戦略として、普段から継続的に学びを続けていて良かったとつくづく思います。
 所属部門の中でも今までどおりオールラウンダー的に活動、いろんな人に相談されたり新しい仕事の話を持ちかけられたりすることも前年に続きけっこうありました。
 マネージャーになりたくないマンとしても人の繋がりも大事にしつつ、へーしゃも大きいので会社全体の変革はエライ人たちに任せといて、まずは自分と自分の周囲から楽しいエンジニアリングをしていけるよう、2019年も活動していこうと思っています。