My days of...

生活のことなど、がんばろう

アルファベットと数字の回文をチェックしてみる

正規表現を利用して、アルファベットと数字でできた文字列が回文になっているかどうかをチェック。FreeCodeCampの問題1つできた。

function palindrome(str) {
str = str.replace(/[^\w\d]|_/g, '').toLowerCase();
console.log(str);
 
var strLength = str.length;
var i = 0;
while(i <= strLength/2) {
console.log('a', i, strLength/2);
console.log(str[i], str[(strLength - 1)-i]);
if(str[i] !== str[(strLength - 1)-i]) {
return false;
}
i += 1;
}
return true;
}




palindrome("eye");
palindrome("/?><.,=:;'-_*\"\"';eye");
palindrome("2A3*3a2");

もっといい書き方があるかも。

 

回文で遊ぼう きしゃのやしき (言葉で遊ぼう回文・アナグラム)

回文で遊ぼう きしゃのやしき (言葉で遊ぼう回文・アナグラム)

 
日本全国 ご当地回文

日本全国 ご当地回文

 

 

JavaScriptで数値かどうかを検証したい場合、isNaNやisFiniteはどうだろう?

JavaScriptで値が数値かどうか判断するには、

isNaN か isFinite 関数があるので使おう、との紹介を読んで使おうと思ったらわりと使いにくいものでした。

developer.mozilla.org

developer.mozilla.org

isNaNの使用例として、

isNaN(NaN); // true
isNaN(undefined); // true
isNaN({}); // true

isNaN(true); // false
isNaN(null); // false
isNaN(37); // false

// strings
isNaN("37"); // false: "37" は非数でない数値 37 に変換される
isNaN("37.37"); // false: "37.37" は非数でない数値 37.37 に変換される
isNaN("37,5"); // true
isNaN('123ABC'); // true: parseInt("123ABC") の結果は 123、 然し Number("123ABC") の結果は NaN
isNaN(""); // false: 空文字列は非数でない 0 に変換される
isNaN(" "); // false: 半角スペースからなる文字列は非数でない 0 に変換される

// dates
isNaN(new Date()); // false
isNaN(new Date().toString()); // true

// isNaN が信頼性に欠ける理由となる誤検出の例
isNaN("blabla") // true: "blabla" が数値に変換される。
// 数値への変換が失敗し NaN が返される。

 と説明がなされています。また注意として、true/falseに対しても0/1が返されることから、

 この関数は、「この値を数値型に型強制した場合、IEEE-754 における 'Not A Number' という値になりますか?」という質問に答えるものとして解釈すべきです。

 なのだそうです。isFinite() も同様な感じで、isFinite(true/false) はtrueを返します。isFinite([2]) としてもtrueでした。

整数かどうかだけならNumber.isInteger()を利用した方が良さそう

Number.isInteger(1) // true
Number.isInteger("1") // false
Number.isInteger([1]) // false
Number.isInteger(true) // false
Number.isInteger({}) // false

Number.isFinite()  であれば整数以外もいけそう。

Number.isFinite(2.3); // true
Number.isFinite([1]); // false
Number.isFinite({3:4}); // false
Number.isFinite("2"); // false
Number.isFinite(1==2); // false
Number.isFinite(true); // false

それ以外は正規表現を利用して確認するのがいいかも。

 

JavaScript コードレシピ集

JavaScript コードレシピ集

 
これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

 

 

 

ルシファー/Lucifer シーズン4を観た

Netflixで「Lucifer/ルシファー」シーズン4を観ました。このドラマはもともとアメリカFoxでシーズン3まで製作され、その後一旦打ち切りが発表されました。しかしファンの視聴者が打ち切りに反対して続きを作って欲しいと願ったことから、Netflixがシーズン4を作製する事となったドラマです。

キャンペーン · SAVE LUCIFER · Change.org

 シーズン3の最後(25、26話の前の24話)で、クロエにデビルフェイスを見られ、本当の悪魔だったことを知られた後から始まります。1ヶ月の旅行から帰ってきてからのクロエとルシファー、関係がぎこちなく話は進んでいきます。ただの人間が天使だ悪魔だと超常現象をそう容易く受け入れられるわけもなく・・・リンダは特別なのかな?

www.netflix.com

新しい登場人物のイブもルシファーを訪ねてやってきます。それがさらなる問題の引き金になっています。ダンは荒れてます。アメナディエルも戻ってきました。シーズン3で行っちゃったからもう出てこないかと。新しい家族も増えたりと、全10話ですが、その分濃く楽しめる感じです。トム・エリスの綺麗なお尻も見えます。

時間も1話につき5〜10分くらい長くなっているような気もしました。

シーズン5に続けるのだろうか?あるのだったら楽しみです。

 

 

Netflixのシャドウハンターを観ました

Netflixの「シャドウハンター: The Mortal Instrument」を観終わりました。ティーンエイジャーから20代くらいが対象のドラマという印象。シーズン4で完結?映画の方とは異なるNetflixオリジナルドラマです。

www.netflix.com

主人公の女の子が平凡な暮らしから、実はシャドウハンターと呼ばれるデーモンハンターの血を引いていたことを知り、シャドウハンターとなって戦い活躍するストーリー。ルーンを使って魔法みたいなことも可能。

シャドウハンター自体は人間ですが、天使の末裔であり、デーモンと呼ばれるモンスター系は悪魔の子孫という設定。デーモン系には狼男、妖精、バンパイア、それに妖魔がいます。シャドウハンターは基本、悪事を働いたデーモン系から、通常の人間を守る警察と処刑者みたいなもの。

ストーリーはシーズン1〜4までそれほど複雑なわけでもありません。単純に楽しめる作品です。映像の特殊技術も随時出ており、楽しめます。印象的なのは、シーズン1と2以降、小道具が変わったことですね。よくなってました。

シーズン4で完結のようですが、続けようと思えば続けられる終わり方のため、どうなるの?といい意味のモヤモヤ感はあります。

あまり考えることなくテンポよくぽんぽん進む(たまに早すぎでは・・・)ので、あまり飽きもこないドラマでした。

 

 

Lynda.com で Vue.js

Lynda.comでVue.jsのコースを観てます。ビデオの時間は約2時間余り。「短い」と思い、トライしてみることにしました。チャプター1を見終わり、

v-bind:value="xxxx" → :value="xxxx" → v-model="xxxx"
v-on:click  @click
FormのSubmitボタンを押して更新されないためには、

@click.prevent とメソッドだかプロパティだかで用意。

そんな感じ

 

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

 
Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

 
Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

 

 

Netflix レギオン シーズン2を観た

平成から令和になり、2日目です。この連休、割とNetflix観てます。

先日「レギオン」の第2シーズンを観終わりました。シーズン1の最後からどうなるの?と思ったら、1年後発見とか。あの玉なんだったの?とか1970年代な色使いやカラーリング、ぐるぐるライトとかで目がチカチカします。そして、眠くもなりました。ストーリーが飛びがちだから、でしょうね。

正直、シーズン1観てなかったら途中で諦めてました。敵との決着というかそういうのもあるのかな、と思ったのですが、最後に「三年後」とか出てきたり、え?そうなの?やっぱりこれでシリーズ終わりか〜と思いつつ観ていたら、続きそうだし、これで終わりにもできるしなラストでした。3年後じゃないし。

X-メンシリーズの1つなのですが、どうだろう?

ところで、シーズン1の頃は、時代が1980年とか90年とか古い?と思っていたのですけど、このシーズン2だとちょっと近未来っぽかったり、やっぱり70年代っぽかったり時代もよくわからんです。

 

レギオン (字幕版)

レギオン (字幕版)

 
ガメラ2 レギオン襲来

ガメラ2 レギオン襲来

 

 

Vue.jsのToDoリストチュートリアル完了できました

Vue.js を利用したサンプルアプリ「Todo リスト」作成。JavaScriptなので情報の保存はブラウザを閉じるまで。何度も使うことで、使い方に慣れるしかない、という感じになってます。

Vue-cliを使うのはまだなので、これから学んで慣れていきたい。

しかし、PHPRubyなどのサーバーサイドとJSのフロントサイドの2つやれる人ってすごいですね。

今回のソースはこんな感じ

index.html

<!DOCTYPE html>
<html lang="en">

<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" />
<title>Todo List 02</title>
</head>

<body>
<div class="container">
<div id="app">
<input type="text" v-model="addText" placeholder="Todoを入力">
<button @click="addTodo()">追加する</button>
<hr>
<table>
<thead>
<tr>
<th>ID</th>
<th>ToDo</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="todo in list" v-if="todo.flag === true">
<td>{{ todo.id }}<br><button @click=changeToDo(todo.id)>作業完了</button></td>
<td>{{ todo.text }}</td>
<td><button @click="deleteToDo(todo.id)">削除</button>
<button @click="editTodo(todo.id)">更新</button>
</td>
</tr>
<tr v-for="todo in list" v-if="todo.flag === false">
<td>{{ todo.id }}<br><button @click=changeToDo(todo.id)>戻す</button></td>
<td>{{ todo.text }}</td>
<td><button @click="deleteToDo(todo.id)">削除</button>
<button @click="editTodo(todo.id)">更新</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="app.js"></script>
</body>

</html>

app.jsファイル

var app = new Vue({
el: "#app",
data: {
addText: '',
list: [],
uniqueKey: 0,
},
methods: {
addTodo() {
if(this.addText) {
console.log(this.addText);
this.list.unshift({
text: this.addText,
id: ++this.uniqueKey,
flag: true
});
this.addText = '';
}
},
editTodo(id) {
var newText = window.prompt('以下の内容で更新します');
if(newText === "") {
alert('入力欄が空欄です');
} else {
this.edit(id, newText);
}
},
edit(id, text) {
var editIndex = '';
this.list.some(function(val, index) {
if(val.id === id) {
editIndex = index;
}
});
this.list[editIndex].text = text;
},
deleteToDo(id) {
var delIndex = '';
var check = confirm('本当に削除しますか?');
if(check === true) { // Clicked OK
this.list.some(function(val, index) {
if(val.id === id) {
delIndex = index;
}
});
this.list.splice(delIndex, 1);
}
},
changeToDo(id) {
var changeIndex = '';
this.list.some(function(val, index){
if(val.id === id) {
changeIndex = index;
}
});
this.list[changeIndex].flag = this.change(changeIndex);
},
change(changeIndex) {
if(this.list[changeIndex].flag === true) {
return false;
} else {
return true;
}
}
},
})

こちらで勉強させていただきました

JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(前編) : ビジネスとIT活用に役立つ情報

JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう(後編) : ビジネスとIT活用に役立つ情報

 

JavaScript コードレシピ集

JavaScript コードレシピ集