f@ctor

JavaScript関連のことを調べてみた2020年09月24日

JavaScript関連のことを調べてみた2020年09月24日
目次

Bolt を使って Slack でヘルプデスクチームとのやりとりを効率化するアプリをつくってみよう

# Slack アプリ開発へようこそ！

この記事では、ショートカット、モーダルのようなインタラクティブな機能を [Bolt for JavaScript](https://slack.dev/bolt-js/ja-jp/tutorial/getting-started) を使ってどのように実装すればよいかを解説します。

なお、この記事で紹介するのは、[BIT VALLEY 2020](https://2020.bit-valley.jp/session/298) のための用意されたデモアプリです。

https://github.com/seratch/bit-valley-2020-slack-bolt-app

BIT VALLEY での講演は YouTube で公開されていますので、[こちら](https://www.youtube.com/watch?v=X8YRevU_fD8&start=36)からご覧ください。

[![YouTube](https://i.ytimg.com/vi/X8YRevU_fD8/hqdefault.jpg?sqp=-oaymwEZCNACEL

元記事を表示

Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #1 環境構築

# はじめに

この記事は、全18回で連載した[Rails 6で認証認可入り掲示板APIを構築する](https://qiita.com/rf_p/items/a846553c11571f4177eb)のフロントエンド側を構築する記事連載となります。

前提として、Rails編で構築したバックエンドAPIが必要になるのでご注意ください。
（そのため、実質#19です）

# 目次

全６回、毎日更新です。

* **Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #1 環境構築**
* Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #2 NuxtとRailsとの疎通テスト
* Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成
* Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #4 サインアップページの作成
* Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #5 ログイン・ログアウトの実装
* Nuxt.jsで認証認可入り掲示板APIのフ

元記事を表示

タイトルタイトル

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

元記事を表示

動画ストリーミングの作成を考える

[hls.jsで実装する動画ストリーミングの分かりやすい解説](https://mat0401.info/blog/brief-hlsjs1/)

元記事を表示

ゲームで身につけるオブジェクト指向設計(実装編)

# 理屈はさておき書こう

– 理屈編
[ゲームで理解するオブジェクト指向設計の基本](https://qiita.com/kaku3/items/a875fe1c098509b1fccd)

若者の興味を引こうとゲームを題材にした記事を書いたのですが、「ふーん」みたいな反応を頂きまして、コレジャナイなと反省しまして、サンプルミニゲームを作成しました。

![the-sheeps-in-the-desert.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/7df663f9-e70e-f7f7-67e9-fedf8f140de2.gif)

楽しそうですか？楽しそうですよね！

初心者でもメモ帳とブラウザ(Chrome)さえあれば作れる様に、webpack や vue-cli などは使わずに、素の html, css, javascript (+ jQuery, Handlebars, GSAP3) で作成しました。
※canvas は未使用

※完成していないですが、github でソース公

元記事を表示

【TextAlive App API】HTML＋CSS+JavaScriptのみで実装するチュートリアル【マジカルミライ2020プロコン】

# はじめに
　2020/09/18、[初音ミク「マジカルミライ 2020」プログラミング・コンテスト](https://magicalmirai.com/2020/procon/ “初音ミク「マジカルミライ 2020」プログラミング・コンテスト”)の開催が発表され、同時に「TextAlive App API」が一般公開された。未だ人気を誇るコンテンツ「初音ミク」を用いたプロコン（プログラミングコンテスト）ということで、熱意に満ちた同志は多いことだろう。

　しかし、一般公開されたばかりのAPIということで公式の文献以外の情報が無いに等しい。しかもサンプルコードもビルドツール仕様がほぼほぼ前提であり、ビルドツールなども何も使わない（つまり、HTML・CSS・JavaScriptベタ書き）&&ローカル環境となると厳しいものばかり。諦めたくなった人も多いのではなかろうか。。。

　今回、プロコンに参加するにあたって、公式の[チュートリアル](https://developer.textalive.jp/app/ “1. 開発の始め方 | TextAlive App API | TextAl

元記事を表示

[PlayCanvas]Inspector上に表示し、編集可能なパラメータ

# 概要
Inspector上でパラメーター調整できるようにする方法。 Unityでいう **SerializeField** に該当するもの。
PlayCanvaseでは **Attribute** と呼ばれる。

# 記述例
“` javascript:sample.js
var Sample = pc.createScript(‘sample’);

// 第一引数に変数名、第二引数にその名前に紐づける設定をObjectで指定する
Sample.attributes.add(‘param’, {type: ‘number’, default: 0});
“`

# 第二引数での設定項目
第二引数に様々な設定を記述したObjectを渡すことでAttributeを設定するが、その設定項目は16個もある。
その中でもそこそこ多めに使用するであろう項目だけピックアップする。

## type
実際に使用する型を宣言する項目、全項目は[APIリファレンス](https://developer.playcanvas.com/en/api/pc.ScriptAttributes.html)

元記事を表示

はじめてのWebページ！Githubで公開～☆

超ハイパースペシャル初心者の“ぴおにあ”でーす:v:

今日は初めてのWebページを作ってGithubで公開してみました:clap:
稚拙すぎて笑わないでね~:laughing:

公開したサイト　:　 [はじめてのWebページ](https://paeonia77.github.io/first_step/)

##目標##

MDN Web Doc の[「JavaScript オブジェクトの基本」](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)を参考に
　・CSSを軽く意識しつつ
　・クリックイベントを使ったページを
　・Githubで公開
を目標としました。

##HTML/CSS##

画像
挿入の仕方やサイズ（画素数）の感覚を覚える

装飾はまだあまり学んでいないので、まずは、
・文字の色、フォント、影

　

・背景色
元記事を表示

BFE.dev解答記録 #2. placeholderをサポートするcurry()を実装する

> https://bfe.dev/ja はFrontEnd版のLeetCode、GAFAの面接を受けるなら練習した方がいいかなと。
> 以下は自分の練習記録です。

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yirk0xdbyytnlh5yzhjv.png)

第２問 [BFE.dev#2. placeholderをサポートするcurry()を実装する](https://bigfrontend.dev/ja/problem/implement-curry-with-placeholder)

[BFE.dev#1. curry()を実装する](https://bigfrontend.dev/ja/problem/implement-curry)とちょっと違って、今度はplaceholderの対応が必要になる

“`js
curriedJoin(1, 2, 3) // ‘1_2_3’
curriedJoin(_, 2)(1, 3) // ‘1_2_3’
curriedJoin(_, _, _)(1)(_, 3)(2)

元記事を表示

グローバルインストールせずにMQTTをCLIで試す

JavaScriptやNode.jsを書いてる人はnpmコマンドなどは通常装備だと思うのでnpxでmqttを利用する方法のメモです。
JSerやNoder向けIoTって感じですね。とはいえMQTTをとりあえず試すってときの話です。

npmが入ってない人は素直にmosquittoをインストールでも良いかも。

## MQTTクライアントライブラリ(MQTT.js)を利用

mqttをcliで利用できるかつnpmにレジストリされてるツール探してました。

元記事を表示

MQTTクライアントをコマンドラインで簡単に実行する（npx と MQTT.js）

## はじめに
こちらのツイートをきっかけに、ふと思いついて試した内容のメモです。

【追記】 @n0bisuke さんも記事を書かれていたので、リンクを掲載します。
　●グロ

元記事を表示

今更聞けないJavaScriptのクラス

業務中にJavaScriptのクラスが出てきて、自分の中で咀嚼できていないな、と感じたのでメモがてらJavaScriptのクラスについて書いていこうかなと思います。

## 基本構文
“`test.js
// class
class test {
constructor(text) {
this.text = text;
}
}

// classを使ってObjectを生成
let testObj = new test(“test object”);

// constructorで設定した値を表示してみる
console.log(testObj.text)
“`
上記がclassの基本文法になります。
classとコメントが書かれたした5行がクラスになります。
classの中身には`constructor`というものが設定されています。
constructorというのはクラスがnewされたタイミングで実行され、引数をオブジェクトに保持させます。
今回だとtextにtest objectという値を保持させるようにしています。
そのためこちらのコードを実行すると、

元記事を表示

Vue.js~jestを使ってのテスト~

#はじめに
なかなかできなくてやっと簡単なテストならできたので
忘れないうちにメモ
間違いがあったらご指摘いただけると嬉しいです。

##テスト対象
“`javascript