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

Gatsbyでページごとに個別にCSSを読み込む方法

HTML, JavaScript, CSSで構築された一般的なサイトを、Gatsbyで再構築しています。

一般的なサイトでは、CSSの読み込みは

でページごとに読み込むCSSを指定できますが、Gatsbyの場合は少し特殊だったのでメモを残します。

#Gatsbyでの一般的なCSSの読み込み方法
1. gatsby-browser.jsで読み込む
2. `import`で読み込む
3. CSSモジュールを使う

上記の1.の方法は、全ページで使用するCSSの読み込みに適しています。

2.の方法は一見ページごとに個別に読み込むかと思いきや、グローバルスタイルとして読み込まれるので全てのページに反映されてしまいます。

3.の方法は個別にCSSを指定する方法ですが、モジュール化して、要素ごとにclassNameを記述して・・・と既存コードの書き換えが面倒です。

これらの方法は、Gatsbyで推奨されている方法で、サイト高速化のためには取り組むべきことだと理解しています。
ですが、とりあえずG

Tencent CloudのTCPlayerを使ってみた

## TCPlayerLiteとは
TCPlayerLite（Tencent Cloud Web Super Player ）は、モバイルやPCのブラウザ上でオーディオやビデオストリームを再生する問題を解決するために設計された。

## 機能
### 1.ビデオの再生の他に、ライブ配信の再生機能も持っている。

– ビデオの再生
– ライブ配信の再生

### 2.サポートするプロトコールは以下のようです。

– HLS(M3U8)（ビデオとライブ配信） format: http://xxx.liveplay.myqcloud.com/xxx.m3u8
– FLV（ビデオとライブ配信） format: http://xxx.liveplay.myqcloud.com/xxx.flv
– RTMP(ライブ配信の再生) format: rtmp:

Chrome拡張でマスタデータ管理ツールを作ったら開発に変化が起きた話（ツール公開しました）

# よくある運用

マスタデータの管理方法として多いのは、Excelなどの表計算ソフトを使ってデータを作成し、それをGitHubで管理しつつ、実際にDBなどへデプロイさせる方法かと思われます。

そしてこれを実現するにあたって、出来るだけエンジニアの負担を減らせるよう、データ作成者にGitの使い方やデプロイコマンドの実行方法をレクチャーします、が…

# マスタデータ管理ツールの誕生

ただ、そこで気になるのは、**結果的にデータ作成者の負担が増えてしまう**ことです。
大体の場合、表計算ソフト以外のツールも触ることになり、もう少し手軽にできないかと考えていました。

そこで今回は、Chrome拡張とSpreadsheetを用いて、**データ作成者がChromeだけでデータの作成から反映までできる**ツールを作成しました。
![ssbird.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253997/d40665dd-51be-ecdf-b6fd-3

ReactでプレーンなLeafletとMapbox GL JSとOpenLayersの開発環境を構築してみた




![mapboxgljs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ac9af97c-ba16-82ae-e0fe-38e32427088e.

複数のファイルを並行に取得して読込速度を改善する

# はじめに
`` を使用することでブラウザに対して早期にファイル取得を促し、読込時間を短縮させることができます。

# preload
[preload](https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content)は、ブラウザのレンダリング機構が起動するよりも早く、ファイルの読込を開始させたい場合に使用します。

# 改善前
開発者ツールのNetworkからファイルを読み込むタイミングを確認します。


cssファイルが取得＆読み込まれた後に画像(webp)、Googleフォント(font)が取得されていることがわかります。
画像とフォントをcssファイルやjsファイルなどと並行して読み込むことができれば、ページの読込速度の改善

未使用のjavascript、cssのコードを特定する

# はじめに
開発が進むにつれ、jsファイルやcssファイルは何かとファイルサイズが膨れます。
というのも過去に参照されていたが現在は使用されていないデッドコードが生まれがちだからです。

未使用のコードを削除することでファイルサイズが小さくなり読込速度の改善したり、保守性がアップが見込めます。

# 手順
ブラウザの開発者ツールを利用することで、どのコードが実行されていないか簡単に調べることができます。

1. 開発者ツールを開く（WindowsならCtrl＋Shift＋I、MacならCommand＋Option＋I）
2. 縦の3点リーダ を選択
3. More tools を選択
4. Coverage を選択
5. ページを再読み込み


CoverageからJSやCSSのコードの使用率がわかります。

![image46.png]

【TypeScript】エラー：This expression is not constructable でハマった話。

#概要
以前、PHPで作成した簡単なフレームワークをTypeScriptで書き直したら面白いんじゃない？と思って、書き始めたら、爆速でハマってしまいました。

やりたかったのは、コアな機能毎にtsファイルを分けて書いて、それをbarrelを使って、メインファイル（index.ts）に一気にimportを決める！というシンプルな事だったのですが・・。

#構成
○ ディレクトリ構造（※抜粋）
　[ app ]
　　L [ lib ]
　　　L Core.ts
　　　L Controller.ts
　　　L Database.ts
　　L bootstrap.ts
　　L index.ts

“` Core.ts
// 他のクラスは割愛
export class Core {
name: string
constructor(name: string) {
this.name = name
}
}
“`

“` bootstrap.ts
export { Core } from ‘./lib/Core’
export { Controlle

ブラウザでTesseract.js使ってOCRしてみた

# 概要
少し前にOCRという存在を知り、実際に触ってみたいなと思ってはや2ヶ月。。。。
やっとこさっと重い腰を上げてブラウザで機能するOCRライブラリがないかなと探していたところ、、、、
OSSで`Tesseract.js`を見つけて少し使ってみたので紹介したいと思います。

## そもそもOCRってなんぞや
OCRは、Optical Character Reader/Recognitionの略で、
画像データのテキスト部分を認識して、文字データに変換する光学文字認識機能のことを意味します。

これを活用すると、データ入力という非常に効率の悪い作業をなくすことができます。
最近だと、QRコードのOCRもあるのでなかなか面白い技術になってきています。

## Tesseract.jsで簡単OCR
早速`Tesseract.js`を使ってブラウザでできるOCRを実装してみましょう。
今回はReactを使います。

“`shell
$ npx create-react-app sample-ocr
$ cd sample-ocr
// Tesseract.jsをインストール
$ yarn

gatsby入門 チュートリアルをこなす 8. 公開するサイトの準備

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/c

「’ ‘」はString、「` `」は実行。

**「”」**はStringで文字列などを入れますが、**「“」**は実行するためのもの（※文字列も入れられる）です。
この中ではプロパティのデータを持ってきたりすることができます。

Vue.jsでVuexを使っている時を参考にあげると、
下記のような実装が可能です。

“`index.vue
this.$router.push(
`/${this.$store.state.hoge.fuga}/index`
)
“`

pushのパス内でstateのプロパティを引っ張ってきて参照したりすることができます。

１つ目のAPIが通った場合のみ次のAPIを実行するエラーハンドリング

１つ目のAPIを実行してうまく通った場合にのみ、
次のAPIを実行するような処理を実装する一例。

※下記のサンプルではVuex、Axiosで実装しています

“`index.js
async getData({ commit, state }) {
try {
await this.$axios.
$get(‘URI’)
.then(() => {
this.$axios
.$get(‘URI’)
.then((resp) => {
commit(‘setData’, resp)
})
.catch((error) => {
console.log(error)
})
} catch((error) => {
console.log(error)
})
} catch (error) {
console.log(error)

JSエコシステムぶらり探訪(1): 原初のJavaScript

JavaScriptはWebブラウザの `
```

WindowsでReactの開発環境を整える

#はじめに
WindowsでReactの開発環境を作ってみたところ、いくつかエラーが出たのでその手順と解決法を残します。
使用した環境は以下の通り

- Windows10
- Node.js v14.8.0
- NPM v6.14.7
- Windows パワーシェル（VScode経由）

#手順
1. Node.jsのインストール
3. create-react-appのインストール
4. プロジェクトを作成してHello worldしてみる

#おまけ
- ESlintを設定する
- ディレクトリ構成のかんたんな説明

# 1.Node.jsのインストール
まずは[Node.js公式サイト](https://nodejs.org/ja/)からダウンロードし、Node.jsをインストールします。
ターミナルで以下のコマンドを打ってVersion情報が表示されればインストール成功しています。

``` shell:Node.jsのVersion情報を確認する
node -v
```

Node.jsがインストールされていればnpmも使うことが可能になります。

# 2.create-

【CreateJS】手書き入力インタフェース

# はじめに
**手書き文字**をAIに判別させるデータは、MNISTなどでデータがフリーで公開されています。そのデータを利用すると、簡単に識別モデルを作ったり、推論させたりすることができます。しかし、実際に自分が書いた文字をAIに食わせてみたいと思っても、**デジタルデータにするのが意外と面倒くさい**ですよね。そこで、**手書き文字をデジタルデータへ簡単に変換**できるInterfaceを`javascript(CreateJS)`で作成してみました。

# プログラム
`javascript(CreateJS)`を使用したプログラムです。

``` tegaki_Interface.html