javascriptの業務スキルレベル判定の質問、ほぼ分からんかったから調べた。

今のところ携わる業務では、画面上でやりたいことは大体何となく出来ています。

ただ理解せず使用していることも多いので、自分の職務経歴書を書く際に、自分のスキルレベルって？？となったので調べつつ回答していきます。

以下のサイトのスキルチェック表で不明点が多くあったので、それに対して調べたことを書いていきたいと思います。

初級フリーランス

「ノーマル」レベルは、ほぼ分からんかった。。

【Level. 1】非 JavaScript 開発者

特に掘り下げて答えるところが無かったので飛ばす

【Level. 2】初学者（入門書を学習してゆく段階）

document.getElementById() という関数を使ったことがある。しかし、DOMについては何も知らない。

初級フリーランス

DOM。。普段HTMLを操作する時にDOＭというワードも使っているけど、具体的に何かは説明できない

DOM「Document Object Model」の略

JavaScriptなどの言語で、htmlの要素を操作するための仕組み

alert() と書けばアラートを表示できるということは知っている。しかし、そのalertというメソッドをどのオブジェクトが持っているのかは知らない。

初級フリーランス

知りません！

document.all や document.form といったコードを書く

初級フリーランス

document.all？？ document.form？？

GoogleChromeコンソールで確認したところ、以下のような感じでデータが取得されました。

念のため、フォームのあるGoogleChromeのコンソールでdocument.formを確認すると、undefinedになったので、とにかく今は使えないらしい。

HTMLを書く際、tableタグの中にtbodyタグが無いとJavaScriptの動作上困る。ということの理由が分からない。

初級フリーランス

tableタグの中にtbodyがあるのは普通だろうけど、javascriptの動作上困るんですか。。

具体的な例

以下のような<tbody>が無いテーブルで、各所属別の人数が知りたい。

// テーブルを取得
const sampleTable = document.getElementById('sample-table');

// tbodyが存在する場合は、以下のようにデータを取得可能
// sampleTable.tBodies;

// tbodyが無いので、rowsで各行を取得
sampleTable.rows;

>>>【結果】
　　HTMLCollection(4) [tr, tr, tr, tr]

データだけ欲しい場合でも、上記のように、HTMLCollectionで<thead> <tfoot>を含めた４つの<tr>が取得されてしまいます。

その為、「各所属別の人数が知りたい」というデータを取得する為には、<thead> <tfoot>を除外する作業も必要になり、<tbody>が無いと正確に無駄なくテーブル操作することが出来ない。

Firebugというものを何となく知っているが，それでも「もし作っている物の対象ブラウザがIEだけなら，わざわざfirefoxを立ち上げてfirebugを使う必要性はない。」と考えている。

初級フリーランス

Firebugというワードが初耳

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

JavaScriptで、プロトタイプベースのOOPができる

初級フリーランス

プロトタイプベース…　　OOP…

初級フリーランス

普段PHPを触っているので、ＯＯＰ = オブジェクト指向と言われれば、理解！

以下の参考サイトはTypeScript入門とはなっていますが、該当のページではJavaScriptのプロトタイプベースについて詳しく説明されています。

めちゃくちゃ分かりやすいです！

クラスベース

生成するオブジェクトはnew演算子（複数のOOP言語でインスタンスを生成する演算子として使用されている）で、クラスを素に生成される

// クラス
class Fruit {
	constructor (name) {
		this.name = name;
	}
}

// newで生成
const apple = new Fruit("リンゴ");

// 生成されたオブジェクト
console.log(apple);
>>> Fruit { name: 'リンゴ' }

プロトタイプベース

オブジェクトを素にして新しいオブジェクトを生成する

以下の例で重要なのは、素となるfruit.nameとapple.nameが異なるオブジェクトで異なる値だという事

原型のオブジェクトのデータは汚されることなく、ひな形のような役割。

// 素となるオブジェクト
const fruit = {
    name: 'リンゴ',
};

// 新しいオブジェクトを生成
const apple = Object.create(fruit);
// 名前を変更
apple.name = 'ジョナゴールド';

// 生成されたオブジェクト
console.log(apple);
>>> { name: 'ジョナゴールド' }

// 素のオブジェクトのnameプロパティ
console.log(fruit.name);
>>> リンゴ

// 新しいオブジェクトのnameプロパティ
console.log(apple.name);
>>> ジョナゴールド

JavaScriptでは全てが連想配列である。という事を知っていて説明できる

初級フリーランス

var text = “おはよう” とかも連想配列。。。？？

調べるのに時間かかって、先輩エンジニアにも聞いた

オブジェクト（構造型）

// オブジェクト例
const apple = {
    name: 'リンゴ',
    area: '青森県', 
};

連想配列の定義からいうと、javascriptのオブジェクトもキーを割り振ってアクセスすることが出来るので、連想配列といえる。

初級フリーランス

オブジェクトは分かるとして、配列や、var text = “おはよう” とかも連想配列。。。？？

配列（[‘リンゴ’, ‘バナナ’, ‘みかん’]）や、ただの数字（let num = 1）が連想配列だと言えるという事を理解する為に、まず、javascriptの9つの型を理解する必要があります。

以下のサイトに詳細が記載されています。

その次にprototypeという全てのオブジェクトが持つ、内部プロパティについての理解が必要です。

配列（構造型）

javascriptが持つ9つの型の中に、「配列」がありません。

構造型 / オブジェクト (Object)　の中に、new Arrayがあります。

実はconst array1 = ['りんご', 'バナナ'];もconst array2 = new Array('りんご', 'バナナ');も、型としてはobjectなのです。

// 配列例
const array1 = ['りんご', 'バナナ'];
const array2 = new Array('りんご', 'バナナ');

console.log(typeof array1);
>>> object
console.log(typeof array2);
>>> object

数値型（Number）・文字列型 （String）（データ型）

数値型（Number）・文字列型 （String）などのデータ型は、プリミティブであると記載があります。

「メソッドを持たないデータ」について、つい最近まであまり意識したことはなかったですが、コンソールでオブジェクトのログを出すと、結構長いよくわからないものがいっぱい表示されていたりしますよね。

これはこのオブジェクトが使用可能なメソッドの一覧になります。

数値型（Number）・文字列型 （String）では、Primitive （プリミティブ）なのでhasOwnPropertyなどのメソッドを持たないという事らしいです。

javascriptのprototypeオブジェクトに、text['proto']のような形でアクセスできるため、「JavaScriptでは全てが連想配列である」といえるのではないでしょうか？

// 変数例
const text = 'テキスト';

console.log(typeof text);
>>> string
console.log(text);
>>> テキスト
console.log(text['__proto__']);
>>> String {'', constructor: ƒ, anchor: ƒ, at: ƒ, big: ƒ, …}

jQueryとprototype.jsを並存させるためには「(function( $ ){ 〜 })( jQuery )」のように記述する必要があるわけだが，このコードの意味を理解できる

初級フリーランス

prototype.jsというものを初めて聞きました

そもそも、jQueryを書くときには$(function() {というコードから始まることが多いですが、

これは「全てのDOM要素をを読み込んでからjQueryを実行する」という意味です。

jQueryとprotptype.jsを一緒に使用する場合は、$()がコンフリクトするので、(function( $ ){ 〜 })( jQuery )のように変更する必要があるようです。

JavaScriptからのCookieの読み書きに慣れている

初級フリーランス

localStorageとかはあるが、Cookieを使ったことが無いかもしれない。。

// Cookie取得
document.cookie

// Cookie書き込み
document.cookie = 'name=Haru';

JavaScriptはマルチスレッドだと思っている

javascriptはマルチスレッドではない。

非同期通信などで処理が複数同時に行われているのは、マルチスレッド「並列」ではなく、「並行」で処理を順不同に行っているだけ。

初級フリーランス

javascriptはPromiseやthenを使用したりと、処理する順番に気を遣う事も多いかと思います。

そのため同時に処理されていると思っていたのですが、違ったんですね。

並行処理は，あくまで処理を順不同に行う処理です．人間にとってみればあたかも同時に行われているように見えてしまう処理のことです

JavaScriptの非同期処理を並列処理と勘違いしていませんか？

thisというキーワードを日常的に使ってコーディングできる。つまり，JavaScriptでオブジェクトをまともに利用できる。thisが文脈依存である事は何となくだけ知っている

無名関数/クロージャを日常的に使ってコーディングできる。その詳しい効用は分かっていない