- 投稿日:2020-05-14T23:20:04+09:00
ChatSpaceの JavaScript復習
はじめに
TECH:CAMPのカリキュラムで作ったチャットスペースのJavaScript非同期通信の自分なりの理解です。htmlは自分で考えたhamlの記述になっているのでご了承ください。
理解が間違っていたらすみません。コード解説
$(function(){ var buildHTML = function (message) { if (message.content && message.image) { var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}"> <div class="chat-main__chat-home__message__block"> <div class="chat-main__chat-home__message__block__current-user"> ${message.user_name} </div> <div class="chat-main__chat-home__message__block__current-user-date"> ${message.created_at} </div> </div> <div class="chat-main__chat-home__message__current-text"> <p class="chat-main__chat-home__message__current-text__content"> ${message.content} </p> <img src=${message.image} class="chat-main__chat-home__message__current-text__image" > </div> </div>` } else if (message.content) { var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}"> <div class="chat-main__chat-home__message__block"> <div class="chat-main__chat-home__message__block__current-user"> ${message.user_name} </div> <div class="chat-main__chat-home__message__block__current-user-date"> ${message.created_at} </div> </div> <div class="chat-main__chat-home__message__current-text"> <p class="chat-main__chat-home__message__current-text__content"> ${message.content} </p> </div> </div>` }else if(message.image) { var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}"> <div class="chat-main__chat-home__message__block"> <div class="chat-main__chat-home__message__block__current-user"> ${message.user_name} </div> <div class="chat-main__chat-home__message__block__current-user-date"> ${message.created_at} </div> </div> <div class="chat-main__chat-home__message__current-text"> <img src=${message.image} class="chat-main__chat-home__message__current-text__image" > </div> </div>` }; return html; }; $('#new_message').on('submit', function(e){ // デフォルトのイベント停止 e.preventDefault(); // #new_messageというidがついたフォームの情報を取得 var formData = new FormData(this); // 送信先であるthisのaction属性を取得 var url = $(this).attr('action') $.ajax({ //action属性のurlがそのまま入る url: url, // 投稿だからHttpメソッドはpost type: "POST", data: formData, dataType: 'json', //下記2つはformDataを使っている場合、falseにする processData: false, contentType: false }) // 通信に成功した時、引数にformに入力した情報の入ったdataを受け取る .done(function(data){ //dataを変数htmlに代入 var html = buildHTML(data); //メッセージの表示される箇所に付加する $('.chat-main__chat-home').append(html); //自動でスクロールするアニメーションを付加する $('.chat-main__chat-home').animate({ scrollTop: $('.chat-main__chat-home')[0].scrollHeight}); //入力フォームの中をリセットする $('form')[0].reset(); //ボタンを再利用できる様にする $('input').prop('disabled', false); }) // 失敗したとき .fail(function() { // アラートで失敗したことを伝える alert("メッセージ送信に失敗しました"); //ボタンを再利用できる様にする $('input').prop('disabled', false); }); }); // 自動更新機能 var reloadMessages = function() { //_message.html.hamlにカスタムデータ属性で付与したidを取得している var last_message_id = $('.chat-main__chat-home__message:last').data("message-id"); $.ajax({ //ルーティングで設定した/groups/id番号/api/messagesとなるよう文字列を書く url: "api/messages", //表示なのGET type: 'GET', dataType: 'json', data: {id: last_message_id} }) .done(function(messages) { //メッセージが0文字ではないとき if (messages.length !== 0) { // 空の変数を作成 var insertHTML = ''; //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを空の変数に足し合わせる $.each(messages, function(i, message) { insertHTML += buildHTML(message) }); // HTMLに追加 $('.chat-main__chat-home').append(insertHTML); // スクロールアニメーション $('.chat-main__chat-home').animate({ scrollTop: $('.chat-main__chat-home')[0].scrollHeight}); } }) .fail(function() { alert('error'); }); }; // 現在のURLが一致する場合 if (document.location.href.match(/\/groups\/\d+\/messages/)) { //7秒ごとに更新 setInterval(reloadMessages, 7000); } });最後に
JavaScriptは教室で詳しく教えてもらうことができなかったので、まだまだ理解が曖昧です。
これを素人に書けと言われても、コピペせざるを得ないと思ってしまいます。
しかし、コールバック関数、非同期通信、apiの作成と取得、カスタムデータ属性、そして多くのメソッドなど、JavaScriptのたくさんの機能が盛り込まれているので、一つずつ紐解きながら理解を深めていきたいです。
- 投稿日:2020-05-14T23:16:27+09:00
【Vue】v-ifと$refsによるTypeErrorの対処法
v-if
を設定したコンポーネントに対してthis.$refs
で要素を取得しようとするとunderfinedになります。以下、具体例と対処法です。
開発環境はVue.js 2.6.11
です。コード
例は適当です。最低限の部分しか書いていません。
<template> <div> <!-- 編集部分 --> <status-edit v-if="isEditing" ref="editArea" /> <!-- ビュー部分 --> <status-view v-if="!isEditing" /> <!-- ボタン --> <button v-if="!isEditing" @click="pushEdit">編集</button> </div> </template> <script> import statusView from "./StatusView" import statusEdit from "./StatusEdit" export default { components: { statusView, statusEdit }, data() { return { isEditing: false } }, methods: { pushEdit() { // isEditingをtrueにすることで編集画面/表示画面を切り替える this.isEditing = true // statusEditコンポーネントの中のfetchDateメソッドを実行 this.$refs.editArea.fetchData() } } } </script>エラー
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'fetchData' of undefined" vue.runtime.esm.js:1927 TypeError: Cannot read property 'fetchData' of undefined「編集」ボタンを押すと、このようなエラーが出ます。
「this.$refs.editArea
がunderfinedになっているから、fetchDate
なんてプロパティは読み込めないよ」という意味です。原因
v-if="false"
のとき、statusEditコンポーネントはページ上に存在していません。
そして、メソッド内の処理は非同期に行われます。
つまり、コンポーネントが描画されていない状態でthis.$refs.editArea
を取得しようとするので、当然underfinedになってしまうのです。解決法
async/awaitを使う
methods: { async pushEdit() { await (this.isEditing = true) this.$refs.editArea.fetchData() } }
async/await
でコンポーネントが描画された後、$refs
でコンポーネントを取得しメソッドを実行する。v-ifをv-showに変える
<status-edit v-show="isEditing" ref="editArea" />
v-show
はdisplay: none;
によって見えていないだけで描画はされているので、コンポーネント内のメソッドを実行することができる。参考リンク
- 投稿日:2020-05-14T23:16:27+09:00
【Vue.js】v-ifと$refsによるTypeErrorの対処法
v-if
を設定したコンポーネントに対してthis.$refs
で要素を取得しようとするとunderfinedになります。以下、具体例と対処法です。
開発環境はVue.js 2.6.11
です。コード
例は適当です。最低限の部分しか書いていません。
<template> <div> <!-- 編集部分 --> <status-edit v-if="isEditing" ref="editArea" /> <!-- ビュー部分 --> <status-view v-if="!isEditing" /> <!-- ボタン --> <button v-if="!isEditing" @click="pushEdit">編集</button> </div> </template> <script> import statusView from "./StatusView" import statusEdit from "./StatusEdit" export default { components: { statusView, statusEdit }, data() { return { isEditing: false } }, methods: { pushEdit() { // isEditingをtrueにすることで編集画面/表示画面を切り替える this.isEditing = true // statusEditコンポーネントの中のfetchDateメソッドを実行 this.$refs.editArea.fetchData() } } } </script>エラー
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'fetchData' of undefined" vue.runtime.esm.js:1927 TypeError: Cannot read property 'fetchData' of undefined「編集」ボタンを押すと、このようなエラーが出ます。
「this.$refs.editArea
がunderfinedになっているから、fetchDate
なんてプロパティは読み込めないよ」という意味です。原因
v-if="false"
のとき、statusEditコンポーネントはページ上に存在していません。
そして、メソッド内の処理は非同期に行われます。
つまり、コンポーネントが描画されていない状態でthis.$refs.editArea
を取得しようとするので、当然underfinedになってしまうのです。解決法
async/awaitを使う
methods: { async pushEdit() { await (this.isEditing = true) this.$refs.editArea.fetchData() } }
async/await
でコンポーネントが描画されるのを待ちます。その後、$refs
でコンポーネントを取得してメソッドを実行します。v-ifをv-showに変える
<status-edit v-show="isEditing" ref="editArea" />
v-show
はdisplay: none;
によって見えていないだけで描画はされているので、コンポーネント内のメソッドを実行することができます。参考リンク
- 投稿日:2020-05-14T23:11:57+09:00
AIトークの設計(フロント概要)
注意点
今現在開発中のもののため、内容を変更する可能性があります。
使用技術
- 言語
- JavaScript
- フレームワーク
- React
- React Bootstrap
- 利用外部サービス
- AWS(S3,Amazon Polly)
- Netlify
- Nody API
サービスの流れ
画面設計
クラス図
初めてまともなクラス図を描いたので、矢印の使い方を間違っている可能性があります。
また、クラス解説の内容と矛盾してる可能性があります。
クラス解説
LiveTalkPage
- 概要
"/livetalk"に遷移するページそのものである。そのため、この中に様々なコンポーネントを集約させる。
myMessageForm
- 概要
ユーザーがAIに対して、メッセージを送るためのフォームである。
メッセージの送り方は、テキストボックスに入力するか、録画ボタンを押して、マイクを通して音声をテキストに変換する方法である
SpeechBubble
- 概要
AIが最後に喋った台詞を記載する
TalkingLog
- 概要
AIとユーザーの会話ログをスクロールバーの末尾に新しいものを表示
実際にログ1つ分の表示の仕方
表示<p>私:元気?</p>表示するための配列の構造
配列の構造[{who: '私',speech:'元気?'},{Who: 'AI',speech:'元気?'}];Live2DController
- 概要
Live2Dを操作するコントローラー。音声と再生させながら、口パクモーションを再生させる!
Live2Dの操作を参考にするもの:https://docs.live2d.com/cubism-sdk-tutorials/sample-build-web/?locale=ja
- 投稿日:2020-05-14T22:51:17+09:00
機種依存文字を数値文字列参照に変換するツールを作成(JIS X 0208基準)
初めに
以前の投稿「機種依存文字をチェックするツールを作成した話(JIS X 0208基準)」 で機種依存文字をチェック出来るようになったのですが、そのままだと使えないので字解きに変換するしかありませんでした。
あまり文章として読みやすく無いので、機種依存文字を数値文字参照に変換するようにツールを改良しました。簡単な仕様
機種依存文字をチェック
ツールはHTML+javascriptで作り、formのtextareaに文章を入力してもらい、submitされた時に、javascriptで判定する。
判定方法は、ホワイトリスト方式を使い「JIS X 0208」で定義された文字を、あらかじめ配列に入れておき、formから送られてきた文章が機種依存文字かどうか1文字ずつチェックする。
機種依存文字があった場合、その文字をjavascriptのcharCodeAtを使って数値文字参照に変換する。
ソースコード
javaScript
初めに配列を作り、その中にJIS X 0208で定義された文字をセット
var kmoji = new Array( "/*JIS X 0208*/\r\n\t\"\\', 、。,.・:;?!゛゜´`¨^ ̄_ヽヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥''""()〔〕[]{}〈〉《》「」『』【】+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥$¢£%#&*@§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂≒≡∫∮∑√⊥∠∟⊿∵∩∪亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠堯槇遙瑤凜熙/*JIS X 0201*/ー。゚!#$%&()*+,-./0123456789:\;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~/*半角カナ*/アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッー。「」、・/*その他*/" );次にフォームから送られてきた値を変数srcに挿入
var src = document.henkan.mytext.value;変数
src
のlength
を変数len
に入れ、len
の数だけfor文で値を1文字ずつチェックし、機種依存文字かどうか判定する。
機種依存文字と判定された時は<span class="bkred">
で囲む。それと、変数num
は機種依存文字が有った時の個数をカウントするので、本文中になければ0
だし、あればその数だけ足していく。
classのbkred
はcssで定義しておくvar kmoji = kmoji.join(""); var num = 0; var str = new String; var after = new String; var len = src.length; for (var i = 0; i < len; i++) { var c = src.charAt(i); if (kmoji.indexOf(c) == -1) { str += "<span class=\"bkred\">" + c + "</span>"; after += "&#" + src.charCodeAt(i) + ";"; num = num + 1; }else{ str += c; after += c; } }以前の投稿「機種依存文字をチェックするツールを作成した話(JIS X 0208基準)」 と変わっているのは、変数
after
を定義して、機種依存文字があった時に"&#" + src.charCodeAt(i) + ";";
で該当の数値文字列参照( &#●●●●; )を取得しています。
おまけで改行コードをとるafter = after.replace(/ /g, '');機種依存文字が存在するかの判定を変数
num
に値があるか無いかで確認するif(num!=0){ num = '<div style="color:blue;font-weight:bold;">■機種依存文字が<span style="font-size:200%;color:red;">'+num+'</span>個ありました。</div>'; }else{ num = '<div style="color:blue;font-weight:bold;">■機種依存文字は含まれていません。</div>'; }最後に画面側に返す。
document.getElementById('kom').innerHTML = num; document.henkan.mytext.value = after; str = str.replace(/\r\n|\n/g, '<br>'); document.getElementById('preview').innerHTML = str; }おしまい。
- 投稿日:2020-05-14T22:38:33+09:00
TypeScriptで学ぶデザインパターン〜Observer編〜
対象読者
- デザインパターンを学習あるいは復習したい方
- TypeScriptが既に読めるあるいは気合いで読める方
- いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
- UMLが既に読めるあるいは気合いで読める方
環境
- OS: macOS Mojave
- Node.js: v12.7.0
- npm: 6.14.3
- TypeScript: Version 3.8.3
本シリーズ記事一覧(随時更新)
- TypeScriptで学ぶデザインパターン〜Iterator編〜
- TypeScriptで学ぶデザインパターン〜Adapter編〜
- TypeScriptで学ぶデザインパターン〜Template Method編〜
- TypeScriptで学ぶデザインパターン〜Factory Method編〜
- TypeScriptで学ぶデザインパターン〜Singleton編〜
- TypeScriptで学ぶデザインパターン〜Prototype編〜
- TypeScriptで学ぶデザインパターン〜Builder編〜
- TypeScriptで学ぶデザインパターン〜Abstract Factory編〜
- TypeScriptで学ぶデザインパターン〜Bridge編〜
- TypeScriptで学ぶデザインパターン〜Strategy編〜
- TypeScriptで学ぶデザインパターン〜Composite編〜
- TypeScriptで学ぶデザインパターン〜Decorator編〜
- TypeScriptで学ぶデザインパターン〜Visitor編〜
- TypeScriptで学ぶデザインパターン〜Chain of Responsibility編〜
- TypeScriptで学ぶデザインパターン〜Facade編〜
- TypeScriptで学ぶデザインパターン〜Mediator編〜
- TypeScriptで学ぶデザインパターン〜Observer編〜
Observerパターンとは
オブジェクトの状態変化に応じて処理をするためのパターンです。
サンプルコード
Observerパターンで作られたクラス群がどんなものになるのか確認していきましょう。
今回は、題材として"生徒の得点をもとに合否や得点グラフを表示する機能"を想定します。GitHubにも公開しています。
modules/Grade.ts
成績を表現する抽象クラスです。
Grade.tsimport Observer from "./Observer"; export default abstract class Grade { private observers: Observer[] = []; addObserver(observer: Observer): void { this.observers.push(observer); } notifyObservers(): void { for (const observer of this.observers) { observer.update(this); } } abstract getPoint(): number; abstract print(): void; }
addObserver
では状態変化に応じて処理を行う観察者(Observer)と追加します。
補足ですが、合わせて観察者を削除するdeleteObserver
も用意される場合が多いようですが今回は単純化のため省略します。
notifyObservers
では保持した全ての観察者インスタンスに状態が変更した旨の通知を行います。
getPoint
では得点を取得します。
modules/StudentGrade.ts
成績を表現するクラスです。
StudentGrade.tsimport Grade from "./Grade"; export default class StudentGrade extends Grade { private point: number; constructor(point: number) { super(); this.point = point; } getPoint(): number { return this.point; } print(): void { this.notifyObservers(); } }
getPoint
はスーパークラスで解説したので割愛します。
notifyObservers
を呼び出して具体的な処理は観察者が行なっています。ソースが煩雑化することを避けるため実装には反映させませんでしたが、pointは1以上10以下の値が入ることを理解促進のためご認識ください。
modules/Observer.ts
観察者を表現するインターフェースです。
Observer.tsimport Grade from "./Grade"; export default interface Observer { update(grade: Grade): void; }
update
で通知を受け取って実際の処理を行います。modules/PassObserver.ts
合否を表示する観察者を表現するクラスです。
PassObserver.tsimport Grade from "./Grade"; import Observer from "./Observer"; export default class PassObserver implements Observer { update(grade: Grade): void { if (grade.getPoint() > 5) { console.log('合格'); return; } console.log('不合格'); } }
update
では得点が6以上の場合は"合格"と表示し、それ未満の場合は"不合格"と表示します。modules/GraphObserver.ts
得点をグラフで表示する観察者を表現するクラスです。
GraphObserver.tsimport Grade from "./Grade"; import Observer from "./Observer"; export default class GraphObserver implements Observer { update(grade: Grade): void { let graph: string = ''; for (let i = 0; i < grade.getPoint(); i++) { graph += '-'; } console.log(graph); } }
update
では得点の数だけ"-"を表示してグラフ(?)を表示します。modules/Main.ts
Observerパターンで作成されたクラス群を実際に使う処理です。
Main.tsimport Grade from "./modules/Grade"; import StudentGrade from "./modules/StudentGrade"; import Observer from "./modules/Observer"; import PassObserver from "./modules/PassObserver"; import GraphObserver from "./modules/GraphObserver"; const grade1: Grade = new StudentGrade(4); const grade2: Grade = new StudentGrade(8); const passObserver: Observer = new PassObserver; const graphObserver: Observer = new GraphObserver; grade1.addObserver(passObserver); grade1.addObserver(graphObserver); grade2.addObserver(passObserver); grade2.addObserver(graphObserver); console.log(grade1.getPoint() + '点の生徒の成績'); grade1.print(); console.log(grade2.getPoint() + '点の生徒の成績'); grade2.print();成績インスタンスに観察者を追加して最終的に成績を表示しています。
クラス図
ここまでObserverパターンで作られたクラス群を1つずつ確認してきました。次にクラス図を示します。Observerパターンの全体像を整理するのにお役立てください。
- Observer: サンプルコードでは
Observer
クラスが対応- ConcreteObserver: サンプルコードでは
PassObserver
クラスGraphObserver
クラスが対応- Subject: サンプルコードでは
Grade
が対応- ConcreteSubject: サンプルコードでは
StudentGrade
クラスが対応※LucidChartを使用して作成
解説
最後に、このデザインパターンの存在意義を考えます。
状態と処理の具象クラスがインターフェースや抽象クラスを介してゆるやかに結びついているので付け替えが簡単にできます。Observerの具象クラスを追加したときSubjectやその具象クラスを修正する必要はありません。逆に、Subjectの具象クラスを追加したときObserverやその具象クラスを修正する必要はありません。このように、状態と処理の分離をすることで各部品の交換可能性を高めているのです。
補足
サンプルコードの実行方法はこちらと同様です。
参考
あとがたり
MVCとも絡むお話なので身近で理解が進みやすかった。
- 投稿日:2020-05-14T22:28:22+09:00
Kinx ライブラリ - Database (SQLite3)
Database / SQLite3
はじめに
「見た目は JavaScript、頭脳(中身)は Ruby、(安定感は AC/DC)」 でお届けしているスクリプト言語 Kinx。言語はライブラリが命。ということでライブラリの使い方編。
今回は SQLite3 です。実際には後述するように Database オブジェクトを使用したほうが良いです。
- 参考
- 最初の動機 ... スクリプト言語 KINX(ご紹介)
- 個別記事へのリンクは全てここに集約してあります。
- リポジトリ ... https://github.com/Kray-G/kinx
- Pull Request 等お待ちしております。
SQLite ライブラリ自体は開発初期の段階からあったのですが、イマイチ使いづらかったので改善を考えてました。今回、Database クラスを用意したのでようやく公開です。
SQLite3
SQLite3 はポータブルで使いやすい組み込み RDB。よくお世話になっています。ファイル 1 つで完結すること、そのファイルがプラットホーム非依存なことにより、色々な用途に使える。
SQLite
コア・ライブラリとして SQLite オブジェクトがあるが、実際には後述する Database オブジェクトを使うのが良い。Database クラスは SQLite クラスをラップしてより使いやすいインターフェースを提供するクラス。
DB 接続
SQLite オブジェクトを
new SQLite(filename[, timeout])
で作成してファイルに接続。var db = new SQLite("sample.db", 30000);Exec/Query
基本的に SQLite オブジェクトには基本メソッドとして
exec
、prepare
、transaction
の 3 つのメソッドがある。ただし、後述する Database クラスで、より使いやすいインターフェースを用意している。SELECT 以外の単発コマンドで
exec
を使い、それ以外ではprepare
で SQL オブジェクトを作成して実行する。exec
db.exec("CREATE TABLE IF NOT EXISTS mytable " "(" "id INTEGER PRIMARY KEY AUTOINCREMENT, " "name TEXT NOT NULL" ")" );prepare
prepare
で返された SQL オブジェクトはbind
、exec
、query
、next
というメソッドが存在する。全てのメソッドは処理後に自分自身のオブジェクトを返す。また、
next
メソッドはquery
メソッド呼び出し後に有効。next
の結果は抽出した行オブジェクトであり、以下の形式となっている。{ "columnName": [ "col1", "col2", "col3" ], "value": [ val1, val2, val3 ] }例えば以下のように使う。
var c, r = db.prepare("SELECT * FROM mytable WHERE (id > ? AND id < ?) OR id = ?") .bind(2) .bind(8, 10) // bind() は複数回に分けて実行できる。 .query(); // これまで設定した値を実際にバインディングして next() 実行可能にする。 while (c = r.next()) { var cols = c.columnName; var vals = c.value; System.println("Record[%d]" % vals[0]); for (var i = 0, len = cols.length(); i < len; ++i) { System.println(" %-8s = %s" % cols[i] % vals[i]); } }尚、
query
は SELECT でのみ有効。SELECT 以外でexec
を使用した場合、バインディングして実行した後、バインディングされていた値はその都度リセットされて次のexec
に備える。transaction
transacxtion
は一連の操作をロックして行う。例えば、複数の値を一気にインサートしたいときなどは以下のようにする。ロックするので 1 つずつ実施するより高速に実施できる。var ins = db.prepare("INSERT INTO mytable (name) VALUES (?)"); db.transaction(&{ for (var i = 0; i < 20; ++i) { ins.bind("name(%{i})").exec(); } });Database
クラス Database は上記 SQLite のラッパークラス。以下のメソッドがある。
- transaction ... トランザクション処理を行う。
- createTable ... テーブルを作成
- dropTable ... テーブルを削除
- insert ... データを挿入
- delete ... データを削除
- query ... データを抽出するための cursor オブジェクトを返す
- queryAll ... データを全て抽出
インスタンス化
普通に
new
する。var db = new Database(dbfile[, options]);インスタンス化する際のオプションは以下のとおり。
force
... true の場合、ファイルが存在なければファイルを新規に作成する。false の場合はエラーとして例外を送出する。デフォルトは false。timeout
... データベースの各種操作のタイムアウト値をミリ秒で指定。デフォルトは 10 秒。以下のように指定する。
var db = new Database("dbfile.db", { force: true });さらに、データベース名を複数のファイル名の配列として渡すと、最初の db をマスターとしてそれ以降の DB を自動的に
ATTACH DATABASE
する。その際、エイリアスとして自動的にファイル名の拡張子を除いた部分(いわゆる stem 部分、例えばabc.db
であればabc
)を登録する。マスター DB はmain
で指定し、それ以外はエイリアスで指定する。transaction
SQLite クラスの
transaction
より細かく指定できる。通常は同じように利用する。db.transaction(&{ ... });トランザクション処理が成功した場合は自動的にコミットする。途中で例外が発生した場合はロールバックを試みる。
また、Database クラスの
transaction
メソッドでは第一引数にモードを指定できる。モードは文字列で指定し、以下を指定可能。
'EXCLUSIVE'
...BEGIN EXCLUSIVE
でトランザクションを開始する。'IMMEDIATE'
...BEGIN IMMEDIATE
でトランザクションを開始する。未指定、または上記以外が指定された場合、
BEGIN
(BEGIN DEFERRED
)である。サンプルは以下の通り。db.transaction('EXCLUSIVE', &{ ... });createTable
createTable
にはテーブル名とスキーマを渡す。スキーマは直接文字列((id INTEGER, name TEXT)
のような形)で渡すか、配列で渡す(単に,
で結合されて()
で括られる)。db.createTable("mytable", [ "id INTEGER PRIMARY KEY AUTOINCREMENT", "name TEXT NOT NULL" ]);尚、常に
IF NOT EXISTS
で実行される。dropTable
dropTable
には単にテーブル名を渡す。db.dropTable("mytable");尚、常に
IF EXISTS
で実行される。注意
ステートメントが残っているとdatabase is locked
の RuntimeException 例外が発生するので、ステートメントへの参照が残っていない状態で実施すること。insert
insert
には以下のパラメータを指定する。
パラメータ 内容 into
必須、テーブル名 replace
true or false, 省略時 false column
必須、カラム名(文字列)、またはカラム名の配列 bind
必須、 column
に対するバインディング・データを配列で指定、column
で指定したカラムの数だけ必要複数
insert
する場合はtransaction
で囲んだほうが高速に実施される。db.transaction(&{ for (var i = 0; i < 20; ++i) { db.insert({ into: "mytable", column: ["name"], bind: ["name(%{i})"], }); } });delete
from
、where
、bind
で指定。全て必須(必ずbind
も必要)。db.delete({ from: "mytable", where: "id = ?", bind: [4] });query
条件に合うデータを DatabaseCursor で返す。初回の DatabaseCursor オブジェクトはデータをフェッチしていない状態で返される。
query()
に指定できるパラメータは以下の通り。
パラメータ 内容 distinct
true or false, 省略時 false select
省略時は *
、もしくはカラム名(文字列) or カラム名の配列from
必須、テーブル名 innerJoin
INNER JOIN 句 ( innerJoin
、outerJoin
は同時指定不可)outerJoin
OUTER JOIN 句 on
innerJoin
またはouterJoin
を指定したときだけ有効where
WHERE 句、文字列、または配列(AND で結合) bind
WHERE 句に対するバインディング・データを配列で指定、 ?
の数だけ必要groupby
GROUP BY 句 having
HAVING 句 orderby
ORDER BY 句 ( orderby
、orderbyAsc
、orderbyDesc
は同時指定不可)orderbyAsc
orderby
と同様orderbyDesc
ORDER BY 句、DESC 指定 limit
LIMIT 句 offset
OFFSET 句 以下がサンプル。
var c = db.query({ select: "*", from: "mytable", where: "(id > ? AND id < ?) OR id = ?", bind: [2, 8, 10] });上記復帰値
c
は DatabaseCursor オブジェクトでnext()
、columns()
、values()
メソッドを持つ。columns()
はカラム名の配列を返し、values()
は値の配列を返す。DatabaseCursor オブジェクトは以下のように
c.next()
が null を返すまでフェッチすることで全抽出データを取得できる。while (c.next()) { var cols = c.columns(); var vals = c.values(); System.println("Record[%d]" % vals[0]); for (var i = 0, len = cols.length(); i < len; ++i) { System.println(" %-8s = %s" % cols[i] % vals[i]); } }queryAll
queryAll は、コールバックを指定する方法と指定しない方法の 2 通りの使い方がある。コールバックを指定しなければ、全ての抽出データを一括で配列形式で取得できるが、データ量が多い場合メモリを消費してしまう可能性がある。それを回避するため、コールバック方式では 1 つずつイテレートしてコールバックするように動作する。
一括で取得する場合
一括で取得した場合は以下のようにコールバックを記載しない。
var res = db.queryAll({ select: "*", from: "mytable", where: "(id > ? AND id < ?) OR id = ?", bind: [2, 8, 10] });以下のようなデータ構造で返る。
{ "columns": ["id", "name"], "values": [ [3, "name(2)"], [5, "name(4)"], [6, "name(5)"], [7, "name(6)"], [10, "name(9)"] ] }コールバックさせる場合
コールバックさせる場合は、以下のように関数を渡す。
db.queryAll({ select: "*", from: "mytable", where: "(id > ? AND id < ?) OR id = ?", bind: [2, 8, 10] }, &(c, i) => { System.println("%2d => " % i, c.toJsonString()); });以下のようにそれぞれの行のオブジェクトが返される。この場合は DatabaseCursor オブジェクト ではない ので注意。
0 => {"columns":["id","name"],"values":[3,"name(2)"]} 1 => {"columns":["id","name"],"values":[5,"name(4)"]} 2 => {"columns":["id","name"],"values":[6,"name(5)"]} 3 => {"columns":["id","name"],"values":[7,"name(6)"]} 4 => {"columns":["id","name"],"values":[10,"name(9)"]}尚、コールバック関数で明示的に false を返すとイテレーションを中止して制御を戻す。
db.queryAll({ select: "*", from: "mytable", where: "(id > ? AND id < ?) OR id = ?", bind: [2, 8, 10] }, &(c, i) => { System.println("%2d => " % i, c.toJsonString()); return false if (i == 2); });以下のようになる。
0 => {"columns":["id","name"],"values":[3,"name(2)"]} 1 => {"columns":["id","name"],"values":[5,"name(4)"]} 2 => {"columns":["id","name"],"values":[6,"name(5)"]}サンプル
サンプル・コードは GitHub にあります。お試しください。
おわりに
SQLite3 使いやすいですね。単純にデータ・ストレージに使ってもいいですし、ロガーのバックエンドに使ったり、ポータブルな設定ファイルとして使ったりと色々使えます。何より RDB や SQL の基本的なことを学習するのにも良いかなー、と思います。
ではでは、また次回。
- 投稿日:2020-05-14T22:27:01+09:00
ハートをエロくする
プログラム人生の中で一度はハートを描いてくれって言われたことありませんか?
ハートを描いてみる
というわけで早速ハートを描いてみます。
オーソドックスなハートってこんな形な気がします。
これ、こんな風に点をとって描いてます。
原点をハートの先っちょに持ってってやって、ハートの幅を w、高さを h として図をみると、右半分のパスは次の3つで書けそうです。左半分はそれの鏡像でいいでしょう。
三次ベジエ:
(0,0)-(x,y)-(w/2,y1)-(w/2,y2)
円弧:(w/2,y2)-(w/2,h)-(x1,h)
円弧:(x1,h)-(x2,h)-(0,dy)
canvas.getContext( '2d' )で取れる
CanvasRenderingContext2D
にハートの形のパスを構成するheartPath
を仕込んじゃいましょう。
円弧を描く CanvasRenderingContext2D.arc はパラメータが面倒なので、三次ベジエで近似します。// Curve factor : 0.552285 const CF = ( -24 + Math.sqrt( 24 * 24 + 64 * 9 ) ) / 18 CanvasRenderingContext2D.prototype.heartPath = function( w, h, x, y, y1, y2, x1, x2, dy ) { x *= w y *= h y1 *= h y2 *= h x1 *= w x2 *= w dy *= h let cx = 0 let cy = 0 const MoveTo = ( x, y ) => { this.moveTo( x, y ) cx = x cy = y } const CurveTo = ( x1, y1, x2, y2, x, y ) => { this.bezierCurveTo( x1, y1, x2, y2, x, y ) cx = x cy = y } const ArcByQ = ( x1, y1, x, y ) => { CurveTo( x1 * CF + cx * ( 1 - CF ) , y1 * CF + cy * ( 1 - CF ) , x1 * CF + x * ( 1 - CF ) , y1 * CF + y * ( 1 - CF ) , x , y ) } const rH = w / 2 MoveTo( 0, 0 ) CurveTo( -x, y, -rH, y1, -rH, y2 ) ArcByQ( -rH, h, -x1, h ) ArcByQ( -x2, h, 0, dy ) ArcByQ( +x2, h, +x1, h ) ArcByQ( rH, h, rH, y2 ) CurveTo( rH, y1, x, y, 0, 0 ) }このオーソドックスなハートは以下のパラメータで描いています。
const canvas = document.createElement( 'canvas' ) const w = 512 canvas.width = w * 1.2 const h = 512 canvas.height = h * 1.2 const x = 0.05 const y = 0.10 const y1 = 0.40 const y2 = 0.72 const x1 = 0.25 const x2 = 0.05 const dy = 0.84 c2d.translate( w / 2, h ) c2d.scale( 1, -1 ) c2d.translate( canvas.width / 2, h ) c2d.heartPath( w, h, x, y, y1, y2, x1, x2, dy ) c2d.fillStyle = 'red' c2d.fill()ハートをエロくする
本題です。
プログラム人生の中で、一度はハートをエロくしてくれって言われたことありませんか?
というわけで、早速ハートをエロくしてみます。
ハートマークの下部をしぼって、上部が円形になるようにすると、エロくなるみたいです。
要するに女体っぽくすればいいようです。WebComponent 化して、CodePen でみてみます。
See the Pen yLYqvdP by Satachito (@satachito) on CodePen.
CodePenが失敗したときの保険のためにイメージを貼っておきます。
下のようなパラメータにしてみました。エロいかどうかは主観に基づいているのでほんとにエロく感じていただけているか不安なのですがいかがでしょうか?
<heart-element w=200 h=200 x=0.25 y=0.50 y1=0.50 y2=0.75 x1=0.25 x2=0.05 dy=0.80></heart-element>バレンタインのチョコの箱
ちょっと季節はずれな話題ですが、バレンタインの時にみるハート型のチョコの箱の形、チョコを入れるという役割とのトレードオフなのはわかりますが、なんか違和感ありますよね。
というわけで、バレンタインのチョコの箱を描いてみます。こんなパラメータでどうでしょう。
上2つと違うのは、y
を0
にして、先っちょの部分も接線接続しているところです。<heart-element w=240 h=200 x=0.10 y=0 y1=0.30 y2=0.70 x1=0.20 x2=0.10 dy=0.93></heart-element>最後に
エロいハートの作り方を知りたくて「エロいハート」でググったら仕事にならなくなりました。同様の悩みを抱えている方のために最後にこの記事で使った画像を全部表示するスタンドアローンで動く(ファイルをブラウザに食わせて動く)html ファイルを載せておきます。
<script type=module> // Curve factor : 0.552285 const CF = ( -24 + Math.sqrt( 24 * 24 + 64 * 9 ) ) / 18 CanvasRenderingContext2D.prototype.heartPath = function( w, h, x, y, y1, y2, x1, x2, dy ) { x *= w y *= h y1 *= h y2 *= h x1 *= w x2 *= w dy *= h let cx = 0 let cy = 0 const MoveTo = ( x, y ) => { this.moveTo( x, y ) cx = x cy = y } const CurveTo = ( x1, y1, x2, y2, x, y ) => { this.bezierCurveTo( x1, y1, x2, y2, x, y ) cx = x cy = y } const ArcByQ = ( x1, y1, x, y ) => { CurveTo( x1 * CF + cx * ( 1 - CF ) , y1 * CF + cy * ( 1 - CF ) , x1 * CF + x * ( 1 - CF ) , y1 * CF + y * ( 1 - CF ) , x , y ) } const rH = w / 2 MoveTo( 0, 0 ) CurveTo( -x, y, -rH, y1, -rH, y2 ) ArcByQ( -rH, h, -x1, h ) ArcByQ( -x2, h, 0, dy ) ArcByQ( +x2, h, +x1, h ) ArcByQ( rH, h, rH, y2 ) CurveTo( rH, y1, x, y, 0, 0 ) } class HeartElement extends HTMLElement { constructor() { super() const canvas = document.createElement( 'canvas' ) const w = this.getAttribute( 'w' ) const h = this.getAttribute( 'h' ) canvas.setAttribute( 'width', w ) canvas.setAttribute( 'height', h ) this.appendChild( canvas ) const c2d = canvas.getContext( '2d' ) c2d.translate( w / 2, h ) c2d.scale( 1, -1 ) c2d.heartPath( w , h , Number( this.getAttribute( 'x' ) ) , Number( this.getAttribute( 'y' ) ) , Number( this.getAttribute( 'y1' ) ) , Number( this.getAttribute( 'y2' ) ) , Number( this.getAttribute( 'x1' ) ) , Number( this.getAttribute( 'x2' ) ) , Number( this.getAttribute( 'dy' ) ) ) c2d.fillStyle = 'red' c2d.fill() } } customElements.define( 'heart-element', HeartElement ) class HeartExplanation extends HTMLElement { constructor() { super() const canvas = document.createElement( 'canvas' ) this.appendChild( canvas ) const c2d = canvas.getContext( '2d' ) const w = 512 canvas.width = w * 1.2 const h = 512 canvas.height = h * 1.2 const x = 0.05 const y = 0.10 const y1 = 0.40 const y2 = 0.72 const x1 = 0.25 const x2 = 0.05 const dy = 0.84 c2d.translate( canvas.width / 2, h * 1.1 ) c2d.font = '24px serif' c2d.fillText( '原点(0,0)', 0, 24 ) c2d.fillText( 'x, y', 4 + x * w, -y * h ) c2d.fillText( 'y1', 4 + w / 2, -y1 * h ) c2d.fillText( 'y2', 4 + w / 2, -y2 * h ) c2d.fillText( '(w/2,h)', -36 + w / 2, -h - 4 ) c2d.fillText( 'x1', x1 * w, -h - 4 ) c2d.fillText( 'x2', x2 * w, -h - 4 ) c2d.fillText( 'dy', 0, -dy * h + 24 ) c2d.scale( 1, -1 ) c2d.heartPath( w, h, x, y, y1, y2, x1, x2, dy ) c2d.stroke() c2d.beginPath() c2d.moveTo( 0, 0 ) c2d.lineTo( x * w, y * h ) c2d.moveTo( w / 2, y1 * h ) c2d.lineTo( w / 2, h ) c2d.lineTo( x2 * w, h ) c2d.lineTo( 0, dy * h ) c2d.strokeStyle = 'red' c2d.stroke() const FillCircle = ( x, y ) => { c2d.beginPath() c2d.ellipse( x, y, 4, 4, 0, 0, 2 * Math.PI ) c2d.fill() } c2d.fillStyle = 'blue' FillCircle( x * w, y * h ) FillCircle( w / 2, y1 * h ) FillCircle( w / 2, y2 * h ) FillCircle( w / 2, h ) FillCircle( x1 * w, h ) FillCircle( x2 * w, h ) FillCircle( 0, dy * h ) } } customElements.define( 'heart-explanation', HeartExplanation ) </script> <heart-explanation></heart-explanation> <div>オーソドックス</div> <heart-element w=200 h=200 x=0.05 y=0.10 y1=0.40 y2=0.72 x1=0.25 x2=0.05 dy=0.84></heart-element> <br> <br> <div>ちょっとエロい?</div> <heart-element w=200 h=200 x=0.25 y=0.50 y1=0.50 y2=0.75 x1=0.25 x2=0.05 dy=0.80></heart-element> <br> <br> <div>バレンタインのチョコの箱</div> <heart-element w=240 h=200 x=0.10 y=0 y1=0.30 y2=0.70 x1=0.20 x2=0.10 dy=0.93></heart-element> <br> <br> <style> * { ; margin : 0 ; padding : 0 } </style>
- 投稿日:2020-05-14T22:04:15+09:00
Javascript 現在の日付を「YYYY年MM月DD日」の形で取得
日付を文字列として取得
Javascriptで日付を取得しても、画面に表示したい時に困ることが多い。
と言うわけで、こんな形で取得すれば困ることはないかと。// 現在の月を「2020年5月10日」みたいな形で取得 getMonthString() { let dt = new Date(); let y = dt.getFullYear(); let m = ('00' + (dt.getMonth())).slice(-2); let d = ("00" + dt.getDate()).slice(-2); const result = y + '年' + m + '月' + d + '日'; console.log(result); return result; }こちらが参考になりました
- 投稿日:2020-05-14T21:17:03+09:00
機種依存文字をチェックするツールを作成した話(JIS X 0208基準)
初めに
仕事で、ユーザーにwebやメールで情報を届けるのですが、相手の環境によって機種依存文字(環境依存文字)が文字化けしてしまわないか確認する必要がありました。
UTF-8などの文字コードが普及した今、機種依存文字による文字化けはほとんど存在しなくなっているとは思いますが、会社のメールシステムがSJISで作られていることもあり、文字化けをしないように気を付けることが必要でした。機種依存文字とは
機種依存文字とは、WindowsやMacなどのOSやフォントに依存する文字を指します。環境依存文字とも呼ばれ、元々は特定の環境下で使用するために用意されたもの。
機種依存文字の判定基準
初期の規格「JIS X 0208」の基準で機種依存文字をチェックするようにしました。
これはメールシステムが古いのと、絶対に文字化けさせたく無い為です。簡単な仕様
機種依存文字をチェック
ツールはHTML+javascriptで作り、formのtextareaに文章を入力してもらい、submitされた時に、javascriptで判定する。
判定方法は、ホワイトリスト方式を使い「JIS X 0208」で定義された文字を、あらかじめ配列に入れておき、formから送られてきた文章が機種依存文字かどうか1文字ずつチェックする。
判定後には機種依存文字の有る無しをPOP-UPで表示して作業者に知らせる。機種依存文字があれば、文章の中の機種依存文字を強調して画面に返す。
ソースコード
javaScript
初めに配列を作り、その中にJIS X 0208で定義された文字をセット
var kmoji = new Array( "/*JIS X 0208*/\r\n\t\"\\', 、。,.・:;?!゛゜´`¨^ ̄_ヽヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥''""()〔〕[]{}〈〉《》「」『』【】+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥$¢£%#&*@§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂≒≡∫∮∑√⊥∠∟⊿∵∩∪亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠堯槇遙瑤凜熙/*JIS X 0201*/ー。゚!#$%&()*+,-./0123456789:\;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~/*半角カナ*/アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッー。「」、・/*その他*/" );次にフォームから送られてきた値を変数srcに挿入
var src = document.henkan.mytext.value;変数
src
のlength
を変数len
に入れ、len
の数だけfor文で値を1文字ずつチェックし、機種依存文字かどうか判定する。
機種依存文字と判定された時は<span class="bkred">
で囲む。それと、変数num
は機種依存文字が有った時の個数をカウントするので、本文中になければ0
だし、あればその数だけ足していく。
classのbkred
はcssで定義しておくvar num = 0; var str = new String; var len = src.length; for (var i = 0; i < len; i++) { var c = src.charAt(i); if (kmoji.indexOf(c) == -1) { str += "<span class=\"bkred\">" + c + "</span>"; num = num + 1; }else{ str += c; } }機種依存文字が存在するかの判定を変数
num
に値があるか無いかで確認するif(num!=0){ num = '<div style="color:blue;font-weight:bold;">■機種依存文字が<span style="font-size:200%;color:red;">'+num+'</span>個ありました。</div>'; }else{ num = '<div style="color:blue;font-weight:bold;">■機種依存文字は含まれていません。</div>'; }最後に画面側に返す。
document.getElementById('kom').innerHTML = num; document.henkan.mytext.value = src; str = str.replace(/\r\n|\n/g, '<br>'); document.getElementById('preview').innerHTML = str; }おしまい。
- 投稿日:2020-05-14T21:11:19+09:00
アマゾンの犬に癒されたい
結論
- Amazon.comでは404ページに犬が出てくる
- これらを眺めて癒されたい
背景
- あるサイトでAmazon.comへのリンクを叩いたら、すでに存在しない商品で404ページが出た。めちゃくちゃ癒される犬の写真とともに。
- 例: Amazon.comの404
- 犬の写真は毎回ランダムで出てきて、200種類くらいあるようだ。
- MPが減った時、これらを見て癒されようではないか。
やること
- 仕事などでMPを削られる。
- Chromeブラウザで新しいタブを開き、アドレスバーに下記を入力してEnter、真っ白なページを表示させる
data:text/html, <html contenteditable>
- Developer Consoleを開いて、下記JavaScriptを実行する。
setInterval(()=>{r=Math.random()*199|0+1;i=document.createElement('img');i.title=r;i.src=`https://images-na.ssl-images-amazon.com/images/G/01/error/${r}._TTD_.jpg`;document.body.append(i)},5000)
- 5秒おきに追加表示されるワンコを眺めて、MPが回復するのを待つ。
最後に
- お気に入りのワンコの番号を教えろください
- 私は105のMaeとか53の二匹とか。165にライオンが居た。
- 投稿日:2020-05-14T20:50:11+09:00
Glitchではじめるお手軽オンラインハッカソン
GlichはWebブラウザーさえあれば無料でWebアプリを開発できちゃうサービスです。
(Visual Studio CodeのLive Share拡張を使ったときのように)複数人でリアルタイムのコード編集ができるので、オンラインハッカソンにピッタリです!
一応、無料で使うときの制約(最後に抜粋を載せました)はありますが、ハッカソンでデモをするのには十分でしょう。プロジェクトを非公開にできるのも嬉しいです。1
とにかくお手軽にコーディングをはじめられるようになっています。ここでは、JavaScriptでゲームが作れるphina.jsのチュートリアルを例にして、使い方を紹介します。
なお、次の前提を満たしている人が対象です。
- PCを持っていて、Webブラウザーが使える。
- 共同でコーディングする人への連絡手段、例えばSlackやChatworkなど、がある。
- Facebook, GitHub, Googleのいずれかのアカウントか、メールアドレスを持っている。
使い方
phina.jsのチュートリアルでは、
index.html
2とmain.js
を作ります。この2つのファイルをGlitchのプロジェクトに反映して、Webアプリとして使えるようにします。index.html<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Getting started | phina.js</title> <!-- phina.js を読み込む --> <script src="https://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script> <!-- メイン処理 --> <script src="main.js"></script> </head> <body> </body> </html>main.js// phina.js をグローバル領域に展開 phina.globalize(); // MainScene クラスを定義 phina.define('MainScene', { superClass: 'CanvasScene', init: function() { this.superInit(); // 背景色を指定 this.backgroundColor = '#444'; // ラベルを生成 this.label = Label('Hello, phina.js!').addChildTo(this); this.label.x = this.gridX.center(); // x 座標 this.label.y = this.gridY.center(); // y 座標 this.label.fill = 'white'; // 塗りつぶし色 }, }); // メイン処理 phina.main(function() { // アプリケーション生成 var app = GameApp({ startLabel: 'main', // メインシーンから開始する }); // アプリケーション実行 app.run(); });Glitchで新しいプロジェクトを作る
https://glitch.com にアクセスして、右上の「New Project」ボタンを押します。3つのテンプレートの中から、一番上のhello-webpageを選びます。
Loading Projectと表示されるので少々待ちます。
index.htmlを反映する
作ったプロジェクトにはすでに
index.html
があります。左ペインで
index.html
を選んだ後、上記したphina.jsのindex.html
をコピペして上書します。保存ボタンはありません。自動的に保存されます。
main.jsを追加する
次に左ペインの「New File」ボタンを押し、main.jsと入力した後に「Add This File」ボタンを押します。
左ペインで
main.js
ファイルを選んだ後、上記したphina.jsのmain.js
をコピペして上書きします。「phina is not defined」というエラーが表示されますが、今回はそのままにします。
Webアプリの動作を確認する
サングラスマーク「Show」をクリックすると、「In a New Window」と「Next to The Code」が表示されます。
ここでは「Next to The Code」を選んでみましょう。すると、画面左にphina.jsが実行された結果が表示されます。
このWebアプリは、すでに一般に公開されています。WebアプリのURLは、実行結果画面の上にある「Change URL」ボタンを押すと分かります。
URLは
https://xxxxx-xxxxx-xxxxx.glitch.me
という形式です。xxxxx-xxxxx-xxxxx
はプロジェクト名です。他の人と共同でコーディングしてみる
一緒にコーディングする人にURLを知らせます。
プロジェクトをデフォルトのまま公開にしている場合と、privateに変更して非公開にしている場合で、伝えるURLが変わります。
プロジェクトをデフォルトのまま公開にしている場合
コードを表示している画面のURLをそのまま伝えます。
URLは
https://glitch.com/edit/#!/xxxxx-xxxxx-xxxxx
という形式です。xxxxx-xxxxx-xxxxx
はプロジェクト名です。一人でも実験できますので、上記URLを別のウィンドウで開いてみてください。片方の変更が、もう片方にすぐに反映されます。
プロジェクトをprivateにして非公開にしている場合
画面左上のプロジェクト名
xxxxx-xxxxx-xxxxx
をクリックして、中程の「Make This Project Private」をチェックすることで非公開にします。非公開にした状態でコードを表示している画面のURLを他人が開いても「No project found at xxxxx-xxxxx-xxxxx」と表示されます。そのまま放置すると、別名の新しいプロジェクトが自動的に作成されるので注意してください。
非公開プロジェクトに参加してもらうURLは、左ペイン「Share」ボタンを押して、Invite Others to EditにあるURLです。こちらを一緒にコーディングしたい人に伝えてください。
URLは次のような形式です:
https://glitch.com/edit/#!/join/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
アカウントを作りサインインしてプロジェクトを延命する
ここまで、サインインせずに作業してきました。このままだとこのプロジェクトは5日後に無くなってしまいます。アカウントを作ってサインインすれば、プロジェクトはずっと使えるようになります。3
右上の「Sign In」ボタンを押した後に、画面中程の「Create an Account」ボタンを押します。
次の4つの方法でアカウントを作れます。
- GitHub
- Email Magic Link
最後の Email Magic Link はメールアドレスを登録すると、そのアドレス宛にサインイン用のキーワードが送信されてくる機能です。
説明は以上です。Happy coding!
おまけ
What technical restrictions are in place?から無料の場合の制約について抜粋します。有料にすれば緩和されます。2020年5月14日時点の情報です。
- 実行時間
- アクセスがないと5分後に停止する。また、12時間連続実行していると停止する。Webアプリへのアクセスがあると再び実行される。
- サインインしたユーザーは20アプリまで、サインインしていないユーザーは3アプリまで同時に実行できる。
- サインインしていないユーザーのアプリは5日後に削除される。
- コンテナ(アプリ)が利用できるディスクサイズ
- コンテナが使えるディスクスペースは200MBと、アセット用の512MB。
- /tmpディレクトリーは上記に含まれないが、アプリを再起動した時に消える。
- Node.jsのモジュールは上記に含まれないが、最大で1GBまで。
- コンテナ(アプリ)が利用できるRAM
- RAMは512MBまで。
- Webアプリが処理できるリクエスト数
- 1時間あたり4000リクエストまで。超えると、429 Too Many Requestsレスポンスが返却される。
- 投稿日:2020-05-14T18:12:27+09:00
シンプルにjsで非同期処理を実装する
非同期処理とは
非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
同期処理では、あるタスクが実行している間、他のタスクの処理は中断される方式である。この仕組みのおかげで、並列に処理が走ることで描画が高速化したり、時間を無駄なく使えるって感じですね。
しかし、時には変数に値がない状態で、その変数を参照する処理が走ってしまってnullになっていたりと、厄介な問題も付きまといます。
そんな時に、便利なのがjsでよく使う async/awaitです(最近はPythonにもあるらしい)。
async/awaitの前に
ES6以前はcallback地獄というものがあったそうな。
そのおかげでネストが異常に深くなって、 ヒイィィィ!!!!(゚ロ゚ノ)ノ!という状態だったそうです。そこで、Promiseというオブジェクトを使って処理するようになりました。
これにより、ネストは浅くなったのですが、.thenの大量発生、外の変数に退避しないと直前の結果を参照できないなど、課題がいろいろありました。
そこで、満を持してES8からasync/awaitが登場したという歴史的な背景があります。
厳密に理解をするにはPromiseの内容も合わせて理解しておくと良いと解説されている方もいるので、
興味のある方は合わせて見てみるといいかもしれないですね。async/awaitの使い方
使い所としては、基本的にAPI叩く時とかが多い気がしています。
(非同期処理になる処理は大体決まっているので、ある程度覚えちゃって、「あ、ここ非同期になりそう」と目星がつけられるといいかも)方法としては
・関数の頭にasyncをつける
・処理が終わるまで待ってて欲しいところにawaitをつけるシンプルですね!
async function test() { const item = {a:b, c:d} // 何か非同期処理になるやつ const result = await Api().post('/verify', item) console.log(result) }無駄に待ち時間を作らないように
ちなみにですが、以下のようにたくさんのawaitを使うと、非同期の良さを殺してる気がしてもったいない感じがしますよね。
async function many_await() { var aaa = await Api().post('/aaa', 'aaa') var bbb = await Api().post('/bbb', 'bbb') var ccc = await Api().post('/ccc', 'ccc') var ddd = await Api().post('/ddd', 'ddd') var eee = [aaa, bbb, ccc, ddd] }こんな時は
以下のように、Promise.allとawaitの合わせ技でも使えるそうなので(今回調べて初めて知った)
使いこなせるといいですね!async function many_await() { var aaa = Api().post('/aaa', 'aaa') var bbb = Api().post('/bbb', 'bbb') var ccc = Api().post('/ccc', 'ccc') var ddd = Api().post('/ddd', 'ddd') var eee = await Promise.all([aaa, bbb, ccc, ddd]) }
- 投稿日:2020-05-14T18:11:53+09:00
【Nuxt.js】vue-js-modalの導入方法
概要
Nuxtにvue-js-modalを導入するのに少しハマった部分があったので、導入方法を残しておきます。
導入
インストール
yarnを使ってインストール
$ yarn add vue-js-modal
vue-js-modal.jsを作成
plugins
ディレクトリ内にvue-js-modal.js
ファイルを作成します。plugins/vue-js-modal.jsimport Vue from "vue" import VModal from "vue-js-modal" Vue.use(VModal)nuxt.config.js
以下ハマり部分。
nuxt.config.js
を変更していきます。nuxt.config.jsexport default { plugins: [ "~/plugins/vue-js-modal", ] }とやれば導入出来るはずだったのですが、私の環境では動かず、以下のようにすることで動きました。
nuxt.config.jsexport default { plugins: [ { src: "~/plugins/vue-js-modal", ssr: false }, ] }明示的にssrをfalseにすることでコンポーネント内でmodalを使用することが出来ました。
- 投稿日:2020-05-14T18:05:04+09:00
Web Components 入門 〜基礎編〜
最初に
これを読んでいるなら Web Components という言葉に耳覚えがあると思います。
Web Components は全てのモダンブラウザーが対応しているWeb の標準仕様です。
これらの仕様でどんな Web アプリでも使えるUI コンポーネントを作ることができます。
ここまで知っていても、どこから作ればいいかわからないかもしれません。しかし、それはある程度仕方のないことです。
現代のフロントエンド開発にの素晴らしさであり、また大きな問題となる要素に、は「API のあるところにはそれを『もっとシンプルにする』方法は無限に出てくる」という部分があります。
Web Components も例外ではなく、私の知る限り、Web Components を作るためのライブラリーは 20 以上あります。
そして豊富な選択肢があるからこそ、Web Components 開発を始めたばかりの人は、そもそもどこから始めればいいか迷ってしまいます。
そういった悩みのある人のための記事になります。
この記事と側扁になる記事を通して下記のテーマをカバーします
- Web Components という標準仕様の基礎 - この記事です ?
- Web Components を作るためのライブラリーのアプローチ - 先ほど言っていた 20 以上あるライブラリーは大体似たようなアプローチを使っているのでそれぞれのパターンを別々の記事で説明してそのパターンを使うライブラリーを軽く紹介します。
一つだけ注意点ですが、この記事のシリーズでは各ライブラリーでどういう風に Web Components を作るかまではカバーしません、それぞれの公式ドキュメントはそのためにあると思います。
この記事のシリーズはあくまで Web Components を始めたばかりのエンジニアに自分にあった Web Components の作り方を見つけ出す手助けになればと思います。?
Web Components の標準仕様の推進に大きく影響したと言える Polymer プロジェクトのメンバー、Justin Fagnani さんの名セリフを借りると
[...] the big idea with web components is that it shouldn't matter which or even if an approach (to create Web Components) becomes more popular. As long as components interoperate we all win.
[...] Web Components のいいところは作るためのアプローチの中でどれが一番流行っても一緒です。コンポーネントを一緒に使えることができればみんなが得します。
さて、退屈なことはこれで終わりです、コードに移りましょう。
Web Component を作るに必要なもの
Web Components の標準仕様をよくカバーする記事は色々とありますので、ここではあえて説明はしませんがちょっとしたおさらいが必要であればこちらの MDN の記事がおすすめです。
さて、標準仕様を読むのはいいんですけど、実際の標準な Web Component のコードってどういったものでしょう?
こちらはシンプルな「Hello World」コンポーネントのコードです、全てを理解できなくても大丈夫です、後でもう少し詳しく説明します。?
const template = document.createElement("template"); template.innerHTML = `<div>Hello <span class="name"></span></div>`; class MyGreeting extends HTMLElement { constructor() { super(); this.name = "World"; } // Start - 標準ライフサイクルのcallback // これはコンポーネントがdocumentに初めて追加される時に呼ばれます connectedCallback() { if (!this.shadowRoot) { this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } this._nameSpan = this.shadowRoot.querySelector(".name"); this._nameSpan.textContent = this.name; } // ここでどの要素を変更したらcallbackが発生するかを定義します static get observedAttributes() { return ["name"]; } // 上のArrayの要素が変更された時に呼ばれるcallback attributeChangedCallback(attr, oldVal, newVal) { if (oldVal !== newVal) { this[attr] = newVal; } } // End - 標準ライフサイクルのcallback set name(value) { this.safeSetAttribute("name", value); if (this._nameSpan) { this._nameSpan.textContent = value; } } get name() { return this.getAttribute("name"); } // 要素変更での無限ループを回避するための関数 safeSetAttribute(attr, value) { if (this.getAttribute(attr) !== value) { this.setAttribute(attr, value); } } } window.customElements.define("my-greeting", MyGreeting);このシンプルなコードで全ての Web Components の標準仕様がわかります。
- コンポーネントが使う
<template>
を作成します。- 標準の
HTMLElement
を継承するclassを定義してそれを window レベルのCustomElementRegistry
に登録します。これでブラウザーは<my-greeting>
を見たら定義した class でレンダリングします。- 定義したクラスには custom elements の標準ライフサイクルの callbackを使っていつ自分のコンポーネントを設定やアプデートすればいいかわかります。
attachShadowRoot
関数でコンポーネントに使うShadow DOM 木構造を作ります。このコードを見て「実際にできていることに対してコードが多すぎない?」って思っているかもしれません。
私もそれに同感です、現在の Web Components の標準仕様はあくまで基礎的な部分しかカバーしないから色々なケースで必要になるコードを自分で書かないといけないです。
もっとシンプルにしよう
ここで前述した、シンプルにする方法に戻ります。
これらの方法は標準仕様の一番痛いところをこういう風に解決してくれます。
- レンダリングエンジンを使って手動な DOM の操作の必要を無くします。
- 継承かラッピングかコンパイルで
CustomElementRegistry
に登録できる class を作成します。- 標準ライフサイクルの callback をエクステンドしてライブラリーによってはもっと色々なケース(例えばステート管理)に役立つ callback を追加します。
- Shadow DOM 作りをして、Shadow DOM が使えない場合のための polyfill や fallback を追加します。
こう言ったことで作る側として楽に Web Components を作ることができるようになります。
そして、最終的の動作の一番重いところは完全に標準仕様任せになっているのでこの記事のシリーズでカバーするライブラリーのほとんどはなんと 10kB 以下です (minify と gzip 後)!?
次は?
ここまでは「どうすれば Web Component を作れる?」と「どうして作るのにライブラリーを使った方がいい?」という質問の答えを出せたなら幸いです。
しかし、本来の目的を忘れていてはいけません、ここで私はあなたとあなたの運命のライブラリーとの出会いをプロデュースしなけらばなりません。?
そしてそのライブラリーたちがしてくれることをいくつか並べましたが結局のところ一番「作る側が楽する」ことに繋がるのは class がどう定義されるかだと思います。
上記に書いた通り、ほとんどのライブラリーはこの三つのパターンのどれかになります。
HTMLElement
を継承する class にそのライブラリーのいいところを足してその新しい class をHTMLElement
の代わりに継承します。- 関数を通して登録できる class を作ってもらえます、自分のコードはその関数のパラメターになります。
- 非標準 Javascript コードをライブラリーのツールを通して class にコンパイルします。
次の記事からは、各パターンをもっと詳細に話て、そのパターンを使っているライブラリーをできるだけ多く紹介します。
ここまで読んでくれてありがとうございます、この記事を気に入ってくれたなら次の記事もぜひ読んでみてください。
「ライブラリーのこういう情報がみたい」などの質問や提案があればぜひコメントをしてください。
- 投稿日:2020-05-14T17:55:22+09:00
Tensorflow.Keras で学習したモデルをtensorflow.jsで使う
Google Colaboratory で学習したモデル をhtmlアプリから利用する
tensorflow.js にモデルを変換して angularアプリに組み込みます
手順は、大きく分けて3つ
- Google Colaboratory で、学習させる
- 学習済モデルの(model.h5)ファイルをTensorFlow.js Layers formatに変換する
- TensorFlow.js を使った Angular アプリを開発します。
解説
1.Google Colaboratory で、学習させる
JupyterNotebookに解説を記載していますので、↓こちらを参照してください
Google Colaboratory 学習してモデル(model.h5)を保存するJupyterNotebook 。
2.学習済モデルの(model.h5)ファイルをTensorFlow.js Layers formatに変換する
JupyterNotebookに解説を記載していますので、↓こちらを参照してください
Google Colaboratory 学習済モデル(model.h5)をコンバートするJupyterNotebook
最後は、jsmodel.zip というファイルがダウンロードできます。
3.TensorFlow.js を使ったアプリを開発します。
作ったアプリはここで動作を確認できます
https://sasaco.github.io/BoxAI本記事では、Tensorflow.jsポイントだけ説明します。
本アプリは Angular7 を使っています。
変換したモデル(model.json) を asset フォルダに置きます。
アクセス(読み書き)できるフォルダは asset フォルダなので 変換したモデル(model.json) を asset フォルダに置きます。
@tensorflow/tfjsモジュールをプロジェクトに追加します
ターミナルで下記のコマンドを実行
npm install @tensorflow/tfjs --saveこれで、package.json に 追加されます
ファイルメニューの[計算]をクリックすると AI が予測を開始します。
この処理を
src\app\components\menu\menu.component.ts
に書いています@tensorflow/tfjs をインポートする
import * as tf from '@tensorflow/tfjs';モデルを読み込む
const MODEL_PATH = 'assets/jsmodel/model.json'; const model = await tf.loadLayersModel(MODEL_PATH);インプットされているデータを取得する
const data = this.input.getInputArray();正規化処理
let data_normal = []; const maxValue = [10, 6, 4, 2, 2, 2, 2, 14.117, 18, 11.25, 11.95, 7.57, 7.57, 6.9, 7.57 , 6.606, 93.47583, 700, 700, 1200, 1200]; const minValue = [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 30.00833, 0, 0, 0, 0]; for (let i = 0; i < data.length; i++){ data_normal.push((data[i] - minValue[i]) / (maxValue[i] - minValue[i])); }インプットされているデータをテンソルに変換する
const inputs = tf.tensor(data_normal).reshape([1, data_normal.length]);AI に推論させる
const output = model.predict(inputs) as any; let predictions_normal = Array.from(output.dataSync());答え(predictions) は正規化を元に戻す
const predictions = []; const maxValue1 = [2000, 1900, 1900, 1100, 600]; const minValue1 = [ 130, 130, 130, 0, 0]; for (let i = 0; i < predictions_normal.length; i++){ const a: number = this.input.toNumber(predictions_normal[i]); predictions.push((maxValue1[i] - minValue1[i]) * a + minValue1[i]); }推論させたデータを表示する
this.input.loadResultData(predictions);ソースコードはここにあります
https://github.com/sasaco/BoxAI
- 投稿日:2020-05-14T17:48:03+09:00
ラムダ式とMakefileマクロ
Makefile のマクロでラムダ式っぽいことができることに気付いたのでメモしておきます。
ループ
Node.js でカレントディレクトリのファイルを列挙する例です。
test1.jsconst fs = require("fs"); for (let f of fs.readdirSync(".")) console.log(f);これと同じことを Makefile で書きます。
test1.mkall: for f in ./*; do echo $$f; done※ Makefile の変数と区別するため、
$
を$$
にエスケープする必要があります。ラムダ式とマクロ
Node.js を
forEach
で書き直します。test2.jsconst fs = require("fs"); fs.readdirSync(".").forEach(f => console.log(f));これと同じようなことを Makefile のマクロで書きます。
test2.mkdefine forEach for $1 in $2; do $3; done endef all: $(call forEach,f,./*,echo $$f)実行結果$ make -f test2.mk for f in ./*; do echo $f; done ./test1.js ./test1.mk (略)※
@
で抑制していないためマクロの展開結果が確認できます。ただのループなのであまり嬉しさはありませんが、もう少し複雑な処理に応用すると便利かもしれません。
なお、JavaScript の
forEach
はコールバックに引数を3つ渡す仕様のため、ポイントフリースタイルで書くと実行結果が変わります。test2a.jsconst fs = require("fs"); fs.readdirSync(".").forEach(console.log);実行結果test1.js 0 [ 'test1.js', 'test1.mk', (略) ] test1.mk 1 [ 'test1.js', 'test1.mk', (略) ] (略)フィルター
Node.js の API ではワイルドカードが使えないため、フィルターを挟む必要があります。
test3.jsconst fs = require("fs"); fs.readdirSync(".").filter(f => f.endsWith(".js")).forEach(f => console.log(f));Makefile は中に書いているのはシェルのコマンドなのでワイルドカードが使えますが、敢えてフィルターを書いてみます。
test3.mkdefine forEach for $1 in $2; do $3; done endef define filter_ if $1; then $2; fi endef define endsWith [ "`echo $1 | sed 's/.*$2$$/ok/'`" = "ok" ] endef all: $(call forEach,f,./*,$(call filter_,$(call endsWith,$$f,\.js),echo $$f))※ 組み込み関数
filter
と名前が被るため、マクロはfilter_
にしています。実行結果$ make -f test3.mk for f in ./*; do if [ "`echo $f | sed 's/.*\.js$/ok/'`" = "ok" ]; then echo $f; fi; done ./test1.js (略)実用性はともかく、ちょっと面白いと思いました。
参考
マクロの使い方は以下の記事を参考にしました。
- 投稿日:2020-05-14T16:21:03+09:00
ミライシードの答えを開示するやつ
すること
ミライシードっていうベネッセが学校に無料開放しているやつを改造してみた
具体的には,ドリルパークの国語以外で答えが見られるようになる.Tampermonkeyの導入
面倒くさいので下の記事を参照してください
http://kbtools.web.fc2.com/gm_install.htm
※古いですがChrome以外のブラウザも乗っているのでわかりやすいですコード
// ==UserScript== // @name miraiseed open the answer // @namespace http://tampermonkey.net/ // @version 0.4 // @description try to take over the world! // @author Tom1022 // @match https://miraiseed.benesse.ne.jp/seed/*/drill // @match https://miraiseed.benesse.ne.jp/seed/*/drillResume // @match https://miraiseed.benesse.ne.jp/seed/*/restart // @grant none // ==/UserScript== for (let i = 0; i < $('div.main_cont')[0].children[0].children[0].children.length - 2; i++) { toggleExpound(i); }解説
2~5行目はこのコードの説明的なやつ
6~8行目は特定のページで動くようにする設定
for文のところで問題数を取り出す
toggleExpound(i);
のところでcssのやつの関数を呼び出す.リンク
https://greasyfork.org/ja/scripts/403275-miraiseed-open-the-answer
- 投稿日:2020-05-14T15:55:29+09:00
CSSローダー
この記事が気に入ったら、他の例をチェックしてください。フロントエンド開発者にとって最高のCSSローダー
「パンケーキ作り」ローダー
See the Pen 'Making pancake' loader by Pawel (@pawelqcm) on CodePen.
純粋なCSSブックローダー
See the Pen Pure CSS Book Loader by Aaron Iker (@aaroniker) on CodePen.
CSS階段ローダー
See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.
CSSローダー
See the Pen Loaders by Aaron Iker (@aaroniker) on CodePen.
CSSローダー
See the Pen CSS Loaders by Rosa (@RRoberts) on CodePen.
この記事が気に入ったら、他の例をチェックしてください。フロントエンド開発者にとって最高のCSSローダー
- 投稿日:2020-05-14T15:19:48+09:00
『TECH CAMP』2ヶ月通ってできるようになったこと
はじめに
TECH CAMPに通って2ヶ月でできるようになったことをなんとなくまとめてみようと思います!
1
言語としてはRubyとjsフレームワークとライブラリでRailsとjqueryを使えばクオリティは低いがtwitter、インスタ、メルカリのようなwebサイトは作れるようになる(本物には遠く及ばない)
2
プログラミング学習サイトpaizaのBランク問題(選りすぐりの簡単な物)が2,3問解けるようになる。
文字列を複数形にみたいな問題はとっっても簡単なのでBランクまであげたい方にはおすすめです。3
webサイトの模写だったらできるようになる(もちろんクオリティは低い)
だが、デザインのセンスが身につくわけではないので個人アプリを1からデザインしてUIに優れたサイトを作るのは厳しい。デザインの才能が高い方は例外です。まーでもほとんどの方が自分で「これはいい!!最高!!」っていうUIを備えたサイトを作るのは厳しいと思います。
4
実装方法がネット上に調べて出てくるものであればある程度マネができるようになる。(簡単なゲームなども)
まとめ
大前提としてプログラミングスクールに通ったからといってプログラマーの実務で使うような技術はつかない。
スクレイピングやクローラーの技術は全くつかないしテストコードすらまともに書けないのでこのままではプログラマーとは到底言えない。
答えに近いものがネット上にない場合は自分じゃ作れない。
0から1を作るなんて言えるほど技術はない。
僕自身プログラミングスクールに通えばもっと実践的な技術がつくと絵空事を浮かべてましたが実際短期間で得れる技術なんてこんなもんです。むしろすごく成長させてくれたと思います
僕は燃えています。自分の未知の世界ってすごい楽しい。今はペーペーだけど5年後、10年後に優秀なプログラマーになれるようにプログラムと日々遊んで行こうと思います。
OSSにプルリクエスト出してマージされる日がきたらいいな
その前に英語読めるようにならないとまずいか笑最後に
TECH CAMPがダメって言いたいわけじゃないです!チーム開発や勉強に励みやすい環境(一週間ちょっとくらいしか行ってないが笑)そして学習に一番大切な「きっかけ」を与えてくれる最高のスクールです!!!!
それを踏まえた上でそんなに素晴らしいスクールに通っても自分の思い浮かぶキラキラエンジニアになれるわけではないよというのを伝えたかったです!
キャラでもなくこんな記事書くようになるなんてプログラミングめっちゃ好きなんだなって感じて嬉しいですね
僕の友達がこんな記事見たらめちゃめちゃ笑われるんだろうな笑こんなくだらない記事を最後までご閲覧いただきありがとうございました
- 投稿日:2020-05-14T15:01:57+09:00
anime.js スムーススクロール 実装方法
はじめに
初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。実装方法
anime//$target = document.querySelector(TARGET); scroll($target) { const $window = window.document.scrollingElement || window.document.body || window.document.documentElement; anime({ targets: { scroll: $window.scrollTop }, scroll: $target.offsetTop, duration: 500, easing: 'easeInOutQuart', update: (a) => { $window.scrollTop = a.animations[0].currentValue; } }); }velocity//$target = document.querySelector(TARGET); scroll($target) { velocity($target, 'scroll'); }終わりに
他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。
- 投稿日:2020-05-14T15:01:57+09:00
anime.js アンカーリンク 実装方法
はじめに
初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。実装方法
anime//$target = document.querySelector(TARGET); scroll($target) { const $window = window.document.scrollingElement || window.document.body || window.document.documentElement; anime({ targets: { scroll: $window.scrollTop }, scroll: $target.offsetTop, duration: 500, easing: 'easeInOutQuart', update: (a) => { $window.scrollTop = a.animations[0].currentValue; } }); }velocity//$target = document.querySelector(TARGET); scroll($target) { velocity($target, 'scroll'); }終わりに
他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。
- 投稿日:2020-05-14T14:51:11+09:00
[JavaScript][jQuery]簡単なハンバーガーメニュー(ドロワー)
はじめに
本記事ではjQueryを使用して、スマートフォン向けサイトなどで見る機会が多い「ハンバーガーメニュー」を作っていきます。
ハンバーガーメニューとは以下の場合、右上に設置されている物です。
今回は以下のような簡単な仕様で作成します。
- jQueryを使用
- 普段メニューは非表示
- メニュー表示ボタンにはimage画像を使用
- 押すと右側からメニューがスライドして表示
- 表示速度は0.3s
表示の仕組み
- 普段はメニューを画面の右外に設置し、視覚的に隠しておく
- 表示ボタンが押されると画面全体が左にスライドし、右外に位置していたメニューが画面内に移動して視覚化される
編集するファイル
- index.html
- style.css
以上のみです。なお今回は分かりやすくするためjQueryの記述はindex.htmlにしていきます。
CSSの内容については、基本的に割愛させていただきます。
また、メニューボタンのviewに関しては画像を使用しています。viewの作成
index.html<body> <div id="wrapper"> <header> <div class="container"> <div class="title-block"> <h1>Sample ハンバーガー</h1> <h2>右にハンバーガーメニューを設置</h2> </div> <div class="hamburger" id="open_nav"> <img src="hamburger.png" alt=""> <!-- メニュー表示ボタン --> </div> </div> </header> <main> <div class="container"> <section> <div class="content"> <h1>Qiita用</h1> <p>ハンバーガーメニュー<br> よくスマートフォン用サイトで使われていますが、<br> 利便性はもちろんのこと、なによりオシャレですよね</p> </div> </section> </div> </main> </div> <nav id="nav"> <!-- 表示されるメニュー --> <ul> <li><a href="#">Home</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </body>htmlに関しては、今回詳しく説明しませんが以下がメニューを表示するためのボタンで
index.html<div class="hamburger" id="open_nav"> <img src="hamburger.png" alt=""> </div>以下が、右側から表示されるメニューの内容です
index.html<nav id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav>おそらく、このような表示になっているかと思います。
左側に表示されている物が、今回表示するメニューです。
普段は隠れていて、メニュー表示ボタンに対応して表示されるものですが、現段階では常に表示されていますね。
ちなみに、今のCSSはこのようになっています。style.csspadding: 24px 24px 0 24px; background: gray; color: white; width: 270px; height: 100%; position: fixed; top: 0;色などは、自由に変更してください。
このCSSを編集して、メニューを隠します。styll.cssを編集してメニューを隠す
style.csspadding: 24px 24px 0 24px; background: gray; color: white; width: 270px; height: 100%; position: fixed; top: 0; /* メニューの幅(width)と同じ数値を指定 */ right: -270px;これで、メニューは画面外に位置するため、視覚的に隠れたかと思います。
次に、メニューを表示させるためのCSSも追記していきます。style.css.show { transform: translate3d(-270px, 0, 0); }showクラスを持つ要素を、左にスライドさせるための記述ができました。
あとは、表示ボタンが押されると、サイトのメイン部分である#wrapper と #nav にshowクラスが付与されるようJavaScriptを記述していきます。JavaScriptの記述
index.html<script src="../../_common/scripts/jquery-3.4.1.min.js"></script> <script> 'use strict' $(document).ready(function () { // メニュー表示ボタンが押されると発火します // $('#open_nav').on('click', function () { // #wrapperと#navを取得し、showクラスを付与、または剥奪します // $('#wrapper, #nav').toggleClass('show'); }); }); </script>以上で、画面の右外に位置してしたメニューが表示されるようになったかと、思います。
これだけでも使用できるのですが、好みに合わせて以下のようにするのも、いいかと思います。style.css#wrapper, #nav { transition: transform 0.3s; }表示のされ方が、右側からスライドして表示されるようになったかと思います。
あくまで好みの問題になりますので、ご自由に変更していただければと思います。おわり
これで、スマートフォンサイトでよく見る、通称「ハンバーガーメニュー」が完成しました。
実装方法は、今回ご紹介した方法以外のものもありますので、色々と試してみると面白いかもしれません。
最後まで読んでいただき、ありがとうございました。
- 投稿日:2020-05-14T14:40:02+09:00
1分でDenoを触る
Deno v1.0が出たので、とりあえず触りたいという方向けに。
起動
Docker化してくれてる方がいるのでさらっと起動します。
docker run -it --entrypoint "bash" hayd/ubuntu-denoサンプルを動かす
公式のサンプルを動かします。
deno run https://deno.land/std/examples/welcome.tsアウトプットDownload https://deno.land/std/examples/welcome.ts Warning Implicitly using master branch https://deno.land/std/examples/welcome.ts Compile https://deno.land/std/examples/welcome.ts Welcome to Deno ?さらっとTypeScriptが走り恐竜くんが現れましたね。
あとは色々触ってみましょう。参考
環境
% sw_vers ProductName: Mac OS X ProductVersion: 10.15.4 BuildVersion: 19E287 % docker --version Docker version 19.03.8, build afacb8b
- 投稿日:2020-05-14T14:23:15+09:00
PHP - array_pushで躓いたこと
環境
ARM(といってもIntel SoC)
Linux(intel SoC向けディストリビューションPoky)
サーバはlighttpd
PHPバージョンは5.6.38何が問題だったか
早速本題
ajaxからPHPをPOSTしてデータをやり取りしていました。
以下のコードではエラーが出てしまい、POSTデータが取れませんでした。NG_code$arr = array(); : : array_push($arr, $_POST['data1'], $_POST['data2'], $_POST['data3'], );エラー内容は、鍵括弧の終わり「 )」がダメだよのエラー
PHPって最後にカンマ付けても問題ないはず
だがしかし、最後のカンマが問題でした。
OK_code$arr = array(); : : array_push($arr, $_POST['data1'], $_POST['data2'], $_POST['data3']);
- 投稿日:2020-05-14T12:38:46+09:00
graphql/dataloaderを使うときに足りないデータにnullを入れたり、順番を調整するのに使える
https://github.com/graphql/dataloader#batch-function
を応用すればいいだけ。
自分のjavascriptのレベルが低いときはスルーしてたconst users = [{ id:3, name: "jone" },{ id:6, name: "paul" },{ id:8, name: "anna" }]; const userIds =[6, 3, 8]; const mapped = userIds.map( userid => users.find(e => e.id === userid) || null ); console.log(mapped); /* [ { id: 6, name: 'paul' }, { id: 3, name: 'jone' }, { id: 8, name: 'anna' } ] */
- 投稿日:2020-05-14T11:37:20+09:00
【Node.js】JavaScriptで組み合わせ,順列を列挙する (npmモジュールあり)
JSで組み合わせと順列を列挙する標準メソッドはない
Rubyだと
index.rbarray = [1,3,5]; #組み合わせ p array.combination(2).to_a # => [[1, 3], [1, 5], [3, 5]] #順列 p array.permutation(2).to_a # => [[1, 3], [1, 5], [3, 1], [3, 5], [5, 1], [5, 3]]こんな感じで簡単に組み合わせ、順列の列挙ができるのにJavaScriptだとこれがない。Mathオブジェクトのメソッドにあってもいい気がするんだけど。。。
とにかくこのままだとpaizaで組み合わせ、順列の問題が出てくるたびにrubyで一から書き直す羽目になるので、JavaScriptで順列と組み合わせを列挙するコードを考え、ついでにrubyのコードより分かりやすく記述できるnpmモジュールも作りました。
コード
これから載せるのは実際にモジュールを作る際に書いたコードなのでしっかり動くはずです。
組み合わせ
//0~n-1の数字をk個ずつの組み合わせで列挙する関数 function rec(n, k) { if (k === 0) return [[]]; const result = []; for (let i = 0; i < n; i++) { if (n - i - 1 < k - 1) continue; rec(n - i - 1, k - 1).forEach((js) => { result.push([i, ...js.map((j) => j + i + 1)]); }); } return result; } //rec関数を使って返ってきた配列をarrayのインデックス番号と見立てて配列の組み合わせを作る function com(array, num) { const last = rec(array.length, num); const result = []; for (let ite = 0; ite < last.length; ite++) { const answer = []; for (let fin = 0; fin < last[ite].length; fin++) { answer.push(array[last[ite][fin]]); } result.push(answer); } return result; }コード自体はそこまで長くないが、rec関数ではfor文をfor文で繰り返す回数が動的(語彙力)なので再帰関数を使うのがミソ。これに関しては「組み合わせ 列挙 javascript」でググれば上の方に出てくる記事(こんなのとか)にもあるので詳しくそちらを見ることをお勧めします。正直僕もあまり理解していません。
順列
//順列のコードは分からなかったので他サイト(後述)のほぼコピペ const per = (array, num) => { const result = []; if (array.length < num) { return []; } if (num === 1) { for (let i = 0; i < array.length; i++) { result[i] = [array[i]]; } } else { for (let i = 0; i < array.length; i++) { const parts = array.slice(0); parts.splice(i, 1)[0]; const row = per(parts, num - 1); for (let j = 0; j < row.length; j++) { result.push([array[i]].concat(row[j])); } } } return result; };「組み合わせのrec関数を少し変えれば順列も作れるだろ」と鷹を括っていたものの、実際考えてみると全く思い浮かばず、結局他サイトのコードを少し変えただけという情けない結果に終わりました。このサイトの組み合わせのコードを使えば上のrec関数のくだりも必要ないのですが、流石にそれはあかん。ちなみにこの関数も再帰してますね。
作ったnpmモジュール
このコードを使ってモジュールを作ったので、開発の際に組み合わせ、順列の列挙がしたいという方は是非使ってみてください。
percom
permutation(順列)の"per"とcombination(組み合わせ)の"com"をくっつけた安直な命名。
npmページ
GitHub環境設定は簡単。
こうして
$ npm i percomこうするだけ
const percom = require('percom');組み合わせ
組み合わせを列挙したければ
const array = [1,2,3]//もちろん文字列の配列でも可 const combinations = percom.com(array, 2); //combinations = [ [ "A", "B" ], [ "A, "C ], [ "B", "C" ] ]順列
順列を列挙したければ
const array = [1,2,3]//もちろん文字列の配列でも可 const permutations = percom.per(array, 2); //permutations = [ [ 'A', 'B' ], [ 'A', 'C' ], [ 'B', 'A' ], [ 'B', 'C' ], [ 'C', 'A' ], [ 'C', 'B' ] ]percom.com()もpercom.per()も第一引数に対象の配列、第二引数に列挙する組み合わせの要素数を入力すれば上手くいきます。
一から自分で作ったわけではありませんが割と苦労して作ったモジュールなので是非使ってください。ちなみにpaizaとかAtcoderではどのみちモジュールは使えないのでこのコードをコピペして使ってください。
- 投稿日:2020-05-14T11:29:03+09:00
React Hooks: 子コンポーネントから親の状態をレンダー時に変えたら叱られた ー Warning: Cannot update a component while rendering a different component
ネストした子コンポーネントから親の状態を変えるReactアプリケーションで、少し試行錯誤したことを書きとめます。経緯の説明からはじめますので、タイトルの警告(Warning)の意味が知りたいという方は最後の「レンダーが済んでから親の状態を変える」をお読みください。
配列データから動的にドロップダウンメニューとコンポーネントをつくる
サンプルとしてつぎのコードで、ドロップダウンメニューと子のコンポーネントをつくります。同じ配列データ(
selections
)を用いて、それぞれ動的にテンプレートを組み立てました。3つのコンポーネントはメニューで切り替わり、表示されるのはつねにひとつだけです。src/App.jsimport React, { useState } from 'react'; function App() { const selections = [ {name: 'Home', component: Home}, {name: 'Products', component: Products}, {name: 'About', component: About}, ]; const [selection, setSelection] = useState(selections[0].name); return ( <div className="App"> <h1>Selection</h1> <div> <select onChange={(event) => setSelection(event.target.value)}> {selections.map((selection, id) => ( <option key={id}>{selection.name}</option> ))} </select> <div> {selections.map((_selection, id) => { const Component = _selection.component; return ( _selection.name === selection ? <Component name={_selection.name} key={id} /> : null ); })} </div> </div> </div> ); } const Home = ({ name }) => (<h2>{name}</h2>); const Products = ({ name }) => (<h2>{name}</h2>); const About = ({ name }) => (<h2>{name}</h2>); export default App;ひとつポイントとなるのは、以下に抜き書きした子コンポーネントのテンプレートをつくるコードです。配列からデータ(
_selection
)を取り出して、前述のとおりメニューの選択(selection
)と一致するコンポーネントを表示しました。このとき、コンポーネントをオブジェクトのドット参照(
_selection.component
)で定めるのは適切ではありません。クラスと同じアッパーキャメルケースが推奨されているからです(「[翻訳] Airbnb React/JSX Style Guide」「命名規則」参照)。そのため一旦変数(Component
)に取り出しました。src/App.js{selections.map((_selection, id) => { const Component = _selection.component; return ( _selection.name === selection ? <Component name={_selection.name} key={id} /> : null ); })}これで、プルダウンメニューによりコンポーネントが切り替えられるようになりました(図001)。
図001■プルダウンメニューでコンポーネントが切り替わる
コンポーネントのテキストカラーを変える
プルダウンメニューでコンポーネントを切り替えたとき、ルートコンポーネント(
App
)のテキスト(<h1>
要素)の色を変えます。この簡単なサンプルでは、メニューを選んだイベント(onChange
)でそのカラー値を変数(color
)にとり、テキストカラーに反映させればよいでしょう。src/App.jsfunction App() { const selections = [ {name: 'Home', component: Home, color: 'blue'}, {name: 'Products', component: Products, color: 'green'}, {name: 'About', component: About, color: 'red'}, ]; const [color, setColor] = useState(selections[0].color); return ( <div className="App"> {/* <h1>Selection</h1> */} <h1 style={{color: color}}>Selection</h1> <div> {/* <select onChange={(event) => setSelection(event.target.value)}> */} <select onChange={(event) => { const name = event.target.value; setSelection(name); setColor(selections.find((_selection) => _selection.name === name).color); }}> </select> </div> </div> ); }これでメニューを選ぶと、コンポーネントだけでなく、テキストの色も変わります(図002)。
図002■メニューを選ぶとテキストの色が変わる
子コンポーネントから親の状態を変える
子コンポーネントの切り替えが、メニュー以外からも行われるとしたらどうでしょう。たとえば、子コンポーネントの中に他のコンポーネントに移動するボタンがあるような場合です。それでも、ボタンクリックしたときの切り替え処理そのものは、親が一手に握るという対応が考えられます(多くの場合そうでしょう)。
ところが、本稿を書くきっかけとなったアプリケーションでは、子コンポーネントがルーターで遷移しました。つまり、ブラウザのナビゲーション(たとえば戻るボタン)でも、コンポーネントが切り替わってしまうのです。そこで、子コンポーネントの側から、自分が表示されたことを親に伝えようと考えたわけです。
つぎのように、子コンポーネントにそれぞれのカラー値と親の状態設定関数(
setColor
)を渡し、子の関数本体で設定をさせます。これで一応、コンポーネントの切り替えに応じて、親のテキストカラーが変わるようにはなりました。src/App.jsfunction App() { return ( <div className="App"> <div> {/* <select onChange={(event) => { }}> */} <select onChange={(event) => setSelection(event.target.value)}> {selections.map((selection, id) => ( <option key={id}>{selection.name}</option> ))} </select> <div> {selections.map((_selection, id) => { const Component = _selection.component; return ( _selection.name === selection ? // <Component name={_selection.name} key={id} /> : <Component color={_selection.color} setColor={setColor} /> : null ); })} </div> </div> </div> ); } // const Home = ({ name }) => (<h2>{name}</h2>); const Home = ({ name, color, setColor }) => { setColor(color); return (<h2>{name}</h2>) }; // const Products = ({ name }) => (<h2>{name}</h2>); const Products = ({ name, color, setColor }) => { setColor(color); return (<h2>{name}</h2>) }; // const About = ({ name }) => (<h2>{name}</h2>); const About = ({ name, color, setColor }) => { setColor(color); return (<h2>{name}</h2>) };レンダーが済んでから親の状態を変える
メニューの切り替えを試してみると、ブラウザコンソールにはたとえばつぎのような警告が示されます。どうも、子コンポーネントから親の状態設定関数を呼び出すことが叱られているようです。
Warning: Cannot update a component (
App
) while rendering a different component (Products
). To locate the bad setState() call insideProducts
, follow the stack trace as described in https://fb.me/setstate-in-renderReactコンポーネントは、他のコンポーネントがレンダー中には副作用、つまりその状態を変えることが許されないのです。「React v16.13.0」の「Warnings for some updates during render」にはつぎのように説明されています(訳: 筆者)。
It is supported to call
setState
during render, but only for the same component. If you callsetState
during a render on a different component, you will now see a warning:レンダー中に状態設定関数(
setState
)を呼び出すことがサポートされるのは、そのコンポーネント自身へのものにかぎられます。他のコンポーネントの状態設定関数を、そのコンポーネントがレンダーされているときに呼び出せば、つぎのような警告が示されるでしょう。Warning: Cannot update a component from inside the function body of a different component.ではどうするかというと、レンダーが済んでから状態設定関数を呼び出せばよいのです。解説はつぎのように続きます。
This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the
setState
call intouseEffect
.この警告により、意図しない状態変更から生じるアプリケーションのバグが見つけやすくなります。あえて他のコンポーネントの状態を変えて、そのレンダー結果に反映したいというまれな場合は、状態設定関数の呼び出しを
useEffect
でラップしてください。あえて親の状態変更をレンダーに反映させたい今回の「まれな場合」は、つぎのように子コンポーネントから
useEffect()
の副作用関数(第1引数)で親の状態を変えればよいということです。src/App.js// import React, { useState } from 'react'; import React, { useState, useEffect } from 'react'; const Home = ({ name, color, setColor }) => { // setColor(color); useEffect( () => setColor(color), [color, setColor] ); return (<h2>{name}</h2>) }; const Products = ({ name, color, setColor }) => { // setColor(color); useEffect( () => setColor(color), [color, setColor] ); return (<h2>{name}</h2>) }; const About = ({ name, color, setColor }) => { // setColor(color); useEffect( () => setColor(color), [color, setColor] ); return (<h2>{name}</h2>) };モジュール
react:src/App.js
の記述全体を、つぎのコード001にまとめます。併せて、実際のサンプルReactアプリケーションをCodeSandboxに公開しました。コード001■子コンポーネントから親の状態を変える
src/App.jsimport React, { useState, useEffect } from 'react'; function App() { const selections = [ {name: 'Home', component: Home, color: 'blue'}, {name: 'Products', component: Products, color: 'green'}, {name: 'About', component: About, color: 'red'}, ]; const [selection, setSelection] = useState(selections[0].name); const [color, setColor] = useState(selections[0].color); return ( <div className="App"> <h1 style={{color: color}}>Selection</h1> <div> <select onChange={(event) => setSelection(event.target.value)}> {selections.map((selection, id) => ( <option key={id}>{selection.name}</option> ))} </select> <div> {selections.map((_selection, id) => { const Component = _selection.component; return ( _selection.name === selection ? <Component name={_selection.name} key={id} color={_selection.color} setColor={setColor} /> : null ); })} </div> </div> </div> ); } const Home = ({ name, color, setColor }) =>{ useEffect( () => setColor(color), [color, setColor] ); return (<h2>{name}</h2>) }; const Products = ({ name, color, setColor }) =>{ useEffect( () => setColor(color), [color, setColor] ); return (<h2>{name}</h2>) }; const About = ({ name, color, setColor }) =>{ useEffect( () => setColor(color), [color, setColor] ); return (<h2>{name}</h2>) }; export default App;
- 投稿日:2020-05-14T10:42:19+09:00
【初級編】JavaScript if文について
? if文
まずJavaScriptのif文の基本形を知りましょう♪
if(条件){ 条件が真なら実行 }ifとは日本語で もし という訳をされます。
"もし条件が正しければ実行する"という感じの認識でいていただければOKです。では試しに、もしheightが180なら、身長は180cmですという文章が出力されるコードを書いてみます。
const height = 180; if (height == 180){ console.log('身長は'+ height + 'cmです。'); }これで、コンソール上には、身長は180cmです。と出力されると思います。
楽勝ですね!? 【余談というか補足】
ちょっと話はそれますが、上記はあまり推奨されない記入例となっています。
どの部分かわかりますか?
正解は条件の部分にあります。
== ←この部分ですね。解説していきます。const height = 180; if (height == 180){ console.log('身長は'+ height + 'cmです。'); } // == この記載は、文字と数値を識別せずに値が一致していれば。tureを返します。どういうことかと言うと const height = '180'; //string型 このように記載してもtureを返してしまうのです。 // 非常に気づきにくいバグを仕込んでしまうことがあるので、このように書くことは推奨されていません //ではどうしたら良いのでしょうか? if(height === 180){ //省略 このように,=== とすることで 型と値が一致したらtureを返すといったようになります。 //つまり、上記の条件だったとすると const height = 180 ; //こっちなら型と値が一致しているので、console.logに出力される const height = '180' //条件はnumber型の180を求めるのに対して、値はstring型の180となり、条件に反しているのでプログラムは実行されません。ですので、基本的に条件が一致したらとする時は === このように書くと良いかと思います。
? 条件分岐【else,else if ,if文のネスト】
これまでは、条件が一致したら出力するというようなコードを書きましたが、
一致したら条件1を出力、一致しなければ条件2を出力といったような書き方をするにはどうすればよいでしょうか?
こちらは elseという物を使います。基本形 if(条件){ //tureだったときの処理 }else{ false(偽)だったら実行 } //このように、if文のあとにelseと書いて値が違ったら実行するコードをかけばいいです。 const height = 180; if (height === 180){ console.log('身長は'+ height + 'cmです。'); }else{ //条件が一致してなかったら。 console.log('身長は'+height+'cmではありません'); //この処理を行う。 }このような形になります。elseはそうでなければこうする!みたいなイメージを持つと良いかもしれません。
複数の条件をつけたい場合【else if】
コレまでは真か偽かの2択でしたが、この条件、あるいはこの条件、そうでなければこの条件のように何パターンか条件を用意したいことが出てくると思います。
そんなときはelse ifを使用します。感覚としては、あるいは〜という感じでOKかと思います。
実際にコードを書いてみましょう。基本形 if(条件){ //tureだったときの処理 }else if (新しい条件){ //新しい条件がtureだったら実行 } else{ //false だったら実行 } 実際にコードで見てみましょう。 const coler = 'red' if (color === 'red'){ console.log('赤りんごです'); }else if (color === 'green'){ console.log('青りんごです'); }else{ console.log('やばいりんごです'); }上記のコードであれば、redと打ち込まれれば、赤りんごです、greenと打ち込まれれば 青りんごですと返し。
その他は やばいりんごです といったように値が帰ってきます。
非常に簡単なコードですね。if文のネスト
また、if文の中にif文を作ることも出来ます。それをネストといいます。
コードで書くとこのようになります。const color = 'red' const size = 'small' if (color === 'red'){ if( size ==='small'){ console.log('そりゃイチゴです。'); } }2つの条件が一致したらそりゃイチゴです と出力されます。
しかし、このネストはどんどん重ねていくたびに条件が複雑になり、読み手がわかりにくいコードになっていくので
できるだけシンプルに書くことが推奨されます。
またelse ifも同様に増えれば増えるだけ分かりにくくなりますので出来るだけシンプルにif文で書くとよいです。長くなるので、パート1はこの辺で終了したいと思います!
? 【まとめ】
- if文は 条件が 真 なら実行
- 条件外なら else 条件を追加するなら else if
- 一致の条件をつけるなら == ではなく === で書くと型も判別できる!
- if文はネストできる!
? 【次回予告】
if文パート2になります!
記事を見ていただいてありがとうございます。
ご指摘有りましたら編集リクエストまでドシドシお願いいたします!
- 投稿日:2020-05-14T10:09:27+09:00
Glitchを使って24時間動き続けるDiscordBotを作る
前回の記事でBotをローカルで作成、起動する方法を紹介しましたが、あの方法だとパソコンを常に起動しておかないとBotがオフラインになってしまします。
なので今回はGlitchというサイトを使ってBotを起動し、常時起動にする方法を書いていきます。必要なもの
- BotのTOKEN
- Glitchのアカウント
- uptimerobotのアカウント
Botのトークンに関しては、前回の記事のTOKENの取得を見てください。
Glitch
https://glitch.com/
へ飛び、右上にあるSign in
を押してください。
アカウントを持っている場合はサインインしてください。
アカウントを持っていない人は、したのCreate an account
を押し、アカウントを作成し、サインインしてください。サインイン出来たら、こちらに飛んでください
https://glitch.com/~discordbot-template-d-js
下にスクロールしていくとRemix Your Own
というのがあるので、そこを押しましょう。そうすると、編集画面に飛ぶかと思います。
この時点でコードはほぼ出来上がっているのでコードを書く必要はありません。
そしたら、.envファイルにあるDISCORD_BOT_TOKEN
にTOKENを入れましょう。
これでもう起動はするはずです。
しかしglitchの使用上、5分間程度ページを開いていないとアプリケーションが止まってしまいます。
そこで使うのがUptime robotです!
編集ページの上にあるShowを押し、In a New Windowをおして開いた時に飛ぶページのURLをコピーしておいてください。uptimerobotの設定
uptimerobotのページへ飛びましょう(https://uptimerobot.com/)
アカウントををっている人はLogin、もていない人はSign-upからアカウントを作ってください。
(アカウントを作成する際、有料版か無料版か求められますが、無料版の方で問題ないのでそちらを選択しましょう)
ログインできればダッシュボードに進むはずです。
そうしたら、+ Add New Monitor
を押しましょう。
そうするとこんな画面が出てくるので設定をします
- Monitor typeは HTTP(s)
- 名前はなんでもいいです
- URLは先ほどコピーしたURLを入れましょう
- 下にあるメールアドレスを選択しましょう(アカウント登録の際に使ったアドレスが出ているはずです) これで終わり!
Create Monitor
を押しましょう。これで終わりです!
おわり
前回よりこちらの方が簡単な気がする...
読んでくださってありがとうございました!(もしかしたら抜けてるところとか間違えてるところがあるかもしれません。もしも間違えがあったらコメント等で指摘してください)
参考にしたページやサイトなど
https://glitch.com/~pumped-chopper
https://note.com/bami55/n/ncc3a68652697