【プラグラミング学習】JavaScript上でHTMLの要素を操作する仕組み

DOM(Document Object Model)

• DOMとはHTMLを解析しデータを作成する仕組みです。
  

• HTMLがWebページとして閲覧されるまでの流れ

• HTMLは階層構造で、DOMによって解析されたHTMLは階層構造のあるデータとなります。
  これを、DOMツリーやドキュメントツリーと呼びます。
  -JavaScriptのメソッドを使って、DOMツリーを操作することができます。
  HTMLの要素名、「id、class」といった属性の情報を元にDOMツリーの一部を取得し、
  CSSを変更したり、要素を増やしたり消したりできます。その結果ブラウザに反映され、見た目が変わります。

HTMLを取得する方法

• DOMツリーからHTMLを取得する方法は大きく分けて３つあります。
  
  1.id名から取得する方法
  2.class名から取得する方法
  3.セレクタ名から取得する方法
  

id名から取得する方法

//id名がhogeの要素を指定する場合
document.getElementById("hoge")

document.getElementById("id名")は、DOMツリーから特定のHTMLの要素を取得するための メソッドの一つです。引数に渡したidを持つ要素を取得します。

class名から取得する方法

//class名がhogeの要素を指定する場合
document.getElementsClassName("hoge")

classを指定して取得する場合はこちらを利用します。
注意点としては、getElementsと複数形になっていることです。
id名はhtml上に必ず一つしか無いのに対して、classはHTML上に複数存在することが考えられるためです。

セレクタ名から取得する方法

//class名がhogeの要素を指定する場合
document.querySelectorAll(".hoge")

//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")

//h1タグの要素を指定する場合
document.querySelectorAll("h1")

セレクタ名とは、CSSでスタイルを適用するために指定している要素です。
セレクタ名を指定して取得する場合、querySelectorAllメソッドを使用します。
最も頻繁に使用するセレクタ名として、class名、id名、HTMLタグになります。
それぞれの書き方は上記の通りになります。

• class名は(".class名")
  
• id名は("#id名")
  
• HTMLタグは("タグ名")
  

関連するメソッドとして、querySelectorというメソッドもあります。
HTML上から引数で指定したセレクタに合致する要素のうち一番最初にみつかった要素を1つを取得することもできます。

//id名、class名,タグ名の指定方法はquerySelectorAllメソッドと同じ
document.querySelector("セレクタ名")

【プログラミング学習】JavaScriptのオブジェクトを学ぶ

ブラウザで用意されたオブジェクトを学ぶ

• JavaScriptはブラウザで動くプログラミング言語です。そのためあらかじめブラウザを操作するメソッドをもつオブジェクトが定義されています。
  
• その最上位であるオブジェクトがwindowオブジェクトです。

windowsオブジェクト

• windowオブジェクトとは、ブラウザの情報を持っているオブジェクトで、
  ブラウザの情報をもつため、ブラウザオブジェクトと言います。
  
• Javascriptであらかじめ定義されているメソッドやオブジェクトはすべてwindowオブジェクトのプロパティです。
• 最上位のwindowオブジェクトを起点として、下位にその他のオブジェクトが属する構造になっています。

documentオブジェクト

• もっとも頻繁に使う可能性のあるオブジェクトで、ブラウザ上に表示冴えた情報（HTML)を操作することができます。
• プロパティやメソッドを多く持っています。HTMLに対して何か処理をする際には頻繁に使用されます。

オブジェクトを取得する

• 実際に今開いているブラウザに対して働きかけ、ブラウザオブジェクトを取得してみます。
• コンソールを起動し、下記コードを書き込んでブラウザにアラートを表示されます。

window.alert("ブラウザにオブジェクトを取得して表示してみよう！")

の表示が出ていれば成功です。

• 下記のようにwindowの記述は省略ができます。

alert("ブラウザにオブジェクトを取得して表示してみよう！")

先ほどと同じ結果が表示されれば成功です。

【読書】事例で学ぶ BtoBマーケティングの戦略と実践 Kindle版 栗原 康太 (著)

読書メモ

目的

• BtoBマーケティングの事例を本からも学び仕事に活かせる知識を得るために読みました。
  個人的に勉強になった、問いが生まれた場所を引用しながらまとめました。

事例で学ぶ BtoBマーケティングの戦略と実践

BtoBマーケティングの現状

• インターネットの普及で顧客行動は大きく変わった。
  
• 営業活動が重要とされていた時代　⇒　マーケティングが重要になった。
  
• 背景にあるのは、顧客の購買プロセスが営業担当者に会う前に終わっている。
  

Web上の情報を参考にしつつ、顧客自らがそれらの検討と意思決定を行うようになったのです。課題解決の方法は、いまや営業パーソンではなく、顧客自らが決めています。 栗原 康太. 事例で学ぶ BtoBマーケティングの戦略と実践 (Japanese Edition) (p.12). Kindle 版.

• コロナの影響でテレワーク化し、その結果影響を感じている４つのこと
  • 新規リードの減少
  • 商談化率の低下
  • 受注までのリードタイムの長期化
  • 営業部門のマネジメントの難易度の上昇

BtoCとBroBマーケティングの違い

• ６つの違いがある
  • 購買プロセスの中に営業が介在すること
  • 購買に関与する人の数が多い
  • 購買目的です。
  • 検討期間の長さ
  • 情報の非対称性
  • 顧客数・製品の販売数がBtoC向けの商品と比べて少ない
    
• 意識すること
  • 効率的なパスの方法を意識して、設計することが重要になってくる。
    
  • 関与する流れ(稟議や調整、社内確認などが発生する)を前提として、発信するコンテンツを考える。
    
  • 企業の課題解決にいかに寄与するのかを訴求が重要
    

    LTVを強化する

新規事業開発やスタートアップの世界では、健全なユニットエコノミクスになっていれば、つまり、あるビジネスにおけるユニット単位での取引の経済性・収益性がプラスになっていれば、安心して拡大に向けた投資に踏み込めるという議論があります。マーケターも、自分が担当するビジネスのユニットエコノミクスがプラスになっているか、マイナスになっているかを常に考える習慣を持つことが大切 栗原 康太. 事例で学ぶ BtoBマーケティングの戦略と実践 (Japanese Edition) (p.44). Kindle 版.

• SaaSには死の谷が存在する。

年間契約金額が150万～250万円前後のレンジには、上場企業がまったく存在していない 栗原 康太. 事例で学ぶ BtoBマーケティングの戦略と実践 (Japanese Edition) (p.50). Kindle 版.

米国で上場しているSaaS企業81社のうち78社が、中堅・大手企業をターゲットにビジネスを展開していました。上場できる規模までビジネスを成長させようと思ったら、年間契約金額50万円以下でセルフサーブに近い形のサービスを提供するか、中堅・大手企業向けに年間契約金額250万円以上のサービスを提供するかの二択にならざるをえない 栗原 康太. 事例で学ぶ BtoBマーケティングの戦略と実践 (Japanese Edition) (p.50). Kindle 版.

• LTVを高める方法は３つに分けて考える

  • 平均購買単価を上げる
  • 継続購買期間を伸ばす
  • 平均購買頻度を増やす

• マーケティングの基本は、4P(Product、Price、Place、Promotion)、これまでのマーケターはProductやPriceは入っていなかった。これからはその2つも含めた強い売れる仕組みづくりを考える必要がある。
  

• 上記のことを見たときに、Priceまで考えるというのは営業フェーズ前だとどうするべきか、疑問に感じた。

良い商談のため良い階段を設計する

BtoB企業の経営者やマーケターの悩みのほとんどは、「リード数が足りない」「商談数が足りない」に集約されますが、これらの課題を抱える企業は、マーケティングの階段設計の途中に飛躍があることが多いです。 栗原 康太. 事例で学ぶ BtoBマーケティングの戦略と実践 (Japanese Edition) (p.77). Kindle 版.

• この階段を意識して、ISにリードを渡せる施策を考えていきたい。

BtoBマーケティングPJTの進め方 事例を元に気になったところをピックアップ

• 商品を深く理解するために

●サービスの内容（ひと言で言うと？）
●解決している課題
●顧客への提供価値
●なぜ、その特長を実現できているのか
●比較されている競合企業、競合となる選択肢
●競合優位性はどこにあるのか
●商品の単価とLTV
●短期、中長期の事業戦略
●商品開発のきっかけ
栗原 康太. 事例で学ぶ BtoBマーケティングの戦略と実践 (Japanese Edition) (p.113). Kindle 版.

• 他の事例にも面白い内容が書いてあり勉強になりました。
• 事例一覧
  • リード数がたりない
  • リード数が200件で頭打ちに
  • MAツールを導入したが活用できていない
  • リード数や商談数は増えているが受注につながらい
  • 新しいサービスなので積極的に探している人がいない
  • 顧客がWebを使って情報収集していない
  • 競合の参入でCPAが高騰し、受注率も低下
  • 営業主体の会社なので、マーケの文化がない
  • コンテンツマーケティングに投資したいが、どこから手を付けていいかわからない
  • 競合たくさん存在する成熟業界で成長する
  • モノは良いが、知られていない

【プログラミング学習】JavaScriptにおけるメソッド

メソッド

• JavaScrptにおけるメソッドとは、プロパティに紐づけられた処理のことです。
  プロパティには「●●をしてほしい」という処理を関数を用いて代入できます。
  

変数名 = {
プロパティが記述されている状態
メソッド名 : function() {...}
}

• 変数humanを定義し、そのhumanの要素（name,gender,age）が記述しています。
  このような要素を持ったhumanに対して、"話す"という処理をしてほしい場合、
  「human.talk」と記述することができます。 ※例文のためメソッドの中身を記述していません
  

let human = {
name: "Taro",
gender: "man",
age: 22,

talk: function() {...},
}

human.talk()
// talkメソッドが実行される

メソッドを実行する

• 実際にfunctionの中を記述して、メソッドを実行してみます。
  

let human = {
 name : "Tanaka",
 age : 30,
 gender : "男",
 address: "Tokyo",


talk: function() {
 console.log(`私の名前は${human.name}、${human.age}歳の${human.gender}性です。住所は${human.address}です`)
}
}
human.talk()

• 上記をコンソールで実行すると下記のように表示がされていれば成功です。
• humanオブジェクトの中にtalkというメソッドを定義しました。
  このメソッドはconsole.logを用いて、あらかじめ記述した文字列をコンソール上に表示することです。
  human.talkという記述で、メソッドが実行されtalkメソッドの処理が実行されました。

【プログラミング学習】JavaScriptのオブジェクトのプロパティ

プログラミング学習

オブジェクトの値を取得する

• オブジェクトの値を取得した場合、 オブジェクト名.プロパティ名のように記述することで、オブジェクトのプロパティの値を取得することができます。

let human = {name :`sato`}
console.log(human.name)

コンソールで上記を実行すると
satoが表示されます。
上記のコードを例にするとオブジェクト名がhumanで、
プロパティ名がnameになります。
human.nameと記述することでsatoという値が取得することができます。

オブジェクトにプロパティを追加する

• オブジェクトにプロパティを追加する方法は下記の２つあります。
  
  • オブジェクト.プロパティに値を代入する
  • オブジェクト[プロパティ]に値を代入する

let human = {name :`sato`}
console.log(human)

human.age = 22
human[`address`] = `Tokyo`
console.log(human)

にて実行をすると{name: 'sato', age: 22, address: 'Tokyo'}が表示される。
はじめてにhumanのオブジェクトを定義したときは、nameプロパティの値が格納され、
そこから、human.ageとhuman[address]の値を格納しました。

【プログラミング学習】JavaScriptのオブジェクト

JavaScriptにおけるオブジェクトの概念

- JavaScriptにおけるオブジェクトは、データや処理といった情報を一つにまとめた集合体です。
データとは、「キー」と「バリュー」のセットを指します。

  処理に関しては、別の記事で解説いたします。

プロパティ

• プロパティとは、ハッシュ形式のキーとバリューの組み合わせで書かれる値のことです。
  オブジェクトの要素を決める役割をします。オブジェクトとは、プロパティの集合体から成り立っています。
  

# プロパティの書き方

変数名　= { キー: バリュー  }
// 下記の中がプロパティ 
{  } 

変数の定義、プロパティを記述する

let human = {
name : "Taro",
gender:"man",
age : 28,
}

上記のようにプロパティは複数記述することが可能です。
今回のプロパティは「name」,「gender」,「age」の３つを変数humanで定義しています。

【プログラミング学習】JavaScriptにおけるセミコロン(;)

プログラミング学習

---

JavaScriptにおけるセミコロン

• JavaScriptにおいて、変数定義などの最後にはセミコロンを以下のように付与します。
  文章の終わりを示すためです。

const name = "太郎" ;
const age = 27;
const introduction = `私の名前は${name}、${age}歳です`;
console.log(introduction);

ただこのセミコロンは省略することができます。
セミコロンに関しては、以下のルールがあります。
【例】セミコロンをつける場合

// (1)変数の定義
const name = "太郎";

// (2)console.logなどのメソッド
console.log(name);

//(3)関数式（無名関数）
const hello = function(){
};

// (4)関数式（即時関数）
(function hello() {
} )();

// (5)関数式（アロー関数）
const hello = () => {
};

【例】セミコロンをつけない

// (1)関数宣言
function hello(){
}

//(2)if文
if (true) {
} else {
}

セミコロン付与の有無に関しては、開発の現場ごとに「必ずつける」
「セミコロンは原則つけない」とルールが分かれているようです。
どちらも対応できるように学んでいきます。