f@ctor

JavaScript関連のことを調べてみた2019年12月31日

JavaScript関連のことを調べてみた2019年12月31日
目次

AtCoder 精選過去問 10 問を JS ワンライナー で挑戦

## ことのはじまり・・・
「競技プログラミングを通して，みんなで楽しみながらプログラミング力をアップしよう！」ということで，職場でプロコン部が発足しました。[AtCoder](https://atcoder.jp/) という競技プログラミングサイトがあって，まずはこちらの記事に掲載されている過去問 10 問にチャレンジしてみました。

[『AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問』](https://qiita.com/drken/items/fd4e5e3630d0f5859067)

AtCoder は色んな言語で挑戦することができます。Rust や Haskell 使いのメンバーがいる中，何の言語がいいかな～と考えましたが，あまちゃんの私は結局 JavaScript を選択しました。でも，初級問題をただ単にクリアしても面白くないかな～と思い，なんとなく全てワンライナーで解いてみることにしました。

## ルール

+ １行のアロー関数（の組み合わせ）で構成
+ { } は使わない
+ for, if は使わない
+ 三項演算

元記事を表示

フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話

# 始めに
## できたもの
実際に作ったポートフォリオは[こちら](https://nomura-lab.github.io/portfolio/)
![スクリーンショット 2019-12-31 6.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475291/3748aee7-ea07-87be-210d-2c64f2f4d713.png)

github pagesで公開しています．
また，ソースコードは[こちら](https://github.com/nomura-lab/portfolio)
(vue router使ってないのに入ってたり，リファクタリングすべき箇所は満載ですが．．．)

## 参考
– [フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話](https://qiita.com/p1ass/items/a01578b782f17f573510)
– [【Vue.js】爆速でSPAを作る](https://qiita.com/nagimar

元記事を表示

ひとり開発時の備忘録

#Firebase
– firebase login
– firebase init
– firebase deploy

#Bitbucket
[bitbucketのコマンド](https://qiita.com/yyosuke/items/986dabc9906674e2ea97)

– 初期化
– git init
– git remote add origin git@bitbucket.org:xxxx/xxxx.git

– アップロード
– git add .
– git commit -m “xxxx”
– git push

– ダウンロード
– git pull　

#時短開発
[vscodeでEmmet](https://technical-creator.com/vscode-emmet/)
html:5,h1#id,h1.class,ul>li*3 などは覚えておくと便利

[vscodeでホットリロード](https://www.nxworld.net/services-resource/vscode-exte

元記事を表示

ReactとApolloでGraphQLを使った簡易Todoリストを作成してみた

**私は初心者です。ググりながら書きました、間違いなどあれば教えていただけるとありがたいです** :bow:

参考

– [Apollo なら爆速で GraphQL サーバーと GraphQL クライアントアプリが作れる – Qiira](https://qiita.com/jintz/items/4ddc6bf4f95238eff5e9)
– [React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった – fortkle blog](https://fortkle.hatenablog.com/entry/2019/12/11/095719)

—

![7WoZtWz864.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/8cf8bf05-3765-3d10-3d2c-a9d95ada8cc6.gif)

—

私が作成したコードは以下です

大量の点の 2 次元プロット（regl-scatterplot）

こんにちは。
[regl-scatterplot](https://github.com/flekschas/regl-scatterplot/) を試してみました。そっくりそのままの下記のソースを動かしただけですが、100万点をプロットしてもレスポンスは良いようです。

* [WebGL-based Scatterplot build with Regl ](https://flekschas.github.io/regl-scatterplot/)(regl-scatterplot demo)

scatter.jpg

“`index.html




regl-sca</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>WebGL</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kkdd/items/86a8395899f123573e33'>元記事を表示</a></div> <h3 id="outline__6"><a href='https://qiita.com/glassmonkey/items/a8a8a5f0b7c16b940f46'>Cloud Functions for Firebase入門 (簡単なテストまで）</a></h3> <blockquote><p># モチベーション<br /> 最近`Cloud Functions for Firebase`の開発を少しやってみて色々右往左往してたので、初心者なりにフローをまとめてみました。<br /> フロント側を最近Vueを使った開発を行っており、極力現在のフロント環境（`es6, webpackによるバンドル化など`）と合わせる構成にしています。</p> <p># ゴール<br /> firebase functinonsの開発/運用するために以下の点をできるようにする<br /> * デバッグ(ローカル上での実行およびホットリロード)<br /> * テスト<br /> * デプロイ</p> <p># Cloud Functions for Firebaseとは<br /> GCPサービスとして提供されているCloud Functionsを簡単にfirebaseの各種サービスと連携して使える、いわゆるFaasサービスです。詳しく書くとにわかがばれそうですが、[公式リファレンス](https://firebase.google.com/docs/functions?hl=ja)をみることをおすすめします。</p> <p># 作成したもの<br /> こちらに[サンプル](https://github.com/glass</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Firebase</div> <div class='tag-cloud-link'>webpack</div> <div class='tag-cloud-link'>Jest</div> <div class='tag-cloud-link'>cloudfunctions</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/glassmonkey/items/a8a8a5f0b7c16b940f46'>元記事を表示</a></div> <h3 id="outline__7"><a href='https://qiita.com/moraler/items/48d604fec80294ae7735'>Electronで「要素の検証」を再現する方法</a></h3> <blockquote><p>##本文<br /> 初投稿です。<br /> Chromeで右クリックすると出てくる「検証(I)」。<br /> 押すとデベロッパーツール内でカーソル直下の要素にジャンプします。<br /> Electron内でも使えると開発中なにかと便利なので、この機能を再現してみます。</p> <p>##openDevTools</p> <p>Electronで単にデベロッパーツールを開く場合は`webContents.openDevTools([options])`を使います。</p> <p>“`javascript<br /> const { remote } = require(‘electron’)<br /> const webContents = remote.getCurrentWindow()<br /> webContents.openDevTools()<br /> “`<br /> modeオプションで表示位置の指定ができます。</p> <p>| mode |状態|<br /> |:-:|:–|<br /> |right|画面右に表示|<br /> |bottom|画面下に表示|<br /> |detach|別ウィンドウに切り離して表示|<br /> |undocked|別ウィンドウに切り離すが画面内に戻すこともできる|<br /> “`javascript<br /> webContents.ope</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>Chrome</div> <div class='tag-cloud-link'>Electron</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/moraler/items/48d604fec80294ae7735'>元記事を表示</a></div> <h3 id="outline__8"><a href='https://qiita.com/t-yama-3/items/a704cd0d5389440bb942'>JavaScript / Setオブジェクトで文字列を１文字単位でまとめて格納する</a></h3> <blockquote><p>JavaScriptのSetオブジェクトに、文字を1文字ずつ簡単に格納する方法について書いておきます。<br /> 後者の書き方で記載すれば、１文字ずつカンマで区切る必要がなくなります。</p> <p>#### 1. 標準的な書き方</p> <p>“`sample.js<br /> const kans = new Set([‘〇’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘七’, ‘八’, ‘九’]);</p> <p>console.log(kans.has(‘一’));<br /> // 表示結果 true</p> <p>console.log(kans.has(‘四’));<br /> // 表示結果 true</p> <p>console.log(kans.has(‘百’));<br /> // 表示結果 false<br /> “`</p> <p>#### 2. 簡単な書き方</p> <p>“`sample.js<br /> const kans2 = new Set(‘〇一二三四五六七八九’);</p> <p>console.log(kans2.has(‘一’));<br /> // 表示結果 true</p> <p>console.log(kans2.has(‘二三’));<br /> // 表示結果 false</p> <p>console.log(kans2.ha</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>文字列処理</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/t-yama-3/items/a704cd0d5389440bb942'>元記事を表示</a></div> <h3 id="outline__9"><a href='https://qiita.com/shigekinishitsuji/items/53912a4da0beb817ea4d'>document.designMode の値、 on と off を切り替えるブックマークレット</a></h3> <blockquote><p>ドキュメントを編集可能にするかどうかを切り替えるブックマークレット。</p> <p>## ブックマークレット</p> <p>“`js<br /> javascript:(function(){document.designMode = document.designMode === ‘on’ ? ‘off’ : ‘on’;})();<br /> “`</p> <p>三項演算子を使って、`document.designMode`の値が`on`の場合は`off`に、`off`の場合は`on`に変更している。</p> <p>## document.designMode プロパティ</p> <p>`document.designMode`プロパティは、ドキュメント全体を編集可能にするかどうかを制御する。<br /> `on`で編集可能にする。 </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/shigekinishitsuji/items/53912a4da0beb817ea4d'>元記事を表示</a></div> <h3 id="outline__10"><a href='https://qiita.com/yukataoka/items/e038de8f165b35f1e7c8'>kintone から SendGrid プラグインを利用してメール送信</a></h3> <blockquote><p>## 概要<br /> ハッカソンのような利用シーンで kintone の入力内容を簡単にメール送信する方法を調べてみました。<br /> 結果、Azure Marketplace の SendGrid と、SendGrid for kintone プラグインの利用で簡単かつ迅速に実現できることがわかりました。</p> <p>## SendGridの設定<br /> ### Azure のアカウント作成<br /> 以下のWebページなどをを参考にアカウントを作成します。<br /> 【Azure入門①】Azureの始め方～アカウント作成～<br /> https://engineer-ninaritai.com/azure-howto-start/</p> <p>### SendGrid の準備<br /> 以下のWebページなどを参照にAzureのMarketplaceでSendGridのFreeプランでアカウントを作成します。<br /> AzureでSendGridを利用してメール送信 (5分で)<br /> https://qiita.com/y-araki-qiita/items/3c353fa339fd5c0b0231</p> <p>SendGridは構造計画研究所経由で以下のサイトからも申込みができますが、Az</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>SendGrid</div> <div class='tag-cloud-link'>kintone</div> <div class='tag-cloud-link'>kintoneplugin</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/yukataoka/items/e038de8f165b35f1e7c8'>元記事を表示</a></div> <h3 id="outline__11"><a href='https://qiita.com/sterashima78/items/e5518dabbfccdf6a205d'>最初のほうから始めるJavaScriptとVue.jsそして composition-api</a></h3> <blockquote><p># 目的</p> <p>プログラミングはしたことあるけど、Web系はあまり経験していない。<br /> Webプログラミングしたことあるけどググって何となくやっている。</p> <p>上記のような人たちを対象に Vue.js でアプリケーションを書く利点を理解してもらう。<br /> 加えて composition-api を利用する利点を理解できるまでにしたい。</p> <p>基本的な使い方やAPIなどは世の中に星の数ほどあるチュートリアル記事に任せるとして、ここでは、なぜ Vue をWeb開発に利用するのか？という点にフォーカスする。</p> <p># 注意</p> <p>– プログラミング経験自体はあることを前提とするので、基本的な制御構文や個別のAPIを掘り下げたり詳細な説明はしない。<br /> – 説明の順序的にHTMLなどの説明からすることになるが、個別のタグやCSSのプロパティについての説明もしない。<br /> – React などと比較して Vue を選択する動機などは説明しない。本文章の役割はその前段階にある。<br /> – React を勧めたい人はこの説明をそのまま React や Hooks に変えればよいのかもしれない<br /> – Vue.js にはカスタムコンポーネント</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Vue.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/sterashima78/items/e5518dabbfccdf6a205d'>元記事を表示</a></div> <h3 id="outline__12"><a href='https://qiita.com/70days_js/items/91c30068c562cb1ce410'>年末まで毎日webサイトを作り続ける大学生 〜73日目 星空を作る~</a></h3> <blockquote><p>##はじめに<br /> こんにちは！@70days_jsです。<br /> 星空の風景を作ってみました。(gif)↓</p> <p>![test3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/0465b805-3394-1368-162b-eb0da427e441.gif)</p> <p>今日は73日目。(2019/12/30)<br /> よろしくお願いします。</p> <p>##サイトURL<br /> https://sin2cos21.github.io/day73.html</p> <p>##やったこと<br /> 星空の風景を作りました。<br /> 3秒経つとエイリアンが現れます。</p> <p>html↓</p> <p>“`html<br /> <body><br /> <canvas id="canvas"></canvas><br /> </body><br /> “`</p> <p>css↓</p> <p>“`css<br /> body {<br /> background-color: rgba(14, 34, 71, 1);<br /> margin: 0;<br /> overflow: hidden;<br /> }<br /> “`</p> <p>background-colorは真っ黒じゃなく、少し紺っぽい色</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/70days_js/items/91c30068c562cb1ce410'>元記事を表示</a></div> <h3 id="outline__13"><a href='https://qiita.com/ohnaka0410/items/0bdc3644b20b28d864a2'>Geolocation API をPromiseを使ってラップする(TypeScript利用)</a></h3> <blockquote><p>[Geolocation API](https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation) を扱い易くするため、Promiseを使ってラップしたので忘備録に。<br /> ※ [Geolocation APIをPromiseでラップして扱う（TypeScript）](https://qiita.com/makotoyc/items/aee473b341cd3a7bd31f)を参考に、もう少し細かく型を書いてみました。</p> <p>## クラス定義<br /> “`typescript:Geolocation.ts<br /> /**<br /> * 位置情報クラス<br /> */<br /> class Geolocation {<br /> /**<br /> * 現在位置取得処理<br /> */<br /> static getCurrentPosition(): Promise<Position> {<br /> return new Promise<Position>(<br /> (<br /> resolve: (position: Position) => void, </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>Geolocation</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ohnaka0410/items/0bdc3644b20b28d864a2'>元記事を表示</a></div> <h3 id="outline__14"><a href='https://qiita.com/megmogmog1965/items/4ecffa87167072a9147b'>Node.js の Async Hooks API の動作を検証しました</a></h3> <blockquote><p> 必要に迫られて、Node.js の [Async Hooks] API について調べたので、その仕組を実例を用いて説明します。</p> <p>## Async Hooks とは?</p> <p>Node.js の [Stability: 1 – Experimental](https://nodejs.org/dist/latest-v12.x/docs/api/documentation.html#documentation_stability_index) (2019/12/30 現在) な機能です。<br /> 主に **非同期呼出を追跡する** のに使われています。例えば以下の様な NPM Module が [Async Hooks] を使っています。</p> <p>* [longjohn](https://github.com/mattinsler/longjohn) → 非同期呼出で途切れる Stack trace を繋げて表示する<br /> * [trace](https://github.com/AndreasMadsen/trace) → 非同期呼出で途切れる Stack trace を繋げて表示する<br /> * [express</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>asynchooks</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/megmogmog1965/items/4ecffa87167072a9147b'>元記事を表示</a></div> <h3 id="outline__15"><a href='https://qiita.com/t-yama-3/items/9819600cec53723472d3'>JavaScriptで文字列中の漢数字を算用数字に変換する</a></h3> <blockquote><p>## 概要<br /> JavaScriptの学習を１か月前にしたはずが、さっぱり忘れていましたので、復習のために、「文章中の漢数字を算用数字に変換するプログラム」を作ってみました。<br /> 次のようにブラウザで表示するもので、変換ボタンを押すと算用数字に変換された文章が表示されます。<br /> なお、’二千十九年１２月三〇日午後６時五十五分’ というように算用数字などが混在していても、変換可能です。<br /> <img decoding="async" width="889" alt="スクリーンショット 2019-12-30 16.00.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/87bd702b-4f17-cad4-d6ff-93e1ad70792d.png?test=1&y=n"><br /> 以下に、ソースコードと、簡単な説明（備忘）を掲載します。<br /> 学習中で未だ理解が浅いため、コードが冗長であったりして、いまいちな部分が多いと思います。モヤモヤした方は、ご指摘などいただけると幸いです。<br /> ## サンプルコード<br /> ### 1. JavaScript<br /> “`script.js</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>文字列処理</div> <div class='tag-cloud-link'>漢数字</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/t-yama-3/items/9819600cec53723472d3'>元記事を表示</a></div> <h3 id="outline__16"><a href='https://qiita.com/Yack-Deculture/items/0b4d3d8cf64733541c65'>Ubuntu 19.10のRedmineでのいくつかのバグフィックスをした</a></h3> <blockquote><p># Ubuntu 19.10のRedmineでのいくつかのバグフィックスをした</p> <p>これまでもアップしたのも含め、Ubuntu 19.10のRedmineでは以下の不具合がありました。<br /> 致命的だったモーダルダイアログの件以外はちゃんとバグレポート上げれてないけど…。</p> <p>* jQuery UIのバージョン違いのため、ダイアログが表示されない。<br /> * jQuery UIのバージョン違いのため、Closeボタンの上に「Close」というテキストが表示されてしまう。<br /> * ガントチャートでカミナリ線・関係線が表示されない。<br /> * チケットのインポートができない。</p> <p>他にも以下の便利機能を足してみました。</p> <p>* インポート時の日付形式で「yyyy/mm/dd」形式を使えるようにする。<br /> * ガントチャートの表示開始を前月にする。<br /> * [チケット新規作成時の担当者を自分にする](http://redmine.jp/faq/issue/set_current_user_to_assigned_to_field/)</p> <p>## jQueryのバージョン違いについて</p> <p>いくつかのメンバ関数がプロパティに変更されて</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Ruby</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Ubuntu</div> <div class='tag-cloud-link'>Redmine</div> <div class='tag-cloud-link'>jquery.ui</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Yack-Deculture/items/0b4d3d8cf64733541c65'>元記事を表示</a></div> <h3 id="outline__17"><a href='https://qiita.com/cc822jp/items/1149bf1210ffedd336d7'>簡易Webアプリをプロが仕上げるとどうなるか（見積もり編）</a></h3> <blockquote><p>前回ライブコーディングしたモンテカルロ法のシミュレータを<br /> プロのフロントエンドエンジニアが仕上げると、どういう風になるかを説明します。</p> <p>動画解説版：https://youtu.be/WjYFiza_LMY</p> <p># 目的</p> <p>若手のエンジニアさんに<br /> フリーランスのフロントエンドエンジニアがどういう思考回路で仕事をしているかを知ってもらいたい</p> <p># そもそもモンテカルロ法とは？</p> <p>ルーレットの掛け金を決める法則で、その通りやれば必ず勝つと言われているものです。</p> <p>## ルール1. 紙とペンを用意</p> <p>– 用意した紙に、数列「1, 2, 3」を記入<br /> – 両端の数字を足した値がベット額となる（1 + 3 => $4 ベット）</p> <p>## ルール2-1. 負けた場合</p> <p>– 数列の最後に「賭け金」を追加する（1, 2, 3 => 1, 2, 3, 4）</p> <p>## ルール2-2. 勝った場合</p> <p>– 両端の数字を削る（1, 2, 3 => 2）</p> <p>## ルール3. 残りの数字が無くなる or 1つになれば終了</p> <p>– その時点で黒字が確定する</p> <p>![スクリーンショット 2019-12-30 5.47.07.png</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>フロントエンド</div> <div class='tag-cloud-link'>frontend</div> <div class='tag-cloud-link'>見積もり</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/cc822jp/items/1149bf1210ffedd336d7'>元記事を表示</a></div> <h3 id="outline__18"><a href='https://qiita.com/ahya_emon/items/734eb39997a0911c6f99'>svelteでfirebaseをimportするとopenDbのエラーが出る時</a></h3> <blockquote><p>“`<br /> Error: ‘openDb’ is not exported by node_modules/idb/build/idb.js<br /> “`</p> <p>というエラーが出た。</p> <p>rollup.config.jsのresolveに下記を追記する</p> <p>“`javascript<br /> export default {<br /> plugins: [<br /> resolve({<br /> mainFields: [‘main’, ‘module’], // ここ<br /> “` </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>rollup.js</div> <div class='tag-cloud-link'>Svelte</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ahya_emon/items/734eb39997a0911c6f99'>元記事を表示</a></div> <h3 id="outline__19"><a href='https://qiita.com/vivid_muimui/items/b94dbb0576ed42631349'>Ruby/Rails でサーバ転職後数ヶ月で、TypeScript/React/Redux なチームで書けるようになるまでに参考にしたこと</a></h3> <blockquote><p>夏に転職して、それまではrubyしか書いてこなかったのですが、<br /> 転職後はそれまで全く触ってこなかった TypeScript/React/Redux/Firebase なチームに入って開発できるようになるまでに参考になったものです。<br /> もちろん、実際にはもっと他にも色んなものを参考にしています。<br /> また、ここに書いたものも隅々まで読んだりしたわけではないのですが、振り返ってみて役に立ったなって思い出せるのを書いてみました。</p> <p>## 本</p> <p>– りあクト！<br /> – [りあクト！ TypeScriptで始めるつらくないReact開発 第2版](https://oukayuka.booth.pm/items/1312652)<br /> – [りあクト！ Firebaseで始めるサーバーレスReact開発](https://oukayuka.booth.pm/items/1572683)<br /> – ESLintの設定や、おすすめpackageなど書かれててたり、こういう書き方は良くないとか書かれてて最高<br /> – [実践TypeScript](https://note.com/takepepe/n/nb</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>redux</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/vivid_muimui/items/b94dbb0576ed42631349'>元記事を表示</a></div> <h3 id="outline__20"><a href='https://qiita.com/hito01010101/items/833ee544c498174d74ac'>FlaskとReact使ったTwitter認証をWebSocket使ってめっちゃ強引に行う</a></h3> <blockquote><p>## 概要<br /> reactにおける認証は下記のページなどで行っている人が複数人いる。<br /> [React Authentication with Twitter, Google, Facebook and Github](https://codeburst.io/react-authentication-with-twitter-google-facebook-and-github-862d59583105)<br /> [ReactでSPAを作り、Twitter認証(OAuth)でログインする。バックエンドはRails](https://beautifulajax.dip.jp/?p=1619)<br /> ただ、自分は馬鹿なのでいまいちよくわからなかった(後、上記ページはサーバーサイドがexpressとかRailsでflaskは見つからなかった)。<br /> そのため、小手先でめっちゃ強引な認証を書いた。</p> <p>WebSocket使うのもReactのuseEffect使うのも、Flask使うのも初めてなので、参考程度にみてもらえると良い(後々、ちゃんとしたコードで書き直したい)<br /> ## 流れ<br /> 今回は「連携アプリ認証」のボタンを押</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Python</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Flask</div> <div class='tag-cloud-link'>websocket</div> <div class='tag-cloud-link'>React</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/hito01010101/items/833ee544c498174d74ac'>元記事を表示</a></div> </div> </section> <!-- 記事下シェアボタン --> <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2019%2F12%2F31%2Fpost-1805%2F&t=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2019%E5%B9%B412%E6%9C%8831%E6%97%A5" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2019%E5%B9%B412%E6%9C%8831%E6%97%A5&https%3A%2F%2Fmiofactor.com%2F2019%2F12%2F31%2Fpost-1805%2F&url=https%3A%2F%2Fmiofactor.com%2F2019%2F12%2F31%2Fpost-1805%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?JavaScript%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F2019%E5%B9%B412%E6%9C%8831%E6%97%A5%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2019%2F12%2F31%2Fpost-1805%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside> <!-- /記事下シェアボタン --> <!-- 記事下エリア[widget] --> <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside> <!-- /記事下エリア[widget] --> <!-- 関連記事 --> <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2022/01/13/post-15848/" title="PHP関連のことを調べてみた2022年01月13日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/php-150x150.png" alt="PHP関連のことを調べてみた2022年01月13日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2022/01/13/post-15848/">PHP関連のことを調べてみた2022年01月13日</a> <span class="icon-calendar">2022.01.13</span> </h3> <p class="related__contents">目次 1. myAssignとは2. 配列に値を追加する複数の方法3. $thisってなんぞ？4. コメントアウトの@return voidってなんぞ[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2021/10/27/post-13896/" title="Node.js関連のことを調べてみた2021年10月27日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/nodejs-150x150.png" alt="Node.js関連のことを調べてみた2021年10月27日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/10/27/post-13896/">Node.js関連のことを調べてみた2021年10月27日</a> <span class="icon-calendar">2021.10.27</span> </h3> <p class="related__contents">目次 1. Google Photosからランダムな1枚の画像を取得できるようにする2. obniz feat.BAIKIN-MAN!3. node.[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2023/10/02/post-28079/" title="Ruby関連のことを調べてみた2023年10月02日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ruby-150x150.png" alt="Ruby関連のことを調べてみた2023年10月02日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2023/10/02/post-28079/">Ruby関連のことを調べてみた2023年10月02日</a> <span class="icon-calendar">2023.10.02</span> </h3> <p class="related__contents">目次 1. Webpacker::Manifest::MissingEntryErrorの解決方法2. Deviseで複数モデルを使用したログインの実[…]</p> </li> </ul></aside> <!-- /関連記事 --> <!-- コメント --> <!-- /コメント --> <!-- PVカウンター --> <!-- /PVカウンター --> </main> <!-- /l-main --> <!-- l-sidebar --> <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div> <!-- /l-sidebar --> </div> <!-- /l-wrapper --> <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36890/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div> <!-- schema --> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2019/12/31/post-1805/" }, "headline": "JavaScript関連のことを調べてみた2019年12月31日", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2019-12-31T11:50:17+0900", "dateModified": "2019-12-31T11:50:17+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 1. AtCoder 精選過去問 10 問を JS ワンライナー で挑戦2. フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話3. ひとり開発時の備忘録4. ReactとApolloでGraphQLを使った簡易Todoリストを作成してみた5. 大量の点の 2 次元プロット（regl-scatterplot）6. Cloud Functions for Firebase […]" } </script> <!-- /schema --> <!--l-footer--> <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer> <!-- /l-footer --> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>