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

推しリポジトリをチェックするChrome拡張つくってみた

# Githubいろいろ

OSSが広まるについてGithubの色々な使い方が出てきたと思う

– 個人開発、自社開発のソース等を管理するリポジトリとして
– 開発に使うフレーワーク、ライブラリの参照先、コードのサンプルの探し

この元々の用途プラス、SNSやDeepLearningの論文とかの広がりで

– 友達や研究用リポジトリを追っかける。**言わば推しリポジトリ**

てな用途があるかなと思ってる。**新しいの出来たら一ファンとして即知りたいですよね！**

# つくってみたわ

１．Chrome拡張なので[crxファイルをリリースページからダウンロード](https://github.com/yasutakatou/repop/releases)して開発モードからイ

WSH(Windows Script Host)

##フルパスからファイル名を取得する

“`javascript
//ファイルシステムオブジェクトを生成する
var fs = Wscript.CreateObject(“Scripting.FileSystemObject”);
//フルパスからファイル名を取得
var fileName = fs.GetFileName(“C:\\△△△\\〇〇〇\\×××××\\sample.txt”);
//fileName = sample.txt
“`
————————————

[javascript]javascriptとは

#javascriptとは
JavaScriptは、HTML／CSSでは実現できない「動きの変化」を設定できます。
HTML／CSSで作成したWebサイトは、ブラウザ表示中に色を変えたり文字を編集したりすることはできません。コードで指定した通りの色や文字で、表示されます。
例えば、「いいね」機能です。SNSでよくある機能ですが、ハートマークを押すと、赤色に変わりますよね。これは、HTML/CSSではできません。javascriptの機能になります。

JavaScriptの記述方法は、次の2種類あります。

・ファイル内に記述する
・専用のファイル（拡張子.js）にJavaScriptのみ記述する

順番に見ていきます。

###ファイル内に記述する
HTMLファイル内に、scriptタグを使って、直接JavaScriptを記述します。

“`index.html






```

を読み込んでbodyの最後で，

```

```

こうやれば，id="profile"がCKEditorに置き換わった．

でだ，

設定変えたくて，デフォルトのconfig.jsとは別に同じ階層に作った，**config2.js**を読み込もうとしたのさ．
こんな感じで公式に沿った．

```

```

## 反映されない．

## ２時間は悩んだ．

CSSで無理やり

NewsAPIを使い簡単にニュースサイトを作る

[前回の記事](https://qiita.com/UTOG/items/d33ba3a98dcb3e82a8fe)で予告したとおり今回はNewsAPIというものを使いニュースを取得して表示までします。

###プチ宣伝
誰でも簡単にオリジナルニュースが作れる[素人ニュース](https://amateur-news.herokuapp.com/)というものを作りました。今回作るニュース一覧もあります。どんな風に動くか気になる方もみてください。[前回の記事](https://qiita.com/UTOG/items/d33ba3a98dcb3e82a8fe)で紹介しています。

##完成図

##APIを取得する

まず[NewsAPIのサイト](https://newsapi.org/)に行って「Get API Key」ボタンを押してくださ

コンストラクターとインスタンス　初心者による初心者向けの説明

# コンスタラクターとは
オブジェクトを複数作る必要があるときに作成する**雛形**です。

### 雛形をつくります
コンストラクター関数を記述（コンストラクター関数の定義）をします。
慣例的にコンストラクター関数名は他の関数名と見分けがつきやすいように、一文字目を大文字とします。

例えば、名前、HP、攻撃力、必殺技を持つキャラクターを複数生成したい!
そんなとき、まず雛形を作成します。

```js
function Caracter(name, hp, atk, skills) {
this.name = name;
this.hp = hp;
this.atk = atk;
this.skill = skills;
}
```

雛形ができたら次はインスタンス化します。
# インスタンスとは
雛形をもとにつくられた実体のこと。
雛形を実体化することをインスタンス化という。

### 作成した雛形をもとにキャラクターを生成します
さきほど作成したCaracterコンストラクターの仮引数に沿って実引数を入力していき、インスタンス化してみます。
new演算子を頭に

（初心者向け）JavaScript関数における引数の受け渡しについて

今回は関数の初学者向けに解説したいと思います。

私も最初につまずいたところですので、備忘録も兼ねて記述します。学習の手助けになれば幸いです。

## 関数における仮引数と実引数について

まず、関数を宣言する際、関数名の後ろに（）をつける必要があります。呼び出すときも同様です。

```javascript
function greet() {
console.log(Hello!)
};

greet();
```

この（）は空でもよいのですが、引数を指定することもできます。

引数は英語で`argument`です。関数は引数を受け取って計算等に利用します。
では、以下の例を見てみましょう。

```javascript
functuin sum(a,b) {
console.log (a+b)
};

sum(4,5);
```

この場合結果はどうなるでしょうか。4＋5で`９`ですね。

これは呼び出しの際、（）内の４と５がそれぞれ**関数で宣言したaとbに渡されている**からです。
ここでのaとbを**仮引数**、４と５を**実引数**と言います。関数は実引数を受けと

ChromeのデバックでJSのライブラリを見ないようにする。

Chromeの検証ツールでJavascriptのデバックをするときにブレイクポイントを貼って、自分が書いたJSの挙動を確認するかと思います。しかし、コードをステップで辿るうちに以下の画像のようにライブラリの中身まで見てしまい、支障をきたすことがあるかと思います。そこで、デバックの際にライブラリに侵入するのを避けるための設定をご紹介します。


####１、 Chromeの検証ツールを開く。

####2、 右上の歯車マークを押すと以下の画面になる。
![image.png](https://qiita-

【JS】GraphQL 基礎

`GraphQL` を触ることになったので、評価の高い下記のコースを使って学習しました。
この記事はそのアウトプットになります。
[フロントエンドエンジニアのためのGraphQL with React 入門 \| Udemy](https://www.udemy.com/course/graphql-with-react/)
[GraphQL API Explorer \| GitHub Developer Guide](https://developer.github.com/v4/explorer/)

## GraphQL
- 必要なものを必要な分だけ要求できる
- 一度のリクエストで多くの リソースを取得することができる

### REST、gRPC、GraphQL
[gRPCとGraphQL - Qiita](https://qiita.com/hitochan777/items/7ecc11e77fa89be009d3#:~:text=%E3%81%A9%E3%81%86%E9%81%95%E3%81%86%E3%81%8B,%E3%82%92%E5%AE%9F%E7%

Djangoでフォームの入力欄を動的に追加する

## はじめに
独学でプログラミングを学習中の大学3年生です。

以前、WebアプリケーションをPHPで作成したときに[フォームの入力欄を動的に追加した][Qiita]ことがありました。現在、WebアプリをDjangoに移行中なのですが、タイトルの問題に当たってなかなか解決しなかったためここに残しておきます。

ドキュメントにはこれしか書かれてなかった…

> **empty_form**
> BaseFormSet provides an additional attribute empty_form which returns a form instance with a prefix of __prefix__ for easier use in dynamic forms with JavaScript.

初学者にも分かりやすいように、できるだけ簡潔なコードになるよう心がけています。

## 以前の記事
この記事だけで分からないときは、以前の記事を見てもらえると分かるかもしれません。

- [フォームの入力欄を動的に追加する][Qiita]
- [CodePen][Cod

JavascriptでWindowsアプリがインストールされているかを確認する方法

スマホでURLスキームを使った「指定のアプリが入ってるか判定するJS」があるけど、
Windowsアプリでも使いたかったので色々調べたけど出てこなかった。

スマホと同じで行けるかな？と思って試したけど駄目だったので、別の方法を考えててみた。
やってることは難しくはないけど、この手があったかと思ってやってみたらいい感じに動いたのでメモ。
// なんかもっといい方法がある気もするなぁ…

```html:

{{ me

【LINEWORKS API】postback 設定時にダブルクォート(")をエスケープする方法

最近、割と引っかかってしまったので備忘録的に書いておきます。

# 前置き

LINEWORKS トーク Bot の ListTemplate や ButtonTemplate などでは、ボタンを押した際に postback パラメータを設定することができます。
postback があることにより、どのボタンを押したのかがわかるので Bot コンシェルジュみたいに必要なことを案内したり、アンケート集計みたいなこともできます。



# エスケープの基本

みなさんご存じだと思うのですが

【Nuxt.js】複数ページでパラメータ利用を試してみた【勉強２】

## はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

[こちらのサイト](https://moneyhack.tech/Nuxt.js/06-Nuxt/)にcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

https://moneyhack.tech/Nuxt.js/06-Nuxt/

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

## パラメータ利用とは

パラメータを利用したページとは、同じ vue ファイルのページでも、

URL によって見た目が変わってくるページです。

[まずは実際の振る舞いを確認して、イメージを膨らましてください。](https://moneyhack.tech/Nuxt.js/06-Nuxt/)

以下、サンプルで作成したコードの解説です。

Home Page から 3 つのリンクを載せています。

この 3 つのリンクは URL は異なりますが、同一の Vue ファイルにアクセスしています。

pages フォルダの

javascriptのaddEventListenerイベントまとめ

#はじめに
JavaScriptのイベントマウスクリックやブラウザを開いた時など指定した関数を呼び出すことがよくあり。イベント処理を実現する仕組みするため、addEventListener()が用意されています。
使えない（IE対応できない、一部実装状況不明）場合もありますがほとんどのブラウザが対応できるイベントをまとめてみました。

##目次
1.イベントの種類
2.addEventListener()使い方
3.function他の書き方

##イベントの種類
|イベント種類|内容|ドキュメント|
|---|---|---|
|click |マウスがクリックされた場合 |[参考](https://developer.mozilla.org/ja/docs/Web/API/Element/click_event)|
|keydown　 |キーボードが押された場合|[参考](https://developer.mozilla.org/ja/docs/Web/API/Document/keydown_event)|
|keyup　 |キーボードが離された場合|[参考](https://

対応するかっこのインデックスを返す

# 対応するかっこのインデックスを返す

[Brainfuck](https://ja.wikipedia.org/wiki/Brainfuck) のインタプリタを作ろうかと思って。

## これはなに

かっこ (`[` と `]`) の対応を調べる。
対応するかっこがあればそのインデクスを返す。
なければ `-1` を返す。
そもそもかっこでなければ自分のインデクスを返す。

例:

```javascript
let str = '++[>++[>++<-]<-]>>';
let foo = bracket(str, 2); // 15
let bar = bracket(str, 12); // 6
let baz = bracket(str, 7); // 7
let err = '[[[][][]][][]';
let qux = bracket(err, 0); // -1
```

```javascript
function bracket(s, p) {
if (!/\]|\[/.test(s[p])) {
return p;
}
let nest = 1

タブ上からYoutubeを消してバックサウンドとして流せるChrome拡張機能を作った話

YoutubeのURLを入れることで別ウィンドウが開いてバックサウンドとしてYoutubeの曲を流せるChrome拡張機能をつくりました。再生リストも対応。

Mac / Win それぞれ友達にテストとして使ってもらい動くことを確認してもらいました。ありがとう。

※8/21修正:一部タイトルと文章の表現に変更を加えました。

ここからDLできます：Extension Youtube Player

## 成果物

URLを入力すると、

JavaScriptからハードウェアを扱えるWebAPIとその安全性について

最近話題に上がったWebAPIとその安全性について、少しお話しようと思います。

# はじめに
私は、他のどの言語よりJavaScriptが好きです。
ウェブブラウザとテキストエディタさえあれば簡単に始められ、スクリプト言語なのに超高速で、日々進化しており、実行環境や用途を選ばないからです。

そして特に、それらを最先端で支えるChromium(Blink/V8)コミュニティの、新しい実装や活動へ積極的に取り組む姿勢は、とても素晴らしいと感じています。
おかげで、昔はインストールしなければ使えなかったアプリケーションも、今では"Web版"の文字を見る機会も増えました。

最近では [WebUSBを使ったAndroidのアップデート](https://source.android.com/setup/contribute/flash) が話題になりましたね。

そこへ "ちょっと待った" がQiitaユーザーの方から出たわけですが、個人的には少し納得のいかない内容だったため、こうして記事にしてみました。

# WebAPI
ここで言うWebAPIとは **ウェブブラウザからハードウェ