test
title
title
- list
- list
hello kakkakakskakakksjdjhdjsjzjjxjjxjxjjksjskskskskskkskskskzksksksksksk
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自体使わないと思いますが、、