- 1. 令和元年? JavaScript International Date フォーマットで和暦を表示させるには （再）
- 2. tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（cookie編）
- 3. TypeScript の何が役に立つのか？
- 4. Kindle蔵書一覧を取得する方法
- 5. 【Vue】オブジェクトを変更したい時どうするか？
- 6. 学習日記8日目(2020/6/27)
- 7. ぷよぷよプログラミング「上級コース」写経でどのくらいミスするのか
- 8. 【Vue】mixin / directives / filters / Vue Routerについてまとめてみたよ
- 9. Javascript: めっちゃ簡単なオープン・クローズドの原則(初級者向け)
- 10. nodejsを使ってウエブサーバーを作ろう – majidai
- 11. Slackを喋らせてリモートワークを賑やかにしよう:smiley:
- 12. 青空一行文庫ブックマークレット
- 13. Javascript: めっちゃ簡単な依存性逆転の原則(初級者向け)
- 14. nuxt.js vue-form-wizardフォームにsimple-vue-validatorバリデーションを実装してみました。
- 15. DBから取り出したデータを元に、星の数で評価する機能を実装する
- 16. IndexedDB + Vue CLI, markdown対応のtodoを作る
- 17. Yahoo!コンテンツジオコーダAPIを使って施設名から緯度経度を取得する
- 18. コンセプト | webpack
- 19. kintone縛りでURL監視システムを構築する
- 20. ツクールMVで小数ライブラリを使ってみた(Numeral.js) && メソッドの追加
令和元年? JavaScript International Date フォーマットで和暦を表示させるには （再）
*この記事は 平成最後の日、2019年4月31日に別のアカウントからポストしたものをこちらに移行した記事です。今更感があるかもしれないですが ECMA 402 について知るのは悪くないと思います〜。*
—
令和元年おめでとうございます ?さて、今回は新年号にふさわしく International Date format で和暦を表示する方法について書いていきたいと思います。
JavaScript `Intl.DateTimeFormat` オブジェクトを使えば、言語とローケルに特化した日付と時刻のフォーマットが可能になります。
[The ECMAScript Internationalization API](https://tc39.github.io/ecma402/)（国際標準化 API） は、日付と時刻そして貨幣の表示のローカライズを JavaScript で可能にするために作られたもので、2010 年に初版が発行されて現在は第６版が最新です。この API は最新のブラウザではすでにサポート済です。(参照 [Can I use](https://caniuse.c
tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（cookie編）
## 目的
– tusdは巨大ファイルを分割して送信し、中断してもレジュームが聞くオープンソース（MITライセンス）のサービスです。
– これまでhttpと、httpsでのXHR通信でうまくいった記事を書きました。
– [tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（http編）](https://qiita.com/Woodie/items/5eea441cad405c8c9437)
– [tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（https編）](https://qiita.com/Woodie/items/ff6c26d39eb3154d248c)
– 今回はtusdを起動するときに、cookieを受け取ってユーザ毎やセッション毎に必要な処理の仕組みを試しました。
– その備忘録です。## 環境
– CentOS7
– apache 2.4.41
– browser Firefox77 (MacOS)など
– tusd
TypeScript の何が役に立つのか？
TypeScript を使ってみて何が役に立つか考えてみたことを初心者向けに解説する。
TypeScript ではプログラマーが型を記述する。JavaScript では必要なかった型を記述することによって手間がかかるが、ビルドやエディターが型情報を使ったらプログラマーにとって**いろいろと役に立つ**。
型情報を使うと何が役に立つのか？それは TypeScript を使ってみないと**想像がつかない**ものだった。
# TypeScriptのインストール方法
[Node.js](https://nodejs.org/)をインストールすると**node**や**npm**が使えるようになる。
グローバルで typescript をインストールし`%APPDATA%\npm`にパスを通す。
“`shell
> npm -g install typescript
“`または`npm init`で package.json を作成してから typescript をその場所にインストールする。`.\node_modules\.bin`にパスを通す。
“`shell
> n
Kindle蔵書一覧を取得する方法
Kindleの蔵書が1万冊を超えてきて、そろそろ蔵書管理したくなり、
蔵書一覧を取得する方法を調べたので、まとめておく。## 概要
蔵書一覧の取得方法としては大きく2つあり、
[コンテンツと端末の管理](https://www.amazon.co.jp/mn/dcw/myx.html)ページからスクレイピングする方法と、
[Kindle Cloud Reader](https://read.amazon.co.jp/)がWeb SQL Databaseを使っているので、クライアント側のDBからそのまま取得する方法がある。
後者のほうが簡単なため、ここでは後者の方法について記載する。
（前者の方法が知りたい方は、[https://qiita.com/yshr1982/items/072e8b44d456f6d9358b](https://qiita.com/yshr1982/items/072e8b44d456f6d9358b)などを参考にしてください。)
## 取得方法
1. [Kindle Cloud Reader](https://read.amazon.co.jp/)にアクセ
【Vue】オブジェクトを変更したい時どうするか？
# Vueのオブジェクトの変更方法をまとめ
Vueの`data()`にあるオブジェクトについての話。取得は通常のJSのオブジェクトの操作と同様にキーを使えば問題なかったが、
追加と削除で嵌ったので備忘録として残しておく。以下、参考にしたページ
– [リアクティブの探求
](https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85)次のようなVueインスタンスの`data()`に`charObj`という空のオブジェクトがセットしてあるとする。
“`javascript
export default {
data () {
return {
charaObj: {}
}
}
}
“`## プロパティを追加する
プロパティを追加したい時、通常のJSのオブジェクト同様`obj.anyKey = anyVal`とやってしまいたくなるがこれだと
学習日記8日目(2020/6/27)
# 学習内容
– JavaScript基礎学習：Progateの学習コース全終了
JSの学習を終了してPHPやLaravelの学習に移っていきたいと思います。
# その他
– タイピング練習
– paizaのスキルチェックに挑戦参加しているサロンの方々がやっているのを目にし、気になったのでpaizaのスキルチェックやってみました。しかし、、**標準入力ってなんやねん！**という感じでそもそも入力値を変数等に代入できなくて積みました?
そんなこんなでfgets関数を使ったことがなかったので調べ、どうもfgets関数を繰り返し実行すれ入力を一行目から順に取り出せるらしいことがわかったので明日以降Cランクの問題にチャレンジしようと思います。今日はDランクの問題1問解いて終了です。
# 明日の予定
– UdemyでPHP＆Laravelの学習
ぷよぷよプログラミング「上級コース」写経でどのくらいミスするのか
“無料でぷよぷよを通してプログラミング学習できる「ぷよぷよプログラミング」が登場したので体験してみた”
https://gigazine.net/news/20200626-puyopuyo-programing/
これの上級コース 全コード写経をしました。
所要時間は2時間41分43秒です。javascriptは殆ど書いたことがありません。
1015行をとくに見直しをしない状態で、どのような写経ミスがあるか調べました。比較はWindowsのTortoiseGitに付属しているTortoiseGitMergeで行いました。空白とセミコロンは無視しています。
もとのコードもセミコロンついてたりついてなかったりします。
結果は10件のミスがありました。
# config.js (全33行)
## コンフィグの値が違う
数値が違います。
“`js
// 私
Config.playerDownSpeed = 15; // プレイ中の下キー押下時の落下スピード// オリジナル
Config.playerDownSpeed = 10; // プレイ中の下キー押下時の落
【Vue】mixin / directives / filters / Vue Routerについてまとめてみたよ
# Vueまとめ３(上級編)
こちらの記事は、Adnan Babakan 氏によりDev.to上で公開された『 Vue cheat sheet 3 』の邦訳版です（原著者から許可を得た上での公開です）
– 元記事：[Vue cheat sheet 3 (advanced)](https://dev.to/adnanbabakan/vue-cheat-sheet-1-194a)
原著をベースに説明の足りない部分は適宜、追記しています。
（追記・改変の許可は得ています。）—
DEV.toコミュニティの
Javascript: めっちゃ簡単なオープン・クローズドの原則(初級者向け)
最近、勉強会をする機会があったり、部下を育てるような話が出てきたのでSOLID原則についてまとめようと思いました。
これ、Javascriptばかり書いている人に伝えようと思っても、そもそもクラスつかってなかったり、インターフェースなんてないし、なんて人も多いので結構説明に困るんですよね。。。なので、Javascriptでの簡単な事例を通してSOLID原則を語るシリーズを書くことにしました。
今回は SOLID原則の 「O」 オープン・クローズドの原則（Open/closed principle）です。
————–
こんなオブジェクトでデータがまとめられています。
“`js
data = [
{ type: “header”, data: “必要なデータ” },
{ type: “modal”, data: “必要なデータ” },
{ type: “slider”, data: “必要なデータ” },
]
“`データには type が設定されていてそれぞれに応じた処理を実行する必要があります。
“`js
const createDO
nodejsを使ってウエブサーバーを作ろう – majidai
[](https://travis-ci.com/dakc/majidai)[](https://www.npmjs.com/package/majidai)[](https://github.com/dakc/majidai/blob/master/LICENSE)
# majidaiとは
majidaiとは、nodejs用のWebフレームワークです。
サードパーティーライブラリが使っていないため非常に軽いです。
データ量 < 50KB#### インストール
[nodejs](https://nodejs.org/en/dow
Slackを喋らせてリモートワークを賑やかにしよう:smiley:
皆さん、リモートワーク捗っていますか？この記事では、現在アクティブなSlackチャンネルの内容を発話させて物理オフィスの賑やかなイメージを取り戻すことができます。
# 使う技術の紹介
## Web Speech API
ブラウザ上で文字から音声を再生することができるAPIです。意外と多くのブラウザがサポートしていてびっくり。
– https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c
## Mutation Observer
DOM が変わったときに通知を受ける事ができる機能です。Slackのアクティブなチャンネルに新たな投稿があったのをフックするために使います。
– https://ja.javascript.info/mutation-observer
ちょっと手こずったのは、子孫の要素の変更を受け取るためには子の要素の変更を受け取らないといけないこと。つまり、`subtree:true` だけではダメで、`childList:true`も指定する必要がある。
# 発話させよう
この２つが揃ったあとは
– DOM
青空一行文庫ブックマークレット
青空文庫の作品を「一行にする」ブックマークレットです。岩下 智氏の作られた[一行文庫](https://onelinebook.com/)に触発されて作りました。人や環境によっては複数行より読みやすくなると思います。
“`
javascript: (() => { let text = ”; document.querySelectorAll(‘body > h1, body > h2, body > h3, .metadata, .main_text’).forEach(node => { text += node.innerHTML.replace(/<(\/?ruby|\/?rb|\/?rp|\/?rt)>/g, ‘___$1___’).replace(/<[^>]+>/g, ”).replace(/___([^_]+)___
Javascript: めっちゃ簡単な依存性逆転の原則(初級者向け)
最近、勉強会をする機会があったり、部下を育てるような話が出てきたのでSOLID原則についてまとめようと思いました。
これ、Javascriptばかり書いている人に伝えようと思っても、そもそもクラスつかってなかったり、インターフェースなんてないし、なんて人も多いので結構説明に困るんですよね。。。なので、javascriptでの簡単な事例を通してSOLID原則を語るシリーズを書くことにしました。
今回は SOLID原則の 「D」 依存性逆転の原則(dependency inversion principle)です。
———————
なんかDOMつくるメソッドがありました。
“`js
createHoge() {
// データ取得する
// … いろんな処理// DOM作る
// … いろんな処理// DOMをDocumentに加える
// … いろんな処理
}
“`なんか長いので分割しました。
分割した処理は再利用できるようにオブジェクトにまとめました。“`js
createHo
nuxt.js vue-form-wizardフォームにsimple-vue-validatorバリデーションを実装してみました。
#はじめに
以前作った“`vue-form-wizard“` ステップフォームにsimple-vue-validatorを追加してみました。
[以前作成したステップフォームはこちらです。](https://qiita.com/whw3312/items/7a70a374a32a8be55cee)普通inputに “`“` だけでもフロントのバリデーションは走らせることができますがやりたい実装としては下記のイメージのようにerrorMsgをinputの下に表示させようとしています。
“`Simple Vue Validator“`一番カンタンだったので[Simple Vue Validator](http://simple-vue-validator.m
DBから取り出したデータを元に、星の数で評価する機能を実装する
# はじめに
AmazonなどのECサイトで、商品に対して星をつけて商品の評価をしているのを、
見たことありませんか？「この商品は５つ星！これは３つ星！」のような。
アラビア数字で「これは何点」と表記されているよりも、すごくすごくわかりやすいですよね。
# 背景
筆者はWebフレームワークの勉強の課題として、
「読んだ技術書を評価してリストアップする」Webアプリケーションを製作中なのですが、
データベースに登録した評価カラムの数字を取り出して、その内容を星の個数として反映することを目指しました。・リスト
 があり、無料で利用することができますが、クレジットカードの登録が必要となり簡単に使用することが難しくなりました。
Yahoo の [コンテンツジオコーダ API](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/contentsgeocoder.html) は会員登録が必要なもののクレカの登録は不必要で簡単に利用できます。## 使い方
1. Yahoo! JAPAN ID を取得する。
2. [アプリケーションを登録](https://e.developer.yahoo.co.jp/register “registar”)する。
利用用途に合わせて登録し
コンセプト | webpack
https://webpack.js.org/concepts/ の日本語訳。
## コンセプト
webpack は、最新の JavaScript アプリケーションの為の静的モジュールバンドラーです。
webpack がアプリケーションを処理するとき、プロジェクトが必要とするすべてのモジュールを整理して、 1 つ以上のバンドルを生成する [依存グラフ](https://webpack.js.org/concepts/dependency-graph/) を内部的に構築します。JavaScript モジュールと Webpack モジュールの詳細については、 [こちら](https://webpack.js.org/concepts/modules) をご覧ください。
バージョン4.0.0以降、 webpack はプロジェクトをバンドルするための構成ファイルを必要としません。
しかし、開発者のニーズに合わせて設定することができ、 [驚くべきカスタマイズ性](https://webpack.js.org/configuration) を有しています。
よりよく合うように柔軟に設定
kintone縛りでURL監視システムを構築する
kintoneにできるだけ処理をよせてURL監視（http/https）システムが作れるか試してみました。kintoneのお試しで無理やり作ってみたので本当にURL監視したい場合は[pingdom](https://www.pingdom.com/)や[site24x7](https://www.site24x7.jp/)などを使うのが良いかと思います。
ソースコード
https://github.com/isotai/url_monitoring_by_kintone# 機能
– 15分に1回ポーリング
– URLごとに監視するか、中止するか設定できる
– URLごとにしきい値をつけられる(連続n回失敗したらアラートする)
– URLごとにしきい値を超えた場合にアラートするか決められる# 処理フロー
そこで、小数を誤差なく扱えるライブラリを導入しました。
今回は[numeral-js](http://numeraljs.com/)を使ってみました。
導入方法としては、GitHubの[numeral.js](https://github.com/adamwdraper/Numeral-js/blob/master/numeral.js)にアクセス => Raw => 名前を付けて保存 をして、ツクールMVにプラグインとして追加します。“`js:numeral.js
0.1 + 0.2 // => 0.30000000000000004
numeral(0.1).add(0.2).value()// => 0.3
“`元々の計算式より少々書き方が煩雑にはなりますが、誤差なく計算してくれるようになりました。
## メソッドを
