[TypeScript] Mapped Types が持つ隠された力とは…… - Qiita
Mapped Types とは TypeScript 2.1のkeyofとかMapped typesがアツい - Qiita TypeScriptのIndex typesと Mapped typesを使ってJavaScriptライブラリをIDEで補完する - Qiita 詳しいことは他の方々が記事にされているので割愛します。 簡単に言えば、リテラル型の和集合から取りうるリテラルをプロパティとして持つオブジェクトの型を作る 機能です。 Mapped Types の隠された力 隠し機能というわけではないのですが、「Mapped Types は Union Type でない純粋なリテラル型に対しても機能する」というのは地味に盲点ではないでしょうか。以下の関数定義を見てみましょう。 T extends string なので、Mapped Types の例でありがちな 'x' | 'y' | 'z'
![[TypeScript] Mapped Types が持つ隠された力とは…… - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc1f0f7d57c0fbd7dc87d81bc07542c36a83eff/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode - Qiita
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict modeJavaScriptNode.jsWebnpmnvm /Users/xxx/.nvm/versions/node/v4.6.0/lib/node_modules/npm/bin/npm-cli.js:85 let notifier = require('update-notifier')({pkg}) ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode at exports.runInThisContext (vm
Typescript学習まとめ - Qiita
はじめに 間違っている部分があれば、編集リクエストいただけるとうれしいです！ まだ途中のため、随時更新していくので、通知が欲しい方はいいね！よろしくお願いします。 Typescriptとは？ 静的な型(type)とシステムとクラスベースのオブジェクト指向構文を備えた。Javascriptのスーパセット。Javascript構文の正当な拡張なので、本来のJavascriptのコードがほぼそのままで動作する。 C#やJavaと類似した構文を持つため、これらの言語を利用したことがあればなじみやすい。 Typescriptでは、ECMAScript2015の仕様が取り込まれ、利用できる。 Typescriptを学ぶことで、自然とこれらの次世代構文を学ぶことができる。 学習環境 今回は、環境構築の必要なくTypescriptが使えるTypescript Playgroundを使う。 変数/データ型
DjangoとAngularを連携させる時の設定のお話 - Qiita
はじめに フロントにAngular、バックエンドでDjangoを採用した時、Apacheに載せるのにちょっと苦労したのでそのまとめです。 流れ そもそもこの流れで正しいのかって話ですが、 クライアントがApacheにリクエストを投げる APIへのリクエストかそれ以外へのリクエストかを振り分ける APIへのリクエストなら対応するViewを実行してレスポンスを返す 静的ファイルへのリクエストは普通に返す それ以外へのリクエストならtemplateを返す このような形です。 設定 以下の順で行います。 Apacheとpythonの連携 DjangoとAngularの連携 OSはLinux、pythonは3系の想定です。 Apacheとpythonの連携 mod_wsgiのインストール 公式のインストール方法に則ってインストール mod_wsgiとは Apache上でWSGI(Web Server
ES2015のモジュールをBrowserifyとBabelifyでビルドしてクライアントで読み込んでみる - Qiita
概要 今更ES2015やES2015(ES6)からES5（現行）のJavaScriptに変換してくれるBabelとか ES2015のモジュールを使うのにはBrowserifyやBabelifyというものを使うといいらしいなどがわかった ビルドする際に色々とエラーが出て詰まったのでメモ ES2015とは ECMAScript 2015（ES2015)のことらしい ES2015自体はJavaScriptそのものではなく、あくまで言語仕様とのこと JavaScriptはECMAScriptという言語仕様に基づいた言語のひとつ ECMAScript 2015はECMAScript 6th editionでECMAScript 6(ES6)とも呼ばれる つまり ECMAScript 2015(ES2015) = ECMAScript 6(ES6) その前がECMAScript 5(ES5)で、ES6
React/flowの環境をWebpackで構築する - Qiita
Reactを使ったアプリケーションを作る機会があったので、改めてその際に学んだことを整理しました。 これを読むことでReactを使って開発する際のwebpackの基本的な設定は理解していただければ幸いです。 ただ設定を載せるのではなく何のためにそうするのかを意識して伝えるようにしました。 実際のソースコードはこちらです。 前提 対象 今までReactを書いていたが、どうやって環境構築されているのかが分からない webpackを使ってReactの環境構築をしたい flowも使って型定義もしたい 環境 webpackとは webpackとは、モジュールバンドラのこと。モジュールとは、依存関係（互いに参照したりしている関係）のある複数のファイルのまとまりのことで、それらを一つのファイルに束ねる（bundleする）主体をバンドラと呼ぶ。 つまり、webpackは複数のファイルを一つのファイルにまと
Microsoft Teams Scraping - Qiita
Microsoft Teams Scraping 更新履歴 2019/02/13 Application Registration Portalが，AzurePortalと統合されたことにより画面イメージが変更になったことと，トークンの更新にoffline_readが必要なので更新． 2019/02/25 いいね・被いいねの関係性や，メッセージの投稿に対する返答の関係性のデータを抽出できるようにしました． 目的 Microsoft Teams上でやりとりされているメッセージを全て取得します． 個人的なチャットは2018/10/06現在取得できません． 取得できる範囲は，AD認証したユーザーが所属している全チームのメッセージです． 結論 全コード GitHub 使い方 ADアプリ登録 Registragion Portalにアクセス，ログイン． 下記の通りに登録する． 名前：任意 リダイレク
Lighthouseを自動化する 〜その１〜 - Qiita
Lighthouse大事 LighthouseはGoogleが出しているWebサイトのパフォーマンス測定ツール。 今後はMFIが進んでいくこともあり、Lighthouseの数値を日頃からチェックしておくことは大事。 Webサイトに改修を加えた結果、スコアが落ちてSEOの評価が下がってしまったら目も当てられない。 Lighthouseは面倒 Lighthouseの実行はChrome拡張機能やChromeのデベロッパーツールから実行することができる。 けど、毎回対象のページをブラウザで開いてツールを実行するのは結構面倒。 あと、スコアの共有も面倒。 なので今回は、以下の3つの処理をJavaScript上から自動で行う。 スプレッドシートから対象のURLを取得（今回） Lighthouseのスコアを取得 Slackへの通知まで スプレッドシートからURLを取得 スプレッドシートを準備 Light
Lighthouseを自動化する 〜その２〜 - Qiita
Lighthouse大事 LighthouseはGoogleが出しているWebサイトのパフォーマンス測定ツール。 今後はMFIが進んでいくこともあり、Lighthouseの数値を日頃からチェックしておくことは大事。 Webサイトに改修を加えた結果、スコアが落ちてSEOの評価が下がってしまったら目も当てられない。 Lighthouseは面倒 Lighthouseの実行はChrome拡張機能やChromeのデベロッパーツールから実行することができる。 けど、毎回対象のページをブラウザで開いてツールを実行するのは結構面倒。 あと、スコアの共有も面倒。 なので今回は、以下の3つの処理をJavaScript上から自動で行う。 スプレッドシートから対象のURLを取得 Lighthouseのスコアを取得（今回） Slackへの通知まで Lighthouseのスコアを取得 Lighthouse CLIのイ
Lighthouseを自動化する 〜その３〜 - Qiita
Lighthouse大事 LighthouseはGoogleが出しているWebサイトのパフォーマンス測定ツール。 今後はMFIが進んでいくこともあり、Lighthouseの数値を日頃からチェックしておくことは大事。 Webサイトに改修を加えた結果、スコアが落ちてSEOの評価が下がってしまったら目も当てられない。 Lighthouseは面倒 Lighthouseの実行はChrome拡張機能やChromeのデベロッパーツールから実行することができる。 けど、毎回対象のページをブラウザで開いてツールを実行するのは結構面倒。 あと、スコアの共有も面倒。 なので今回は、以下の3つの処理をJavaScript上から自動で行う。 スプレッドシートから対象のURLを取得 Lighthouseのスコアを取得 Slackへの通知まで（今回） SlackへLighthouseスコアを通知 Slack Webho
Reekohサービスプラグイン(Node.js)を作ってみる - Qiita
Reekohとは Reekohとは、IoTデータをNode-REDのようにハードウェアデバイス/APIをオンラインサービスに接続したり、独自のダッシュボードを構築することができるクラウドサービスです。 ただ、フリーサービスではないので、Reekoh社及び代理店からの提供されるエンタープライズ向けツールです。 Node-REDのNodeのようにReekohプラットフォームはPluginをパイプします。このPluginを自ら開発することも可能です。 はじめてのReekoh Plugin開発 Reekohは、プラグインを作成してプラットフォームの機能を操作するためのオープンソースのフレームワーク/ APIを提供しています。(Node.js環境は事前に設定しておいてください） Reekohパッケージのインストール 下記コマンドラインにより、Reekohパッケージをインストールします。
Node.jsでYoutube動画をDLして保存するytdl-coreを使ったみたメモ - Qiita
const fs = require('fs'); const ytdl = require('ytdl-core'); const readline = require('readline'); //表示用途 const BASE_PATH = `https://www.youtube.com/watch?v=`; const youtubeId = `9CHiwJhx3qw`; //DLするYoutube動画のID（urlのv=の後ろの部分11桁） const url = BASE_PATH+youtubeId; const video = ytdl(url,{filter: (format) => format.container === 'mp4' }); let starttime; video.pipe(fs.createWriteStream(`${youtubeId}.mp
React + Polyglot で多言語化対応をおこなう - Qiita
はじめに 今のチームでは、多言語化対応をおこなう際、Airbnb製のライブラリであるnode-polyglotを使っています。 Reactの多言語化でポピュラーなライブラリとしてreact-intlがあります。 しかし我々の場合は、フロントエンドにReactを採用したのは最近のため、これまで利用していたライブラリを継続して使う形で開発をしています。 今回はその使い方を簡単にまとめました。 開発で用いる環境の構築 ここでは、create-react-appで環境を構築しています。 動作確認のための環境なので、 tslint のエラーが出ないように少し設定をいじっています。 tslint.jsonのrulesは以下の通りです。 "rules": { "no-var-requires": false, "interface-name": [true, "never-prefix"], "no-e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLint&mochaで’describe’ is not definedと言われないために - Qiita
【ionic】@InputでObjectをバインドするといろいろハマる【Angular】 - Qiita
Laravel + vue-routerでハッシュ記号(シャープ記号)をなくしてちゃんと動くようにする方法 - Qiita
EC2 + Express + Nginxでアプリ公開 - Qiita
webpackでファイルの出力先を複数指定する - Qiita
eslintの設定からprettierとの併用までの流れ - Qiita
Node-REDからpython-broadlinkでRM mini3をコントロール【失敗】[on Onion Omega2+] - Qiita![Node-REDからpython-broadlinkでRM mini3をコントロール【失敗】[on Onion Omega2+] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f9d9c5238415f825037c1df236daf3d20bc916d/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTAwNzEyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNDg0MzgyMjE5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWJjNmIzN2ZkOGM2ZDdkMGJjYzc0MjNhNzNjYTlkMTQ5%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D56fd162dd9dfe2abcea000671c876d36%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9Tm9kZS1SRUQlRTMlODElOEIlRTMlODIlODlweXRob24tYnJvYWRsaW5rJUUzJTgxJUE3Uk0lMjBtaW5pMyVFMyU4MiU5MiVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MyVBRCVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MCU5MCVFNSVBNCVCMSVFNiU5NSU5NyVFMyU4MCU5MSU1Qm9uJTIwT25pb24lMjBPbWVnYTIlMkIlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0zNTAzMzZiYTEzMDExOWEyZDhiNmViZjM5YjRkY2U5Zg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzcGlkZXJ4X2pwJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9M2RiZmNlYTdhMTg4NjQ4MjRkMmJkZGIzZjEzMmFjMzE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Deea6570e6fa1b323fce9d4d785b88355)
