自サイトのバニラJS（javascript）をvue.jsへ書き換えた話．
2024.09.22
おはようございます．先日、友が東京から帰ってきてたみたいでお見上げを貰いました．いつも頂いているばかりでお返ししないといけないなって思うのですが、いつ帰って来るのかがさっぱり分からないのでお返しできないでいる．
さて、今日は自サイトのバニラJS（javascript）をvue.jsへ書き換えた話を書きます．少し前からバニラJSからvue.jsへ変更しようと思っていたのだけど、変更する意味が見いだせずにいた.
先日からReactを仕事で触りだしてなるほど、ちょっと便利かもって思い出したので勉強がてらに自サイトをvue.jsに編集しました．
自サイトの全部を置き換えていないけれど、置き換えたほうが良さげな部分は置き換えた形になります．尚、vue.jsをモジュール呼び出しで使用したい場合は呼び出す参照ファイルに下記のタグを追加すると呼び出せます．またモジュールファイルのインポートの書き方も記載しときます．参考にしてみてください．
<script src="./js/example.js" type="module"></script>import { ref, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
createApp, from, gt, import, javascript, JS, js", lt, module", react, ref, script src, script>, type, vue.js, インポート, お見上げ, バニラJs, モジュールファイル, モジュール呼び出し,
javascriptの並列処理について
2018.02.13
javascriptの並列処理についてdemoサイトを作りましたので
参照し見てください。尚、コードは下記になります。
注意点とかは下記の画像を参照してみて下さい。
使用してわかったことは落ちないというのは良いことだということ。
落ちても表面上はエラー警告などはないので、結構便利なんじゃないだろうかという事です。
ちなみにこちらがデモサイトのリンクになります。
https://zip358.com/tool/worker/
<!DOCTYPE html>
<html>
<head>
<title>worker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var wkr = new Worker("worker.js");
wkr.onmessage = function(d) {
document.getElementById("wkr").innerHTML = document.getElementById("wkr").innerHTML + d.data + "<br>";
};
</script>
</head>
<body>
<div id="wkr">
</div>
</body>
</html>
var e = 0;
function en(){
e = e + 1;
postMessage((e*3.14));
if(e < 1000)en();
}
en();
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, body>, device-width, div>, DOCTYPE html>, document.getElementById, function en, head>, initial-scale, innerHTML, meta charset, meta name, new Worker, script src, script>, title>, var wkr, wkr.onmessage, worker.js, worker<,
サンプルJSプラグイン2、無名関数の引数渡し。
2017.10.01
昨日に続きJQueryのプラグイン作りを行なっています。
いろいろと勉強になります、何となく分かってきました。
javascriptでもいろいろと出来るのだなと感心しています。
ソースを毎度おなじみですが、解説なしのコードを貼り付けておきます。
今回はリターン時に無名関数を使ってみました。そして無名関数に引数渡しを
行なっています。
サンプルプログラムはこちらです。
https://zip358.com/tool/jsp/index1.html
(function($){
$.fn.Lform = {
Lget:function(c){
var s = "";
if(!c){
$("body form").each(function(i, e) {
s+= "<input type='button' class='cssform' data-lfm='" + i + "' value='" + i + "番目のフォームを送信させる'><br>";
});
}else{
s = "<input type='button' class='cssform' data-lfm='" + c + "' value='" + c + "番目のフォームを送信させる'><br>";
}
return (function(s){
console.log(s);
$("#lsform").html(s);
$(".cssform").click(function(){
var i = $(this).data("lfm");
$("body form").eq(i).submit();
});
})(s);
}
};
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<title>JQプラグインか？::from送信プラグイン｛BODYの中に複数のフォームが有る場合、指定したフォームを送信させる。｝</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="lform.js"></script>
<script>
$(function(){
$("#gLform").click(function(){
$("#gLform").Lform.Lget();
});
$("#gLform1").click(function(){
$("#gLform1").Lform.Lget(1);
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71682075-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<h1>form送信プラグイン｛BODYの中に複数のフォームが有る場合、指定したフォームを送信させる。｝</h1>
<input type="button" id="gLform" value="送信する"><input type="button" id="gLform1" value="送信する">
<p id="lsform"></p>
<form action="https://yahoo.co.jp" method="GET">
</form>
<form action="https://google.co.jp" method="GET">
</form>
<form action="https://www.msn.com/ja-jp" method="GET">
</form>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'cssform', 'GoogleAnalyticsObject', AM, body form, body>, button, data-lfm, DOCTYPE html>, form action, form>, gLform1, head>, input type, Lform.Lget, lsform, m.parentNode.insertBefore, s.getElementsByTagName, script src, script>, title>,
猫でもできるjsでゴリゴリ
2017.06.10
有言実行ということで、ゴリゴリJSのサンプル書いてみました。
と言ってもサンプルなので数行だけです。
唯、これを理解すると結構便利です。使い方は人それぞれだと思いますが
簡単に言えばJSのプラグインの考え方と似ていますね。
最初の部分だけ変更すればプラグインになっちゃうからね。
トイウコトでサンプルです。
本当はボタン押しても何も動かない仕様にするつもりでした。
コンソールログから出力した値から導き出して欲しかったけど
いまどきオープンなので・・・。
サンプルサイトとソースを掲載します。
https://zip358.com/tool/ajikan_js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>猫でもできるjsでゴリゴリ</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
$(function(){
var ajikan = {
ajisen:function(){
var str = "味せんべい";
console.log(str);
return str;
},neko:function(){
var str = "猫が";
console.log(str);
return str;
},loop:function(obj){
var cnt = Number($(obj).val());
console.log(cnt);
return cnt;
},taberu:function(ore,str1,str2,cnt){
var o = "";
for(var i=0;i<cnt;i++){
o+=str1;
}
for(var i=0;i<cnt;i++){
o+=str2;
}
o+="たべる？";
$(ore).html(o);
return;
}
};
$("#ore").click(function(){
console.log("oioioi・・投資信託");
var e = ajikan;
e.taberu("#obj",e.neko(),e.ajisen(),e.loop("#cnt"));
});
});
</script>
</head>
<body class="dark">
<div id="wrapper">
<section class="component">
<input type="text" value="" id="cnt">
<input type="button" value="お!!" id="ore">
<div id="obj">
</div>
</section>
</div>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, ajax.googleapis.com, AM, console.log, div id, div>, DOCTYPE html>, head>, html5shiv.googlecode.com, input type, link rel, meta http-equiv, return str, script src, script>, str1, stylesheet, title>, topcoat-desktop-dark.css, var ajikan, var str,
2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ！！
2016.03.19
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ！！</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<script>
$(function() {
hoge(0);
});
function hoge(cnt){
$.ajax({
type: "POST",
url: "json.php",
data:{
cnt:cnt
},
dataType: 'json',
success: function(obj){
var cnt = Number(obj.cnt);
var id_name = obj.id_name;
$("#id_no").html(cnt);
$("#id_name").html(id_name);
if(id_name!=""){
hoge(++cnt);
}else{
alert("もうねぇよ━━━(ﾟ∀ﾟ≡(ﾟ∀ﾟ≡ﾟ∀ﾟ)≡ﾟ∀ﾟ)━━━━!!")
}
}
});
}
</script>
</head>
<body>
No:<span id="id_no"></span>ID:NAME:<span id="id_name"></span>
</body>
</html>
<?php
//json.php
$cnt = $_POST["cnt"];
$link = mysql_connect('localhost', 'user', 'pass');
if (!$link) {
die('接続失敗です。'.mysql_error());
}
$db_selected = mysql_select_db('database_name_hoge', $link);
if (!$db_selected){
die('データベース選択失敗です。'.mysql_error());
}
//$result = mysql_query('SELECT * FROM where id_no =' . $cnt);
$result = mysql_query('SELECT * FROM where id_no =' . intval($cnt));
if (!$result) {
die('クエリーが失敗しました。'.mysql_error());
}
$row = mysql_fetch_assoc($result);
$obj["id_name"] = $row['id_name'];
$obj["cnt"] = $cnt;
$json = json_encode($obj);
echo $json;
上記のソースはおそらく正しく動くであろうコードです。
このコードで何がしたいのかを解説していきます。
このHTML（index.html）が呼ばれたら（表示されたら）、
再帰処理がかかりPHPが動作してデータベースのテーブルから
主キーのid_no（int型）を検索しid_name（text型）を参照し
jsonで値を返して、受け取り表示するというものです。
簡単なプログラムですが、MYSQLに問い合わせをするときに
ちゃんとint型に変換してあげないと2桁なるとバグるという
問題が発生します！！
要するに0?9の間は参照してくれるのに
10になるとアレ・・・？？
ってなり、参照してくれなくなるという
問題が発生します。
トイウコトデ・・・。
PHPやJQは案外いい加減な振る舞いをしてくれるけど
MYSQLは型の設定通り動作してくれるという
事なので注意が必要です。
ちなみに上記のコードが動作するかは未検証です(´Д｀)
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ajax.googleapis.com, AM, body>, code.jquery.com, datepicker.regional, datepicker.setDefaults, DOCTYPE html>, FROM where id_no, function hoge, head>, jquery-1.10.2.js, jquery-ui-i18n.min.js, jquery-ui.css, json.php, meta charset, MYSQL, script src, script>, select, span id, span>, title>,
非同期通信の改良版｛jsonで非同期}
2015.07.22
つい最近、この方法を知った自分です・・・。それまではこういう方法で返せると思っていなかったというかソコまで考えていなかったです。ちなみに、このjson形式で送信すると複数のデータがやりとりできるので便利です。グーグルでjson形式で非同期受信などとググるとサンプルコードがでてきます。php結構凄いなとかおもいます。おそらく他の言語でも同じようなことが出来るのだと思います。javaとか確実に出来そうな気がします。
日々、他の人が書いたコードを見ることは勉強になります。こんな書き方があるだなとか、ほんと日々、勉強になります。自分の糧にも繋がります。いま自分がもっともコードを書くときに苦戦するのが変数やオブジェクトの名前付け・・・基本的に自分は英語があまりわからないので、すごく勉強していればよかったなと思うわけです。学生時代には一にも二にも勉強だとおもいます。遊びも大事ですけど・・、やはり勉強していると将来の幅が広がることは間違いないです。
サンプルサイトはこちら。https://zip358.com/tool/sample-0722/
<?php
$hoge = $_POST['hoge'];
$obj=array();
$obj["hoge"]="urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge;
header("Content-Type: application/json; charset=utf-8");
echo json_encode($obj);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期2</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
$("#textarea-hoge").keyup(function() {
$.ajax({
type: "POST",
url: "sample-0722.php",
dataType:'json',
data: {
"hoge" : $("#textarea-hoge").val()
},
success: function(data) {
$("#hoge2").text(data.hoge);
},
error:function(data) {
}
});
});
});
</script>
</head>
<body>
<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
<textarea id="textarea-hoge" rows="10" cols="100"></textarea>
<br>
<div id="hoge2"></div>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, body>, br>, code.jquery.com, data.hoge, DOCTYPE html>, function, head>, hoge2, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0722.php, script src, script>, textarea id, textarea-hoge, textarea>, title>, utf-8, zip358.com,
#プログラムサンプル ブログパーツは検索して出てくるのでうっぷします。
2015.03.11
ブログパーツの簡素な仕組みをUPします。基本はこれだけです。基本はこれだけですけど応用すると少々面倒くさいのでそこら辺はご想像におまかせします。これを基にして正規に配布する状態にするには、サーバの負荷の事やセキュリティとかそういう事まで考えなくてはならないので少々面倒くさいです。特にIDを発行して配布する場合などは結構、コードを書かないといけないです。また、悪意のあるユーザーがサーバに負荷をかけれる要因にもなりますので、安易にブログパーツを提供するのはオススメできません。ちなみに自分のブログパーツ用のJSを貼り付けても動作はしません（ファイルがないので）。ただ、下記のサンプルコードを自分自身のサーバ上に設置し、設置したURL（任意のURL）をJSで呼び出すと動作し、それを配布することも可能です。
PHPファイル
<?php
header("Content-type: application/javascript");
$str = htmlspecialchars($_GET["hoge"]);
if($str!=""){
echo "document.write($str);";
}else{
echo "document.write('hoge!?');";
}
?>
JS貼付け用。
<script src="https://zip358.com/tool/sample-tool/sample-blogtool.php?hoge='こんにちは'" language="JavaScript" charset="utf-8"></script>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, charset, Content-type, document.write, echo, header, hoge, htmlspecialchars, javascript, JS貼付け用, script src, script>, STR, utf-8, これだけ, ご想像, サーバ, セキュリティ, そこら辺, プログラムサンプル ブログパーツ, 負荷,
（ #PHPサンプル ）非同期通信のPHPサンプルコードを作ってみましたのでどうぞ。
2015.03.01
非同期通信で入力した文字をURLエンコード して返す、コードを書いてみましたのでどうぞ。お使いください。ただし、この処理には欠陥があって処理に負荷がかかると上手く結果を返してくれない恐れがあります。非同期処理なので処理するプログラムにばんばんと値を投げますが、返答を待たずに次の処理を投げるので、どの処理が最初に返ってくるのかは、わからないのです。一見、うまく動いてそうですけどただ、処理に負荷がかかっていないのでうまく処理された状態になっているだけです。なので、非同期処理を使う場合は、投げる値にID（順番）を付与して処理しないといけないです。
トイウコトデ、サンプルコードを置いときますのでお使いください。(デモサイトこちら）
https://zip358.com/tool/sample-0301.zip(DL)
ソースは下記参照
HTML側（JQuery側）のソース＝処理を投げる側＝処理された結果を出力する側。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
$("#textarea-hoge").keyup(function() {
$.ajax({
type: "POST",
url: "sample-0301.php",
dataType:'html',
data: {
"hoge" : $("#textarea-hoge").val(),
},
success: function(data) {
$("#hoge2").text(data);
},
error:function(data) {
}
});
});
});
</script>
</head>
<body>
<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
<textarea id="textarea-hoge" rows="10" cols="100"></textarea>
<br>
<div id="hoge2"></div>
</body>
</html>
PHP側のソース＝処理する側。
<?php $hoge = $_POST['hoge']; echo "urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge; ?>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, body>, br>, code.jquery.com, DOCTYPE html>, function, head>, hoge2, html lang, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0301.php, script src, script>, textarea id, textarea-hoge, textarea>, title>, zip358.com, トイウコトデ,