- 1. React Native × Atomic Design で効率よく開発する
- 2. Reactで親コンポーネントのstateを下位のコンポーネントのイベント処理で更新する
- 3. 意外と知らない並列処理のメリット
- 4. 【Nuxt/Node】API_URLが便利
- 5. FormDataでデータ送信する際の”SyntaxError: Unexpected token – in JSON at position 0″というエラーへの対処方法
- 6. TTCアルゴリズムで看護師のアサインメント表を自動作成7
- 7. TTCアルゴリズムで看護師のアサインメント表を自動作成3
- 8. コンソールを使って指定のチャットワーク部屋のメッセージをすべて取得する。
- 9. 【Nuxt.js + COTOHA API + microCMS】COTOHAチックなフラッシュカード作ってみた ※答えはCOTOHA先生が＼(^o^)／で隠してくれるよ
- 10. TeamsでFAQチャットボットを作る
- 11. CSS/stickyについて知るべき事はそんなに多くない。
- 12. 叩きまくられる「非同期のリクエスト」を自作の「throttle」で間引いてみた
- 13. Number型の配列をFloat32Arrayへ変換して、バイナリのままbase64で保存
- 14. 【Svelte】最低限の修正でTypeScript対応してみました【初期設定】
- 15. 配列の長さを測ろうとしたらオブジェクトだった話
- 16. Qiitaの通知欄から各ユーザのプロフィールに移動できるユーザースクリプト
- 17. 【Nuxt.js】form実践編：contenteditableでイライラ解消！
- 18. SCSSとJavascriptの読み込みに関する質問
- 19. 複数のtableに対してtd要素のクリックイベントを仕込む
- 20. JavaとC# とJavascriptのクラスの書き方の違い
React Native × Atomic Design で効率よく開発する
# Atomic Design とは
[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) をご存知でしょうか。
公式には Atomic Design はデザイン自体の名前ではなく、方法論として紹介されています。Atomic Design では、下記5つの構成要素が登場します。
1. Atoms（原子）
2. Molecules（分子）
3. Organisms（構造体）
4. Templates（テンプレート）
5. Pages（ページ）
私は今、フロントエンド開発に React Native を利用していますが、コンポーネントベースで記述するため、 Atomic Design と親和性が高いと感じています。
各要素の粒度は議論があると思いますが、ここでは
Reactで親コンポーネントのstateを下位のコンポーネントのイベント処理で更新する
# React で親コンポーネントの state を下位のコンポーネントのイベント処理で更新する
## 概要
親コンポーネントで state を管理しているが、input 要素などの子コンポーネント側でイベント処理を行いたい時があると思います。結論から言うと、この場合の解決策の1つとしては、**「親コンポーネントから props 経由でハンドラー関数を渡す」**というやり方があります。気づけばカンタンなことですが、自分はハマってしまったので、誰かの参考になればと思って投稿しました。なお、React 初心者のため、もっと良い解決策がありましたら、ご教授ください。## 本題
#### 親コンポーネント `Parent`
“`javascript:Parent.js
import React, { useState } from ‘react’;
import Child from ‘./Child.js’;function Parent() {
// hook’s state administration
const [inputText, setInputTex
意外と知らない並列処理のメリット
Quoraの[並列処理のメリットは何ですか？](https://qr.ae/pNtlKE)を参考にしてます。
処理の前後関係がないアルゴリズムを同時に実行できる。
単純にN個の並列化で処理時間がN分の1になるわけではないことに注意
日本のスーパーコンピュータ『京』も並列コンピュータです。
【Nuxt/Node】API_URLが便利
## baseURLを動的に切り替える
`baseURL` を動的に切り替える方法が色々ありますが、下記の `API_URL` を設定する実装が楽なのでは？と思ったので、そのメモをしていきたいと思います。## baseURLの決まり方
基本は、`defaultPort`、`defaultHost `と順番に決まっていき、 `options`の中で `baseURL`が定義されています。
ただ例外として、 `API_URL` が定義されていると `baseURL`が全て上書きされることがわかります。
これを使っていきたいと思います。
[axios-module/module.js at 932abc071b1e1bb64e8d8fc1fdd6e6f9ceb99b5a · nuxt-community/axios-module · GitHub](https://github.com/nuxt-community/axios-module/blob/932abc071b1e1bb64e8d8fc1fdd6e6f9ceb99b5a/lib/module.js#L52)“`js
FormDataでデータ送信する際の”SyntaxError: Unexpected token – in JSON at position 0″というエラーへの対処方法
# はじめに
ファイルアップロードの実装の際に，HTTP通信の表題のようなエラーが出ました．今までJSON形式でデータを送信していたのですが，画像送信をする際のサンプルでFormDataを用いる方法を用いていたので通信方式が変わるらしく生じたエラーのようです．
Web系のアプリ製作の初心者であり，変なことを言っている可能性が非常に高いので，詳しい方は間違いを見つけ次第ご指摘お願いします．# そもそもこのエラーが出る原因
JSON形式の送信ではありえない1文字目に， “-” という文字が混入していた場合に起こります．（普通は”{“であるはず）
私の場合，送信内容がJSON形式でなく，`multipart/form-data`形式で送信していたため，下記のようなデータを送信していたのでエラーが生じたようです．“`
—————————–54363239114604
Content-Disposition: form-data; name=”user_name”hogehoge
—————————–543
TTCアルゴリズムで看護師のアサインメント表を自動作成7
※作成途中※
看護師7名で患者35名を受け持つ場合の解説。画像のアップロードがうまくいかない原因を調査中。#1
#2
![]()
スライドの2枚目だけ、どういうわけか全くアップロードできない。![]()とだけ表示されて、検索しても原因が分からない。画像の形式もサイズも方法も合ってるし、ブラウザのキャッシュをクリアしても変わらず。#3
#4
 があったが、自分のログイン方法が SSO だったためか、[reCAPTCHA の影響か](https://github.com/swdyh/goodbye_chatwork/issues/29) 、直接は利用できなかった。スクリプトを参考にした。
# スクリプトは？
以下の gist に上げています。
コンソールを使って指定のチャットワーク部屋のメッセージをすべて取得する。
h
【Nuxt.js + COTOHA API + microCMS】COTOHAチックなフラッシュカード作ってみた ※答えはCOTOHA先生が＼(^o^)／で隠してくれるよ
## 0. はじめに
タイトルの通りですが、**【Nuxt.js + COTOHA API + microCMS】**を使って**COTOHAチックなフラッシュカード**を作ってみました！以下の参加記事になります！
– [**【Qiita x COTOHA APIプレゼント企画】COTOHA APIで、テキスト解析をしてみよう！**](https://zine.qiita.com/event/collaboration-cotoha-api/?utm_source=qiita&utm_medium=top_banner)
COTOHA APIを使ってこんなのも作ってます！
– [**【LINE BOT + COTOHA API】君の文章は相手を不快にしていないか？COTOHA先生にチェックしてもらおうぜ**](https://qiita.com/i-tanaka730/items/a32b3ce7ca8c7edc9634)
~~ちなみに息子(2歳)へのクリスマスプレゼントを華麗に失敗した私が狙うのは「作ろうきのこの山」です。:santa:~~
## 1. 概要
こんな感
TeamsでFAQチャットボットを作る
# 背景
インターンでとあるサービスのFAQを作ってくれという課題を出された。
いずれは社内で「勤怠連絡や有給申請とかでも使えるようにしたい」とのこと。が、コロナの影響で中途半端に終了となってしまった。不完全、残念。。
# 使用するもの
– [Teams](https://products.office.com/ja-jp/microsoft-teams/group-chat-software) (App Studioを入れておく)
– Microsoft Azure Portal (GUIでAzureを管理するツール)
– [QnAMaker](https://www.qnamaker.ai/) (リクエストに対して適切な返答をしてくれるデータ置き場)
– 返答データ(Excel、FAQサイトのURL)
– Bot Framework Emulator (ボットのテストツール、使用しなくても開発には支障なし。)# こんなものを作るよ
に妹relative（z-index:1）を作る。
stickyがうまく機能しない場合、「ブラウザがIEではないか。」→「stickyの後ろ（同じ親）にrelativeやstickyはあるか。」→「z-indexは正しい指定になっているか。」をチェックする。#####2. 困った時はfixed(overflow:auto)を併用。
最前面に配置する要素がtop:0でなく、且つ妹relativeを配置している場合、その妹は兄貴の下をくぐり抜けてしまう。
これを防ぎたい場合は、兄stickyの代わりに親要素にposition:fixed;overflow:auto;top:hogeを指定し、兄はtop:0にする。#####3. href=#idはjsで補う。
stickyとhref=#idの相性
叩きまくられる「非同期のリクエスト」を自作の「throttle」で間引いてみた
## throttle/debounce というのをご存知ですか？
私は知りませんでした。笑今では、`position: sticky;`、`intersectionObserver`、`media query` などなど、便利なものがたくさんあるのでそこまで気にしなくなったかもしれませんが、
昔は、`position: fixed`、scroll イベント、 resize イベント を駆使して、UI を実現していました。今でも ~~IE のせいで、レガシー環境のせいで~~ いろいろな事情によってそう処理をされている方も多いのではないのでしょうか。とはいえ、監視するにしても、大量に発行される scroll や resize イベントを全部見なくたっていいことだってたくさんあります。
“`javascript
window.addEventListener(‘scroll’, event => console.log(window.scrollY));
“`この一行を、chrome などの開発者ツールで叩いてみて、window をスクロールしてみてください。
すると、
Number型の配列をFloat32Arrayへ変換して、バイナリのままbase64で保存
#はじめに
乱数をn個発生させ、それを配列で保持します。
その配列を文字列することに興味があるとします。
そのままJSON文字列にすると、配列のサイズにもよりますが、中々のサイズになります。
もし、多少精度が落ちてもいいのなら、まあまあ圧縮できます。
Number型は、8バイトですので、Float32Arrayに変換するだけでも、サイズが半分になります。
4バイトでも十分なケースって結構多いんじゃないでしょうか。
そのFloat32Arrayをバイナリのまま、base64にします。
要は、以下の2つのパターンで比較をしたいってことです。
#圧縮率の理論値
圧縮率を「削減された量の元の量に対する割合」とします。
ざっくり計算してみます。
そのままjson文字列にすると、今回発生させる乱数は0から1なので、
0と小数点とカンマで3バイト、有効桁数が16桁
【Svelte】最低限の修正でTypeScript対応してみました【初期設定】
## 概要
Svelteでcomponentを書く時に、中身をJSからTypescriptでかけるようにしました。
今回はデフォルトでできるプロジェクトに対して、最低限何があればTypescriptにできるかを重視してます。なお、デフォルトに乗っ取り`rollup`を使用するので`webpack`とかでのやり方は対象外です。
## 手順
### tsconfig.json追加
TypescriptのConfigファイルです。
こちらは手動での追加になります。“`json:tsconfig.json
{
“compilerOptions”: {
“target”: “es6”,
“baseUrl”: “./”
},
“include”: [
“./src”
]
}
“`### 追加パッケージ
“`bash:console
yarn add -D svelte-preprocess typescript rollup-plugin-typescript2 rollup-plugin-postcss
配列の長さを測ろうとしたらオブジェクトだった話
# 本論
「(変数)が空の時だけ表示されるメッセージが、空でないときも表示される」というバグがあった。その判定用の関数を調べてみたところ、
“`javascript
return v.length > 0;
“`といった風なコードが書かれていた。しかし同じ`v`を扱っている処理をよく見てみると、
“`javascript
Object.keys(v).length
“`のような表記がされていた。なので判定用の関数を同様の表記にしたところ、バグは解消された。
後で気になって、何故エラーを吐かずに`v.length > 0`が`false`になっていたのかを調べてみたところ、どうやら以下のようになっていたらしい。
`v`は配列ではなくオブジェクトで、プロパティ`length`が設定されている訳でもないので、`v.length`は`undefined`になる。その`undefined`に対して大小比較を行うと、必ず`false`になる。
# 結論
扱う変数がオブジェクトか配列かなど、どのような物であるかを把握するのは重要。
# 最後に
このバグを仕込んだのも
Qiitaの通知欄から各ユーザのプロフィールに移動できるユーザースクリプト
# 概要
Qiitaの通知欄で各ユーザのアイコンやユーザ名をクリックすれば、そのユーザのプロフィールページへ直接移動できるようにするユーザースクリプトを作りました。
[GreaseyFork](https://greasyfork.org/ja/scripts/397416-qiita%E9%80%9A%E7%9F%A5%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF)で公開中です。
# きっかけ
[Qiitaの投稿画面の同時スクロールを改善するユーザースクリプト – Qiita](https://qiita.com/m_fukuchan/items/2a0c1f7b45894449ff56)
先日の記事は予想外の好評を頂きまして本当に驚きました。
Qiit
【Nuxt.js】form実践編：contenteditableでイライラ解消！
# 前置き
formで使うinput, textarea
中でも何かと使い勝手の悪いtextareaさん?
HTMLのグローバル属性
contenteditableを使って
textareaをもっと見やすくしてみましょう！**textarea**
**contenteditable**
# contenteditableって？
簡単にいうと編集モードにしてくれます。
分かりやすくbuttonタグにつけました。
編集できる＋文字数に応じて幅が変化してくれます！
・JSファイル(chart.js)
が入っています。
head内の記述に誤りがありますでしょうか？
よろしくお願いします。“`html