- 1. GASで作る社内ツール (キャンセル・報告編)
- 2. Webから見たゲームエンジンPlayCanvasについて
- 3. Webの技術だけで作るQRコードリーダー
- 4. アロー関数を理解していなくてツマッタ。
- 5. [忙しい人向け] 100行から始めるWebGPU
- 6. DenoでサクッとWebアプリケーションを立ち上げる
- 7. Google Apps ScriptでHappyou Final Scraperを中継してInoreaderで読む
- 8. javascript 基本その3
- 9. 冬空の中でReactの世界観をちょっとだけ広げたかった
- 10. CodeMirror 6 を触ってみよう
- 11. JavaScriptのビルトインオブジェクトを拡張する
- 12. 【未完成】ドットインストールでHTML/CSS,JavaScriptを学習してみた所感と学習内容
- 13. JS thisの使い方について
- 14. ES6で使えるアロー関数
- 15. Adobe ExtendScript Debuggerのセットアップ
- 16. jQueryを使わないAjax共通ロジック
- 17. ES6で使えるようになった変数のまとめ
- 18. jQueryでのAjax共通ロジック
- 19. 【ESLint】eslint-plugin-lodash-templateがEJSを（部分的に）サポートしたよ
- 20. Ionic赤本への疑問がすごく鋭かったのでまとめて返事する記事
GASで作る社内ツール (キャンセル・報告編)
# はじめに
[Apps Script Advent Calendar 2019 – Qiita](https://qiita.com/advent-calendar/2019/gas) の1日目、兼、[前回 (申請編)](https://qiita.com/nyanko-box/items/1cccba459142a4493270) からの続きです。申請を出した予定のキャンセルと報告機能を実装しました。
[Google Apps Scriptをウェブアプリケーションとして公開する手順](https://www.virment.com/how-to-deploy-google-apps-script-as-webapp/) についてはこちらを参考にいたしました。# ダミーデータ準備
本記事用のダミー予定2件の内容です。
の1日目の記事です。
以前、[PWA Night vol.9](https://pwanight.connpass.com/event/147857/) で、Web技術だけで作るQRコードリーダーという内容で紹介したのですが、当日は時間の問題で概要程度だったのでもう少し技術的な詳細を書きます。([当日のスライドはこちら](https://speakerdeck.com/kandai/webji-shu-dakedezuo-ruqrkodorida))
# 作ったもの
まずは、実際に見ていただくのがイメージつきやすいと思うので動作しているGIFです。
QRコードを読み込んで結果を表示するというものです
アロー関数を理解していなくてツマッタ。
#はじめに
アロー関数に慣れてアロー関数ばかりを書いて、ふと通常の関数に戻して処理をしてみたら動かなくなった。“`javascript:script.js
const food = {
肉: [“豚肉”, “牛肉”, “鶏肉”, “魚肉”],
野菜: [“レタス”, “玉ねぎ”, “キャベツ”, “人参”]
};
const target_food = “レタス”;
const result = Object.entries(food).filter(([category, food]) => food.includes(target_food));
result.forEach(([category, food]) => console.log(category));
//結果 => 野菜
“`“`javascript:script.js
const food = {
肉: [“豚肉”, “牛肉”, “鶏肉”, “魚肉”],
野菜: [“レタス”, “玉ねぎ”, “キャベツ”, “人参”]
};
con
[忙しい人向け] 100行から始めるWebGPU
この記事は[WebGL Advent Calendar 2019](http://qiita.com/advent-calendar/2019/webgl)の1日目の記事です。
### はじめに
`WebGPU` って何なの？長いコード見てる時間ないよ、という忙しい人向けに、贅肉をそぎ落とした簡易版のコードを書いてみました。
ここ最近、Windows 版の `Chrome Canary` でも `WebGPU` が試せるようになってきたので興味がある方はこの機会にお試しください。### WebGPU とは
`WebGPU` は `WebGL` や `WebGL2` の後継とされているグラフィックス API です。
`WebGL` は Khronos グループが中心となって仕様策定が行われていましたが `WebGPU` は W3C コミュニティグループにより行われています。
`WebGPU` は、より低レベルな GPU アクセスを目的とした API の為、`WebGL` に比べパフォーマンスの向上が期待されています。|ブラウザのAPI|対応するバックエンドのAPI|利用可能
DenoでサクッとWebアプリケーションを立ち上げる
こちらはDeno Advent Calendar一日目の記事です。
Denoが登場して早一年半ともなりますが、まだ触ったことの無い方も多いのではないでしょうか？
最初の一歩で何を作るか、と言うのはいつも悩ましいですが、
やっぱりここはみんな大好きWebアプリケーションかな？と言う事で、簡単なWebアプリケーションをDenoで作って動かす方法を紹介します。## 今回使うmodule
* [dinatra](https://github.com/syumai/dinatra): Small web app framework for Deno
* [dejs](https://github.com/syumai/dejs): EJS engine for Denoの2つを使います。
※なお、dinatraは内部的にdeno_stdのhttp serverを使用していますが、まだ不安定なため、より安定したWebサーバーの構築をされたい方にはkeroxpさんの[servest](https://servestjs.org/)をオススメします。
## dinatraを使ったWeb
Google Apps ScriptでHappyou Final Scraperを中継してInoreaderで読む
あらゆるウェブページをRSSフィードに変換する[Happyou Final Scraper](https://happyou.info/fs/)という便利なものがあり愛用していたのですが、
かなり昔のあるときから[Inoreader](https://jp.inoreader.com/)からのアクセスが非常に遅くなり、タイムアウトになりRSSを取得できない状態が続いていました。
新規追加のときはタイムアウトが長いのか、かなり待てば追加されるのですが、普段の巡回はエラーに書いてあるように3秒以内に応答がなければ失敗扱いとなります。
原因はわからず、私の環境かHappyou Final ScraperとInoreaderの経路間の問題なのか不明で放置していたのですが、
一念発起して迂回スクリプトを書くことに。
普通のアクセスは高速なので、別の
javascript 基本その3
本日もjavascriptについて書き込みこみます。
今日はHTMLを指定して画面上の表示を帰る方法です。# DOM
DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略です。
HTMLを解析し、データを作成する仕組みです。ユーザーが画面をみる仕組みは
1,HTMLを解析、DOM(WEBページ)に変換
2,CSS,javascriptを読み込み装飾
3,ユーザーが画面をみる。という工程です。
要はCSSのように装飾を担当するのがjavascriptの役目です。HTMLは階層構造になっていることが特徴です。
DOMによって解析されたHTMLは、階層構造のあるデータとなります。
これを、DOMツリーやドキュメントツリーと呼びます。## DOMツリー
基本的に各タグがネスト(入れ子構造になっていて)
ツリーのようになっている感覚です。body
|
–header–p
|
–main–p
|
–footer–p簡単に書くとこのようになります。
# ノード
HTML1つ1つのタグが
冬空の中でReactの世界観をちょっとだけ広げたかった
それはただ美しかった。
コンポーネントという呪縛がある一方で、開発者の自由さを守りながら宣言的UIによる美しい構成が可能となった。
数千行に渡るDOMイベント管理の苦行から開放された。
見上げればそこにはReactがあった。
まるでオリオン座のように。
## だがしかしBUT
仮想DOMというバーチャルな世界を実現するために、「Hello World」を表示するには現実的にWebpackやRollup等のバンドルが必要になった。
これを私は「コンポーネントの呪縛」と勝手に思っている。（悪気はない。）
初学者だった頃のjQuery使いの私にはしばらく難しかった。
とりあえず[これ](https://github.com/saltyshiomix/webpack-typescript-react-starter)のようなminimalなスターターを書いて、そっと[公式ドキュメント](https://reactjs.org)を閉じた。
## 数年の月日を経て
複雑なステート管理にはReduxが有名に、事実上のデファクトとなった。
やがてHooksが誕生した。
Hoo
CodeMirror 6 を触ってみよう
APIが充実しててカスタマイズしやすいCodeMirrorというWysiwygエディタの開発中のバージョン6が、スマホでもいい感じに動くことを目指してるし、共同編集の機能を実装しやすそうな気がしたのでちょっと試してみました！
[出来上がるもの](https://codesandbox.io/s/codemirror6-test-tx5ys?fontsize=14&hidenavigation=1&theme=dark)
（エディタのとこを3回くらいクリックすると編集できるよ！）
## Hello World!
✍️ まずはエディタを設置する。CodeMirror6はコアには最低限の機能だけを備えていて、必要な昨日はExtensionを追加することで実現する。
✍️ そのため、ソースコードが小さくなるし（今は全部が一つのリポジトリに入ってる
JavaScriptのビルトインオブジェクトを拡張する
例えば、配列を拡張してrubyのように`first`で1件目のエントリーを取得できるようにするにはどうすればよいか、
といったことを紹介します。“`javascript
const arr = [1, 10, 100, 200]
arr.first // -> 1
“`拡張する方法を紹介する記事ですので、拡張している内容は特に重要ではありません。
# 注意
グローバルなものを変更してしまう内容を紹介しています。
一見便利に思えても、名前が衝突する可能性があったりしますので、実用するべきかどうかは慎重に検討してください。
（僕は個人の実装物でしかやりません）
そして、実装する内容も、本当に汎用的に使えるものに絞ったほうがよいです。
# Mathオブジェクトに関数を拡張
この場合、単に好きなキー名に関数をアサインしてしまって大丈夫です。
“`javascript
Math.sum = (…numbers) => {
return numbers.reduce((prev, current) => prev + current)
}Math.sum(
【未完成】ドットインストールでHTML/CSS,JavaScriptを学習してみた所感と学習内容
# はじめに
フロントエンドに興味がある新人技術者がプログラミング学習サービス「[ドットインストール](https://dotinstall.com)」で学習してみた感想と、そこで得た知識をアウトプットしてみました。
実施したレッスンは以下。
・HTML/CSSの学習環境を整えよう macOS編 (全5回)
・はじめてのHTML (全14回)
・はじめてのCSS (全15回)
・はじめてのJavaScript (全11回)# 活用してみた所感
今回「ドットインストール」を初めて活用して感じた所感をあげていきます。## ①動画なので操作がわかりやすい
書籍で学習する際との決定的な違いです。
書籍だと省略されがちな操作方法を動画で見ながら確認できるので、「説明書いてあるけど難しすぎてどう操作していいか分からない」といった詰み状態にならないのが最大のメリットだと思いました。## ②手軽に学習できるため、学習がストップしない
動画1本の時間が1〜3分くらいと短めなので、集中力が切れることなくサクサク進められるのが特徴です。
ゲームのステージをこなしていく感覚で実際に手を使い
JS thisの使い方について
thisについて
thisはイベントの中でそのイベントが起こった要素を取得する事ができる。
よく聞く文言だがよく分からなかったので調べてみた例を出すとわかりやすく
“`html
- text1
- text2
- text3
“`
“`js
$function(){
$(‘li’).click(function(){
$(this).css(‘color’,’red);
});
});このように指定した場合、仮にtext1をクリックした際にthisの中にはli要素のtext1が取得されtext1の文字の色が赤に変化する
“`
ES6で使えるアロー関数
ES6から関すにアロー関数というものが使えるようになりました。
functionとかくよりシンプルです。今まで
“`
const hoge = function() {
console.log(“foobar”);
}
“`ES6ではアロー関数で記述できる
“`
const hoge = () => {
console.log(“foobar”);
}
“`内容はいままでとかわりありません。
“`
hoge();
“`呼び出し方も今までと同じです。
Adobe ExtendScript Debuggerのセットアップ
## はじめに
この記事は、Visual Studio Codeに、Adobe ExtendScript Debuggerプラグインをセットアップする手順を共有するためのものです。
### 前提とする条件
この記事は以下の環境を想定しています。
– macOS 10.14.6
– Visual Studio Code 1.38.1
– ExtendScript Debugger 1.1.2記事を読む前に、お手元の環境をご確認ください。
### 想定する読者
この記事は以下の読者を想定しています。
– Visual Studio Codeを利用したことがある
– JavaScriptの知識がある
– ExtendScriptを利用、開発したことがあるこの記事ではVisual Studio CodeおよびExtendScript開発の解説はしません。
## ExtendScriptとは
ExtendScriptとは、Adobe社のCreativeCloudアプリケーションを制御するためのスクリプトです。ES3相当のJavaScriptに、各
jQueryを使わないAjax共通ロジック
最近はjQuery使いたくない時もあるので、これもメモ
“`javascript:commonajax.js
//———————————————–
// jquery使わない式のajax
// @param url リクエスト先
// @param requestJson リクエストデータ(json形式)
// @param afterFunction 取得後実行処理
// @param afterFuncParams 取得後実行処理に対する引数
//———————————————–
const commonajax = function(url, requestJson, afterFunction, afterFuncParams){fetch(url,{
method : “POST”,
body : JSON.stringify(requestJson), // 文字列で指定する
head
ES6で使えるようになった変数のまとめ
今までjqueryとか古いjavascriptの文法しかつかったことがなかったので
もう一度新しくなったJSを勉強しなおしています。そのメモ代わりとして
## 変数
### var
ずっとこれを使ってきました。変数宣言はもちろんのこと
再宣言、再代入も可能“`
var hogehoge = “Variable”;
console.log(hogehoge);
“`### let
ES6からはこちらがvarより主流になってきました。
再代入は可能ですが、再定義はできません。“`
let hogehoge = “Let”;
console.log(hogehoge);
“`### const
定数として利用
再宣言、再代入が不可“`
const hogehoge = “Constant”;
console.log(hogehoge);
“`
jQueryでのAjax共通ロジック
都度都度作るハメになってしまっているので、書き残しメモ
“`ajaxcommon.js
//———————————————–
// ajax共通
// requrl:リクエスト先
// reqparam:リクエストパラメータ(json形式)
// donefunc:ajax成功時における関数処理
// doneparam:ajax成功時における関数処理の引数
// （複数必要な場合は、json等を使用）
//———————————————–
const ajaxcommon = function(requrl,reqparam,donefunc,doneparam){
$.ajax({
type: “post”,
url: requrl,
data: reqparam,
dataType : ‘json’
}).done(function(data) {
if(donefunc) d
【ESLint】eslint-plugin-lodash-templateがEJSを（部分的に）サポートしたよ
かなり前に、[【ESLint】eslint-plugin-lodash-template作ってみたよ](https://qiita.com/ota-meshi/items/6e218768c7483e279898) という記事を書き、ちょっと前に [【ESLint】eslint-plugin-lodash-templateがJavaScriptテンプレートをサポートしたよ](https://qiita.com/ota-meshi/items/3f90e70e485ff3684416) という記事を書きましたが、[eslint-plugin-lodash-template]をJavaScriptテンプレートサポートさせたときついでに、部分的に[EJS]をサポートをしたのでその思い出を残します。
[eslint-plugin-lodash-template]を基本的な使い方で使えば、[EJS]で[ESLint]が動くはずなので、
[EJS]での使い方の説明は無いです。仕組みをどう変えたかの思い出の話がメインです。# [eslint-plugin-lodash-template]とは
Ionic赤本への疑問がすごく鋭かったのでまとめて返事する記事
https://hackmd.io/0ephzNFASSCOVKpjfcr6xA で、おそらく他にも疑問に持たれる方がいる疑問を書いていただいてるので、記事にして私見やコメントをしておきます。この記事はIonic Advent Calendar 2019の1日目の記事にします。
# `ionic serve` と `ng serve` の違い
Ionic CLIでは、内部的にAngular CLIのコマンドを実行しておりますので、以下のようにコマンド以下に表示されるものが実行されるコマンドです。“`bash
sakakibara app % ionic serve
> ng run app:serve –host=localhost –port=8100 # これです
“`ちなみに、Ionic/Reactだったら `npm start` が実行されます。フレームワークやIonicのバージョン間の差分を吸収しながら実行することが目的ですので、Angular CLIのコマンドを打ち慣れていたら、そちらを実行して問題ありません。
# Ionicのライフサイクルフック用の
