What's New Qiita

20210913のJavaScriptに関する記事は13件です。

  • 投稿日：2021-09-13T22:59:27+09:00

【Jest入門】テストのグループ化

はじめに 今回は、前回Jestが動く環境が作成できたので、テストのグループ化についてまとめたいと思います。 テストのグループ化 Jestではテストを定義するためにtest関数を使います。 test関数のエイリアスとして、it関数を利用することができます。 テストをグループ化するためには、describe関数を利用します。 テストをグループ化することで、グループ毎のテストができるようになり、わかりやすくなります。 describe関数で、it関数とtest関数をグループ化 下記のコードは、引数で受け取った値がbirdであればtrueを返し、それ以外はfalseを返す簡単なコードです。 src/group.js export const isFly = (animal) => (animal === "bird" ? true : false); src/group.test.js import { isFly } from "./group"; describe("#isFly", () => { test("A bird can fly", () => { expect(isFly("bird")).toBe(true); }); it("A horse can not fly", () => { expect(isFly("horse")).toBe(false); }); }); describeでテストの結果がグループ化され、わかりやすくなっていることが確認できます。 terminal $ npm test /Users/jest-basic/src/group.test.js > jest-basic@1.0.0 test /Users/jest-basic > jest "/Users/jest-basic/src/group.test.js" PASS src/group.test.js #isFly ✓ A bird can fly (2 ms) ✓ A horse can not fly Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 0.384 s, estimated 1 s Ran all test suites matching
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T21:28:53+09:00

[React]onClickするたびに配列に要素を追加する

はじめに ラジオボタンを押すと、押した選択肢のvalueが配列に追加するようにしたかった。 方法がわからず、記事を探しても中々見つからず苦労したので、こちらに記録しておきます。 実現したい事 ２つのラジオボタングループがある。 それぞれ３つずつ選択肢があり、ユーザーがクリックした選択肢を配列に追加したい。 解決策 const initialValue = Array(selections.length).fill('0'); const [formData, setFormData] = useState<string[]>(initialValue); const updateSelections = (index: number, value: string) => { const newFormData = formData.slice(); newFormData[index] = value; setFormData(newFormData); }; ///... return ( <div> <FormLabel>{data.formLabel}</FormLabel> <RadioGroup onChange={(e) => updateSelections(index, e.target.value)}> {data.options.map((option) => ( <FormControlLabel key={option.value} control={<Radio />} label={option.label} value={option.value} id={option.value} /> ))} </RadioGroup> </div> ); ①formDataを用意 ②formDataの初期値を0にする(initialValue) ③onChangeにupdateSelectionsを実行し、index,選択肢のvalueを渡す 　updateSelectionsでは、 　(1)newFormDataによってformDataのコピーを作る。（本物を破壊したくないため） 　(2)newFormData[index]によって、配列・newFormDataのindexの位置にvlue(選択肢の値)を挿入する。 (3)(2)の値をsetFormDataに入れる ④formDataにonClickごとに選択肢の値が追加されるようになる 　 indexを渡すことで、要素を判別できるようになり、複数個追加できるようになった。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T20:57:11+09:00

高速道路整備の変遷をMapbox GL JSで表示してみました

はじめに 国土数値情報の高速道路時系列データを用いて、高速道路整備の変遷（1962～2020年）をMapbox GL JS（v2）のタイムスライダー機能で表示してみました。 高速道路時系列データは以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。 https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html 背景地図にはMapboxを使用しているため、別途、Mapboxにてアクセストークンの取得及びstyleのURLが必要になります。 アウトプットイメージ 高速道路整備の変遷（1962～2020年）をMapboxGLJSのタイムスライダー機能で表示してみた?首都圏では首都高1号羽田線・都心環状線から整備が始まり、放射状に整備が進み、3環状（中央環状線・外環道・圏央道）が繋がっていく様子が見れます??#Mapbox #高速道路整備の変遷https://t.co/VDsXSq8YUU pic.twitter.com/mC9am2AqQL— shi_works? (@syanseto) August 22, 2021 ※「高速道路時系列データ」(国土交通省) (https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html) を用いて作成 前提条件 高速道路時系列データは令和2年の「N06-20_HighwaySection.geojson」を用いています。 Mapboxのアクセストークンを入力してください。 styleのURLを入力してください。 N06-20_HighwaySection.geojsonのパスを指定してください。 フィルタには「設置期間（開始年）（N06_002）」を用いています。 html、CSS、JavaScript highway_transition.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>日本の高速道路整備の変遷</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <style> .map-overlay { font: 18px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; position: absolute; width: 25%; top: 0; left: 0; padding: 10px; } .map-overlay .map-overlay-inner { background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px; margin-bottom: 10px; } .map-overlay h2 { line-height: 24px; display: block; margin: 0 0 10px; } .map-overlay .legend .bar { height: 10px; width: 100%; background: linear-gradient(to right, #006400, #00ff00); } .map-overlay input { background-color: transparent; display: inline-block; width: 100%; position: relative; margin: 0; cursor: ew-resize; } </style> <div id="map"></div> <div class="map-overlay top"> <div class="map-overlay-inner"> <h1>日本の高速道路整備の変遷</h1> 使用データ：<br> <a href="https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html" target="_blank" rel="noopener"> 国土数値情報, 高速道路時系列データ（国土交通省）</a><br><br> <label id="year_label"></label> <input id="slider" type="range" min="1962" max="2020" step="1" value="1962"> </div> <div class="map-overlay-inner"> <div id="legend" class="legend"> <div class="bar"></div> <div align="center">昔（1962年）← → 最近（2020年）</div> </div> </div> </div> <!-- // GeoJsonファイルに変数名（highway）を付けてjs拡張子にしたファイルを読込（ローカル環境での実行に対応） <script src="N06-20_HighwaySection.js"></script> --> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> mapboxgl.accessToken = 'Mapboxのアクセストークンを入力してください'; const map = new mapboxgl.Map({ container: 'map', style: 'styleのURLを入力してください', // 例）mapbox://styles/mapbox/satellite-v9 center: [139.7527995, 35.685175], zoom: 8 }); // ズーム・回転 map.addControl(new mapboxgl.NavigationControl()); // フルスクリーンモードのオンオフ map.addControl(new mapboxgl.FullscreenControl()); // スケール表示 map.addControl(new mapboxgl.ScaleControl({ maxWidth: 200, unit: 'metric' })); function filterBy(year) { const filters = ['all', ['<=', 'N06_002', year]]; // 設置期間（開始年） map.setFilter('highway-lines', filters); map.setFilter('highway-labels', filters); // スライダー表示用ラベル document.getElementById('year_label').textContent = year.toString() + '年'; } map.on('load', () => { // jsonCallback(highway); d3.json( 'N06-20_HighwaySection.geojsonのパスを入力してください', // 例）data/N06-20_HighwaySection.geojson jsonCallback ); }); function jsonCallback(data) { map.addSource('highway', { 'type': 'geojson', 'data': data }); // ライン map.addLayer({ 'id': 'highway-lines', 'type': 'line', 'source': 'highway', 'layout': { 'line-join': 'round', 'line-cap': 'round' }, 'paint': { 'line-color': [ 'interpolate', ['linear'], ['get', 'N06_002'], 1962, '#006400', 2020, '#00ff00' ], 'line-width': 7, 'line-opacity': 0.5 } }); // ラベル（高速道路の名称） map.addLayer({ 'id': 'highway-labels', 'type': 'symbol', 'source': 'highway', 'layout': { 'text-field': ['concat', ['to-string', ['get', 'N06_007']]], 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'], 'text-size': 12 }, 'paint': { 'text-color': 'rgba(0,0,0,0.5)' } }); // フィルター実行 filterBy(1962); // 初期表示 document.getElementById('slider').addEventListener('input', (e) => { const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化 filterBy(year); }); } </script> </body> </html> 参考文献
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T20:18:20+09:00

あなたのプロジェクトを煌やかにするアニメーションライブラリ18選

Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing ? GitHub repositories that will help you ? make a Beautiful Projectの日本語訳です。 help youの後の文字は何なのかわからない。 元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。 18 amazing ? GitHub repositories that will help you ? make a Beautiful Project Introduction 複雑なアニメーションや便利な機能をあなたのプロジェクトに導入するために、今役に立つ優れたGitHubリポジトリを紹介します。 それではさっそく始めていきましょう。 1. Lottie-Web/Bodymovin 最初は私お気に入りのリポジトリです。 このライブラリを使うと、Adobe After Effectsで作成したアニメーションをそのままWebサイトに出力することができます。 2. Parallax.js マウスで操作できる美しい視覚効果を演出することができます。 さらにオブジェクトの移動速度を調整することもできます。 3. Flat Surface Shader [FSS] ランバート反射モデルを使い、光源を反映するタイル背景を生成します。 デモサイト。 4. Hover.css ボタンなどにマウスを乗せたときに起こせるホバーエフェクトのコレクションです。 デモサイト。 5. Video.js Markers 動画のプログレスバーにマーカーを表示して注目させることができます。 6. Magic Grid ダイナミックなグリッドレイアウトを作成できます。 いちいち@mediaを書く必要もなく、コンテナを指定するだけで全てが終わります。 7. Vue/React Content Loader https://github.com/egoist/vue-content-loader https://github.com/danilowoz/react-content-loader Facebookカードのようなローディング画面を簡単に作成できます。 8. React Image Gallery イメージギャラリーやカルーセルを表示させるReactコンポーネントです。 デモサイト。 9. WebSlides Webサイトをスライド表示にできるライブラリです。 デモサイト。 10. SVG.js JavaScriptで簡単にSVGを操作、アニメーションさせることができるライブラリです。 サンプル 11. React Motion UIに剛性と減衰を指定するだけで勝手にアニメーションしてくれるライブラリ。 React TransitionGroupのより強力な代替にもなります。 サンプル。 12. RELLAX 簡単にパララックスを再現できる軽量ライブラリ。 デモサイト。 13. Dynamics.js 物理ベースのアニメーションを作成できるライブラリ。 デモサイト。 14. mo · js ゼロからアニメーションを始めるための組込コンポーネントとツールを提供します。 デモサイト。 See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen. See the Pen ·•● Bubble • Layout ●•· by LegoMushroom (@sol0mka) on CodePen. 15. Reveal.js HTMLでプレゼンテーションを作成するフレームワーク。 Markdownサポート、LaTeXサポート、シンタックスハイライト、PDFエクスポートなど幅広い機能が搭載されています。 デモサイト。 16. Animsition ページ遷移のCSSアニメーションに特化した、シンプルなjQueryプラグイン。 デモサイト。 17. SVG Mesh 3d SVGを三角形に分割します。 デモサイト。 18. Zdog 非常に簡単に、疑似3D要素をつくることのできるライブラリです。 また数学的知識なしに幾何学的形状をつくることができます。 デモサイト See the Pen Zdog - Happy town by Dave DeSandro (@desandro) on CodePen. See the Pen Zdog - Little forest by Dave DeSandro (@desandro) on CodePen. See the Pen Flamingo (ZDog + GSAP) by ChenXin_nth (@chenxinnn) on CodePen. See the Pen Zdog Draggable Monument Valley Totem by Gabrielle Wee ? (@gabriellewee) on CodePen. The End ご覧いただきありがとうございます。 あなたが使っているリポジトリもぜひ教えてください。 また、この投稿で紹介したものよりよいものも教えてください。 初級フロントエンドエンジニアは、複雑なタスクは自分で実装せずに、既存のソリューションを使った方がいいとアドバイスしておきます。 そのほうが自分やサードパーティのプロジェクトで問題が発生する可能性が低くなるでしょう。 車輪を再発明する必要はありません。 時々作品を投稿してるから、よかったらTwitterもフォローしてね。 コメント欄 「Cool」 「こいつは素晴らしいコレクション！」 「実用的で便利なまとめありがとう。」 「もう何年も更新されていないような古いプロジェクトは紹介しないでください。」 感想 気楽に使えるアニメーションライブラリ集です。 深く使いこなさなくても、ちょっと置いておくとかでサイトの見た目が華やかになりそうですね。 個人的にはさっさとコンテンツ表示しろ派なのでどうもぴんと来なかったものも多いのですが、まあそういう奴は少数派だろうから気にする必要はないでしょう。 どんどん飾り立ててみましょう。 それにしてもZdogとかすごいね。 色々プラグインもあってなんだかんだと遊び甲斐がありそうです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T17:09:48+09:00

生産性を高めるすごいフロントエンド開発ツール10選

本記事は、Mehdi Aoussiad氏による「10 Awesome Front-End Development Tools to Boost Your Productivity」（2021年2月5日公開）の和訳を、著者の許可を得て掲載しているものです。 生産性を高めるすごいフロントエンド開発ツール10選 使った方がいい便利なフロントエンド開発ツールを紹介します。 Photo by ThisisEngineering RAEng on Unsplash はじめに 開発者として、私たちは常に、プロジェクトに取り組んだり何かを学んだりする時に、作業を楽にしたり生産性を高めたりするリソースやツールを使う必要があります。web上には開発者向けに作成されたツールがたくさんあるので、安心してください。その多くは無料で、何も支払う必要はありません。 この記事では、webで入手できる無料の、非常に便利なフロントエンド開発ツールのリストを紹介します。さっそく始めましょう。 1. UiGradients UiGradientsは便利なwebツールで、カスタマイズして選べる素晴らしいカラーグラデーション集です。また、カラーグラデーションは、CSSコードとして取得したり、JPG形式でダウンロードしたりすることもできます。 uiGradients 2. Responsively app Responsivelyは、レスポンシブwebアプリをより速く開発するのに役立ちます。仕事が楽になるので、すべてのフロントエンド開発者が持つべき優れた開発ツールです。 Responsively 3. Public APIs Public APIsは、映画API、音楽API、オープンデータAPIなど、開発者向けの無料公開APIを集めたサイトです。自分のAPIを投稿することもできます。 Public APIs 4. Undraw Undrawは、webページで使えるSVG画像やイラストがたくさんある素晴らしいwebアプリです。 また、SVG画像をwebサイトに埋め込む機能と組み合わせることもできます。 Undraw 5. Lorem Picsum Lorem Picsumは、必要に応じて、ランダムでも特定のものでも、画像を簡単に取得できるシンプルなwebサイトです。写真のLorem Ipsumです。 Lorem Piccsum 6. DevDocs DevDocsは非常に便利なオープンソースのwebアプリで、複数のAPIドキュメントを、操作やアクセスが簡単なインターフェースでまとめています。DevDocsには、さまざまなweb技術に関するたくさんのドキュメントがあり、簡単にアクセスして学習できます。オフラインモードでも動作します。 DevDocs 7. Onepagelove Onepageloveは、フロントエンド開発における学習のヒントとなるテーマやテンプレートをたくさん提供しているwebサイトです。インスピレーションを得るのに最適です。また、無料のテンプレートをダウンロードして使うこともできます。 Onepagelove 8. RegEx 101 RegEx 101は、無料の正規表現デバッガーで、リアルタイムの説明、エラー検出、強調表示の機能があります。PHP、JavaScript、Python、Golangに対応しています。 RegEx 101 9. Prettier Prettierは、コードを適切にフォーマットするための無料ツールです。多くの言語をサポートしており、VSCodeやSublimeなど、ほとんどのエディタと統合できます。 Prettier 10. Flaticon Flaticonは、SVG、PNGなどの形式で無料ベクターアイコンを入手できます。データベース上の何千ものアイコンにアクセスできます。時間をかけて自分でアイコンを作成するよりも、はるかに簡単です。 Flaticon おわりに ご覧のとおり、ここで紹介したツールはすべて便利で無料です。これを使えば、さまざまなタスクを簡単に達成でき、フロントエンドweb開発者としての生産性を高めることができます。 記事を読んでいただき、ありがとうございました。お役に立てれば幸いです。 もっと読む JavaScriptやweb開発関連のより有用なコンテンツに興味がある場合は、私のニュースレターを購読してください。 以下のリンクにも役立つ記事があるので、チェックしてみてください。 知っておくべき便利なJavaScriptの配列メソッド20選 JavaScriptで配列を簡単に操作するのに役立つ20の便利なメソッド medium.com 翻訳協力 この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。 Original Author: Mehdi Aoussiad (@AoussiadMehdi) Original Article: 10 Awesome Front-End Development Tools to Boost Your Productivity Thank you for letting us share your knowledge! 選定担当: @gracen 翻訳担当: @gracen 監査担当: - 公開担当: @gracen ご意見・ご感想をお待ちしております 今回の記事はいかがでしたか？ ・こういう記事が読みたい ・こういうところが良かった ・こうした方が良いのではないか などなど、率直なご意見を募集しております。 頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。 皆様のメッセージをお待ちしております。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T13:37:44+09:00

JavaScript(変数)

はじめに JavaScriptは動的型付け言語 つまり変数宣言時に型を指定しない 変数の種類 プリミティブ型 stringやnumber、booleanなどのデータ 変数には値が格納される 変数aは値を指し示す 一度宣言した値は変更することができない、immutable(不変)である //immutable let a = 'hello' let a = 'bye' //エラー //例外 //変数aはHelloを参照していたが、Byeを参照へ切り替わった状況 //つまり一度宣言した値(Hello)を変更したわけではなく、参照が切り替わった状態であるからエラーにならない let a = 'Hello' a = 'Bye' オブジェクト型 変数には参照が格納される 変数aはオブジェクトへの参照が格納される、またオブジェクトへの参照はキー(下のprop)を指し示し、キーはバリュー('Hello')を指し示す プリミティブ型は変数aは値を直接指し示していたが、オブジェクト型の変数aはオブジェクトへの参照のみを指し示し、オブジェクトのキーが値を指し示す 上記のことからオブジェクトの値が変更されても変数aが指し示すオブジェクトへの参照は変わらないため値を変更することができる、mutable(可変) let obj = { prop : 'Hello' } コピー プリミティブ型 変数が参照する値がコピーされる(値が2つになる) //変数aはHelloを指す let a = 'Hello' //変数aが指す値をコピーし、その値をbという変数で指す let b = a //変数b->'Hello'を変数b->'Bye'に変更する b = 'Bye' console.log(a) //Hello console.log(b) //Bye オブジェクト型 オブジェクトへの参照がコピーされる(値はコピーされない、1つのまま) let a = { prop: 'Hello' } //変数aに格納されているのはオブジェクトへの参照なので、変数bにコピーしても変数bが指すのは変数aと同じオブジェクトへの参照 //変数aもbも1つの同じオブジェクトを参照している let b = a //一番上で宣言したオブジェクトの値が変更される b.prop = 'Bye' console.log(b.prop) //Bye console.log(a.prop) //Bye 変数aもbも1つの同じオブジェクトを参照しているので変数bで値が変更されたら変数aでも変更後の値を指す constの場合 const a = { prop: 'Hello' } //エラー //constは定数なので再定義ができない //変数aは上のオブジェクトを参照でロックされているので下のオブジェクトへ参照の変更はできない const a = { prop: 'Bye' } a.prop = 'Bye' console.log(a.prop) //Bye //つまりconstの定数化でロックされるのはオブジェクトへの参照なので、再定義はできないが、値の値代入はできる 分割代入 オブジェクトから特定の値を抽出して宣言を行う const a = { prop: 0; } //オブジェクトからpropの値を取り出しプリミティブ型のデータとして保持 const {prop} = a prop = 1; copnsole.log(a); //0 copnsole.log(prop); //1 //オブジェクトのコピーで値を変更しようとするとコピー元の値も変更してしまうが、一度プリミティブ型データに切り取ることにより元データに影響なくコピーしたデータを操作できるので便利
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T13:25:07+09:00

JavaScript(スコープ編)

はじめに 近年の駆け出しエンジニアにとって1つの懸念点 近年学習を開始したエンジニアは当初からすでに多彩なライブラリや便利なフレームワークが充実した環境で育ってきた フロントエンド領域ではReactやVueがその筆頭で、簡単に格好良くてヌルヌル動くナウでヤングなイケてる実装が容易であり、それがまた魅力的でもあった 駆け出しエンジニアにとって現代は 「学ぶこと多すぎ問題」 HTMLを一通り学んだらJavaScriptへ、JavaScriptを一通り学んだらReact,Vueへ、React,Vueを一通り学んだらNext,Nuxtへ... 技術を浅く広くしか学んでいないのではないか？ その程度の知識で実務で通用するのか？ 私自身もHTML,CSS,JavaScriptの基本的な使い方を学習したらすぐにReactの学習を進めた口である Reactがある程度できるようになったらreduxやFirebase、PHPなどのバックエンドの領域にも手を出した より成長するために..... ReactもVueもその根本はJavaScriptである 一度原点に立ち返りJavaScriptについて再び学んでみた スコープ スコープとは 「実行するコードから値や式が参照できる範囲」 種類 グローバルスコープ&スクリプトスコープ constやlet、functionで宣言した値や関数が格納される function(グローバルスコープ)はwindowオブジェクトとして格納 JS内のどこからでも参照可能 関数スコープ function宣言時の{}で囲われた部分 関数の中で宣言された変数は関数の外では使えない 関数の中でのみ参照可能 ブロックスコープ ifやfor文で{}で囲った部分 {}の中で宣言された変数は外から使うことはできない ブロックスコープの中でのみ参照可能 しかしブロックスコープの中で宣言した関数は外からでも使うことができてしまう ブロックスコープの中の関数を外から呼び出したくない場合定数として関数を宣言する if(true){ function a(){ //if文の外からも実行可能 } const b = function(){ //if文の中からのみ実行可能 } } ブロックスコープ内で宣言した関数がブロックスコープの外からでも実行できてしまうことは基本的には望まない strictモードの使用により制御できる 'use strict' if(true){ function a(str){ console.log(str); } a('test 1'); // test 1 } //ブロックスコープ外からの実行を弾くことができる a('test 2'); // error テクニック 関数スコープの特徴(関数の中で宣言された変数は関数の外では使えない)を使ってプライベートな変数を持たせる 変数numがコードの別の場所でうっかり書き変わってしまうのを防ぐ function incrementFactory() { let num = 0; function a() { num = num + 1; console.log(num); } return a; } //ここで1度だけ変数numを初期化 const increment = incrementFactory(); increment(); //1 increment(); //2 increment(); //3
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T12:37:39+09:00

Cognitoのtoken検証

Cognitoログイン時に取得した、idToken　及び　accessTokenの検証。 また、payloadを返却する。 事前準備 npm i --save jsonwebtoken jwk-to-pem ロジック 不正トークンや有効期限切れはこれで弾けるはず import * as jwt from 'jsonwebtoken' import * as jwkToPem from 'jwk-to-pem' async decodeToken(token) { const decode = jwt.decode(token, {complete: true}) // 検証用のデータ取得 // ここではhttp通信にnsetjsのライブラリ使っているが、取れればなんでも良い。 const result = await this.httpService.get(`${decode.payload.iss}/.well-known/jwks.json`).toPromise() // kid一致したデータを取得 const jwk = result.data.keys.find(key => { return key.kid === decode.header.kid }) if (!jwk) { throw new Error("cognito's jwks is not found.") } const pem = jwkToPem(jwk); 　　　　　　　　// 検証 jwt.verify(token, pem, { algorithms: ['RS256'] }, function(err, decodedToken) { if (err) { throw err } }); return decode.payload } まとめ Cognitoをtokenで毎回確認していれば不要かもって検証。 同時アクセスでCognioのクォータが引っかかりそうとかあれば、この辺りを使って工夫する必要あり。 参考 https://github.com/awslabs/aws-support-tools/tree/master/Cognito/decode-verify-jwt https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html https://qiita.com/FukuharaYohei/items/963b3ff293bf32062aa2
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T12:35:28+09:00

すとんとくる再帰（ Recursion ）の三つのパターン

再帰、、、それはやりたいことは簡単なのに、コードを書こうとすると頭を混乱させる悲しいもの。私自身、再帰（Recursion）を学習したとき、すとんと来るまで時間がかかりましたが、いくつかのパターンに分けて理解すると、すっきりと分かりやすかったのでシェアします！ 0. 基本形 1 function 関数名（引数）｛ 2 if (終わりの条件）｛ 3 終わったときのリターン文 4 } 5 それ以外のときの処理 6 リターン文（この中でこの関数自体を使う＝再帰的） 7 ｝ 2～3行目：延々と再帰しないように、まず、終わりの条件と終わるときのリターン文を書く。ここを「ベースケース」と呼ぶ。 5～6行目：続いて、それ以外の処理を書き、リターン文を書くがここで、定義しているこの関数自体を使うので、また関数の頭に戻って、ぐるぐる回る、これが「再帰的」。 ベースケース中のreturnは直感的に必要と分かるでしょうが、最終的に返すのはここだからと、6行目のreturnを書かないと、最初に渡す引数がベースケースに相当する場合しか、値が返ってきません。 また、再帰して、何サイクルも関数が繰り返されるとき、そのサイクルごとの戻り値が、前のサイクルに流れない。（と、うまく伝わるでしょうか。表現が難しいので、以下のパターン中の図をご覧ください。） 1. 「引数」と「引数を変化させてその関数自体に渡したもの」を計算するパターン なんのこっちゃ？ 言葉で表現するのが難しいので、下の例の5行目をご覧ください。 例：引数nの階乗を求める関数。 1 function factorial(num){ 2 if (num===0||num===1){ 3 return 1; 4 } 5 return num * factorial(num-1); 6 } このケースではreturn num * factorial(num-1)と、最初の引数に、その引数を変化させたものを新たな引数として同じ関数に渡したものを、掛け合わせています。 例えば、5を引数にしてfactorial(5)とすると、5行目で5 * factorial(4)を返す。 このfactorial(4)は、5行目で4 * factorial(3)を返し、 そのfactorial(3)は、5行目で3 * factorial(2)を返し、 そのfactorial(2)は、5行目で2 * factorial(1)を返し、 そのfactorial(1)は、3行目で1を返す。  . . . となります。 図に書くと return 5 * factorial(4)             ↑           return 4 * factorial(3)                    　↑                     return 3 * factorial(2)                              　↑                               return 2 * factorial(1)                                        　↑                                         return 1　⇐ベースケースで止まり！ ベースケースで止まった時に１が確定。そして後ろからどんどん戻り値が返されて、最終的に 5 * 4 * 3 * 2 * 1 が返されます。 2．引数自体を変化させていくパターン 例：要素が1つになるまで配列の要素を足し合わせて、できた配列を返す関数。 1 function reduceArray(array){ 2 if(array.length === 1){ 3 return array; 4 } 5 array[1] = array[0] + array[1]; 6 array.shift(); 7 return reduceArray(array); 8 } ここで例えば[1, 3, 5, 7]という配列を引数として渡してreduceArray([1, 3, 5, 7])とすると、 これは、5，6行目でarrayを変化させ、7行目でreduceArray([4, 5, 7])を返す。 そのreduceArray([4, 5, 7])は、同様にarrayを変化させ、reduceArray([9, 7])を返す。 そのreduceArray([9, 7])は、同様にarrayを変化させ、return reduceArray([16])を返す。 そのreduceArray([16])は、16を返す。 図に書くと reduceArray([1, 3, 5, 7])          　↑ return reduceArray([4, 5, 7])              　↑       return reduceArray([9, 7])                  　↑             return reduceArray([16])                    　↑                     return 16　⇐ベースケースで止まり！ やはり、ベースケースで止まったところで、16という値が確定。これが後ろからどんどん戻されて、最終的にreduceArray([1,3,5,7])は16を返します。 3. 引数を変化させつつ、答として返す別の値を設けて、そちらを変化させていくパターン。 このパターンでは、答として返す別の値を関数の本体の中で宣言するのではなく、第二引数としてデフォルト値をつけて設けます。これによって、関数が繰り返されるとき、この値が初期化されてしまうのをうまく避けられます。 例：数nから0まで1ずつ減らした整数を足した値を返す関数。nが5なら5+4+3+2+1を返す関数です。 1 function addNum(num, result = 0){ 2 if (num === 0){ 3 return result; 4 } 5 result += num; 6 num --; 7 return addNum(num, result) 8 } 例えば、3を引数に渡してaddNum(3)とすると、第二引数がない場合はデフフォルトが使われるのでaddNum(3, 0)と同じ。5行目でresult、6行目でnumを変化させ、7行目でaddNum(2, 3)を返す。 そのaddNum(2, 3)は、同様にresultとnumを変化させ、7行目でaddNum(1, 5)を返す。 そのaddNum(1, 5)は、同様にresultとnumを変化させ、7行目でaddNum(0, 6)を返す。 そのaddNum(0, 6)は、3行目で6を返す。 図に書くと addNum(3) ⇒　addNum(3, 0)                　↑                return addNum(2, 3)                         　↑                      return addNum(1, 5)                               　↑                              return addNum(0, 6)                                   　↑                                    return 6　⇐ベースケースで止まり！ こちらもベースケースで止まって6が確定。これが後ろから戻され、addNum(3)は6を返します。 4. returnを忘れずに。 最初に書いたように、ベースケースだけでなく、ベースケース以外の処理のときのreturnも必要です。 もちろん、最終的な値を返すという役割もありますが、このreturnのおかげで、上の３つの図にあるように、後のサイクルの戻り値が、前のサイクルに返されます。言い換えれば、returnがないと、関数は実行されていても、後のサイクルの戻り値がどこにも行かずじまいになってしまいます。 とても分かりやすい動画はこちら：Best Javascript Recursion Explanation on YouTube
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T12:35:28+09:00

すとんとくる再帰（ Recursion ）の三パターン

再帰、、、それはやりたいことは簡単なのに、コードを書こうとすると頭を混乱させる悲しいもの。私自身、再帰（Recursion）を学習したとき、すとんと来るまで時間がかかりましたが、いくつかのパターンに分けて理解すると、すっきりと分かりやすかったのでシェアします！ 0. 基本形 1 function 関数名（引数）｛ 2 if (終わりの条件）｛ 3 終わったときのリターン文 4 } 5 それ以外のときの処理 6 リターン文（この中でこの関数自体を使う＝再帰的） 7 ｝ 2～3行目：延々と再帰しないように、まず、終わりの条件と終わるときのリターン文を書く。ここを「ベースケース」と呼ぶ。 5～6行目：続いて、それ以外の処理を書き、リターン文を書くがここで、定義しているこの関数自体を使うので、また関数の頭に戻って、ぐるぐる回る、これが「再帰的」。 ベースケース中のreturnは直感的に必要と分かるでしょうが、最終的に返すのはここだからと、6行目のreturnを書かないと、最初に渡す引数がベースケースに相当する場合しか、値が返ってきません。 また、再帰して、何サイクルも関数が繰り返されるとき、そのサイクルごとの戻り値が、前のサイクルに流れない。（と、うまく伝わるでしょうか。表現が難しいので、以下のパターン中の図をご覧ください。） 1. 「引数」と「引数を変化させてその関数自体に渡したもの」を計算するパターン なんのこっちゃ？ 言葉で表現するのが難しいので、下の例の5行目をご覧ください。 例：引数nの階乗を求める関数。 1 function factorial(num){ 2 if (num===0||num===1){ 3 return 1; 4 } 5 return num * factorial(num-1); 6 } このケースではreturn num * factorial(num-1)と、最初の引数に、その引数を変化させたものを新たな引数として同じ関数に渡したものを、掛け合わせています。 例えば、5を引数にしてfactorial(5)とすると、5行目で5 * factorial(4)を返す。 このfactorial(4)は、5行目で4 * factorial(3)を返し、 そのfactorial(3)は、5行目で3 * factorial(2)を返し、 そのfactorial(2)は、5行目で2 * factorial(1)を返し、 そのfactorial(1)は、3行目で1を返す。  . . . となります。 図に書くと return 5 * factorial(4)             ↑           return 4 * factorial(3)                    　↑                     return 3 * factorial(2)                              　↑                               return 2 * factorial(1)                                        　↑                                         return 1　⇐ベースケースで止まり！ ベースケースで止まった時に１が確定。そして後ろからどんどん戻り値が返されて、最終的に 5 * 4 * 3 * 2 * 1 が返されます。 2．引数自体を変化させていくパターン 例：要素が1つになるまで配列の要素を足し合わせて、できた配列を返す関数。 1 function reduceArray(array){ 2 if(array.length === 1){ 3 return array; 4 } 5 array[1] = array[0] + array[1]; 6 array.shift(); 7 return reduceArray(array); 8 } ここで例えば[1, 3, 5, 7]という配列を引数として渡してreduceArray([1, 3, 5, 7])とすると、 これは、5，6行目でarrayを変化させ、7行目でreduceArray([4, 5, 7])を返す。 そのreduceArray([4, 5, 7])は、同様にarrayを変化させ、reduceArray([9, 7])を返す。 そのreduceArray([9, 7])は、同様にarrayを変化させ、return reduceArray([16])を返す。 そのreduceArray([16])は、16を返す。 図に書くと reduceArray([1, 3, 5, 7])          　↑ return reduceArray([4, 5, 7])              　↑       return reduceArray([9, 7])                  　↑             return reduceArray([16])                    　↑                     return 16　⇐ベースケースで止まり！ やはり、ベースケースで止まったところで、16という値が確定。これが後ろからどんどん戻されて、最終的にreduceArray([1,3,5,7])は16を返します。 3. 引数を変化させつつ、答として返す別の値を設けて、そちらを変化させていくパターン。 このパターンでは、答として返す別の値を関数の本体の中で宣言するのではなく、第二引数としてデフォルト値をつけて設けます。これによって、関数が繰り返されるとき、この値が初期化されてしまうのをうまく避けられます。 例：数nから0まで1ずつ減らした整数を足した値を返す関数。nが5なら5+4+3+2+1を返す関数です。 1 function addNum(num, result = 0){ 2 if (num === 0){ 3 return result; 4 } 5 result += num; 6 num --; 7 return addNum(num, result) 8 } 例えば、3を引数に渡してaddNum(3)とすると、第二引数がない場合はデフフォルトが使われるのでaddNum(3, 0)と同じ。5行目でresult、6行目でnumを変化させ、7行目でaddNum(2, 3)を返す。 そのaddNum(2, 3)は、同様にresultとnumを変化させ、7行目でaddNum(1, 5)を返す。 そのaddNum(1, 5)は、同様にresultとnumを変化させ、7行目でaddNum(0, 6)を返す。 そのaddNum(0, 6)は、3行目で6を返す。 図に書くと addNum(3) ⇒　addNum(3, 0)                　↑                return addNum(2, 3)                         　↑                      return addNum(1, 5)                               　↑                              return addNum(0, 6)                                   　↑                                    return 6　⇐ベースケースで止まり！ こちらもベースケースで止まって6が確定。これが後ろから戻され、addNum(3)は6を返します。 4. returnを忘れずに。 最初に書いたように、ベースケースだけでなく、ベースケース以外の処理のときのreturnも必要です。 もちろん、最終的な値を返すという役割もありますが、このreturnのおかげで、上の３つの図にあるように、後のサイクルの戻り値が、前のサイクルに返されます。言い換えれば、returnがないと、関数は実行されていても、後のサイクルの戻り値がどこにも行かずじまいになってしまいます。 とても分かりやすい動画はこちら：Best Javascript Recursion Explanation on YouTube
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T10:52:00+09:00

vue-pdfで文字が表示されない時、cMapを指定して解消する

let pdfSrc = pdf.createLoadingTask({ url: pdfのパス, cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/', cMapPacked: true, });
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T10:10:32+09:00

一覧画面でテーブルの集計値をjsワンライナー計算

さすがに、すべてをワンライナーで書くと長いので計算部分のみ、 total.js (() => { 'use strict'; kintone.events.on('app.record.index.show', (event) => { console.log(`(合計) ${event.records.reduce((total, record) => total += record['テーブル'].value.reduce((value, row) => value += Number(row.value['数値'].value), 0), 0)}`); }); })(); 注意: 一覧画面で表示中のレコードのみの計算になるので、 最高で100件まで。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-13T01:43:31+09:00

ブラウザゲームを作ってみよう(その1)

はじめに 今までは基本的にサーバサイドの記事が多かったのですが、今回はゲームということでクライアントサイドになります。 ここではJavaScriptを使って作っていきたいと思います。 Webシステムとゲームの違いについて 今まで記事にしていたWeb系のシステムとゲームですが少し作り方が違います。 それぞれの動き方ですが、概ね以下のようになっています。 [Webシステム] 1.ページアクセス 2.サーバプログラム実行(セッション、データベースから値取得など) 3.クライアントプログラム実行(画面表示) ※ここで終了、別ページへのリンクをクリックするとまた1から実行される [ゲーム] 1.プログラム実行 2.タイマー起動 3.タイトル画面、ゲーム画面など(タイマーの中で画面遷移) ※2のタイマーがずっと実行されていて終了することがない 主にこのような違いがあります。 JavaScriptで作れるのか？ 冒頭でJavaScriptで作ると書いているのですが、そもそも作れるのか？と思う方もいるかもしれませんので、どういったことが実現出来ればゲームが作れるのか簡単に整理したいと思います。 皆さんはゲームと言われてどういったものを思い浮かべるでしょうか？ ■画面に絵や文字が表示される ■コントローラ操作で画面のキャラクターが操作出来る ■タイマーで繰り返し処理が出来る(プレイしているユーザは意識しませんが) これらの要素をJavaScriptで実現出来るかですが 要素 結果 画面に絵や文字が表示される 表示出来るので○ コントローラ操作で画面のキャラクターが操作出来る キーボードやマウス入力が出来るので○ タイマーで繰り返し処理が出来る タイマー処理(setIntervalなど)が出来るので○ 実現出来そうですね。 サンプル タイマー処理が確認出来るサンプルを作ったので以下にコードと実行結果を記載します。 See the Pen by nojima (@noji505) on CodePen. 最後に とりあえず一回目ということで、Webシステムとゲームの作り方の違いを中心に解説しました。 次回は文字表示処理を作ってみたいと思います。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
JavaScriptの最新記事を毎日チェックされたい方はフォローお願いします。

日付別

タグ一覧