フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています！

【JavaScript】外部のJSファイルからモジュールを呼び出す方法

JavaScript

こんばんは！今日は一日雨でジメジメした日が続きますね。

まだ週初めなので頑張っていきましょう！

 

さて、今日は　JSファイルをモジュールとして呼び出す方法を　紹介します。

まずは下記階層のフォルダを用意してください。

 

dist

└index.html

└js

   └script.js

 

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>外部モジュールの読み込み</title>
</head>

<body>
 
<p id="target"></p>
 
<script type="module">
import　{ sum } from './js/math.js';

let answer = sum(7,8);

document.getElementById('target').innerHTML = answer

</script>
 
</body>

</html>

ここの記述ではjsファイルを描写するpタグと外部のJSファイルを呼び出すための記述があります。さてここで一番重要なのがモジュールの呼び出し方です。importを使ってsum関数を呼び出しています。呼び出した関数はsum()として実行しanswerに格納していいます。

次に呼び出し元のファイルの設定を見ていきましょう。

js/script.js

export function sum(a,b){
return a + b;
}

ここでは定義したsum関数をexportを使って外部に渡しています。

たったこれだけの記述だけで外部ファイルで利用できるようになるんですね(^ ^)

あとはブラウザで確認し足し算結果が15となっているか確認してみてください。

今週も張り切っていきましょう！

楽天ブックス

 

 

【JavaScript】タイマー機能を作ってみよう

JavaScript

今日は簡単なタイマーを作ってみようと思います。

先ずはHTMLファイルをご用意ください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>timer</title>
<style></style>
</head>
<body>
<div id="target"></div>
</body>
</html>

ここでは画面表示させるためにid属性をつけたdivタグを用意します。

次にscriptタグを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>timer</title>
<style></style>
</head>
<body>
<div id="target"></div>
<script>
let timer = () => {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
const target = document.getElementById("target");
target.innerHTML = `${hour}時:${min}分:${sec}秒}`;
};
setInterval(timer, 500);
</script>
</body>
</html>

ここでは500ミリ秒ごとに処理を走らせるプログラムを書いています。

〇〇月〇〇日〇〇秒という形で日付を出したいのでまずは曜日の情報を取得します。

let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();

ここではまずnew Date()で日付や曜日のもととなる情報を抜き出します。

次に時間、分、秒を取り出すメソッドを利用しそれぞれ変数に格納します。

const target = document.getElementById("target");
target.innerHTML = `${hour}時:${min}分:${sec}秒`;

そして文字を出力したい部分の要素を取得し,innnerHTMLで各種変数を出力したい形式で記述します。

<script>
let timer = () => {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
const target = document.getElementById("target");
target.innerHTML = `${hour}時:${min}分:${sec}秒`;
};
setInterval(timer, 500);

最後にsetInterval()で500ミリ秒おきに処理が走るよう設定します。

この時timerというアロー関数でくくり処理をひとまとめにしておきます。

これでコードは完成です。

 

ブラウザで見てみると時間、分、秒がリアルタイムに反映されていると思います。

よろしければ作ってみてくださいね(^^)

ブログ始めました！ よろしければ見ていってください！ https://t.co/5oZys8GAIq #フロントエンジニア #WEB制作 #WordPress

【JavaScript】チェックボックスにチェックが付いたらボタンを押せる仕組みを作る

JavaScript

こんばんは！今日も雨で毎日ジメジメしてますね。

さて、今日はチェックボックスにチェックをいれたらボタンを押せる仕組みを作りたいと思います。

よく問い合わせの送信フォームにあるやつですね＼(^o^)／

まずはHTMLを用意しましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>JavaScript</title>
<style></style>
</head>
<body>
<input type="checkbox" />
<button disabled>click</button>
</body>
</html>

ここではinputとbuttonタグを作りbutton要素にはdisabled属性をつけることでclickできないようにします。

 

続いて本題のJavaScriptです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>JavaScript</title>
<style></style>
</head>
<body>
<input type="checkbox" />
<button disabled>click</button>
<script>
let input = document.querySelector("input");
let button = document.querySelector("button");
input.addEventListener("change", () => {
if (input.checked == true) {
button.disabled = false;
} else {
button.disabled = true;
}
});
</script>
</body>
</html>

ここで何をしているかという解説です・

let input = document.querySelector("input");
let button = document.querySelector("button");

まずは各要素を取得します。今回はIDやclassを振らずに直接要素を取得します。

input.addEventListener("change", () => {
if (input.checked == true) {
button.disabled = false;
} else {
button.disabled = true;
}
});

続いてinput要素にイベントを設定します。ここではinput要素にcheckがあったときに発火させたいので"change"イベントを使用します。addEventListenerを使ってイベントを設置したあとif文で条件分岐をします。inputにチェックが入っているかいないかを判定しtrueだった場合、ボタンのdisabled属性が外れます。elseではその他という意味なのでinputにチェックが入っていればボタンを押せるようにします。

 

これで完成です。チェックが入ったら押せるかどうか確認してみてください(^^)

最後にif文の記述は下記記述でも対応できます。

button.disabled = !input.checked;

inputにチェックが入っていないときはボタンを押せなくするという記述です。!は〇〇じゃないときを意味します。すっきりとした記述ですね。

 

今後も基礎的なJavaScriptの解説をしていきますのでよろしければ見ていってくださいね!良い週末をお過ごしください(^^)

【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編1)

JavaScript

皆さんこんばんは(^^)今週ずっと雨で寒い日が続いてますね。

今日はHTMLを効率的に書く方法をお伝えします。2回に分けて紹介するのでぜひお試しください。

 

HTMLを効率的に書く方法としてPugという記法があります。

閉じタグを意識せずにかけるのでコーディングスピードのアップが期待できます。

PugはコンパイルしてHTMLに変換するので今日は環境の構築方法をお届けします。

 

npm-practice
├ src
│　├ pug

まずは上記のようなディレクトリを用意します。

npm-practiceの配下にsrcフォルダを置きその下にpugフォルダを置きます。

 

npm-scriptsのインストール

npm init -y
npm i -D npm-run-all
npm i -D chokidar-cli

続いてターミナルまたはコマンドのインストール入力しnpm-scriptsをインストールします。上記をインストールする前にnode.jsのインストールがまだの方はインストールしてください。

Node.js

※推奨版をインストール。

続いてPugをインストールします。

npm i -D github:pugjs/pug-cli#master

これをインストールにしないと動かないのでご注意ください🐶

最後にscriptsを利用するためにフォルダに生成されたpackage.jsonファイルに書き記述をします。

"scripts": {
"compile:pug": "pug src/pug/ --hierarchy -o mock/ -P",
"watch:pug": "pug src/pug/ --hierarchy -o mock/ -w -P",
}

上記を記述することでターミナルでPugのコンパイルを実行できwatch:pugは常に変更を監視することができます。以上でPugのセットアップは完了です。

 

次回記事ではPugの記述方法の基礎をご案内しますのでよろしければ皆さんも体験してみてください。良い週末を＼(^o^)／

   

【WordPress】共通箇所のテンプレート化する方法

WordPress WordPress【テンプレートタグ】

皆さんこんばんは。今日はずっと雨で肌寒い日が続いてますね。

今日はwordpressで共通のテンプレートファイルを作る方法をご紹介します。

 

wordpressで構築をしていると何度も同じ記述はナンセンスです。

そこで共通ファイルを作成するにあたり一つディレクトリを用意します。

includes
　　└header.php
　　└footer.php

上記のファイルに共通部分を貼り付けパーツファイルを作ります。

そして呼び出したいファイルで下記の記述をします。

header.phpの呼び出し
<?php get_template_part('includes/header')?>

footer.phpの呼び出し
<?php get_template_part('includes/footer')?>

 

テンプレートを出力したい箇所に上記を記述します。

共通箇所をパーツ化するだけでメンテナンスする箇所も1箇所だけになるので

是非、活用してみてください(^^)

 

【JavaScript】打った文字を画面に出力してみよう

JavaScript

 

今日は実際にキーボードで打った文字を画面に出力するプログラミングをご紹介します。まずHTMLファイルをご用意ください＼(^o^)／

 

※コピペしてHTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>タイピング</title>
</head>

<body>
<div id="target"></div>
</body>
</html>
これでHTMLファイルは完了です。
次にbodyの閉じタグ前にscriptタグを挿入します。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>タイピング</title>
</head>

<body>
<div id="target"></div>
<script></script>
</body>
</html>
これで用意は整いました。scriptタグの中へどんどん書いていきましょう！
 
まずは文字を出力する先の要素を取得します＼(^o^)／
const target = document.getElementById("target");
id属性の取得は主にgetElementByIdを使います。大文字と小文字が区別されるので気をつけましょう。
const pool = ;
let i = 0;
続いて打ったキーの値を保存する配列とキーを打つごとにカウントするための変数をiを用意します。
document.addEventListener("keydown", function (e) {
pool.push(e.key);
target.insertAdjacentText("beforeend", pool[i]);
console.log(pool);
i++;
});
ここから本題です。今回はキーを打つというイベントを発火させるためにaddEventListenerを使います。第一引数に今回はキーを押したときに発火させる"keydown"を入れます。function()の中のeはイベントの情報が格納されているので打ったキーの値はe.keyで取り出せます。
そして出力先のtargetに対してinsertAdjacentTextメソッドを使って配列の中身を追加します。このときにインクリメントで順に配列の配列のtargetに出力していきます。
以上簡単ですが文字出力のプログラムでした(^^)
'beforeend'の解説
※完成版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>タイピング</title>
</head>

<body>
<div id="target"></div>
<script>
const target = document.getElementById("target");
const pool = ;
let i = 0;
document.addEventListener("keydown", function (e) {
pool.push(e.key);
target.insertAdjacentText("beforeend", pool[i]);
console.log(pool);
i++;
});
</script>
</body>
</html>
※完成版のコード
 

【WordPress】ディレクトリとURLを表示するテンプレートタグ

WordPress WordPress【テンプレートタグ】

今日は画像やURL設定時によく使うテンプレートタグの紹介です。

WordPressではディレクトリを明示するタグがあります。

 

▼ページリンク設定

href = "<?php home_url()?>/○○○/○○○"

このようにタグの後ろにディレクトリを明示することでリンクの設定が可能です。

 

▼画像の表示

src = "<?php echo get_template_directory_uri();?>/○○○/○○○"

画像の出力にはget_template_directory_uriを利用します。

 

テンプレートタグは積極的に使い方を覚えていきたいですね。

継続は力なり