IT音痴アラフィフおやじのストック記事倉庫

【getElementsByClassName】CLASSの検索どっちが早い！？【querySelector】 : 業務でjavascriptを書いていたらふと疑問に感じたので実験してみました。 実験方法 Yahoo!トップページの中のクラス「clfix」の存在確認を1000回１セットで１０回実施。 1セットごとに念のためブラウザのキャッシュクリアリロード。 getElementsByClassName('CLASSNAME') console.time('計測ByClassName') for(var i=0; i<1000; i++){ if(document.getElementsByClassName('clfix') != null){ console.log('exist'); } } console.timeEnd('計測ByClassName') 実験結果 test result average 1 134s 0.134s 2 125s 0.125s 3 126s 0.126s 4 130s 0.130s 5 127s 0.127s 6 114s 0.114s 7 134s 0.134s 8 136s 0.136s 9 142s 0.142s 10 121s 0.121s total 1289s 0.1289s querySelector('.CLASSNAME') console.time('計測querySelector') for(var i=0; i<1000; i++){ if(document.querySelector('.clfix') != null){ console.log('exist'); } } console.timeEnd('計測querySelector') 実験結果 test res...

Lambda で Scheme を実行する : AWS Lambda Custom Runtimes芸人 Advent Calendar 2018 の 7日目です。 AWS Lambda で Custom Runtime がサポート され、任意の言語を Lambda 上で実行できるようになりました。 λλλλλλλλ… Lambda といったらやっぱり Lisp ですよね。 というわけで、Lisp方言の１つである Scheme の実装である Racket を Lambda で動かしてみました。 Custom Runtime の仕組みは こちら Runtime を実装する ソースコードは GitHub にあげてあります。 Runtime 本体の実装はこんな感じです。 runtime.rkt (require json) (require net/http-client) ;;; ;;; 環境変数から必要な情報を取得する. ;;; ;;; _HANDLER 変数からファイル名とHandler関数名を取り出す. ;;; (define-values (filename handler-name) (let* ([_handler (getenv "_HANDLER")] [hs (string-split _handler ":")]) (values (string-join (drop-right hs 1) ":") (string->symbol (last hs))))) (define lambda_task_root (getenv "LAMBDA_TASK_ROOT")) (define-values (api host port) (let* ([_api (getenv "AWS_LAMBDA_RUNTIME_API")] [ps (string-split _api ":")]) (values _api (car ps) (string->number (cadr ps))...

AWS Toolkit for JetBrainsで新規プロジェクトを立ち上げる際に no such option --infoとなる場合 : AWS Toolkit for Jetbrainsがついにリリースされましたね！ https://aws.amazon.com/jp/pycharm/ これでSAMをもっと手軽に開発できるようになりました!わーい! 問題: 新規プロジェクトがCreate出来ない TL;DR (先に結論) わかる人はこれで。 aws-sam-cliのversionが古いからです。(--infoオプションがv0.7.0から) 旧versionのsamをアンインストールします。 *アンインストールはsamをすでにインストールしている人のみ。 $pip uninstall aws-sam-cli 最新versionをインストールします。 $pip install aws-sam-cli インストールできたら $sam --info >{ "version": "0.8.1" } となればもう使えてます。JSONで表示されるんですね... なぜこのエラーになるのか エラー文のまんまですが、主な原因は2種類あります。 Cause1 : aws-sam-cliがインストールされていない AWS Toolkit for Jetbrainsは単独で動作するのではなく、aws-sam-cliライブラリを前提としたプラグインです。 ですのでpipでaws-sam-cliをインストールしてあげればいけるはず。 pipのインストール方法はsuzuki_yさんのが参考になります https://qiita.com/suzuki_y/items/3261ffa9b67410803443 Cause2 : aws-sam-cliのバージョンが古い aws-sam-cliはライブラリのアップデートが激しく、日々最新機能が追加されています。 今回の --infoも v0.7.0の #776 で追加されたようです。 18日前に0.7.0で現在0.8.1ですから本当に開発スピードが早いですね.. 以上です。皆様のお助けになれれば幸いです。

[Fetch API] Ajaxの代わりのありがちなアレ : 最近Fetch APIに興味を持ち始めて、ぼちぼち調べている。 Promiseって、理解すると凄く便利そうだなぁと思う今日この頃。 とりあえず、Ajaxでうんたらかんたらする代わりに、fetchでやってみよう！というお話。 とにかく、シンプルで使い回せそうなものを見付けるのである (´･ω･｀) hoge.js function hoge() { var form_data = new FormData(); form_data.xxx_id = 1; fetch('./hoge.php', { method: 'POST', body: form_data }) .then(response => { return response.json(); }) .then(json=> { console.log(json.result); }); } fetch() が済んだらresponseを返し、そこからjsonを取り出して値を取り出して。 いぇー ( ･`ω･´)

今日までコールバックと戦ってきたみんなを、Promiseを信じた魔法少女を、私は泣かせたくない。 : もう5年も前の記事になりますが、以下の記事がとても楽しげに Promise の厄介な側面を洗い出していて感動したので、アンサー記事的なものを書いてみたくなりました。 コールバック……駆逐してやる…この世から…一匹…残らず!! 上記の参考記事では Promise 系の実装として jQuery.Deferred を取り扱っていますが、本記事では V8 の組込オブジェクトとしての Promise を取り扱います。 (※なぜか『魔法少女まどかマギカ』の一部ネタバレが含まれるので注意してください) 目に焼き付けておきなさい。Promiseを使い間違えるって、そういうことよ。 参考記事からの引用。コールバック地獄の原型です。 $.get("hoge.txt", function(hoge) { $.get("piyo.txt", function(piyo) { $.get("nyan.txt", function(nyan) { $.get("myon.txt", function(myon) { console.log(hoge + piyo + nyan + nyan); }); }); }); }); 参考記事からの引用。 Promise という魔法が生まれてすぐの段階です。 var hoge; $.get("hoge.txt") .then(function(_hoge) { hoge = _hoge; return $.get("piyo.txt"); }) .then(function(piyo) { console.log(hoge + piyo); }); 参考記事からの引用。 Promise が暴走し、魔女化した状態です。 $.get("hoge.txt") .then(function(hoge) { return $.get("piy...

三項演算子の適切な使い方（条件演算子） : 皆さん三項演算子をif文の短縮形だと思っていませんか？ あくまでif文は文、三項演算子は演算子なので意味合いが違います。 三項演算子を適切に使用することで理解しやすいコードになるので、例題を見ながら三項演算子の使い所について学んでいってください。 ※ 使用する言語は javascript（ES2015）です。 三項演算子（条件演算子）とは まず、三項演算子についてのおさらいです。MDN Web Docsより引用して説明します。 式と演算子 ･ 条件（三項）演算子 条件演算子はJavaScriptで唯一3つの被演算子を取る演算子です。 条件に基づいて2つの値のうち1つを選択します。 標準的な演算子を使用できる場所ならどこでも条件演算子を使用できます。 構文 condition ? expr1 : expr2 引数 condition true か false かを評価する式です。 expr1, expr2 各々の値の場合に実行する式です。 condition が true の場合、演算子は expr1 の値を返します。そうでない場合は expr2 の値を返します。 ポイントは 条件に基づいて2つの値のうち1つを選択する ところと、 演算子を使用できる場所ならどこでも使用できる ところです。 単純にいうと、三項演算子は 真式の値を返し 、 演算子が使える場所全てで使える ということです。 何もかんでもif文を三項演算子に置き換えれば良いわけではありません、適切な使い所があります。 if文と三項演算子を状況に応じて使い分けましょう。 むやみにif文を三項演算子に置き換えると却って分かりにくくなります。 三項演算子が適切なパターン 適切に使用することで、if文よりも簡潔かつ分かりやすく書ける場合があります。 値の代入 if (str === 'piyo') { result = 'piyo！！' } else { result = 'not piyo…' } strの値によって代入する値が変わるコードです。このif文を三項演算子に変えてみます。 str === ...

TwitterのOAuthをJavaScriptでフルスクラッチする : Twitter OAuthをJavaScriptで自作 今回は以前書きました、 https://qiita.com/olt/items/472c1ebee201e541ddc3 この記事の中で登場する、Oauth.ioという外部ライブラリを用いて 実装していたaccess_tokenの取得をJavaScriptのみで 実装していきたいと思います！！ access_tokenの取得は基本的に便利なライブラリなどを 用いることが大半ですが、勉強を兼ねています。 JSのみでOAuthの認証手順を説明している 参考記事も少なかったため、TwitterのOAuthを JSのみでフルスクラッチできるぞということを書けたらと思います。 こちらにコードを置いています。 GitHub: https://github.com/olt556/oltwitter 事前準備 Twitter Developerに登録してREST API 用のアプリの設定を作成 https://yosiakatsuki.net/blog/create-twitter-application/ HerokuとXdomainなどへの登録 Herokuの使い方を覚える Node.jsの環境構築 読みにくいTwitter API Referenceを読める英語力 Twitter Developerに登録してREST API 用のアプリの設定を 作成する際に、access_tokenの取得を行うことができますが、 ここで得られるaccess_tokenは自分用です。 もし作成したWebページに他の人がアクセスして、 自分用のaccess_tokenが利用されると、 アカウントを乗っ取られてしまいます。 なので各アカウントごとに作成したアプリに対して割り振られる、 access_tokenを取得する必要があります。 Twitter OAuth 認証手順 request_tokenを取得する。 request_tokenを各種パラメータに付けて、ユーザを認証画面に飛ばす。 ユーザが、認証画面でアプリ連携を許可する。 許可証となるコードを各種パラメータ...