JS | zip358.com - パート 2

クリックでON、OFFする表示だけど。無数の書き方があると思ふ?

2021.08.26

不要不急の町内アナウンスが流れる中、この記事を書いています。不要不急ってなんだろう、人によって解釈が違ってしまうし判断もかなり違うような気がします。

さて、今日は凄く単純なJS（javascript）のコードを書いてみました。とても簡単なコードですが素人が書くともっとコード数は増えると思いますし、玄人が書くともっとコードを短く書くことも可能かと思います、例えば自分はonoffという変数をスイッチ代わりに使用していますが、本当はこれもいらないです。そうなるともっとコード数は少なくなります。なぜ要らなくなるかと言えば、表示されている文字で判断することが可能だからです。

今回はそのコードは記載しませんので、ご自身で考えてみてください。

クリックでON、OFFする表示だけど。

プログラムコードは無数にあります、最初は短く書くという事が難しいかもしれませんが徐々に上達していくものだと思います。なので、手を動かしながら学ぶことは大切かと思います。駆け出しのエンジニアさんはいろいろなコードを見て先人の技を盗んでくださいませ。

このソースコードは美しいという考え方はわかります。数式が美しいと意味は似ているように思えてなりません。数式はわかりませんがね?。

https://zip358.com/tool/demo39/

onoff = 0;
document.getElementById("c").addEventListener("click",()=>{
    document.getElementById("view").innerHTML = (()=>{
        onoff = !onoff?1:0;
        return onoff?"on":"off";
    })();
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2021年08月26 08:01日

タグ

javascript, JS, off, ON, onoff, アナウンス, かなり, クリック, コード, こと, これ, ご自身, スイッチ, プログラム, もの, 上達, 不要不急, 中, 事, 人, 今回, 今日, 使用, 判断, 単純, 可能, 変数, 大切, 手, 文字, 書き方, 最初, 本当, 気, 無数, 玄人, 町内, 簡単, 素人, 自分, 表示, 解釈, 記事, 記載,

案件9割完成して案件に申し込むみたいな事は非効率だけど。

2021.08.05

Logging

今日、先日にツイートした案件の締切日ですが・・・(*´ω｀*)、未来の自分は案件取れたでしょうか？来月の支払いをペイ出来る額ですので取れると良いですね。さて、案件9割完成して案件に申し込むみたいな事は非効率だけどこの非効率で仕事に応募している理由は、やっぱ安価な仕事でも仕事は仕事ですよという気持ちで取り組んでいます。

とある案件

因みに今回はこういう案件を作りました。JSのコードの行数は約800行、PHPのコードは約200行で合計、1000行のコードを２日間で書きました・・・?。サイトを動的な処理で動かしているので結構、無駄にコードを書いています。いつもの通り設計はなし、頭の中でさっさと考えて作っております。

ふぅ案件9割完成した。
請け負う事が出来るかは？
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) August 1, 2021

もし案件が取れなかったらコードなどを自分の名前のサイト、もしくはgithubに公開します?ので、その時はご利用ください、可能性としては５０％ぐらいの確率で請け負う事が出来ると考えています。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年08月05 01:47日

タグ

1000, 2, 200, 50, 800, ９, github, JS, php, コード, ご利用, サイト, ツイート, ペイ, 中, 事, 今回, 今日, 仕事, 先日, 公開, 処理, 効率, 可能性, 合計, 名前, 安価, 完成, 応募, 日, 時, 未来, 来月, 案件, 気持ち, 無駄, 理由, 確率, 締切, 自分, 行数, 設計, 通り, 頭, 額,

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

2021.07.12

Logging

vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように！！ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ？を使用して書くほうが短いコードで書けるので良いなと実感。

超Vue.js 2 入門完全パック – Vueでアプリを作りたい方必見！ (Vue Router, Vuex含む)

vue.jsの入門、動画を見て😅
使ってみた便利といえば便利かも。

背景の色を変えるhttps://t.co/nUWb5qqa4B
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) July 1, 2021

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな（時間がない？^^;）。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん（@HEP1147）、凄いところ！！ですね。

https://www.youtube.com/watch?v=kltx14qMt5M

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    #el{
        width: 100vw;
        height: 100vh;
    }
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
    <span v-on:click="colorclick('#000')"style="color:#000">■</span>
    <span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
    <span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
    <span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
    ---{{ color }}---
    X={{x}},Y={{y}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>

var vm = new Vue({
    el:"#el",
    data:{
        color:"#fff",
        x:0,
        y:0
    },
    methods:{
        colorclick:function(c){
            this.color = c;
            document.body.style.backgroundColor = c;
            return true;
        },
        mouseXY:function(event){
            this.x = event.clientX;
            this.y = event.clientY;
        }
    }    
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年07月12 02:34日

タグ

body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,

なるほど、よくわかりました。

2021.02.22

Logging

小学生でもわかるasync/await/Promise入門【JavaScript講座】

そういう事だったんだね。いまごろ理解する、いろいろな方法で非同期処理ができるだなと、ちなみにIE11でもPromiseは使用することが出来るみたい。そのかわりライブラリを読み込む必要はあるけれど・・・。IE11を開くとエッジを使用しようと勧めてくる。そろそろIEを強制的に削除すればいいのにと思っています。IEだとjsも制限が出てくるだよね。とくにコードを書くときにグレイヴ・アクセントとかいう記号「`」が使用できないのは痛いなと思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年02月22 04:08日

タグ

11, IE, JS, Promise, アクセント, いま, いろいろ, エッジ, かわり, グレイヴ, コード, こと, とき, ライブラリ, 事, 使用, 処理, 制限, 削除, 同期, 必要, 方法, 理解, 記号,

Yahoo japanサイトのコロナ情報リンク集です。好評に付きVer2。

2020.12.21

Logging

Yahoo japanサイトのコロナ情報リンク集です。好評に付きバージョン2を
作成しました。見た目はこんな感じです。県名をクリックするとYahoo!japanのコロナサイトの
画面が開きます(遷移します)。ほんとは、Yahoo!データをウェブスクレイピングしようと思ったのですが、別にそこまでする必要はないかなと思いとどまり、いまに至っています。
データは国もJSONで公開していますのでわざわざ作ることもないのですけど、自分が見やすいように、時間があれば改善していきます。

追記：時間があったので改善しました。

https://zip358.com/tool/COVID-19-japan/

var ken_json = {};
fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
	let ken = [];
	for (const key in data) {
		ken.push("<a href='#' onClick='c19(\"" + "https://hazard.yahoo.co.jp/article/covid19" + data[key].roman +"\")' onmouseover='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"red\")'' onmouseout='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"#fff\")'>" + data[key].name + "</a>");
	}
	document.getElementById("covid19-link-list").innerHTML = ken.join(",");
	for (const key in data) {
		document.getElementById(data[key].roman.toUpperCase()).setAttribute("fill","#fff");
	}
});

function c19(url){
	window.open(url,"_blank");
}
function c19_f(kenid,color){
	document.getElementById(kenid).setAttribute("fill",color);
}

{
	"1": {
		"name": "北海道",
		"roman": "hokkaido"
	},
	"2": {
		"name": "青森",
		"roman": "aomori"
	},
	"3": {
		"name": "岩手",
		"roman": "iwate"
	},
	"4": {
		"name": "宮城",
		"roman": "miyagi"
	},
	"5": {
		"name": "秋田",
		"roman": "akita"
	},
	"6": {
		"name": "山形",
		"roman": "yamagata"
	},
	"7": {
		"name": "福島",
		"roman": "fukushima"
	},
	"8": {
		"name": "茨城",
		"roman": "ibaraki"
	},
	"9": {
		"name": "栃木",
		"roman": "tochigi"
	},
	"10": {
		"name": "群馬",
		"roman": "gunma"
	},
	"11": {
		"name": "埼玉",
		"roman": "saitama"
	},
	"12": {
		"name": "千葉",
		"roman": "chiba"
	},
	"13": {
		"name": "東京",
		"roman": "tokyo"
	},
	"14": {
		"name": "神奈川",
		"roman": "kanagawa"
	},
	"15": {
		"name": "新潟",
		"roman": "niigata"
	},
	"16": {
		"name": "富山",
		"roman": "toyama"
	},
	"17": {
		"name": "石川",
		"roman": "ishikawa"
	},
	"18": {
		"name": "福井",
		"roman": "fukui"
	},
	"19": {
		"name": "山梨",
		"roman": "yamanashi"
	},
	"20": {
		"name": "長野",
		"roman": "nagano"
	},
	"21": {
		"name": "岐阜",
		"roman": "gifu"
	},
	"22": {
		"name": "静岡",
		"roman": "shizuoka"
	},
	"23": {
		"name": "愛知",
		"roman": "aichi"
	},
	"24": {
		"name": "三重",
		"roman": "mie"
	},
	"25": {
		"name": "滋賀",
		"roman": "shiga"
	},
	"26": {
		"name": "京都",
		"roman": "kyoto"
	},
	"27": {
		"name": "大阪",
		"roman": "osaka"
	},
	"28": {
		"name": "兵庫",
		"roman": "hyogo"
	},
	"29": {
		"name": "奈良",
		"roman": "nara"
	},
	"30": {
		"name": "和歌山",
		"roman": "wakayama"
	},
	"31": {
		"name": "鳥取",
		"roman": "tottori"
	},
	"32": {
		"name": "島根",
		"roman": "shimane"
	},
	"33": {
		"name": "岡山",
		"roman": "okayama"
	},
	"34": {
		"name": "広島",
		"roman": "hiroshima"
	},
	"35": {
		"name": "山口",
		"roman": "yamaguchi"
	},
	"36": {
		"name": "徳島",
		"roman": "tokushima"
	},
	"37": {
		"name": "香川",
		"roman": "kagawa"
	},
	"38": {
		"name": "愛媛",
		"roman": "ehime"
	},
	"39": {
		"name": "高知",
		"roman": "kochi"
	},
	"40": {
		"name": "福岡",
		"roman": "fukuoka"
	},
	"41": {
		"name": "佐賀",
		"roman": "saga"
	},
	"42": {
		"name": "長崎",
		"roman": "nagasaki"
	},
	"43": {
		"name": "熊本",
		"roman": "kumamoto"
	},
	"44": {
		"name": "大分",
		"roman": "oita"
	},
	"45": {
		"name": "宮崎",
		"roman": "miyazaki"
	},
	"46": {
		"name": "鹿児島",
		"roman": "kagoshima"
	},
	"47": {
		"name": "沖縄",
		"roman": "okinawa"
	}
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年12月21 01:49日

タグ

19, 2, 358, 47, assets, com, covid, fetch, gt, https, JAPAN, JS, json, ken, quot, response, then, tool, var, ver, www, Yahoo, zip, ウェブ, クリック, こと, コロナ, サイト, スク, そこ, データ, バージョン, ピング, ほんと, リンク集, レイ, わざわざ, 作成, 公開, 国, 好評, 必要, 情報, 感じ, 改善, 時間, 画面, 県名, 自分, 見た目, 追記, 遷移,

Yahooが567（コロナ）の情報を取り扱っているそれも県単位でURLまとめたよ。

2020.12.20

Logging

Yahooが567の情報を取り扱っている。567（コロナ）を県単位で情報を配信しているまとめリンクサイトを作りましたので、ご自由にお使いください。
リンクはこちらです。https://zip358.com/tool/demo28/

ソースコードとJSONを貼っときます。IT土方さんみたいな事をした?。

<script>
	fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
		let ken = [];
		ken.push('<div class="list-group">');
		for (const key in data) {
			ken.push("<a  class='list-group-item list-group-item-action' href='https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "' target='_"+ data[key].roman +"'>" + data[key].name +":::https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "</a>");
		}
		ken.push("</div>");
		document.getElementById("covid19-link-list").innerHTML = ken.join("")
	});
</script>

{
	"1": {
		"name": "北海道",
		"roman": "hokkaido"
	},
	"2": {
		"name": "青森",
		"roman": "aomori"
	},
	"3": {
		"name": "岩手",
		"roman": "iwate"
	},
	"4": {
		"name": "宮城",
		"roman": "miyagi"
	},
	"5": {
		"name": "秋田",
		"roman": "akita"
	},
	"6": {
		"name": "山形",
		"roman": "yamagata"
	},
	"7": {
		"name": "福島",
		"roman": "fukushima"
	},
	"8": {
		"name": "茨城",
		"roman": "ibaraki"
	},
	"9": {
		"name": "栃木",
		"roman": "tochigi"
	},
	"10": {
		"name": "群馬",
		"roman": "gunma"
	},
	"11": {
		"name": "埼玉",
		"roman": "saitama"
	},
	"12": {
		"name": "千葉",
		"roman": "chiba"
	},
	"13": {
		"name": "東京",
		"roman": "tokyo"
	},
	"14": {
		"name": "神奈川",
		"roman": "kanagawa"
	},
	"15": {
		"name": "新潟",
		"roman": "niigata"
	},
	"16": {
		"name": "富山",
		"roman": "toyama"
	},
	"17": {
		"name": "石川",
		"roman": "ishikawa"
	},
	"18": {
		"name": "福井",
		"roman": "fukui"
	},
	"19": {
		"name": "山梨",
		"roman": "yamanashi"
	},
	"20": {
		"name": "長野",
		"roman": "nagano"
	},
	"21": {
		"name": "岐阜",
		"roman": "gifu"
	},
	"22": {
		"name": "静岡",
		"roman": "shizuoka"
	},
	"23": {
		"name": "愛知",
		"roman": "aichi"
	},
	"24": {
		"name": "三重",
		"roman": "mie"
	},
	"25": {
		"name": "滋賀",
		"roman": "shiga"
	},
	"26": {
		"name": "京都",
		"roman": "kyoto"
	},
	"27": {
		"name": "大阪",
		"roman": "osaka"
	},
	"28": {
		"name": "兵庫",
		"roman": "hyogo"
	},
	"29": {
		"name": "奈良",
		"roman": "nara"
	},
	"30": {
		"name": "和歌山",
		"roman": "wakayama"
	},
	"31": {
		"name": "鳥取",
		"roman": "tottori"
	},
	"32": {
		"name": "島根",
		"roman": "shimane"
	},
	"33": {
		"name": "岡山",
		"roman": "okayama"
	},
	"34": {
		"name": "広島",
		"roman": "hiroshima"
	},
	"35": {
		"name": "山口",
		"roman": "yamaguchi"
	},
	"36": {
		"name": "徳島",
		"roman": "tokushima"
	},
	"37": {
		"name": "香川",
		"roman": "kagawa"
	},
	"38": {
		"name": "愛媛",
		"roman": "ehime"
	},
	"39": {
		"name": "高知",
		"roman": "kochi"
	},
	"40": {
		"name": "福岡",
		"roman": "fukuoka"
	},
	"41": {
		"name": "佐賀",
		"roman": "saga"
	},
	"42": {
		"name": "長崎",
		"roman": "nagasaki"
	},
	"43": {
		"name": "熊本",
		"roman": "kumamoto"
	},
	"44": {
		"name": "大分",
		"roman": "oita"
	},
	"45": {
		"name": "宮崎",
		"roman": "miyazaki"
	},
	"46": {
		"name": "鹿児島",
		"roman": "kagoshima"
	},
	"47": {
		"name": "沖縄",
		"roman": "okinawa"
	}
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年12月20 12:00日

タグ

39, 47, 567, assets, class, const, data, div, fetch, For, gt, in, IT, JS, json, ken, key, let, list-grou, list-group, list-group-item, lt, push, quot, response, script, then, url, Yahoo, コード, こちら, コロナ, サイト, ソース, それ, まとめ, リンク, 事, 単位, 土方, 情報, 県, 配信,

demo23、javascriptの非同期同期処理?

2020.11.18

Logging

今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか？それとも予想外の結果が返ってきましたか？

asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д｀)。因みに今回、Promiseを簡略化したパターンでコードを書いています。

尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年11月18 05:01日

タグ

addEventListener, async, async function test, await, await test, console.log, document.getElementById, function test, JS, Promise, quot, quot;btn, quot;btn&quot, quot;click&quot, resolve, setTimeout, デバックモード, 変数, 返却, 関数,

マウスの動きをトラッキング（追跡）する。

2020.11.17

Logging

サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。

考え方のソースコードとdemoサイトのリンクを貼っときます、因みにIPを取れるJSライブラリもあるみたいなので、それを使用すると案件の内容が完結すると思います。
尚、PHPで再度、返却していますが、実際トラッキングする場合はPHP側でJSから送ったデータを保存処理を行う処理とクライアントが開いている状態のページの画面をキャプチャする機能などが必要になるかと思われます。そういう処理をPHP側で行わないといけないので、実際はJS側ではマウスのトラッキングとクライアントがブラウザで開いた画面サイズもPHP側に送信する必要はあるかなと。そういう事をPHP側に追加すれば良いのかと・・・感じました。

Demo22:: https://zip358.com/tool/demo22/

https://www.youtube.com/watch?v=UefhNlxx3xk

window.onload = function(){
	document.body.addEventListener("mousemove",(e)=>{
		var timeInMs = Date.now();
		document.querySelector("#log").innerHTML = navigator.userAgent + "<br>" + "x=" + e.offsetX  + "y=" + e.offsetY;
		var data = {timeInMs:timeInMs,userAgent:navigator.userAgent,x:e.offsetX,y:e.offsetY};
		move_xy(data).then(function(response){
			console.log(response);
		});
		
	});
};

async function move_xy(data){
	return await new Promise(function(resolve) {$.ajax({
		type: "POST",
		dataType: "json",
		url: "./move_xy.php",
		data: data,
		success: function (response) {
			if(response.res==="ok"){
				
				resolve(response);
			}
			resolve(false);
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			resolve(false);
		}
	});});
}

<?php
$obj["timeInMs"] = $_POST["timeInMs"];
$obj["userAgent"] = $_POST["userAgent"];
$obj["x"] = $_POST["x"];
$obj["y"] = $_POST["y"];
$obj["res"] = "ok";

print json_encode($obj);

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年11月17 05:00日

タグ

demo, IP, JS, php, あるかな, キャプチャ, クライアント, クラウド, クロス, コード, サイズ, サイト, ソース, それ, データ, トラッキング, パターン, ブラウザ, ページ, マウス, ライブラリ, リンク, 事, 使用, 保存, 側, 内容, 再度, 処理, 制約, 可能, 場合, 完結, 実際, 必要, 応募, 感じ, 接続, 案件, 楽天, 機能, 状態, 画面, 考え方, 行動, 返却, 追加, 追跡, 送信,

とにかくプロなフロントエンドエンジニア。

2020.11.16

Logging

下記の動画を見て頂ければ分かると思うのですが、フレームワークなどを使わずにベタでこれを作っているというのは、フロントエンドエンジニアとしてはプロ領域だと感じます。出来る人の違いはCSSをゴニョゴニョ使えるかにあるだろうなと、ここまでゴニョゴニョ使えたらフレームワークなんていらないよな。ちゃんとレスポンシブにもなっていて、感心してしまいます。ここまで出来ないとプロのフロントエンドエンジニアとは言えないのかは、わからないけど。でも見ていて爽快感がありますよね。

Responsive Login & Registration Form Using HTML & CSS & JS | Sliding Sign In & Sign Up Form

自分もゴニョゴニョとフロントエンドエンジニアの領域も侵食していかなければ、いけないなと何事も手を動かさないと覚えない。この頃のWEBは動的なデザインをCSSやJSを駆使して作られているので、そこんトコロを自分も勉強していけたらなと思います。バックエンドもフロントエンドも両方極めたいなと思えた動画だった。未だにWEBは奥が深いなと思うし、ソフトもアプリもそうなんだけどいろいろと頑張らないと思えてならない。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年11月16 04:36日

タグ

css, JS, web, アプリ, いろいろ, エンジニア, エンド, ここ, ゴニョゴニョ, これ, そこ, ソフト, デザイン, トコロ, バック, フレームワーク, プロ, フロント, ベタ, 下記, 両方, 人, 何事, 侵食, 勉強, 動画, 奥, 感心, 手, 爽快感, 自分, 違い, 頃, 領域, 駆使,

おつりアルゴリズム番外編。

2020.07.10

Logging

おつりアルゴリズムのアクセスがまぁまぁ好評なので番外編を記載します。硬貨や紙幣の制限がない場合、単なるこれだけのアルゴリズムで動作させることが可能です。尚、自動販売機などは硬貨の枚数なども計算しておつりを算出しているだろうと思います。因みにこのアルゴリズムに硬貨の枚数などのアルゴリズムを追加することにより比較的に簡単に導入できるかと思います。

デモ21としてリンクを載せときます、実際に使用してみて勘どころを掴んでください。なお、このコードはHTMLとJSで動させています。PHPなどは使用していません。ジャバスクリプト（JavaScript）で結構いろいろなことを処理することが可能だと感じますね。WEBでなにか勉強しようと考えている場合、JS（ジャバスクリプト）は必須であり、ブラウザさえあれば普通に動くのでお勧めな言語かなと思います。

ソースコードは下記になります。https://zip358.com/tool/demo21/

document.getElementById("money").addEventListener("input",function(){
	var money = document.getElementById("money").value;
	var change = {
		calc1:{yen:10000,change:0,str1:"紙幣",str2:"枚"},
		calc2:{yen:5000,change:0,str1:"紙幣",str2:"枚"},
		// calc33:{yen:2000,change:0,str:"紙幣",str2:"枚"},
		calc3:{yen:1000,change:0,str1:"紙幣",str2:"枚"},
		calc4:{yen:500,change:0,str1:"硬貨",str2:"個"},
		calc5:{yen:100,change:0,str1:"硬貨",str2:"個"},
		calc6:{yen:50,change:0,str1:"硬貨",str2:"個"},
		calc7:{yen:10,change:0,str1:"硬貨",str2:"個"},
		calc8:{yen:5,change:0,str1:"硬貨",str2:"個"},
		calc9:{yen:1,change:0,str1:"硬貨",str2:"個"}
	};
	money = money.replace(/[,|，]/g,"");
	if(money.match(/[0-9]{1,}/g)){
		for (const key in change) {
			if (change.hasOwnProperty(key)) {
				const obj = change[key];
				change[key].change  = Math.floor(money / obj.yen);
				money = money % obj.yen;
			}
		}
		var anser = function() {
			var str = "";
			for (const key in change) {
				if (change.hasOwnProperty(key)) {
					const obj = change[key];
					if(obj.change){
						str+= obj.yen + "円、" + obj.str1 + "が" + obj.change + obj.str2 + "<br>";
					}
				}
			}
			return str;
		};
		document.getElementById("change_print").innerHTML = anser();
	}else{
		document.getElementById("change_print").innerHTML = "入力が不適切です！";
	}
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年07月10 09:46日

タグ

21, document, getElementById, html, javascript, JS, php, quot, web, アクセス, アルゴリズム, いろいろ, おつり, お勧め, コード, こと, これだけ, ジャバ, スクリプト, ソース, デモ, ブラウザ, リンク, 下記, 使用, 処理, 制限, 勉強, 動, 動作, 勘どころ, 可能, 場合, 好評, 実際, 導入, 必須, 普通, 枚数, 番外編, 硬貨, 算出, 簡単, 紙幣, 自動販売機, 言語, 計算, 記載, 追加,

JavaScriptを再勉強しているのだが、ある疑惑が！？

2020.06.03

Logging

JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。

jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。

https://www.youtube.com/watch?v=RQD4m5WNfDk

あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年06月03 04:00日

タグ

addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,

js初心者さんのお勉強：思いつき写経。

2020.06.01

Logging

js初心者さんのお勉強をvlogとして昨日撮りました。もっと簡略化できることはあるのだが、敢えてやらない自分がいます。自分のモットーに初心者さんでもわかるコードをという考えがあります。初心者さんに分かりやすいと言うことは馬鹿な自分にも分かりやすいという事です。ぱっと見て読みやすければ良いという事です。javascriptを本当に1から勉強中なんですね。本当に右も左も分からないのでググりながらお勉強しています。知らないと言ってもプログラミングの基本は知っているのでJS用の書き方やお作法を覚えているというような感じです。

https://www.youtube.com/watch?v=9q6gd5FDelQ

ソースコードはこちら

let btn1 = function (e) {
	//btn2
	console.clear();
	console.log("btn1");
	let p = document.getElementsByTagName("p");
	let style1 = [["backgroundColor", "fontSize", "color"], ["#000000", "20px", "#ffffff"]];
	for (const key in p) {
		if (p.hasOwnProperty(key)) {
			const element = p[key];
			for (var i = 0; i < style1[0].length; i++) {
				element.style[style1[0][i]] = style1[1][i];
			}
		}
	}
};
let btn2 = function (e) {
	//btn2
	console.clear();
	console.log("btn2");
	let p = document.getElementsByTagName("p");
	let style2 = {
		backgroundColor: "#ffffff",
		fontSize: "20px",
		color: "#000000"
	};
	for (const key in p) {
		if (p.hasOwnProperty(key)) {
			const element = p[key];
			for (const key2 in style2) {
				element.style[key2] = style2[key2];
			}
		}
	}
};
document.body.style.backgroundColor = "#0b222b";
document.getElementById("btn1").addEventListener("click",btn1);
document.getElementById("btn2").addEventListener("click",btn2);

デモページ
https://zip358.com/tool/demo17/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年06月01 12:47日

タグ

１, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, 事, 作法, 写経, 初心者, 勉強, 右, 基本, 左, 思いつき, 感じ, 昨日, 書き方, 本当, 用, 簡略, 自分, 馬鹿,

Visual Studio Codeの話とビデオ通話API。

2020.05.19

Logging

Visual Studio Code（ビジュアルスタジオコード）の話とビデオ通話APIをわかりやすく解説している動画を見つけたので紹介します。下記の動画を見ていただければビデオ通話APIの導入とVisual Studio Codeの使い方の基本が一通りわかるかなと、2017年の動画なので3年前（現在：2020年）の話になる。

これさえあれば大丈夫！Visual Studio Code 徹底解説！ -HTML5 Conference 2017-

今では、Visual Studio codeにはいろいろな機能追加がされているが基本的な機能はほぼ同じ、機能追加されてこれ以上に使いやすさが増している部分もあるけど、上記の動画解説の内容を知っていない人は見るべしかなと思います。あと、ビデオ通話APIの話が割愛されているが、NTTが提供しているSkywayというAPIサービスがある、これを使用することにより簡単にビデオ通話が導入ができるみたいです。動画ではnode.jsやtypescriptで動かしている部分も垣間見える。あとAzureにデプロイする事も紹介しているので初心者向きの講義ではないかなと思いますが、見習いIT戦士が見るには良い講義かなと思えたのでご紹介しました。

見る限り、APIを使用すれば簡単にビデオ会議システムなどが導入できるなと言う印象を持ったものの、有料版はお高いなという感じがします。あのお値段を支払うのは結構きついなと思います。このAPI機能で無料のサービスなどを立ち上げる場合などはビデオ通話の時間に制限を設けないといけない気がします。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年05月19 04:32日

タグ

2017, 2020, ３, API, Az, Code, JS, node, NTT, Skyway, Studio, TypeScript, Visual, いろいろ, コード, こと, これ, サービス, スタジオ, ビジュアル, ビデオ, 上記, 下記, 人, 今, 使い方, 使用, 内容, 割愛, 動画, 垣間, 基本, 導入, 提供, 機能, 現在, 簡単, 紹介, 解説, 話, 追加, 通話, 部分,

プログラム講師YOUTUBER、たにぐちまことさん。

2020.04.25

Logging

たにぐちまことさんという方がYOUTUBEでフロントエンドエンジニアやバックエンドエンジニアに対して有益な情報を公開しています。wordpressやvue.jsなどをわかりやすく解説しています。近々、kintoneの高知県講演（ライブ放送）で登壇される予定です。これからWEBのプログラマーやコーダーになりたい人は視聴して損はないと思います。自分が昔、HTMLなどを学んだときにはあまり本も買わずソースコード（HTMLコード）から勉強をしていましたが、いまはYOUTUBEという便利なツールがあるので、教育系YOUTUBERの動画を見て学習し手を動かして実践することにより短時間で学習することが出来ると思います。

Vue.js入門 #01：一番最初のプログラム

自分がいまプログラミング初心者だったら、下記のようなプログラミング学習方法を取ると思います。YOUTUBEで教育系動画を視聴して動画で説明された物と同じ物を作成します。作成途中に分からない事があればググります、そして再度動画を観る。進まない時はSNSで質問をするなどを行いながら徐々に知識を身に着けていきます。知識がつくと基本を知ることが出来るので、次に違うプログラミング言語を学ぶ時の応用が付きます。尚、違う言語を学ぶときは以前まで使用していたプログラミング言語をいま勉強している言語で同じことを試してみるという事を行います。そうすることで比較的短時間で違う言語の勉強がスムーズになります。

理屈っぽい HTML5入門 #01：タグと HTML5と XHTMLの名残

最後にYOUTUBEチャンネル登録はこちら
たにぐちまことのともすたチャンネル
https://www.youtube.com/channel/UCphTq6mefx_15CjD35qgXgA

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年04月25 01:47日

タグ

html, JS, kintone, vue, web, WordPress, youtube, YOUTUBER, いま, エンジニア, エンド, コーダー, コード, こと, これ, ソース, たにぐち, ツール, とき, バック, プログラマー, プログラミング, プログラム, フロント, まこと, ライブ, 下記, 予定, 事, 人, 作成, 便利, 公開, 初心者, 勉強, 動画, 学習, 実践, 情報, 手, 損, 放送, 教育, 方, 方法, 昔, 有益, 本, 物, 登壇, 短時間, 自分, 視聴, 解説, 説明, 講師, 講演, 途中, 高知県,

ブラウザのプッシュ通知が簡単にできちゃうFirebase

2020.03.20

Logging

ブラウザのプッシュ通知が簡単にできちゃうFirebaseのでやり方を簡略的に記載します。

Firebaseにプロジェクトを作成する（グーグルのアカウントが必要）。
firebase cliというパッケージソフトをOSにダウンロードしそのソフトを任意のフォルダの中に移動させて起動させる。Node.jsはインストール済みとする（※手順）。
試しにホスティングしてみる。ホスティングはプロジェクトの左側の項目よりホスティングをクリックすると手順の説明通り行うと出来ます。
URLより確認し表示されているか確認する。
Cloud Messagingの設定よりFCM でウェブ認証情報を設定するからメッセージングオブジェクトを取得するまでをブラウザで操作し設定を行う。
ローカルに下記のURLよりファイルをダウンロードする。ダウンロードするファイルはfirebase-messaging-sw.js, firebase-logo.png.webp, index.html, main.cssになります。動かない場合は再設定が必要。
https://github.com/firebase/quickstart-js/tree/f76b14ca00cca48dbfca5c787c0a4ca73eb9857d/messaging
ダウンロードしたファイルはpublicか自分が決めたフォルダに入れる。
index.htmlソースの中に ‘<YOUR_PUBLIC_VAPID_KEY_HERE>’ と記載している部分があるので変更する。
firebase cli より『 firebase deploy』する。
ページを再読み込みして通知を許可する。
Cloud Messagingから送信してみる。
通知が届くことを確認する。
※今回はブラウザのプッシュ通知なのでアプリを追加する際はWEB（</>）を選んでください。

Introducing Firebase Cloud Messaging

ではでは?健闘を祈る?

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月20 09:28日

タグ

cli, Cloud, FCM, Firebase, firebase-logo, firebase-messaging-sw, index, JS, Messaging, node, OS, png, url, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, 中, 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,

アロー演算子の数珠繋ぎの作り方?

2020.03.17

Logging

コロナウィルス対策の一環として東京都が“GitHub”に開設した新型コロナウイルス対策サイトがすごいと話題になっているらしいので自分も見てみました。ソースコードはVue.js,TypeScript,React.js,PHPなどなどいろいろな言語が使用されていました。PHPはLaravelの機能が使われてたりして、書き方が綺麗で勉強になるなぁと思ったわけです。参考になりますよね、きれいな書き方のコードを見るとやはり参考になります。

もともと、書き方が古いと自分は古い書き方に合わせます。特に上がプライドが高い人だと出る杭は打たれるみたいな状態になりますので要注意ですね…。そういう人が上にいると徐々にコードを書くのが面白くなくなります。そういうのは大いにあるなと思います。名も知らないひとのコード書きが自分の上司だったらなと思うときがあります。

そう愚痴ってもしょうが無い、その環境を選んだのは自分自身な訳ですからね。
ただ技術力を伸ばしたければやはり環境は大事、辞めたいなら辞めて自分の力を表現できる環境に身をおいた方が断然良い。

前置き長くなりました、、アロー演算子を数珠繋ぎする考え方はこんな感じです。考え方を知っとくと応用が出来るようになります、やはり基準を知るが大事かなといつも思います。

追記：これを応用するとこんな感じになります。追記のソースコードを記載しました（2021.07.05）

<?php
class testA{
    public $a = "";
    public function __construct($a)
    {
        $this->a = $a;
    }
    public function test1($a=""):string{
        return (string)$this->a." ".$a."<br>\n";
    }
    public function test2($a=""):string{
        return (string)$this->a." ".$a."<br>\n";
    }
}
class test{
    public function main($a="Hello"):object
    {
        $this->a = $a;
        return new testA($this->a);
    }
}
$test = new test();
print $test->main()->test1("PHP");
print $test->main("by")->test2("C");

<?php
    class test{
        function main(){
            return new class{
                function testA(){
                    return "testA";
                }
                function testB(){
                    return "testB";
                }
            };
        }
    }
    $test = new test();
    print $test->main()->testA();
    print $test->main()->testB();

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月17 10:22日

タグ

github, JS, Laravel, php, react, TypeScript, vue, アロー, いろいろ, ウィルス, きれい, コード, コロナ, コロナウイルス, サイト, しょう, ソース, とき, ひと, プライド, もともと, わけ, 一環, 上, 上司, 人, 作り方, 使用, 勉強, 参考, 名, 対策, 技術力, 数珠繋ぎ, 新型, 書き方, 杭, 東京都, 機能, 注意, 演算子, 状態, 環, 環境, 綺麗, 自分, 自身, 言語, 訳, 話題, 開設,

都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。

2020.03.09

Logging

JSONファイル、JSファイル、htmlファイルはそれぞれ下記になります。ちなみにいま作っている、あるサービスに使うために作ったもののお裾分けです。雛形として作っているのでおそらく、編集しやすいかなと思います。なお、SVGファイルは自分のソースからダウンロードするか、提供元のSVGをダウンロードするかしてください。ちなみにSVGは日本地図の標準をダウンロードしています。

デモ8：： https://zip358.com/tool/demo8/

<!DOCTYPE html>
<html lang="ja">
<head>
    <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.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body onload="ken()">
    <object id="svg_ken" data="jpn03_a4.svg" type="image/svg+xml" width="700" height="700"></object><br>
    <a target="new456" rel="license" href="http://creativecommons.org/licenses/by-nc/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc/2.1/jp/88x31.png.webp"></a><br>
    データ引用元：<a target="new123" href="https://www.kabipan.com/geography/whitemap/">https://www.kabipan.com/geography/whitemap/</a><br>
</body>
</html>

{
    "kenmei":[
        {"id":"1","ken":"北海道","eiji":"HOKKAIDO"},
        {"id":"2","ken":"青森県","eiji":"AOMORI"},
        {"id":"3","ken":"岩手県","eiji":"IWATE"},
        {"id":"4","ken":"宮城県","eiji":"MIYAGI"},
        {"id":"5","ken":"秋田県","eiji":"AKITA"},
        {"id":"6","ken":"山形県","eiji":"YAMAGATA"},
        {"id":"7","ken":"福島県","eiji":"FUKUSHIMA"},
        {"id":"8","ken":"茨城県","eiji":"IBARAKI"},
        {"id":"9","ken":"栃木県","eiji":"TOCHIGI"},
        {"id":"10","ken":"群馬県","eiji":"GUNMA"},
        {"id":"11","ken":"埼玉県","eiji":"SAITAMA"},
        {"id":"12","ken":"千葉県","eiji":"CHIBA"},
        {"id":"13","ken":"東京都","eiji":"TOKYO"},
        {"id":"14","ken":"神奈川県","eiji":"KANAGAWA"},
        {"id":"15","ken":"新潟県","eiji":"NIIGATA"},
        {"id":"16","ken":"富山県","eiji":"TOYAMA"},
        {"id":"17","ken":"石川県","eiji":"ISHIKAWA"},
        {"id":"18","ken":"福井県","eiji":"HUKUI"},
        {"id":"19","ken":"山梨県","eiji":"YAMANASHI"},
        {"id":"20","ken":"長野県","eiji":"NAGANO"},
        {"id":"21","ken":"岐阜県","eiji":"GUFU"},
        {"id":"22","ken":"静岡県","eiji":"SIZUOKA"},
        {"id":"23","ken":"愛知県","eiji":"AICHI"},
        {"id":"24","ken":"三重県","eiji":"MIE"},
        {"id":"25","ken":"滋賀県","eiji":"SHIGA"},
        {"id":"26","ken":"京都府","eiji":"KYOTO"},
        {"id":"27","ken":"大阪府","eiji":"OSAKA"},
        {"id":"28","ken":"兵庫県","eiji":"HYOGO"},
        {"id":"29","ken":"奈良県","eiji":"NARA"},
        {"id":"30","ken":"和歌山県","eiji":"WAKAYAMA"},
        {"id":"31","ken":"鳥取県","eiji":"TOTTORI"},
        {"id":"32","ken":"島根県","eiji":"SHIMANE"},
        {"id":"33","ken":"岡山県","eiji":"OKAYAMA"},
        {"id":"34","ken":"広島県","eiji":"HIROSHIMA"},
        {"id":"35","ken":"山口県","eiji":"YAMAGUCHI"},
        {"id":"36","ken":"徳島県","eiji":"TOKUSHIMA"},
        {"id":"37","ken":"香川県","eiji":"KAGAWA"},
        {"id":"38","ken":"愛媛県","eiji":"EHIME"},
        {"id":"39","ken":"高知県","eiji":"KOUCHI"},
        {"id":"40","ken":"福岡県","eiji":"FUKUOKA"},
        {"id":"41","ken":"佐賀県","eiji":"SAGA"},
        {"id":"42","ken":"長崎県","eiji":"NAGASAKI"},
        {"id":"43","ken":"熊本県","eiji":"KUMAMOTO"},
        {"id":"44","ken":"大分県","eiji":"OOITA"},
        {"id":"45","ken":"宮崎県","eiji":"MIYAZAKI"},
        {"id":"46","ken":"鹿児島県","eiji":"KAGOSHIMA"},
        {"id":"47","ken":"沖縄県","eiji":"OKINAWA"}
        ]
}


function ken() {
    $.getJSON("ken.json", function (json) {
        var svg_ken = document.getElementById('svg_ken').contentDocument;
        var ken = $(svg_ken);
        ken.find('path').attr('fill', '#fff');
        ////
        for (var i = 0; i < 47; i++) {
        ken.find("[id='" + json.kenmei[i].eiji + "']").on("click",{i:i,json:json},function (event) {
            window.location.href = "/page/" + event.data.json.kenmei[event.data.i].id;
        });
        }
        ////
        for (var i = 0; i < 47; i++) {
            ken.find("[id='" + json.kenmei[i].eiji + "']").hover(
                function () {
                    $(this).attr('fill', '#4080ff');
                },
                function () {
                    $(this).attr('fill', '#fff');
                });
        }
    });
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月09 04:34日

タグ

358, 8, charset, com, content, demo, device-widt, DOCTYPE, gt, head, html, https, ja, JS, json, lang, lt, meta, name, quot, SVG, tool, UTF-, viewport, Width, zip, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,

vue.jsとreact.jsをお触りしているのですが?。

2020.02.13

Logging

vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。

The All-New MICROSOFT EDGE Browser – Is It Any Good?

react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。

マイクロソフトコーポレーション CEO サティアナデラ Tech Summit 基調講演 | 日本マイクロソフト

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年02月13 03:06日

タグ

IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, 事, 人, 仕様, 企業, 可能, 呪い, 大体, 把握, 方, 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,

プログラミングって何から勉強したら良いの？パソコンが有れば無料で勉強できる方法。

2020.01.11

Logging

プログラミングって何から勉強したら良いの？
答えは通称js（ジェーエス）と呼ばれるjavascript(ジャバスクリプト)言語から
始めると良いです^_^。
ちなみにプログラミンスクールに通う必要なんてないです。
偏差値50ぐらい有れば独学で身につくことが出来ると言われています。

自分を知っている人ならあいつでも出来るなら私でも出来ると思って
トライしてみてください。
繰り返しになりますが、参考書などは買わなくて良いです。

下記の方法で勉強してみてください。

YOUTUBE動画を見る。
動画に記載しているプログラムを実際に同じコードを書いてみる。
動作したらプログラムコードを変更してみる。
一旦、プログラムコードを消して今度は記述コードを見ないで書いてみる。
コードがわからない時は動画を見ずにググる。

上記のことを繰り返しすることで何だかわからないけど、感覚的に身につくはずです。難しい横文字などは後から覚えたら良いです。

JavaScriptを解説している動画リンクを貼っておきます。
動画のリンク切れあった場合はYOUTUBEで JavaScript 入門などの単語で検索してみてください。

入門解説動画：何となく進めるが大事です。

【Javascript入門】#1 Javascriptを始めましょう

エラーになった時の対処方法：デバッグ方法。

入門】JavaScriptのデバッグ方法を解説！これだけは知っておけ！

中級者JSテクニック動画。

https://www.youtube.com/watch?v=mNJ06S60B9k

尚、プログラムコードを書く場合、大体のプログラマーはエディターやIDEを
使用してプログラミングコードを記載します。

自分はVisualStudio codeを使用しています。
こちらWindowsやMac、リナックスのOSにそれぞれ対応しています。
https://code.visualstudio.com/ [日本語化出来ますググって]

補足：今でもC言語などやJAVA言語から初めると良いよと言われますが
おそらくC言語で始めるとメモリの事などで挫折しJAVA言語で始めると
オブジェクトで挫折します。

JSで始め、大体の事をマスターすると他のプログラミング言語へ
移行しやすいです。いろいろな言語を覚えるのではなく。
まずは一つの言語をマスターする事が大事になります。

皆さんトライしてみてくださいね（・(ｪ)・）b

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年01月11 01:00日

タグ

50, javascript, JS, youtube, あいつ, エス, コード, こと, ジェー, ジャバ, スクール, スクリプト, トライ, パス, パソコン, プログラミン, プログラミング, プログラム, 一旦, 上記, 下記, 人, 今度, 何, 偏差値, 勉強, 動作, 動画, 参考書, 変更, 実際, 必要, 方法, 時, 横文字, 無料, 独学, 私, 答え, 自分, 言語, 記載, 記述, 身, 通称,

ハローワークサイトの仕様が変わった、使いづらいよ！！ #ハローワーク

2020.01.06

Logging

本日（高知県）からおそらく高知県のハローワーク検索端末が変わったみたい？ウェブ（ホームページ）のハローワークサイトと統合した形になっている。要するに、わざわざハローワークへ行かなくても自宅で検索できるように
なったということです。

トイウコトデ、自宅でお仕事検索してそのナンバーを控えて最寄りのハローワークに問い合わせするのが便利かと思います。

ちなみにハローワークのサイトってアクションサーブレットで動いているよね。そろそろPHPで動かしたほうが良いじゃないかと思ってしまうのはじぶんだけなのでしょうかね？そしてcommon.jsを見た所、素人ぽっい記述だったが、エラーが一つも出ていないところは関心、ただWARNING（警告）はある。そしてコメント退けるべしとか、難読化しろよとかいろいろ言いたくなる。これ何次元の下請けがやってんだろうか・・・。

https://www.hellowork.mhlw.go.jp/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年01月06 05:01日

タグ

common, go, hellowork, https, JS, mhlw, php, WARNING, www, アクション, ウェブ, エラー, お仕事, こと, コメント, これ, サーブ, サイト, じぶん, トイウコトデ, ところ, ナンバー, ハローワーク, ホームページ, レッド, わざわざ, 一つ, 下請け, 仕様, 何次, 便利, 問い合わせ, 形, 所, 最寄り, 本日, 検索, 端末, 素人, 統合, 自宅, 記述, 警告, 関心, 難読, 高知県,

Linuxでプロセス残すなら！

2019.11.08

Logging

Linuxでプロセス残すなら【nohup コマンド &】を使おう。
以前、仮想ウィンドウを開いて行う方法を記載しましたが
こちらのほうが断然らくです。

ちなみにこれを使用すると、 nohup.out というファイルが作成されます。
node.jsやPythonとかで使用する機会が多いかもしれません。

例えばこんな感じで

nohup Python index.py &

過去記事：プロセス残してSSHログアウトする方法。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年11月08 06:27日

タグ

amp, index, JS, Linux, node, nohup, out, py, Python, SSH, ウィンドウ, こちら, コマンド, これ, ファイル, プロセス, ログアウト, 以前, 仮想, 作成, 使用, 感じ, 方法, 機会, 記事, 記載, 過去,

phpばっかり触っていた人がPython触ってみて！？

2019.11.02

Logging

phpばっかり触っていた人がPython触って
実際コードを書いてみて思ったことは、括弧（かっこ）が無いことで
コードが見ずらい、なれるまで時間がかかりそうです。
片っ端からサンプルコードを見ていてやっとなれてきたかなってところですね。
Functionなんかが入るとまだまだ怪奇です。
PythonのコードはPHPとは真逆で、感覚的にはnode.jsなんかと同じかなと。
web上での動作的な考え方もnode.jsに似てますね。
特にPythonは学術的なコードで計算式からグラフなどを表示するなどは
いろいろなライブラリーが存在していますし、ご存知かと思いますが
AI（人工知能：機械学習）には欠かせない言語の一つかなと思います。
ちなみに音声をグラフ化するのも簡単でした。下記のような感じで表示可能です。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年11月02 08:09日

タグ

AI, function, JS, node, php, Python, web, いろいろ, かっこ, グラフ, コード, こと, ご存知, サンプル, ところ, なんか, らい, ライブラリー, 一つ, 上, 下記, 人, 人工, 動作, 可能, 存在, 学習, 実際, 怪奇, 感じ, 括弧, 時間, 機械, 片っ端, 知能, 簡単, 考え方, 表示, 言語, 計算, 音声,

node-sassをインストールしてコンパイルするときに「あぁうっかり」

2019.07.06

Logging

npm install node-sass

上記の記述でインストールします。Node.jsはインストール済みだという
前提で！
コンパイルの仕方はこんな感じです。

node-sass test.scss test.css  --output-style expanded

ここでうっかりミスを犯さないで！！SCSSとSASSは記述が違います。
自分はSCSSで記述していたのに、拡張子がSASSになってまして
意味不明の一行目でエラーですとはじかれていた・・・。
ちなみにオプション値を付けずにコンパイルすると
インデントが崩れて美しくないのでオプション値を付けるように
しています。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年07月06 12:00日

タグ

--output-style, css, expanded, install, JS, node, node-sass, npm, SASS, scss, test, インストール, インデント, エラー, オプション, ここ, コンパイル, とき, ミス, 一行, 上記, 不明, 仕方, 前提, 意味, 感じ, 拡張子, 自分, 記述,

jsのクリックイベントの謎？？

2019.06.22

Logging

javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。

See the Pen jsのクリックイベントの謎？？ by taoka (@taoka-toshiaki) on CodePen.

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年06月22 08:08日

タグ

0, 265, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, javascript, jquery, JS, lt, ON, Pen, QXprJX, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, イベント, クリック, これ, 奥, 挙動, 気, 謎,

単純なコードで背景色にグラデーション。

2019.06.15

Logging

単純なコードで背景色にグラデーションつける。
このコード自体は単純なコードです、ですが・・・。
気に食わないので何度も初期の色コードを設定を変えてみたのですが
鮮やかさがでません。ちょっとドス黒いグラデーションのまま。
コードを貼り付けておきます。
一時間ぐらい色を変えて遊んでました:D

See the Pen 単純なコードで背景色にグラデーション。 by taoka (@taoka-toshiaki) on CodePen.

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年06月15 07:00日

タグ

0, 265, BY, codepen, default, embed, gt, hash, Height, href, ID, io, JQGLoO, JS, lt, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, グラデーション, コード, ドス, まま, 一, 何度, 初期, 単純, 背景色, 自体, 色, 設定,

@Blog{zip358.com}

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

クリックでON、OFFする表示だけど。無数の書き方があると思ふ?

案件9割完成して案件に申し込むみたいな事は非効率だけど。

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

なるほど、よくわかりました。

Yahoo japanサイトのコロナ情報リンク集です。好評に付きVer2。

Yahooが567（コロナ）の情報を取り扱っているそれも県単位でURLまとめたよ。

demo23、javascriptの非同期同期処理?

マウスの動きをトラッキング（追跡）する。

とにかくプロなフロントエンドエンジニア。

おつりアルゴリズム番外編。

JavaScriptを再勉強しているのだが、ある疑惑が！？

js初心者さんのお勉強：思いつき写経。

Visual Studio Codeの話とビデオ通話API。

プログラム講師YOUTUBER、たにぐちまことさん。

ブラウザのプッシュ通知が簡単にできちゃうFirebase

アロー演算子の数珠繋ぎの作り方?

都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。

vue.jsとreact.jsをお触りしているのですが?。

プログラミングって何から勉強したら良いの？パソコンが有れば無料で勉強できる方法。

ハローワークサイトの仕様が変わった、使いづらいよ！！ #ハローワーク

Linuxでプロセス残すなら！

phpばっかり触っていた人がPython触ってみて！？

node-sassをインストールしてコンパイルするときに「あぁうっかり」

jsのクリックイベントの謎？？

単純なコードで背景色にグラデーション。