9月 2017

お久しぶりです。

ブログ更新が2014年から止まっていますが、筆者は変わらずに開発者もやっています。

ここ数年javascript(以下、js)のライブラリーを使用しAjaxとjsonを合わせたシステム開発で楽しんでおります。サーバーサイドはjson出力できれば何でもよいかなぁ（笑）

Sencha Ext JS Webix OpenUI5 AngularJSなど使用し、一番使い込んでいるのはExt Jsです。

20年近くこの業界におり、要件定義など紙を書く仕事より手を動かすほうが相変らず好きなので、オープン系を中心に色々な言語を経験習得してきています。

どの言語でも初めに勉強する際には日英(英の方が圧倒的に多い)関わらずサンプルを見ながら皆さん勉強し、コピペしながら使い方を覚えていくと思います。他の言語ならサンプルソースを元にしサクサクと勉強、習得、本番システム作成と思い通りの速度で構築していくことが出来るのですが、jsと言う言語については同じような要領で進めてみても開発時に四苦八苦している方やお手上げ状態で涙目になっている方を多く見受けています。

そこで要点について解説したいと思います。

まずキーとなる部分はhtmlで使用され各タグに設定もできる「id」となります。これはcssをリンクする際にも使用できますが、表示されているhtml上で必ずユニークにする必要があり、その特性を生かしjsではもっぱらdomオブジェクトの指定やdomと紐づくjsコンポーネント名として使用され外部クラスからサーチする時など、操作する際に使用されております。

タイトルで上げたjsを含め各種サンプル等では、このidが固定(リテラル)なことが多くサンプルソースを参考にし、サクッと組み合わせても、思うように動かないことが多々あるのですが、その理由の大半がid名を固定のまま使用した結果、重複してしまい動かないというパターンが圧倒的に多い気がします。

ここが心得部分となりますが、jsコンポーネントクラスのインスタンスを作成する際、親クラスで動的にユニークなidを生成しそのidを埋め込む形で子クラスを生成する。(子クラスで生成し親クラスへ送るという逆パターンも状況によりあり)また、そのidを親クラスや上位コンポーネントで記憶しておき子クラスを操作する。それにより名前の衝突を回避でき正常に操作することが可能となります。サンプルのクラスは子クラスを複数持っていることが多く、その全部のidを動的生成へ変更することと、親側で操作する部分も動的生成されたidを使用するように修正する必要があります。よってサンプルのクラスはid＝固定(リテラル)で作成されていることが多いので簡単に移植できない状況となっています。

各ライブラリには動的にidを生成するお手軽メソッドが存在することが多いので、そのメソッドを使用することをお勧めします。(例:Ext.id())

当たり前ですが世の中、何かを識別するには必ずユニーク名が最後に必要となります。マイナンバーが何処まで使用できているのかわかりませんが日本では人の区別を姓名や生年月日、市区町村などで見分けているようですが、その曖昧さのせいで間違って他人の年金を管理するなどエンジニアとしては考えられない状況が昔からあるようです。コンピュータの世界では近年macadressを使用して生成するキー、uuidを使うことが多いですかね。しかし、uuidですら天文学的にはユニークを保証できないのですが（笑）

話をjsに戻して、最近の言語、C#、VB.Net、Java、PHP、Rubyなどではあまり使用しないスレッド処理（非同期）の概念がAjaxとjsonでは求められ考えながら作りこむのが大変面白いです。昔、C言語でWindows API Messageを使用しフックされてから動作させるアプリを思い出します。

あと、jsは動的にクラス継承、メソッド、プロパティ、メンバ変数を増やしていけるスクリプト言語なので、他の言語のようにコンパイルエラーで問題点を簡単に炙り出せない。エンジニアがjsの特性を理解し、より明確なドキュメント化やカプセル化をしないとチーム単位で開発スピードを上げるのが大変そうです。

この動的に色々やれる部分は、昔、C#、Javaではシリアライズとデシリアライズとしていくつか作ったことあります。動的にクラスをテキスト化しサーバー間を通して送り先サーバーでテキストからメモリ上のインスタンスとしてクラス化し送り先のJavaでそのまま動作させるということももちろんできますし、データベースからモデルを読み込み動的にJavaクラスをインスタンス化することもできます。これはSOAPという技術でも使用されたり、同じ原理でJavaのStrutsも動いており、Strutsに関しては、この部分の脆弱性を危惧する声が大きいのも話題となっていますね。

少し話が脱線しました（笑）

js楽しいのでイチ押し言語です。

心得「id」は動的に生成する！でした。