JS 様々なDOM操作で、ただの正方形をスタイリングする

今は、ひたすらJavaScirptを勉強してる最中です。

自分は、開発の現場には入った事がなく今のフロントエンドの主流は、ReactやVueを使っての仮想DOM操作と知り、Reactを学び始めました。

自分が専門学校の時には、少しだけ授業でJSをかじった事があるのですが、その時はjQueryを使ってスライドショーみたいなものを作った記憶があります。(プラグインですけど、、)

色々調べていると、jQueryはオワコンだ！みたいな風潮があるらしいですがシンプルなwebサイトには、まだまだ使えるっぽい。jQueryでDOM操作するなら、素のJSで書いた方が良いっぽいので、自分は極力jQueryを使わない方向で行きます。(必要があれば勉強します)

仮想DOMについて、現在学んでいますがそれを使えるようになるには、普通のDOMも理解しないといけないので、今日は、色々な書き方で正方形を作ってみます。

ただ、JSだけで正方形を作るだけです、、

まず普通の書き方

まず、bodyを参照します。 その次に、createElementでdivタグを作ります。

素のjsで、スタイリングする時は、要素.style.〇〇で書きます。

最後に、bodyのappendChildメソッドで要素を追加します。

次に、オブジェクトを使って書いてみます

box2というオブジェクトのmakeBoxメソッドで操作したいと思います。

オブジェクト内の、値を参照するにはthisを使う必要がありこのような書き方になりました。

thisがないと動きません。

ちなみに、thisを使わない書き方で自分が思いついたのはこんな感じです

さっきと違うのは、boxの操作をメソッド内で行っている事です。

この画像のコードでは、最初のメソッド呼び出しの時は自身のキーを参照して正方形を作りました。下の場合は、自分で引数を渡した場合です。

自分は、今スマホのアプリでコーディングしていてこの様に表示されました。

次は、classを使った記法です。

オブジェクトリテラルで書くのと似ています。

自分はオブジェクト指向で書くにあたって、classで書くかオブジェクトリテラルなのかは正直、どちらが良いか自分は分かりませんが、多分classの方が見やすいのかなと思います。

thisを極力、使いたくない方はclass自体使わないと思いますが、、