JavaScript基本【DOM操作基礎】
JavaScript基本【DOM操作】
DOMとは？
DOMとは、JavaScript等でHTMLの操作を行うこと。
Document Object Modelの略で、ドキュメントをオブジェクトのように扱います。
値を変更したり、色を変えてみたりといった操作が可能になりますので、HTMLの表現の幅が一気に広がります。
私はDOM操作に対しての理解が浅いので、いろいろ試してみようかと思います！
早速やってみる
See the Pen QWWmQem by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
上記は、id="test"の中の文字列をtitle!からHello! JSに変更、
更にボタンをクリックするとThank you!に変わり、スタイル属性(文字色、サイズ)も変更しています。
HTML内ボタンのonClickでJavaScript内のメソッドを渡すことでボタンClickをトリガーにして操作を行っています。
querySelectorとquerySelectorAll
See the Pen oNNqqGY by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
先ほどはgetElementByIdを使用しましたが、更に便利で簡単に要素を取得することができます。
それがquerySelectorとquerySelectorAllです。
querySelectorは見つけた要素の先頭１つ、querySelectorAllは、該当する要素をリストで返却してくれます。
例では、querySelectorで変更した文字色は先頭１つの要素のみ、
querySelectorAllで取得したものはforEachですべてのID要素に背景色が反映されているのがわかると思います。
更に、forEachは第二パラメータにインデックスを指定することができるので、以下の例のようにリスト要素の偶数行のみに適用させる、ということも可能になります。
See the Pen jOOzzQR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
「レガシーコードからの脱却」を読んで
読み終わりましたので簡単に感想を書きたいと思います。
読みやすい！
正直、私のような初学者は翻訳された本というだけでもとっつきにくい上、オライリー本は更に難しく思えてしまうのですが、
そんな私でも、途中で挫折することなくスラスラと読めたくらい、この本は「読みやすい」です。
レガシーコードをリファクタリングする手法が書かれてあるのか？は、ほぼNO！
リファクタリングについては触れられていますが、基本は「最初からCLEANなコードを書こうね！」という本です。
恐らく、常に情報を収集し、保守性や可読性を意識しているような人には物足りない内容なのではないかなと思います。
- オレオレルールが蔓延しておりコーティング規約が統一化されていない
- リリース直前になってバグが多発し炎上してしまう
- １つのメソッドに様々な振る舞いを詰め込んでいる
- テストカバレッジを意識していない
- カプセル化がよくわからない、面倒くさいから全部publicで書いちゃう
- ペアプログラミングのメリットって何？
- テスト駆動開発って何？
- ウォーターフォール開発ばっかりやってる
ような人は読んだほうが良いかもしれません。ちなみに私の現在のプロジェクトは上記フルコンボの役満です。ありがとうございます。
好きな言葉
あまり具体的に内容に触れるとアレなので、この本の中で私が好きな部分を抜粋していくつかご紹介します。
私たちの誰もがレガシーコードというグローバルな問題を生み出すのに一役買っている。ゆえに、私達はその問題を解決する責任がある。 p34
ルールを破り、新境地に達するためには、まずルールをマスターしなければいけないのだ。 p51
1年の開発サイクルで開発者が自分自身に大きなウソをつくのではなく、２周間のイテレーションの中で小さなウソをつくのである。 p81
私が「完了」と言うときの本当の意味は、「完了の完了の完了」のことだ。 p107
「常に誰かのメンターであれ。常に誰かのメンティーであれ」 p135
明日のベロシティのために今日品質を上げる p155
テストは特定のパラメータを用いてコードを実行する。つまりテストは具体的な要件である。 p182
今日のTODOリストを作るとき、なにをやるかは書くが、どうやってやるかを書くことはない。 p211
この業界では、レガシーコードを時限爆弾ではなく、地雷と見なす必要がある。 p226
私たちの時間と努力の半分以上は取り戻せるのだ p247
気になった方は是非読んでみて下さい。
Vue Routerについて
Vue Routerについて
Vue Routerとは？
Vueを使用してシングルページアプリケーションを作るならほぼ必須の機能。 シングルページアプリケーションで表示させる内容を動的に変化させると、閲覧・操作の履歴が残らないことが多かっ。、 Vue Routerは履歴を持つことが可能なため、ユーザーの戻る/進むの操作に対応できると同時に、 個々の表示内容をページとして認識させることが出来るためSEO(検索エンジン最適化)にも有利となります。
参考ページ
やってみる！
See the Pen oNNoZjV by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
Top/About/Menuボタンを押すとそれぞれ下の内容が変わっていることがおわかりいただけると思います。
router-link、router-view
<router-link to="/" id="btn">Top</router-link>
<router-link to="/about" id="btn">About</router-link>
<router-link to="/menu" id="btn">Menu</router-link>
この部分が、HTMLでいう<a>タグの役割を果たします。
ページが読み込まれた時に<a>タグに自動的に変換してくれます。
to=""に遷移先のページを指定します。<a>タグで言うhref=""の部分ですね。
そして
<router-view></router-view>
router-linkで記述したリンクを実際に生成しているのはこの部分になります。
これを書き忘れると展開されませんので注意しましょう！
ページの設定
const Top = { template: '<div id="page">Hello!</div>' }
const About = { template: '<div id="page">このページはVueRooterのテスト用です</div>' }
const Menu = { template: '<div id="page">スマイル ¥０</div>' }
ここで、実際に表示される個別ページを記述しています。
今回はCodePenで記述したのでまとめて書いていますが、本来であれば
top.vue、about.vue、menu.vueのようにそれぞれのVueファイルにわけてあげるのが良いかと思われます。
const routes = [
{ path: '/', component: Top },
{ path: '/about', component: About },
{ path: '/menu', component: Menu }
]
ここでファイルとの紐付けを行っています。
別々のVueファイルにわけたとしてもpathには.vue表記は不要です。
path:'/'は、初期表示されるページを表します。
ルーターインスタンスの生成
const router = new VueRouter({
routes
})
routesはroutes: routesの短縮記法になります。
rootとなるインスタンスを生成してマウント
const app = new Vue({
router
}).$mount('#app')
$mountメソッドを使用することでVue.jsが生成するDOMへの置き換えを行っています。
※DOM…HTML等の要素にアクセスし、操作を可能にします
これがVueRooterの基本！
公式ドキュメントのはじめにの部分を少しいじるだけでこんなに簡単に基本のシングルページアプリケーションを作成することができました！
JavaScript【配列とオブジェクト＆その他】
JavaScript【配列とオブジェクト】
map､filter
See the Pen WNNOzyE by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
mapは、配列の中身それぞれに指定された処理を施した新しい配列を生成し返してくれます。
この例では、配列の中身を全て２倍したものを返却しており、aryとは全く別の新しい内容の配列が出来上がっていることがわかると思います。
また、filter機能を使えば、条件に合ったものだけを抽出した新しい配列を返却してくれます。
forEach
See the Pen yLLXKQE by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
forEachは配列の中身にアクセスし、それぞれに指定された処理をしてくれます。
mapと似ているのですが、forEachは戻り値がないので、新しい配列を生成したりはしません。
用意してある配列そのものに対し処理をしたい場合に使用します。
要素の追加、削除
See the Pen MWWoVLB by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
配列に要素を追加したい場合、先頭であればunshift、末尾であればpushを使用します。
See the Pen JjjJLxg by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
削除する場合は、先頭であれば、shift、末尾であればpopを使用します。
splice
See the Pen GRRExeN by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
先頭と末尾以外の位置の要素を削除、追加したい場合は、spliceを使用します。
splice(開始位置の添字,削除する要素の数,追加要素,,,)
というように、引数を渡します。追加要素がない場合は、引数は２つになります。
スプレッド演算子
See the Pen mddwxYr by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
スプレッド演算子とは...の部分のことです。
配列やオブジェクトの要素をそこで展開してくれます。
分割代入(スプレッド演算子との併用)
See the Pen mddwxNO by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
分割代入というのは、文字通り配列やオブジェクトの中身を分割して各変数に代入できるというもの。
const ary = [1,2,3]; const [a,b,c] = ary;
と書けば、a=1,b=2,c=3となります。
これは先ほどのスプレッド演算子と相性が良く、
要素を取り出しながら残りを変数に代入してくれます。
Math
数学で使うようなものは大体Mathを調べれば良い。
See the Pen qBBjYWB by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
Math.PIは円周率を返してくれます。
Math.roundは与えた値を四捨五入して返してくれます。 ただし、浮動小数点という問題があり、一定の条件で予期しない値になる可能性があります。 詳しくはこちら→ Math.round() - JavaScript | MDN
)
Date
See the Pen poowVjx by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
上記ではローカル日付を取得することが出来ます。
getMonth,getDaysでは0始まりのため、想定した値と少しズレが生じる可能性がありますので注意が必要です。
例外処理
See the Pen mddwLVW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
try{ }catch(){}で例外処理を捕まえることが出来ます。
catchの引数には好きに名前を付けてOKなのですが、errorのeがよく使用されます。
Vue.js【算出プロパティ】
Vue.js【算出プロパティ】
算出プロパティとは？
↓こちらの記事がとてもわかりやすかった！ qiita.com
常に更新する必要のない値に関してはとても有効なようなので、使用すべきタイミングを見て適切に使っていきたい！
ということで、ちょっと勉強してみます。
算出プロパティの書き方
computed: {
xxx:Function(){
return a
}
}
算出プロパティを設定することで、テンプレート側で
{{xxx}}
という感じで変数みたいに使えるみたいです。
やってみる
See the Pen bGGWeva by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
基本。省略記法探しましたが、どうやらFunction()は省略できない？？
See the Pen GRRmjKM by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
inputのフォームから入力された値もしっかり反映してくれました！
Vue.js【配列操作】
Vue.js配列操作
配列に要素を追加
See the Pen VwwbLgJ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
配列から要素を削除
See the Pen bGGWVdW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
v-forの中の(item,index)というところがミソで、配列を展開する際にその要素が配列内で持っているインデックスも取り出すことができます。
↓最大値を求める際のreduce、参考にしたサンプルの通りに書いたのですが、Math.Maxのようなものを使用するイメージが強かったので、参考にしたサイト
配列の要素を更新する
See the Pen xxxdwro by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
上記のプログラムでは「なでなで」するとなつき度が上がり、上限の１００までいくとアラートが出るようになっています。
Vue.js 【イベントハンドリング】
Vue.js 【イベントハンドリング】
イベントの購読
See the Pen YzzVzNy by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
上記はClickイベントでcounterの値を+1していくプログラムです。
イベント発火時にJavaScriptが動いているのがわかります。
しかし、このようにベタベタとv-on属性の中に処理を書くと複雑になってきたときに管理が大変になってしまいます。
そのため、上記の動きを理解した上で、v-onにメソッドを渡すのが現実的な実装になります。
See the Pen MWWmWoP by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
これは、countupとcountdownをラッパーしたメソッドを呼んでいます。
@click:"countup();countdown()"と書くことで複数メソッドを呼び出す実装自体は可能なのですが、この書き方だと結局JavaScriptをべたべた書き込んでしまうことになるので、
多くのイベントハンドラのロジックはより複雑になっていくので、v-on 属性の値に JavaScript 式を記述し続けるのは現実的ではありません。
と公式にもあるように、１つのメソッドに処理を集約したほうが良いように思えました！
引数(パラメータ)について
See the Pen bGGWGva by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
メソッドの引数に(event)と記述していますが、これはデフォルトでイベントの内容が格納されています。
呼び出す側で@click="メソッド名(引数,$event)"と記述することで、明示的に引数を指定することが可能になります。
See the Pen jOOmORQ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
eventではなく、引数にeventを含めない普通のメソッドを呼ぶこともできます。
@Click以外にも様々なイベントを捕捉できます
ダブルクリック
See the Pen eYYWNJW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
マウスオーバー、マウスアウト
See the Pen abbWOpq by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
イベント修飾子
こちらがとても参考になりました！！
