早押しクイズでNode.jsの非同期処理とかイベント駆動とかを試す - Qiita
const EventEmitter = require('events') // 司会者 class Presenter extends EventEmitter { constructor (personName, quizes) { super() this._personName = personName this._quizes = quizes console.log(`司会を務めさせて頂きます、"${personName}"です。`) } get personName () { return this._personName } // 発言 _say (text) { console.log(`${this.personName}「${text}」`) } } // クイズ解答者 class Player { constructor (entryName, thinkMs)
windows10でnode.jsのバージョンを切り替えて使う( nvm-windows ) - Qiita
はじめに windowsでnode.jsをバージョン切り替えながら使うためにnvm-windowsをインストールすることで解決できます。 nvm-windowsの入手 github: https://github.com/coreybutler/nvm-windows/releases こちらの、nvm-setup.zipをダウンロードしてきて解凍、インストールします。 コマンドプロンプトで実行 バージョンの確認とヘルプ Running version 1.1.6. Usage: nvm arch : Show if node is running in 32 or 64 bit mode. nvm install <version> [arch] : The version can be a node.js version or "latest" for the latest stabl
Firebase を駆使して Slack の slash command をつくってみた - Qiita
みなさんこんにちは。Aidemyの刀根です。今回は弊社slackでslash commandを一つ追加してみました。 2018/12/6追記 さらに改良した。のでよかったらどうぞ。 本稿の内容をベースにしたものなので一回本稿を読んだほうがいいかも 何したの？ 実は弊社には集中力を持続させるためちょいちょいお昼寝する方が多いのです。 しかし、寝すぎてしまう人もちらほら・・・ そこで、お昼寝する前に、「15分寝る」場合は /sleep 15とコマンドを叩いて、時間が経ったら @here 〇〇さんを起こしましょうと通知できるようにしました。（それをみたひとに起こしてもらうという運用で） 構成 Cloud Functions for Firebase Typescript で記述 Slack incoming webhook slash command サーバーレスは最高。 事前にやっておくこと
Firebase Authentication + SPA(React/TypeScript) でユーザ登録／ログイン／ログアウト (2:要点の説明) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ※2018/10/29 Firebase Authentication + SPA(React/TypeScript) でサンプル作り直してみたとしてサンプルを作り直して記事を書きました。 前回、説明まで書くと長くなりそうなので 2 回に分けた 2 回目です。 お詫び： 当初は要点処理の説明を書こうと思っていたのですが、いろいろいじってるうちに作り直したくなってきました。 ※記事ごとごっそり書き直そうとも思ったのですが、備忘録も兼ねて現段階の内容を書くことにしました。ご了承下さい。 処理の要点 Firebase SDK Authenti
Atomic Designでのテストを考える【初級】 - Qiita
概要 初Atomic Designを導入して開発をしてて、どこにどうやってテスト書けばいいんだっけ？ という旨の備忘録です。 仕様言語とかツールとか TypeScript React+Redux redux-saga Jest AtomicDesign ※Atomic Designの説明はしません（Atomic Designの説明はこちらが分かりやすいです） ※超初歩&限定的な内容な気がするので、書いてないメソッドやパターンについては適宜調べていただけると嬉しいです 概要 Jestを使います。 やること インタラクションテスト ロジックテスト テスト対象 AtomicDesignにより分類された各コンポーネント 本記事での例題はatomsのButton インタラクションテストする Reducer ロジックテストする 対象外 middleware 別途書く予定です Jestって？ 公式HP
Angular+Firebase ユーザー設計とデータの保護 - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのルーティング設定（応用編） 次記事：Angularのngrxを使って状態管理を行う（理論編） この記事で行うこと 前回の記事ではAngularのガードを導入しました。 本稿ではAngular+Firebaseを使った場合のユーザー設計、およびデータの保護について扱っていきます。 ユーザーのデータ設計 認証時のロジックをangularで実装 Firestoreのルールを設定する Firestoreのデータ保護ルール アプリケーションの設計をする際、DBにアクセスを行う入力値のバリデーション設計は、一定のセキュリティを担保する上で必須の工程です。ソースをすべて読むことができるクライアントサイドではこの処理を行うことができないため、サーバーサイドでどのように設計するかが肝になります。 Fi
【Node.js】Yeomanのカスタムジェネレータを使って綺麗にログ出力 - Qiita
はじめに Yeomanのジェネレータとして、Goqoo on kintoneというScaffoldツールを作っております。 yeoman-generator内でthis.fs.copyTpl()とかでファイルをコピーすると、 Railsのジェネレータと同様、こんなカラフルなログを出してくれるのがとても良いですよね。 こんなログを、自分の好きなタイミングで自由自在に出したいという話。 用途 this.spawnCommandSync()で子プロセスを走らせた時に、Railsのrun git init run bundle installみたいなログを出したかったんです。（Yeomanの標準機能で欲しいところですけどね） あとは、エラーメッセージもカラフルに出したいとか、色々あります。 やり方 基本：this.log配下の関数を使い分ける ジェネレータ内でログ出力するときはthis.log()
Babel7でwebpack.config.babel.jsを使う - Qiita
Babel7でwebpack.config.babel.jsを動かす 普通にやろうとすると、SyntaxError: Unexpected token importで怒られる。 @babel/registerを入れると解決します。 参考：https://github.com/webpack/webpack/issues/5960 私の設定を載せます。 concurrentlyとeslintは必須ではないです。 { "name": "hello babel7", "version": "1.0.0", "description": "", "private": true, "scripts": { "webpack": "webpack -w", "lint": "eslint src/*.*", "build": "webpack", "start": "concurrently \"np
GAE on node.js v8の、関数の外のグローバル変数について - Qiita
これの続き GCPのCloud Functionsでは、関数の外にあるグローバル変数は、立ち上がっているプロセス内で使い回しのできる存在でした。 グローバル変数を使用して将来の呼び出しでオブジェクトを再利用する Cloud Function の状態は、将来の呼び出しのために必ずしも保持されるわけではありません。しかし、Cloud Functions が以前の呼び出しの実行環境をリサイクルすることはよくあります。変数をグローバル スコープで宣言すると、その値は再計算せずに後続の呼び出しで再利用できるようになります。 この方法では、関数の呼び出しごとに再作成するためコストが高くなりがちなオブジェクトをキャッシュに保存できます。このようなオブジェクトを関数の本文からグローバル スコープに移動して、パフォーマンスを大幅に向上することができます。次の例では、heavy オブジェクトを関数のインスタン
Azure Functions + node.js で Multipart/Post ファイルアップロード - Qiita
流行りの「日本のITエンジニアが書いた」「やってみた」「個人メモ」な投稿です。 こういうファイルアップロード用のフォームで、ファイルのアップロードを受け付ける機能を、Azure Functions + node.js で作ります。 このような機能の場合、multipart に対応しないといけないのがポイントです。 今回は multipart 対応に、multer という npm パッケージを使います。 とりあえず Azure ポータルで、Functions App を node.js で作り、次のように package.json ファイルを配置します。 package.json { "name": "uploader", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "depen
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その１ - Qiita
本記事は、筆者がチームに新人きた際に作ったHTML/CSSの練習課題の改訂版です。 狙い 課題は以下の3つを目標に作成しました。 BEM記法に慣れてもらう。 パーツ同士が疎結合なクラス設計を意識できるようになる。 保守性を大事にするマインドを身につけてもらう。 対象 HTMLとCSSがとりあえず書ける初心者から中級者への一歩目を踏み出したい人 やくそく HTMLタグは正しく使う（brタグ連打で間隔を調整したり、なんでもdivタグで済まさない）。 レスポンシブに作る（PC用とSP用にそれぞれHTMLを書いて画面幅によってdisplay: none;するのは禁止）。 クラス名はBEMに従う。 装飾にidは使わない。 タグに直接にスタイルを指定しない（ただし例外もある）。 !importantは絶対に使わない。 Javascriptで高さや幅を制御するのは禁止。 今回はモダンブラウザ(chrom
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その２ - Qiita
@media all and (max-width: 767px) { .panel__header { display: flex; align-items: center; } .panel__header__icon { flex: 0 0 auto; margin-bottom: 0; } .panel__header__icon > img { width: 60px; } .panel__header__text { flex: 1 1 auto; margin-left: 15px; text-align: left; } .belt { min-width: 100%; } .belt__content { width: 100%; padding: 30px 15px; } } .panel__header__iconのflex-basisや.panel__header_
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
reactプロジェクトでnpm startしたときにコンソールクリアしたくないときにやったこと - Qiita
Vueの疑問(随時更新) - Qiita
Laravel 開発環境構築 備忘録2 laravel mixの設定 - Qiita
babel-loader8で最新のreactの環境を構築する - Qiita
nodejsで開発/本番の設定を切り替える - Qiita
【Express.js】非同期処理の個人的ベストプラクティス (async/await) - Qiita
判定ロジックを見やすくするための工夫 - Qiita
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
