[入門] javascript を少し触ってみた #JavaScript

railsを勉強していく上でフロント側の機能も必要になってきたので少し触ってみました。

対象

javascriptをとりあえず動かしてみたい人

とりあえず動かしてみたら作法をしっかり学んでいきましょう。。。

検証ツール大事！

あと、CodePenというサービスがとてもいいです。

ライブラリを複数使う場合はCDNで読み込む必要がありますが html~javascript の間は勝手に読み込んでくれているため毎回書く必要がありません。

See the Pen qBZpYKy by kota (@kota_0623) on CodePen.

hoge.html

<button id='practice'>ボタン</button>

<div class='practice'>テキスト</div>

hoge.js

// html上のid='practice'を受け取る為のもの。
const element = document.getElementById('practice');
// 定数elementに代入されているスタイル(CSSの要素)に` color: red; `を追加
element.style.color = 'red';
// 検証ツールのコンソールでjavascript側で受け取っている要素を見ることができます
console.log(element);

// html上のclass='practice'を受け取る為のもの。
const element2 = document.querySelector('.practice');
// <div class='practice'> に`style="color: blue;"`を追加
element2.style.color = 'blue';
//  . で一つ下の階層を参照することができます。
// 以下でelement.style.colorにblueが代入されていることをhtmlで確認できます。
document.write(element2.style.color);

それでは、ライブラリを使用していきます。

See the Pen qBZpYKy by kota (@kota_0623) on CodePen.

まずanime.jsを読み込める用、CDNを書いておきます。

hoge.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.js"></script>

変更のない部分は省略していきます。

hoge.js

...
//括弧内で文章と変数等を使用したい時にはテンプレートリテラルという書き方があります。
//これでjavascriptで入力したものが<div>タグ等で囲うことができます
document.write(`<div>${element2.style.color}</div>`);

//ちなみにdocument.writeはあまり使わない方が良いらしいです。
//今はconsole.logが通常画面に出せないため、例としてわかりやすいので使っています。


// 変数buttonにanime.jsの動作を入れていきます。
// 変数の定義はlet var とうかかなくても動作しますが、必ず書くようにしましょう。
// ↓は悪い例です。 ※基本的には定数のconstを使うのがいいようです。
button = anime({
  // targetsで今回はid="practice"を指定しています。
  targets: '#practice',
  // Xを250移動させるものです。
  translateX: 250
});

// セレクタの後に.onclickとすることでクリックした時の動作を受け取ることができます。
// functionでクリックした時どうするかを書いていきます。
document.querySelector(".practice").onclick = function() {
  anime({
    targets: '.practice',
    translateX: 115,
  });
}