スポンサーリンク

JavaScriptの業務スキルレベル　判別表　（５段階）

javascript 教え方 プロジェクトマネジメント スキルチェック


JavaScript の簡易スキルチェックのための調査表。印刷用。


レベルは，０から４までの５段階。

  • （０） 非 JavaScript開発者
  • （１） 初学者（入門書を学習してゆく段階）
  • （２） ノーマル（基礎的な知識があり，ある程度の動くものを作れるようになった段階）
  • （３） 中級者（開発プロジェクトで１人月としてカウントできる水準）
  • （４） 上級者（メインPG/メンターとして，主設計を任せられる水準）

Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。


※なお，下記URLでは10段階に細かく分ける方法が公開されているが，それだと細かすぎてレベルが前後する可能性があり，業務上のスキルチェックは難しいかもしれない。

javascriptプログラマのレベル10
http://tech.kayac.com/archive/javascr...


※また，下記URLでは「初級・中級・上級」のおおまかな特徴が示されている。しかし論考の翻訳記事という形なので，スキルチェック実施には使いづらい。

あなたはJavaScriptを知らない
http://d.hatena.ne.jp/suginoy/2011111...


下記で「自分に当てはまる項目が最も多いレベルが，自分の属するレベルである」とする。

※ただし，中級者の項目に書いてある事は，上級者にも当てはまる場合がある。



＝＝＝＝　紙で渡す場合は，ここから下を印刷　＝＝＝＝





◆◆　JavaScriptに関するアンケート　◆◆



自分に当てはまる項目に○を，当てはまらないものに×をつけて下さい。


10分程度で記入を終えて下さい。


※もし，わからない用語があったら，その用語に下線を引いて，？マークを書いてください。



（０）非 JavaScript 開発者

  • JavaScriptの事を「ジャバ」と呼んでいる。
  • 画面上で物が現れたり消えたりするのを指して「Ajax」と呼んでいる。
  • JavaScriptの事を，「Javaスクリプト」とか「JAVAスクリプト」と表記している。その表記だと完全に別物の言語を指す，ということを知らない。

（１）初学者（入門書を学習してゆく段階）

  • JavaScriptは，ちょっとさわった事ならばある。
  • if，for，while，switch，break，continue，function などの基本的な制御構文は，何も見ないで書ける。
  • ネット上で拾ったライブラリやサンプルコードを自分で流用する時に，パラメータの部分（数値とか）を変えて，少しだけカスタマイズして使う事ができる。
  • HTMLの地の文の中に処理そのものをベタで書いたり，jsファイルの中に関数をそのまま並べて書く，というコーディングスタイルだ。
  • document.getElementById() という関数を使ったことがある。しかし，DOMについては何も知らない。
  • バグをなくすために，「バグが出たプログラムに対して，あちこちに alert() を埋め込んで確認する」という方法を主に取っている。
  • alert() と書けばアラートを表示できる，ということは知っている。しかし，そのalertというメソッドをどのオブジェクトが持っているのかは知らない。
  • for文を書く際，
    • for( var i = 0; … とせず，
    • for( i = 0; … というようなコードを平気で書く。グローバル汚染の認識がない。
  • document.all や document.form といったコードを書く。
  • インデントが３や４を超えるような，保守性の悪いコードを平気で書く。（例えば，functionの中のforループの中のif文の中にさらにループを書くとか）
  • どこに書いてあるスクリプトがどのタイミングで実行されるか，あまりよくわかっていない。
  • HTMLを書く際，tableタグの中にtbodyタグが無いとJavaScriptの動作上困る，ということの理由が分からない。
  • 本屋や書店で，JavaScriptの本がJavaのコーナーの棚に陳列されているのを目にしても，特に憤りを覚えはしない。
  • Firebugというものを何となく知っているが，それでも「もし作っている物の対象ブラウザがIEだけなら，わざわざfirefoxを立ち上げてfirebugを使う必要性はない。」と考えている。

（２）ノーマル（基礎的な知識があり，ある程度の動くものを作れるようになった段階）

  • JavaScriptで，プロトタイプベースのOOPができる。
    • つまり，自分で独自に定義したJSON形式のオブジェクトを new して，そこで生まれるインスタンスたちに仕事をやらせる，というコーディングスタイルである。
  • JavaScriptでは全てが連想配列である，という事を知っていて説明できる。
  • ある程度DOM操作ができる。DOM Event（例えばDOM Level 2 Event Model）についてはあまり知らない。
  • DOM要素に対し，各種イベントをセットして，画面に動的なしかけを埋め込む事ができる。
    • しかし，複数の要素に対して色んなイベントのコードをバラバラに記述しているので，次第にイベント周りのコードがめちゃくちゃになり，画面の挙動が理解不能になってしまう。（つまり，個々のイベントリスナ関数をバラバラに記述しており，１つの管理オブジェクト内にまとめて定義していない。）
  • jQueryとprototype.jsを並存させるためには「(function( $ ){ 〜 })( jQuery )」のように記述する必要があるわけだが，このコードの意味を理解できる。
  • JavaScriptで，正規表現を使いこなせる。
  • JavaScriptからのCookieの読み書きに慣れている。
  • 静的CSSの作成だけでなく，動的なCSS操作もまあできる。つまり，CSSプロパティをJavaScriptから動的に変える事により，静的CSSの限界を補うことができる。
  • JavaScriptはマルチスレッドだと思っている。
  • thisというキーワードを日常的に使ってコーディングできる。つまり，JavaScriptでオブジェクトをまともに利用できる。thisが文脈依存である事は何となくだけ知っている。
  • 無名関数/クロージャを日常的に使ってコーディングできる。その詳しい効用は分かっていない。
  • JavaScriptの変数には，参照と実体の２種類があるという事を理解している。それを理解していないと問題が起こる，という事を人に説明するための短いサンプルコードを作れる。その点を図を使って人に説明できる。
  • function f( x, y ) という関数を定義したときに， f( 1 ) のように呼び出し時の引数の数が少なかったり， f( 1, 2, 3 ) のように呼び出し時の引数の数が多かったりする場合の挙動がどうなるのか，理解していない。そういった仕様がどう役立つのかわからない。だから，「arguments」というオブジェクトの使い方もよく知らない。
  • 配列中の要素を順番に操作する時に，for文やwhile文を使ってスキャンするのが間違っており，オブジェクト指向として正しくない，という事を説明できる。かわりに，いつも map()，each()，select() などのイテレータメソッドを使ってコーディングしている。
  • 例外オブジェクトやthrow文を使ったコード設計が具体的にどういう時に必要になるのか，よく理解していない。
  • Firebugで，デバッグやレイアウト調整まではできる。
  • 「DHTML」という死語をいまだに口にすることがある。
  • XmlHttpRequestを自由自在に使いこなせてはいない。
  • JavaScriptを使って複雑なHTMLを動的に生成しなければならず，面倒だと感じることがよくある。または，サーバ側のCGIのコードと全く同じようなロジックを，JavaScriptのコードでも書かなければならず，二度手間・二重管理になってしまう。
  • scriptタグの中身は，<-- --> などでコメントアウトする。その場合に生じる不具合を知らない。
  • JavaScriptの自動単体テストの方法を知らないので，品質の保証されたコードを書くことができない。ある程度手動で試験を行なうが，そのために，素早い仕様変更に対応することを難しく感じている。

（３）中級者（開発プロジェクトで１人月としてカウントできる水準）

  • JavaScriptでやりたい事は，JavaScriptでほぼ実現する力を持っている。
    • （外部仕様が渡されたら，とりあえず完成にこぎつけられる。ただし，内部仕様と工数は度外視している。）
  • Prototype.jsやjQueryなどのライブラリを渡されたら，中身のコードを自力で追って動作を理解したり，動作を軽く修正する事まではできる。
  • Prototype.jsやjQueryのような汎用ライブラリの上で動作するプラグインを，必要なら自作できる。
  • thisというキーワードを使ってコーディングできる。thisのコンテキストがわかり，自分でコンテキストを変更する方法も知っている。
  • JavaScriptで，クラス（プロトタイプ）の継承ができる。（ライブラリを使わない）
  • メインの関数を作るとき，当然，引数はJSONにする。その理由を説明できる。
  • 無名関数/クロージャを使わないとJavaScriptのコーディングが困難である，という事を知っており，遅延評価について説明できる。
  • inというキーワードを使ってコーディングできる。配列に対してinを使ってはならないという事を知っており，inが必要になる局面を具体的に例をあげて説明できる。
  • argumentsというキーワードを使ってコーディングでき，どう役立つのか説明できる。
  • Ajaxのおかげでビューの製造工程をDRYにできる，という事を説明できる。
  • XmlHttpRequestをラップするようなライブラリを日常的に使っている。なので，自分にとってAjaxは，空気や水のような存在であると言える。
  • Firebugで，XmlHttpRequestのレスポンスの中味を見たり，XPathの調査やパフォーマンス計測（プロファイル）ができる。
  • alertやconfirmがDOM構造に属さない特殊な存在であり，イベント発動処理に際して問題を引き起こす可能性がある事を知っているので，取扱いに注意している。
  • ブラウザ間でJavaScriptの動作にどのような差異があるのか，と尋ねられたら，5〜6個程度ならばその場ですぐに言える。
  • 「サイ本」とは何か理解しており，内容もだいたい把握している。
  • ドラッグ＆ドロップやアコーディオン，タブ，ツリー型メニュー，カレンダーなどのUIを，既存のライブラリの組み合わせですばやく作成できる。エフェクトのかけ方にも慣れている。

（４）上級者（メインPG/メンターとして，主設計を任せられる水準）

  • （任意の）やりたい事は，JavaScriptでほぼ実現する力を持っている。
  • IEやOperaで，Firebugと同じようなことができる。
  • 不明点が発生したら，ECMA Scriptの仕様書の該当箇所から，ブラウザの動作を説明できる。
  • ブラウザ間でJavaScriptの動作にどのような差異があるのか，ほとんどの相違点とクロスブラウザ対策実施方法を把握している。
  • JavaScriptの単体テストツールを利用できる。アプリケーション内のJavaScriptモジュールを，チームで網羅的に単体テストする事ができる。
  • Prototype使い達がprototype.jsを好む理由がわかっており，自分も同感している。　同時に，Visual StudioでjQueryが正式サポートされるに至った理由を知っており，自分も同感している。　同時に，両ライブラリのデメリットを客観的に語れる。
  • Prototype.jsやjQueryのような汎用ライブラリを，必要なら自作できる。
  • 単なるプログラミング一般の高速化ではなく，JavaScript特有の，高速化のためのセオリーを理解している。
  • typeof演算子やinstanceof演算子を使いこなし，その必要性も理解している。
  • JavaScriptのコーディングをせずにJavaScriptを使った開発を進めて行く，という手法を有効活用している。サーバサイドでjsコードのラッパの役目をするDSLを組むなど。
  • DOM Level 2 Eventsについて熟知しており，createEventやdispatchEventをクロスブラウザで扱うための方法を理解している。それらがなぜ必要なのかも説明できる。
  • デザインパターンやアーキテクチャパターンの概念を，（完全に等価ではないとしてもアナロジーとして）自分なりにJavaScriptでの設計に取り入れ，そのメリットを一貫性を持って人に説明する事ができる。それらを実際にプロジェクトで利用している。
  • サーバ側がDAOの役目さえ果たしてくれれば，アプリの残り全体はJavaScriptだけで一人で書ける。
    • しかし，実際にそうしない根拠も説明できる。
  • JavaScriptの最前線の動きを常にウォッチしている。
  • JavaScriptを要件に応じて適切に難読化・暗号化・圧縮できる。
  • 有用なJavaScriptライブラリやAPIのストックが多い。さらに，そのストックが自分の中で絶えず増えて行くような，何らかのルーチン/仕組みを持っている。

（補足）JavaScriptに対する意識/認識に関わる項目

  • 自分の環境で .js ファイルをダブルクリックした時に，エディタは立ち上がらない。その .js ファイルはその場ですぐに「実行」される。
  • ブラウザ上の煩雑な作業は，ブックマークレットやGreasemonkeyでスクリプトを自作する事によって自動化している。（スクリプトの言語はJavaScript）
  • ブラウザ上の煩雑な作業は，ActiveX/COM経由でIEを操作する事によって自動化している。例えばWebスクレイピングなど。（言語は問わない）
  • ブラウザ上の煩雑な作業は，FirefoxのXPIプラグインを自作する事によって自動化している。（言語はJavaScript）
  • デスクトップ上の煩雑な作業は，WSHやWSFやHTAでスクリプトを自作する事によって自動化している。（スクリプトの言語はJScript）
  • エディタ上の煩雑な作業は，マクロを自作する事によって自動化している。（マクロの言語はJScript）
  • 時折，コマンドプロンプトから直接JScriptを実行する。
  • JScript.NETかHTAを使った業務アプリケーション開発案件の経験がある。
  • 自作のスクリプトを利用する事によって，任意のWebサイトの動作を自由に改変する事ができるので，「このWebサイトは不便だ」という概念を持っていない。
  • Google Maps APIを使って，有用なサービスを短時間で構築できる。もしくは，excanvas.jsを使えるので，Flashがいらない。
  • VBScriptの可能性を追求したあげく，実用上使い物にならないことを悟り，VBScriptを捨てたという苦い思い出がある。
  • node.jsなどのライブラリを使って，サーバサイドJavaScriptアプリケーションを作成できる。



＝＝＝＝　ここまでを印刷　＝＝＝＝





フォローアップ用のURL：


（０）非 JavaScript 開発者


大塚食品のページ
http://www.javatea.net/


AJAXとDHTML(Javascript+HTML+CSSなどクライアントサイドでの処理手法)の違い
http://www.u-ziq.com/blog/2007/03/aja...


JavaScriptとJavaスクリプトが別物である件について
http://blog.goo.ne.jp/hiuchida/e/b8bd...

  • JDK６より「Javaスクリプト」APIが追加されました（JavaScript APIではない）

（１）初学者（入門書を学習してゆく段階）

文法の網羅


JavaScript基礎文法最速マスター
http://d.hatena.ne.jp/gifnksm/2010013...


JavaScriptでDOMを使う――オブジェクト指向入門の入門
http://piro.sakura.ne.jp/latest/flake...


JavaScript 中級講座 ~Ajaxを学ぶ前の基礎知識
http://www.amazon.co.jp/JavaScript-%E...


JavaScriptを洗練させるPrototype.js：Prototype.jsを使う準備 JavaScriptの復習 (amachang)
http://www.thinkit.co.jp/cert/article...

書き方の改善点

カウンターのエラー
http://language-and-engineering.hatenablog.jp/entry/20080826/1219758515


javascriptで扱えるdocument.all要素の基本的な使い方や役割や意味などについて教えてください
http://oshiete.nikkeibp.co.jp/qa11979...


script要素
http://refluxflow.net/2005/09/htmlref...

（２）ノーマル（基礎的な知識があり，ある程度の動くものを作れるようになった段階）

JavaScriptで，オブジェクトやクラスの初歩を理解しているか，実力を確かめるための７つの質問　（サンプルコード付き）
http://language-and-engineering.hatenablog.jp/entry/20100921/p1


JavaScriptのthisキーワードをちゃんと理解する


JavaScriptでのクロージャの使い方

ソシオメディアのUIデザインパターン集


JavaScriptの動かないコード　(中級編)　setTimeoutのタイマーが指定時刻に動かないエラー　（JavaScriptがマルチスレッドだという誤解）
http://language-and-engineering.hatenablog.jp/entry/20090614/p1


（３）中級者（開発プロジェクトで１人月としてカウントできる水準）

言語の仕様について

JavaScriptの動かないコード　　(JavaScriptエラー集)
http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779


Under Translation of ECMA-262 3rd Edition
http://www2u.biglobe.ne.jp/~oz-07ams/...


W3C　Document Object Model Events
http://www.w3.org/TR/DOM-Level-2-Even...

document.createEvent - MDC
https://developer.mozilla.org/ja/DOM/...

トレンドとツールについて

購読


IEでのデバッグツール

設計手法について

具体例で説明するデザインパターン
http://d.hatena.ne.jp/nitoyon/2008082...


POSAのアーキテクチャパターン
http://d.hatena.ne.jp/asakichy/200906...


Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために
http://www.amazon.co.jp/Ajax%E3%83%87...


（４）上級者（メインPG/メンターとして，主設計を任せられる水準）


なし

参考

Mozilla 採用ページ
http://www.mozilla.com/en-US/about/ca...



P.S.

逐次改定する。




　

language_and_engineering 読者になる

広告を非表示にする
スポンサーリンク
スポンサーリンク