Node.jsのどのバージョンでES2015以降の各仕様が使えるか - Qiita
はじめに 僕はブラウザ向けのJavaScriptを書くときは必ずBabelでトランスパイルしてるので、特に互換性は考えずJSの最新機能を使ってます。 でもCLIツールをNode.jsで書いたりする場合はランタイムが固定なので、Babeることなく「このバージョン以降のNode.jsでそのまんま動くように」なるべく書きたいのです。 The TC39 Processの性質上、「ES2018はNode v.XX以降でサポート」みたいな感じではなく、個別のProposalごとに実装されるタイミングが違います。 MDNの「ブラウザ実装状況」にはNode.jsも含まれていて、機能別に調べれば分かるんですが、「Node.jsのこのバージョンではどこまでの機能使えるんだっけ？」という確認をしたいケースが多かったので、一覧にまとめてみました！ 一覧にまとまっているサイトを紹介します。 Node.js ES20
これさえあればWEBアプリが簡単に作れる！Nuxt・Express・Vuetifyを使ったログイン画面の実装テンプレ - Qiita
目的 nuxt.jsを使うことでWEBアプリが簡単に作れるようになりました。 加えてVuetifyやExpressを使うことで、高度なWEBアプリが開発できます。 今回はそれらを使ったログイン画面の実装テンプレートを紹介します。 実装に向けて https://github.com/nuxt-community 基本このGithubを参考にしました。 Expressやauth-moduleのテンプレートはありますが、 まるっと統合したものが欲しかったので、これらを応用して作成しました。 使用したフレームワーク・ライブラリ nuxt Express（API） vuetify（デザイン） axios（API通信） ドキュメント Nuxt auth-module Vuetify Express GitHubレポジトリ ソース解説 フォルダ構成 ./api # Express ./api/index
PuppeteerとJasmineを使ったE2Eテストの自動化 - Qiita
やりたいこと Puppeteerでクローリングした内容を元にJasmineで簡易に実装したE2Eテストを自動化したい。 背景 よくある管理画面として、所属によってアクセス可能な画面が分かれていたり（例：社内向けの画面、広告主向けの画面、代理店向けの画面など）、また担当者に与えられる権限によっては画面の表示（例：偉い人には「承認」ボタンを表示など）が異なっていたりします。 そのため、VIEW側で「こうゆう条件の場合はこうゆう表示をする」などの出し分けが複雑になりがちです。 例えば、社内、代理店、広告主で共通して使うElement（CakePHPで開発している場合、Elementは各VIEWの共通するコードをまとめる時に使います。）などにおいて、if文でフラグをチェックして表示を出し分けたりしている場合、そこのコードを変更した際に、社内、代理店、広告主のそれぞれの画面にログインして想定する動作
PuppeteerとResemble.jsを使ったスクショ比較によるピクセル差分テスト - Qiita
やりたいこと Puppeteerによるクローリングでスクリーンショットを取得する。 Resemble.jsを使って時系列による二地点の画像比較を行う。 Resemble.jsは二つの画像の比較を行った上で、差分部分のピクセルに色を付けた比較画像を出力してくれるので、差分ピクセルが一定比率を超えた場合に、Jasmineによるテストが落ちるようにしたい。 背景 「１ピクセルを笑うものは、１ピクセルに泣く。」 Webメディアを運営している会社などでは、１ピクセル程デザインがずれただけで収益が大きく変動すると言うのもよく聞く話ですね。 そこまでシビアな環境にいなくても、例えば、cssをちょこっといじりたい時に、他の画面のどこのデザインに跳ねてるのかが分からず、不安になったりしますよね。そのcssが長い年月をかけて肥大化していて、複雑怪奇に色々なところに当たっていたりするものだったりするとなおさらで
[Chromeヘッドレスブラウザ活用] セキュリティ解析ツール | Webアクセス先の可視化/調査GUI - Qiita
概要 この記事では、私の作成したWebリソースのアクセス状況の可視化/分析ツール（beta版）を紹介します。 私はこのツールをサイバーセキュリティの調査の用途を念頭に置いて、開発しました。その他、プライバシーポリシーの順守状況の調査など、顧客情報にまつわるコンプライアンス状況の調査にも利用を想定しています。 このGUIツールは、あるページ（ランディングページなど）にアクセスした際に付随してアクセスが発生するインターネット上のリソースを「グラフ図」として可視化すると同時に、クリックしたリソースの詳細情報を調査確認する機能を備えています。 Adso | Web Access Analyzer 動作イメージ 更改しているGithub上のデモ動画は、以下の通り。 Wikipediaの「横浜中華街」にアクサスした際、付随してアクセスが生じる画像やJavascriptなどの要求/応答関係をグラフとして
![[Chromeヘッドレスブラウザ活用] セキュリティ解析ツール | Webアクセス先の可視化/調査GUI - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/15369a16b9e7b8cee584c3540b08c6584b9e92a1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDI4NDglMkZwcm9maWxlLWltYWdlcyUyRjE1Mjg1OTE4MDg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjIzOTZhMzY5YjllMTE1ZWYxN2I3MzgyZDBjMjAzYmQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dbf5625829fac6bcf719f57d82fe2bc6d%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQ2hyb21lJUUzJTgzJTk4JUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUU2JUI0JUJCJUU3JTk0JUE4JTVEJTIwJUUzJTgyJUJCJUUzJTgyJUFEJUUzJTgzJUE1JUUzJTgzJUFBJUUzJTgzJTg2JUUzJTgyJUEzJUU4JUE3JUEzJUU2JTlFJTkwJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJTIwJTdDJTIwV2ViJUUzJTgyJUEyJUUzJTgyJUFGJUUzJTgyJUJCJUUzJTgyJUI5JUU1JTg1JTg4JUUzJTgxJUFFJUU1JThGJUFGJUU4JUE2JTk2JUU1JThDJTk2JTJGJUU4JUFBJUJGJUU2JTlGJUJCR1VJJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjU2MDY4M2VlNWQwMDZkODI1MWFjNWE1YWY1MDZmZjA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZb2hLbWImdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1kYjhhZTZiYmZlYjU0OTZkMjg3NTU4ZGZhYmZmYTZjYw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df2ab0aaa21e3ed3ba500d9c743285c9d)
Box API を叩くその前に - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? APIリファレンス 英語：https://developer.box.com/reference 日本語：https://ja.developer.box.com/reference 日本語はところどころ崩れてるので、英語版を参照したほうがいいです(2018/10現在) 認証方式 ざっくり。 OAuth 2 と、OAuth 2 with JWT がある OAuth 2 と、OAuth 2 with JWT では、扱うユーザータイプが異なる OAuth 2 管理対象ユーザー[Managed Users ]、外部ユーザー[External
自サイトのリンク切れを見つけるスクリプト(SPA対応版) - Qiita
自サイトのリンク切れを網羅的に見つける ユーザコンテンツや外部リンクを直接参照している場合などに問題となるのがリンク切れです。 外部リンク切れ(404エラー)はサイトの評価を下げる直接の原因にはならないといわれていますが、 【SEO】外部サイトへのリンク切れは検索エンジンからの評価を下げない リンク切れがあることでユーザ体験を阻害させ、離脱に繋がります。 簡易的に見つけるには次のようなW3Cでも用意されてはいます。 W3C Link Checkcer が、サイト全体から見つけるにはサイト全体のリンクを総チェックする必要があります。 書いてみた スクレイピングライブラリで有名なpuppetterを使用して自サイトをスクレイピングしてみます。 aタグとimgタグを対象とします。 puppeteerでレンダリングを実行完了してから、urlチェックするため、SPAなサイトでも対応可能です。 sit
最近のNode.jsプロジェクトのだいたいテンプレ - Qiita
サンプルプロジェクト 要素 Typescript ts-node koajs koa-router tslint (standard) mocha, chai log4js config 説明 TypeScriptで書いて、tscはせずにts-nodeでそのまま動かしている。 ts-nodeだとサーバーなどは起動頻度が低くていいけど、コマンド実行系が遅くてめんどくさいのでtscするように変更。 Webまわりはkoajsを使っている。expressに差し替えても問題ない。 tslintはtslint-config-standardを使っているけどこのへんは好み。 DBは含めてないが、mongooseやsequelizeなどその都度好きなのを使う。 index.tsとserver.tsを分けているのはAPIのテストを 走らせるため。
Django×Electron でデスクトップアプリ開発はできないの？ - Qiita
はじめに Django Electron Django とは、「PythonでWebアプリを開発する際に使うWebフレームワーク」です。 Electron とは、「Web技術でデスクトップアプリを作ることができるエンジン」です。 つまり、***Django×Electron で『Python 製のデスクトップアプリケーション』***が作れる！ そんな……夢を見たんだ。 Is it a good idea to use Django in making a desktop app? How difficult is it? なんだか良くないっぽい。 どうりで「Django Electron」や「Django デスクトップアプリ」と検索しても人気記事が出てこないわけだ。 DJANGO Y ELECTRON PARA APLICACIONES MULTIPLATAFORMA 一応、実践している記
Ethereumのフレームワーク「Truffle」とローカル開発環境「Ganache」入門ログ - Qiita
概要 Ethereumを使ったスマートコントラクトの開発をしていて、ローカルの開発環境としてGanacheが便利だよ、と聴いたのでその入門ログを残します。 リアルタイムで導入しながら記事を書いています。たまにはこういう記事の書き方もいいですね。 前提 当方、メインネットへのスマートコントラクトのデプロイ（という言い方が正しいかどうかすらわからない）とかやったことないですし、入門書を読んで一通りやったくらいです。 これくらいのレベルの人間でも環境構築して動作させるくらいは訳ない、という意味でのGanache解説記事だと思っていてくださいm(_ _)m 導入手順 Google検索 「Ethereum Ganache」でGoogle検索すると Ethereum のローカル開発環境 Ganache を使ってみる Truffle Suite | Ganache - Truffle Framework
TypeORMで本番運用を見据えたマイグレーション - Qiita
TypeScript で Node.js やる場合の O/R Mapper の選択肢は少ない。 TypeORM Sequelize + sequelize-typescript wetland メジャーっぽかったのと Nest.js で標準対応してるので TypeORM を使うことにしてみた。機能的には充分だが、本番環境での運用を想定した使いやすさには至ってないように感じた。 ✍️ TypeORM の機能 Entity クラスをつくってプロパティにデコレータを付けるだけでテーブル定義できる Ruby on Rails の ActiveRecord に近い感覚で使うこともできる @PrimaryGeneratedColumn で AUTO_INCREMENT なプライマリキー @CreateDateColumn で INSERT 時に Date カラムを自動更新 @UpdateDateCol
Gatsbyプラグイン45選 - Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AmazonLinux (Docker)にNode.js & npmをインストールする。 - Qiita
GitlabCI でLambda@Edge で動かすようのnode.js のテストを書く - Qiita
Node.jsでAmazon CloudFrontの署名付きURLを生成する - Qiita
TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
JavaScriptのぐぐりづらい記号の名前を知る - Qiita
yarnのインストール - Qiita
foreverコマンドでファイル変更すると自動再起動されるオプション - Qiita
Expressで簡易的にAPIを作成する - Qiita
