JSのPromiseとawaitってこういう事なんだよね。理解した！！( ･ิω･ิ)
2022.04.29
おはよう御座います。
この頃、JSを使う機会が増えてきています。巷ではReact.jsなどやVue.jsなんかが人気ですよね。またnext.jsなんかも出来れば転職活動に有利です。でもそんなフレームワークを勉強するまえにJavaScriptの基礎が出来ていないといけないと思っています。ネイティブでゴリゴリ書ける人であれば、何処へ行ってもやってけると思っています。
"use strict";
const main = (a,b,c)=>{
return new Promise ((resolve)=>{
console.log(a,b,c);
b++;
resolve({a:a,b:b,c:c});
});
}
(async()=>{
await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
// main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
console.log("fin");
})();Promiseとawaitとかの使い方はこんな感じです😀、このコードでは重たい処理を書いているわけではないけど、非同期通信処理チェーンで繋ぐとどんな所で使えば良いのか分かるかなって思います。要するに順番に非同期通信処理をしたい時に役に立ちます。このソースコードの場合、awaitしなくても良いですがね・・・。awaitを付けると処理後に次のコードが処理されます。付けない場合は同時並行的に処理されます。
サンプルコードはこちらから閲覧ください（検証）ませ！！
タグ
１, async, await, console, const, gt, javascript, JS, log, main, new, NEXT, Promise, quo, quot, react, resolve, return, strict, use, vue, なん, なんか, ネイティブ, フレームワーク, まえ, 事, 人, 人気, 何処, 勉強, 基礎, 巷, 有利, 機会, 活動, 理解, 転職, 頃,
お気づきかと思いますが、サーバーを密かに変えました。（密かではないですけど。）
2022.01.08
お気づきかと思いますが、サーバーを密かに変えました。変えたのは年末あたりです、それから裏と表でサーバーをゴニョゴニョして何とか運用している感じです。変えた理由は経費削減ということが一番の理由ですね😌。
変えたことにより表示速度が若干早くなっているかのように思えます、サクラレンタルサーバーでは土台はnginx + Apache2.4系だったらしいので「.htaccess」が使用できていたのだと思いますが、現在、運用しているサーバーは nginxで動いております。 nginx上でApacheをどうやって動かせばよいのか、知見がないのでnginxだけ動いております。調べればやり方が書かれているサイトがあると思います。
12月にlog4jという脆弱性が見つかった事により、ApacheやJAVAなどに影響を与えているようです、そんな事もあったので今回はApacheサーバーを避けてnginxで構築したわけです。IPを調べるとどこのサーバーを使用しているか分かると思いますが、敢えてどこのサーバーのどのプランを使用しているかの公表は控えさせてもらいます。
因みにサーバーが落ちてもメールサーバーは別サーバーを使用しているので影響はないようにしています。今回分かったことはクラウドと言われているサーバーは、クリック一つでいろいろ出来るようになっているけれども、それを使用すると別途お金が発生するように設計されていたりしてます。なので自分はそこらへんお金を使いたくないので手動で対応しています。
結局のところ、VPSでゴリゴリとサーバサイド知見がある人にはAWSやGCPというサービスはポチポチ押すだけで、サーバー構築できるけど、もったいないと思うだけなのかもしれません。AWSやGCPの良い所は可用性だなって思えます。そしてオンプレと違ってサーバーが落ちてもAWSやGCPの障害のせいに出来ることかもしれません。
強者になりたい今日このごろでした・・・現場からは以上です。
タグ
12, 2.4, 4, Apache, htaccess, java, log, nginx, こと, ゴニョゴニョ, サーバー, サイト, さくら, やり方, レンタル, 一, 上, 事, 今回, 使用, 削減, 土台, 年末, 影響, 感じ, 構築, 現在, 理由, 知見, 経費, 脆弱性, 若干, 表, 表示, 裏, 速度, 運用,
Fox-Black.comというサイトを開設。
2020.09.29
Fox-Black.comというサイトを開設。本当はblack-fox.comが良かったのだけどPlayStationのアカウント(blackfox)が取られていてfoxblackにしてPlayStationのアカウントを取得。そのいうことでサイトも設置したいなと思いサイトを開設。
最初はfc2の無料サイトでサイトを開設していたのだけど、やっぱ独自のドメインで構築したくなったので、ドメインを取得。
そしてサイトを構築しました。まだ何もないのだけど、なんかやっていきたいなとGame logページまで作りましたが、たぶんゲームはあまりしないのでログとして残らないだろうから、何か違うものに変わっていくと思います。
ちなみにドメインはfox-black.comというドメインです、実は静的ページに見えてWPで出来ているですよ。昨日突貫工事でサイトを構築しました。ワードプレスだけどサイドバーという概念は除けてます。
明日、WPの超シンプルなコードを公開します。
タグ
2, black-fox, blackfox, com, fc, Fox-Black, FoxBlack, Game, log, PlayStation, wp, アカウント, ゲーム, こと, サイト, ドメイン, バー, プレス, ページ, もの, ログ, ワード, 取得, 工事, 明日, 昨日, 最初, 本当, 概念, 構築, 無料, 突貫, 設置, 開設,
js初心者さんのお勉強：思いつき写経。
2020.06.01
js初心者さんのお勉強をvlogとして昨日撮りました。もっと簡略化できることはあるのだが、敢えてやらない自分がいます。自分のモットーに初心者さんでもわかるコードをという考えがあります。初心者さんに分かりやすいと言うことは馬鹿な自分にも分かりやすいという事です。ぱっと見て読みやすければ良いという事です。javascriptを本当に1から勉強中なんですね。本当に右も左も分からないのでググりながらお勉強しています。知らないと言ってもプログラミングの基本は知っているのでJS用の書き方やお作法を覚えているというような感じです。
ソースコードはこちら
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/
タグ
１, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, 事, 作法, 写経, 初心者, 勉強, 右, 基本, 左, 思いつき, 感じ, 昨日, 書き方, 本当, 用, 簡略, 自分, 馬鹿,
Javascript? EVENT処理の際に引数を渡す。
2019.04.26
Javascript? EVENT処理の際に引数を渡す方法。
ちなみにもっと簡略化できます。
//NG
$(function(){
let hoge = "test";
$("input[type='text']").on("change",(function(hoge){
console.log(hoge);
})(hoge));
});
//OK!
//js
function hoge(a){
return function(){
console.log(a + this.value);
};
};
document.querySelector('input[type="text"]').addEventListener("click",hoge("aaaaaaa~"),false);
//jq
$(function(){
let hoge = function(a){
return function(){
console.log(a + $(this).val());
};
};
$("input[type='text']").on("change",hoge("test="));
});タグ
aaaaaaa, addEventListener, change, click, console, document, EVENT, false, fu, function, hoge, input, javascript, jq, JS, let, log, NG, OK, ON, querySelector, return, test, Text, this, type, value, 処理, 引数, 方法, 簡略, 際,
javascriptでEVENT処理レベル1
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" class="zyezyezye">
<script>
"use strict";
let zyezyezye = document.querySelector(".zyezyezye");
zyezyezye.addEventListener("input",()=>{
console.log(">おいら>>" + zyezyezye.value);
if(zyezyezye.value=="じぇじぇじぇ")
{
console.log("おいら>>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
}
});
</script>
</body>
</html>jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ！？
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。
タグ
１, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,
javascriptのアロー関数というものを使ってみた。
2019.02.24
javascriptのアロー関数というものを使ってみた。
関数と同じだよねとおもっていると落とし穴があるみたい。
どうもグローバル変数が挙動不審みたいなんです。
/* アロー関数 */
let func1 = a => a + 3;
console.log(func1(5));
let func2 = (a,b)=>{
return a + b + 3;
}
console.log(func2(1,2));タグ
１, 2, ３, 5, console, FUNC, gt, javascript, let, log, return, アロー, グローバル, もの, 変数, 落とし穴, 関数,
javascriptを勉強中
2018.12.15
var a = 3;
var b = 10;
var obj = {
hoge:function(a){
a = a + a;
return a;
},
a:a = a && 5,
b:b = b || 3
};
console.log(obj.hoge(2));
console.log(obj.a);
console.log(obj.b);上記のCodeを動かすと仕事と表示されます（笑）、4，5，10と表示されます。
何故そうなったかを考えるとキリがないのでそういうものだと
思ったほうが良いかもしれないです。
説明するとhogeはオブジェクトです。あとは変数とIF文の省略系を
記述しているだけです、実際は＝もいらないですが・・・。
わかりやすく自分なりに記載したつもりです。
javascriptライブラリってこういうのが何百行も記載して成り立っていますが
概念はこういう事です。自分は基本的に概念しか覚えないのです。
何故、そうしているか・・・自分が怠惰な人間だからです。
タグ
10, 2, ３, 4，5，10, 5, amp, Code, console, function, hoge, if, javascript, log, obj, return, var, あと, オブジェクト, キリ, つもり, もいら, もの, 上記, 仕事, 勉強, 変数, 実際, 文, 省略, 自分, 表示, 記載, 記述, 説明,