JavaScript関連のことを調べてみた2021年10月14日

ウェブページは作れませんでした　【RESTART】

#ウェブページは作れませんでした（結論）
「progate」にて学習すること約1か月
「Web開発パス（Node.js)」を一通りこなしてみて
とりあえず何かウェブページ作ってみるかと思った

結論、__どうやって作ればいいのか解らず__…

#学習プロセスの見直し

「progate」だけ行ってしまうと__自分の場合は__
__インプット__のみになってしまい、定着しないと反省
そこで以下のようなプロセスの仮説を立てて実行することにした

#学習プロセスのフェーズ詳細

###フェーズ１_学習
Reactで作るTodoアプリ

前回JavaScriptで作ったTodoアプリをReactで作った時のメモです。

# 完成イメージ


# 実装
## JSX
まずはJSXで基本的なHTML部分を書いときます。

“`react:src/App.jsx
import React from “react”;
import “./styles.css”;

export const App = () => {
return (
<>

追加

【Laravel】bladeファイルでReact側に変数を渡す

#はじめに
Laravelで一部分をReactでSPA化した際、APIを使うまでもなさそうな変数をグローバル変数として渡していました。
一応、備忘録として残します。

#実装
`script`内で`const access_token = “{{ $access_token }}”`のように値を渡します。

“`php
@section(‘main’)

元記事を表示

face-api.jsの値を安定させるため、取得し続ける連続データの平均値を出した

#face-apiで取得した値が安定しない。

いま表情で動かすゲームをつくっていて、
face-api.jsを使って、表情データを取得するようにしているのですが、
ランドマークの値ってなかなか安定しないんですよね。

じゃあ、どうするかと考えて、
取得した連続10個のデータの平均値を出すことで、
ある程度安定させてみました。

#連続した10個のデータの平均値を出す

10個のデータは常に更新されていくので、
引数を配列にしてました。

“`javascript
function getAverage(array){
let total = 0;
let average = 0;
for (let i = 0 ; i < array.length ; ++i) { total += array[i]; average = total / array.length; } return average; } ``` ここまでが平均を出す関数。 ```javascript let array = [0 ,

【改】初心者向けの記事って多すぎん？？（javascript初心者向けQiitaAPIでLGTM数TOP10を出してみる）

#「初心者」と「初心者向け」って違うよね
[初投稿記事](https://qiita.com/kae_kamakura/items/20b5b6f4a960eb99bd32)にありがたい[コメント](https://qiita.com/kae_kamakura/items/20b5b6f4a960eb99bd32#comment-f943066f5370d3a4bdc7)をいただきました。
以下コメントの引用です。
>初心者： 初心者が書いた記事、あやふやで正しくない内容も多い（車の初心者マークと同じ）
初心者向け： 先輩が初心者向けに書いた記事

た、確かに……！
初心者が書いた記事と、初心者向けに書かれた記事では違いすぎる……！
日曜大工と宮大工くらい違う……！！（それは違う）
と、いうことで検索に使う単語を「初心者」から「**初心者向け**」に変えて再度TOP10を出してみます。

#概要

* 記事タイトル、本文、タグのいずれかに「javascript」「初心者向け」の2単語が含まれている記事を抽出。
* 2021年9月までの記事を取得する。
* LGTM数で降順化しTOP10

【JavaScript活用】QiitaAPIを活用してバイク好きがいるか調べてみた

#目次
– [はじめに](https://qiita.com/yui-kouy/items/ddcf699b743adedb32db#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
– [背景・目的](https://qiita.com/yui-kouy/items/ddcf699b743adedb32db#%E8%83%8C%E6%99%AF%E7%9B%AE%E7%9A%84)
– [環境、言語等](https://qiita.com/yui-kouy/items/ddcf699b743adedb32db#%E7%92%B0%E5%A2%83%E8%A8%80%E8%AA%9E%E7%AD%89)
– [処理コードおよび処理結果](https://qiita.com/yui-kouy/items/ddcf699b743adedb32db#%E5%87%A6%E7%90%86%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8A%E3%82%88%E3%81%B3%E5%87%A6%E7%90%86%E7%B5%90%E6%9E%

【都度更新】使ってみたいライブラリ

Githubトレンドを見て満足するだけで毎回おわっちゃうから気になったライブラリをメモしていきます。

# cube.js
アナリティクスの分析APIプラットフォーム
バックエンド立ててデータ返すAPI等々を簡単にしてくれ、フロントでそのデータを取得し、グラフレンダリングするまでの簡単なチュートリアルもある

https://github.com/cube-js/cube.js

# Prisma
オープンソースのORM
バックエンドをNodeにするときに使ってみる

https://www.prisma.io/docs/concepts/overview/what-is-prisma

# vue-awesome-swiper
Vue向けのWebでスワイプを簡単に実装できるライブラリ
Tinderライクなアプリ作る際に便利そう

https://github.surmon.me/vue-awesome-swiper/

【JavaScript】変数と参照の振り返り⑦　参照とconst・引数

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/c2ed2918646bc3a61f17

#目的

* 変数についての理解を深める

#本題
###1.参照とconst

““javascript
// constを使った再代入
// プリミティブ値
const a = “Hello”;
// constで定義した場合、再代入できない　→　エラーになる
a = “bye”;
““
““javascript
// オブジェクト
const b = {
prop: “hello”
}
// 新しいオブジェクトを代入しようとするとエラーになる
// constで変数宣言しているため、再代入不可
b = {};
““`
“`javascript
// オブジェクト
const b = {
prop: “hello”
}

GitHub上のJavaScriptコードをSonarCloudで検査してみる

# 概要

このエントリでは、GitHub上のpublicなリポジトリのJavaScriptのコードを検査するため、「[SonarCloud](https://sonarcloud.io/)」を使用するための方法を紹介します。SonarCloudは、[SonarSource](https://www.sonarsource.com/)社のプロダクトの一つであり、同社がオンプレミス環境で静的検査を行うためにリリースしているプロダクトとして、[SonarQube](https://www.sonarqube.org/)があります。

サービスの形態や、利用ソフトウェアのバージョンは、2021年10月時点の内容になります。

## 想定読者

– GitHubでpublicなリポジトリを持っており、静的検査を実施してみたい方

## エントリの動機

– 筆者が趣味のプログラムを書くにあたり、手元にSonarQubeサーバを立てずにコード検査を行いたくなりました。
– SonarCloudは、(2021年10月時点では）publicなリポジトリに対する検査は無料で実施することができることも

Qiitaの記事の”勢い”を調べる　～もしかしたらまだ見ぬ掘り出し記事が見つかるかも～

配信者勢いランキング、５ちゃんねる勢いランキングなど、インターネットをうろうろしているとよく”勢い”という言葉を目にしますよね。
というわけでQiita記事の勢いを調べてみました。（QiitaAPIを使って）
参考になる記事をストックすることがスキルアップの近道のはず、”勢い”のある記事はきっと参考になる記事だと思うのです。

#前調べ
５ちゃんねるの勢いの計算方法は次の通りだということを調べました。
勢い＝レス数/（現在のunix時間-スレッド内の１番目の投稿のunix時間）÷86400

なるほど、これを参考に今回は、
■レス数＝いいねの数
■現在の時間＝現在の時間
■１番目の投稿時間＝記事の投稿時間
と定義してやってみます

#結果
####単月部門
集計期間：2021/9/13～2021/10/2

| 順位 | いいね | 投稿日 | 期間（日） | 勢い | URL |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 1 | 893 | 2021-09-29 | 15 | 61 | [エンジニア200人に聞いて、業務委託単価表を作りました](https

バイクで走るタイムリミットをLINE_BotとWeb_APIを組み合わせて実装してみた～

#近ごろ私達は～いい感じ♪
これが私の生きる道ですね！
見出しだけでピンきて懐かしさを感じた方はおそらく30代Overでしょう笑
（何故いきなり冒頭に？といった疑問は記事を読み進めるとわかりますので、お付き合いください～）

さてさて、
10月からプログラミングを習い始めて毎日勉強中の私ですが、
LINE_BotとWeb_APIを組み合わせて何か試したいと思い、
大好きなバイクを例に作ってみました！

#これが私の走る道
学生時代からバイクで峠を走るのが大好きで、ヒマさえあれば埼玉県飯能市の自宅から
奥多摩湖（東京都西多摩郡）まで友人と走りに行っています。
しかし、1車線の道が続く田舎道なので日中は渋滞ばかりで気持ちよく走れません(´；ω；`)ｳｩｩ
特に朝方と夕方は渋滞がひどく、それなら真夜中に気持ちよく走ろう！
ということで、夜が更けてから朝方までひたすら峠を走るということを、
学生時代はよくやっていました（あの頃は若かった、、、）

奥多摩の夜は、空気が澄んでいて星が本当に綺麗なんです(￣ー￣)
![奥多摩_星空.jpg](https://qiita-image-store.s3

APIとLINE Botを組み合わせることで、患者さんが必要な情報にアクセスできる仕組みを目指す　その１-天気を伝える

#患者さんご家族にとって便利なLINE Botを作りたい
福岡で在宅医療を中心とした[医療機関](https://taro-cl.com/)を運営しています。
当院の患者さんやご家族、もしくは当院に診察を依頼したいと考えてくださっている方向けに、必要な情報にアクセスできるLINE Botを作ろうと思い取り組んでいる経過です。

#環境・利用API
node v16.10.0
Visual Studio Code 1.60.2
axios 0.22.0
ngrok 2.3.40

#お薬APIは有料のため断念

API連携の方法を学び、在宅医療で役にたちAPIで持って来れる情報に何があるかを考えました。
当初、薬の情報がAPIでもってこれれば、お薬の表面に書いてある文字や、色形で薬が何の薬か判断できるようなり、治療の経過で「血圧の薬だけ明日から抜く」などを患者さんご家族でもやりやすくなるかと考えましたが、薬の情報を使えるAPIは有料のものばかりのようで断念（いいAPIがあれば教えてください）。

#お天気APIとの連携

次に考えたのが、お天気APIとの連携です。
病院で入院や外来を担当

WEBストレージ（localStorage, sessionStorage）、cookieをJavaScriptで使ってみる

# WEBストレージ（localStorage, sessionStorage）、cookieの概要
WEB Storage(localStorage, sessionStorage)はHTML5で新しく作られた仕組みで、ブラウザ上にデータを保存することができます。同じくデータを保存する仕組みにcookieがありますが、こちらは主にセッションを管理する目的で使用され、単なるブラウザ上のデータの保存はWEB Storageを利用することが多いみたいです。
ブラウザに保存されているデータは開発者ツールの**アプリケーション**タブで見ることができます。

参考に一覧があるので、見ることをお勧めします。
[参考](https://qiita.com/pipiox/items/95554673ba3b078ac112)

# 試してみる
localStorageとsessionStorageの使い方は基本的に同じ。
`localStorage.setItem(key, 値);`でデータを保存して、`localStorage.getItem(key)`で保存されている値を取得する。また、`lo

事故を起こさないために、日の入りと天気を教えてくれるLineBotをつくってみた

#プログラミング初心者がLineBotをつくってみた
飲食店で働く私が、学んだプログラミングをもとに、LineBotを作成してみました。
こんな風に考えたらできた！というところや、つまづいた箇所もまとめたので、
そこも含めて、読んでいただければと思います。

#コロナ禍でのデリバリー需要の増加
コロナ禍になり、UberEatsや出前館などのデリバリーをよく見るようになりました。
飲食店からすると、この委託配送ってすごく手数料が取られて、大変なんです。
ということで、自分たちで運んじゃえ！と思い、
私の働くお店でもデリバリーを始めることになりました。

#事故の傾向
そうしていく中で、手探りの中でやっていたのですが、
悲しいことに、事故が頻発してしまいました。

事故が起きやすい原因の傾向が、
**・夕暮れ時でライトを点けずに、車に見落とされる**
**・雨の日にスリップして転倒する**
の２つがあります。

なので、事故を未然に防ぐために、
**①日の入り時刻が分かるLineBot**
**②今日の天気が分かるLineBot**
をつくろうと思いました。

#事前準備
まずは、Li

[非エンジニアでもできる] SlackのステータスをGoogleカレンダーから取得する

## はじめに
この記事は「[GoogleカレンダーとSlackステータスを連携する【GAS】](https://qiita.com/zama_8722/items/7d06767b19dec745c3bf)」を参考にしたものです。

## 背景
ちょっとした心がけですが、お昼休憩に入るときはSlackのステータスを「? おひる」に手動で変更しています。

こうしている理由は、仕事の連絡やメンションをくれた方が「あれ？返事遅いな」と思った際に、ステータスを見て「休憩か」とわかってもらうためです。

でも、結構な頻度で変更し忘れる & 手動でやるのが単純にめんどくさいので、「誰か同じことをうまくやっていないかな」と思い記事を書くに至っています。

#### うらばなし
[Google Calendar と Slack を連携さ

初心者向けの記事って多すぎん？？（javascript初心者向けQiitaAPIでLGTM数TOP10を出してみる）

#はじめましての自己紹介
はじめまして！超ウルトラスーパー初心者のぜらちんです。
JavaScript？新しい紅茶？というくらいにチンプンカンプンな30オーバー限界ヲタク女が
JavaScriptで何かを作り始めてみる、という記事をこれからいくつか投稿していこうと思います。

#何を作ろうか
まずはQiitaのAPIを使用して、（この言い回しがあっているかも分からない……。）
初心者が読むべき記事を抽出してみることにします。
そう。自分のために作るのです！
Qiitaは記事が多すぎる……。初心者向けだけでも無数にある中から良さそうな記事だけ読みたいんじゃー！
何をもって良い記事とするか。そう。他者からの評価が多い記事だけを読むのです。

#作成するものの概要
・QiitaAPIを使って、記事タイトル、本文、タグに「javascript」と「初心者」が含まれる記事を取得する。
・2021年9月までの記事を取得することにする。（実行の度に結果がブレるため日付を区切る。）
・結果を手動集計しLGTM数で並び変える。（アナログ・・・！）

#環境
Node　v16.10.0
axios　0.2

ニコ生ゲームの作り方についてまとめた（まとめてくれている）記事　※リンク多め

#ニコ生ゲームとは\:kissing_closed_eyes:

ニコニコ生放送で視聴者参加型の皆で出来るゲームです。
例：つりっくま、ニコニコタワーなど。

ニコ生ゲームはゲームエンジンとしてAkashic Engineを使用しています。
言語はjavaScriptかTypeScript。

公式HP

https://akashic-games.github.io/

ニコ生ゲームの作り方

https://akashic-games.github.io/shin-ichiba/

逆引きリファレンス

https://akashic-games.github.io/reverse-reference/v3/

公式サンプルとか

https://akashic-contents.github.io/samples/index.html

#その１　下準備 \:kissing_closed_eyes:

自分のPCで動作させるためにインストールするもの

https://akashic-games.github.io/shin-ichiba/install.html

※2021/

a

#ニコ生ゲームとは\:kissing_closed_eyes:

ニコニコ生放送で視聴者参加型の皆で出来るゲームです。
例：つりっくま、ニコニコタワーなど。

ニコ生ゲームはゲームエンジンとしてAkashic Engineを使用しています。
言語はjavaScriptかTypeScript。

公式HP

https://akashic-games.github.io/

ニコ生ゲームの作り方

https://akashic-games.github.io/shin-ichiba/

逆引きリファレンス

https://akashic-games.github.io/reverse-reference/v3/

公式サンプルとか

https://akashic-contents.github.io/samples/index.html

#その１　下準備 \:kissing_closed_eyes:

自分のPCで動作させるためにインストールするもの

https://akashic-games.github.io/shin-ichiba/install.html

※2021/

マッピングとは

エンジニアの間で「マップしといて」「マッピングされてるよ」と話しているのを聞いた。
なんだろと検索してみると、「何かと何かを関連づけること」と出てきた。

元々は「地図を描く」という意味だが、「位置付ける、関連づける」という意味合いもあるようだ。
エンジニア同士では「関連づける」という意味で使われている。

例えば、Linuxのディレクトリで、「/etc」と「/private/etc」がある。
どちらも同じファイルが入っていた。これは2つがマッピングされているということだ。

システム開発でも多く使われているよう。

「X-tech」は時代の寵児なのか

#まえおき

**最近「X-tech」って無限増殖してると思いませんか？**:thinking:

ちょっと検索するだけで色々記事出てきますよね。

[【2021年最新】XTechとは？最新の事例と共に徹底解説！](https://qeee.jp/magazine/articles/6492)
[全22種類のX-Tech（〇〇Tech）まとめ](https://business-textbooks.com/x-tech/)
[新しい価値を生み出すX-Techとは？世界的に拡大している背景も解説](https://tech-camp.in/note/technology/71493/)

僕は普段金融機関で勤めてるんですが、流石に「fintech」は一般用語化しています。
新しい技術の恩恵を受けながら、エンジニアは様々な事業領域を日々進歩させているのだなぁと素人ながらに思うわけです。ありがとう、エンジニア。

様々な業界の「ナントカtech」がQiitaの中でどのくらい話題になっているのか
APIの練習も兼ねて、タグから投稿数を見てみ