[javascript]npmでマイクロライブラリを使えるようになるまで - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![[javascript]npmでマイクロライブラリを使えるようになるまで - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/344ad8d77448968b6807d6dc4ca63261e82646d6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCamF2YXNjcmlwdCU1RG5wbSVFMyU4MSVBNyVFMyU4MyU5RSVFMyU4MiVBNCVFMyU4MiVBRiVFMyU4MyVBRCVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MyVBQSVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSU4OCVFMyU4MiU4QiVFMyU4MiU4OCVFMyU4MSU4NiVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QiVFMyU4MSVCRSVFMyU4MSVBNyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjExNjVhZjBjY2U3YjMwMDE2N2U3NTM1NGU4YzIxYmU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB3aXRjaHkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTdhNGI5ODg1YjcxYTFjYWIwYjk0YzU2NWEwNmRkOGEy%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-RS1HcmFudA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D69752b2bb222139440971fb85f95f88e)
[Node] websocket + redis pub/subでサーバ発でclientに通知を送る - Qiita
Server発でclientにメッセージを送りたくなった 元々nodeで作ったwebsocket serverでclient側と双方向通信をしていたんですが、別サーバやbatch処理などでの更新処理をトリガーとしてclient(の従来で使用しているchannel)にメッセージを送りたくなりました。 そこでいろいろ探してたら、redisにpub/sub機能というのがあり、それを使えば上手くいきそうなのでやってみました。 実装のイメージ # 使ったモジュール * [redis pub/sub](https://redis.io/topics/pubsub) * 他のサーバでの変更を検知するために使用 * [socket.io-emitter](https://github.com/socketio/socket.io-emitter) * サーバ側からclientにメッセージを送るためのモジュ
![[Node] websocket + redis pub/subでサーバ発でclientに通知を送る - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1598686c0b05f31db799066166af576241048aac/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGOTAxNTclMkZwcm9maWxlLWltYWdlcyUyRjE1NjI2MzU5Nzc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YWQ1ZjUyMTY5YjAzZWE1NTI1NmU1MDc3NGI3ZDhjMTQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Ddfd6e3fcd73557aa9ebac6fed3647bbc%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZSU1RCUyMHdlYnNvY2tldCUyMCUyQiUyMHJlZGlzJTIwcHViJTJGc3ViJUUzJTgxJUE3JUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUU3JTk5JUJBJUUzJTgxJUE3Y2xpZW50JUUzJTgxJUFCJUU5JTgwJTlBJUU3JTlGJUE1JUUzJTgyJTkyJUU5JTgwJTgxJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjU0OGUyYzM4ZTMyZTdhOTdiOTdiYTMxNTBmOGMzOTU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5a21pa2FuODIxJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZjNhMTYzOWUxYzc0YTFkYzgwZTRlODQ4NWQ2ZWIyOWI%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Daf26756109d873df30796eee6101b305)
さようなら、ロリ●ップ� 〜FirebaseにWordPressサイトを移行する〜 - Qiita
こんにちは！こんにちは！ 野良エンジニアになって1年が経ち、現場先にも慣れてきたある日。 ロ●ポップから「サーバ代払ってね」メールが来ていました。 個人事業主でもHPつくったほうが良いよ、とネットに書いてあったので作りかけのやつを1年くらい活用せずに放置しててサーバ代のこともわすれてました。 で、1年で10000円以上もサーバ代に使っていた事に気づきました（プランによります）。 活用してないのに。 ロリポッ●は好きなんですが、やはり節約したい。お金を。 独自ドメインも●リポップと同じ会社が提供するムー●ードメイン使ってるんですが、こちらは残して、WordPressで作成しているサイトを無料のFirebaseに移行することにしました。Firebase流行ってるし。 GitHubページやらも考えましたが、なんかFirebaseいじりたかった。 同じように、それほど活用できていないHPやらサイト
Appengine(GAE/node)でSPA対応したクローラーで楽々スクレイピング - Qiita
Motivation GAE/SE環境でクローラを作ろうとすると、静的ページならどの言語でも比較的簡単に作れますが、SPA（JavaScriptで動的に生成するサイト）の場合にはJavaScriptを動かしてコンテンツを生成する必要があるため、クローリングが容易ではないです。 GAE/nodeの新しいランタイムではpuppeteerを利用してHeadless Chromeを動かすことができるようで、SPAのようなサイトに対応したクローラが作れそうなので、ざっくりと動かしてみることにします。 事前準備 ローカル環境に以下のものが必要です gcloudコマンド node（npm） puppeteerのインストール (npm install puppeteer) nodeプロジェクトの初期化を行う nodeプロジェクトを作成するディレクトリに移動し、以下のコマンドを実行します。
3 step wallet を作成した話 その１ - Qiita
エンジニアじゃないけどアプリが作りたかった こんにちは。まつもとかづまさと申します 僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。 今回は３ step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です 3 step walletはこちら 今日の記事の流れ vueのフォルダを作ってgithub pagesに公開できるようにいじる まずはアプリの基礎となる記事を参考にしました。 PWAとVue.jsでNEMウォレットアプリを作ろう！環境構築 〜 PWAアプリの起動 [PWAとVue.jsでNEMウォレットアプリを作ろう！TypeScript導入 〜 TypeScriptで書いてみる] (http://hobbydevelop.info/pwa_vuejs_nem_1) [PWAと Vue.jsでNEMウォレット
他の項目を利用して yup でバリデーションチェック（w/ formik） - Qiita
はじめに 仕事でコミュニティが活発なライブラリを活用することが増えてきたのですが、日本語の記事がなかったり、英語の記事を見ながら試行錯誤したので、備忘も兼ねてまとめます。 同じ悩みを抱える人の救いになれば幸いです。 (間違いがあればご指摘ください) Formik Formik とは、Reactで使えるフォームの管理をしてくれるイケてるライブラリです。 同僚が使う理由として "its the lib recommended by the formskit team" を挙げていました。 ごめんなさい、ドヤ顔で言われてもそのすごさを理解できてないヘボヘボエンジニアです。 というか、Ant Design の Form Component であらかた入力フォームとバリデーション実装したタイミングだったので、「マジかよ…」と思いました。 yup yup は、Yup is a JavaScript o
Ant Design の Upload で PUT を使う - Qiita
はじめに Alibaba の Ant Design が結構イケてます。 特に Upload Component がおしゃれな挙動をしてくれるんですが、デフォルトで POST で送信しちゃうようです。 PUT で送信する要件があったのでそのナレッジを書いておきます。 PUT を使った Upload いきなり本題です。 Class / Stateless Functional Component は省略します。 実装箇所がわかりやすいようにrender以降の部分を記載します。 (Stateless Functional Component の場合はreturn以降をご参考ください。) import { Upload, Icon } from 'antd'; /*** 中略 ***/ createButton = () => { return ( <div> <Icon type={'plus'
3 step wallet を作成した話 その２ 〜コピペとライブラリ〜 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? エンジニアじゃないけどアプリが作りたかった こんにちは。まつもとかづまさと申します 僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。 今回は３ step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です 3 step walletはこちら 今日の記事の流れ コピペとライブラリをインストールする場所の危険性 この記事の話になります。 [PWAとVue.jsでNEMウォレットアプリを作ろう！TypeScript導入 〜 TypeScriptで書いてみる] (h
単体テストで開始時にモックサーバを起動し、終了時に停止する - Qiita
やりたい事 JavaScript の単体テストで、テスト対象のコードがサーバと通信して JSON 形式で受信を受け取る場合、サーバと通信する部分を置き換えてテストコード内部で完結するようにしたい。 しかし、通信する部分をモックで置き換えるのはしたくないので、テスト用に JSON を返すサーバを立てたい、そしてサーバは開始時に起動、終了時に停止させたい。 どうやるか json-server は こんな感じに サーバの実装をすればできる。 json-server は、パスと返る JSON の内容をコードから指定できるので、テストケースに合わせてテストコード内で修正できる。 実装例 var jsonServer = require("json-server"); var assert = require("assert"); var http = require("http"); describ
ngrxのaction/reducer/effectの定義をシンプルにする - Qiita
はじめに Angularと組み合わせてngrxを使うと便利だ、という記事をあちこちで見かけるので使ってみようと思ったのですが、独特な「Actionに1つ1つ文字列を割り当てて、クラス化する」という文化にぎこちなさを感じていました。(ngrx/platform actions参照) これはTyped Actionというもので、Typescriptの型チェックの機能を使って、Actionが持つパラメータ(Payload)を入力補完できるようにするために使われています。 よく見かけるカウンタの例を見てみると分かる通り、Action名を変えたかったらあちこちに影響が波及するし、独特な作りがあるのでAction/Reducerのboilerplate(テンプレ)による自動生成を使おう、と言われていたりします。それでも同じ文字列をコピペしまくるのはちょっと…今どき感がない…? 調べてみると同じことを感
Vue.jsで「すべて選択」を実装する - Qiita
checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。 しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。 ここではそんな時にあると便利な「すべて選択」を実装してみます。 実装デモ See the Pen Select All Checkbox by Vue.js - flow4 by Shoko Oyamada (@chcltn) on CodePen. 「すべて選択」の実装の流れ dataとv-forでリストを用意 すべて選択が押されたかのフラグを用意 すべて選択が押された時の動きを作成 個々のcheckboxをクリックした時の動きを作成 1.dataとv-forでリストを用意 dataにて、猫の名前を配列catsに入れておきます。 それを利用し、v-forでリストを作成します。 See the Pen Select
Node.jsでスクレイピングするならこれが本命（たぶん） - Qiita
はじめに 青空文庫APIサーバーのご紹介という記事でご紹介しているように、青空文庫の情報を取り出すためのAPIサーバーを作っていたりします。一応、Aozorahackというグループには所属しているのですが、青空文庫のDBに直接アクセスする権利は持っておらず、サーブする情報はCSVファイルおよび青空文庫のサイトからスクレイピングして取得しております。 Webの情報をスクレイピングするなら、Scrapyなんかが定番で、Python使いとしてはこれ一択な気がするのですが、APIサーバをNode+Koa.jsで作った勢いで、スクレイパーもNodeで書いていたりします。その過程で紆余曲折しながら何度か書き換えて「Nodeでスクレイピングするならこれが良いんじゃないの？」という個人的な結論に至ったのでそれについてちょっと書きます。 Node.jsでのスクレイピング scraperjs まず初めに使って
Max8にどうしてもElectronを載っけてUI革命を起こしたかったおれたちは - Qiita
はじめに 前回の記事で、普通のNode.jsアプリケーション開発とほぼ変わらない感覚で開発ができることがわかったので、もっと色々試してみました。 やってみたリスト UIなど Electron React Material UI 開発環境など Webpack Babel その他 Socket.io つくったもの この動画で紹介されてるパッチをほぼそのまま引っ張ってきて、それを動かすコントローラー的なElectronアプリを作ってみました。 音付き動画 ソースコード github そもそもの仕組みのおさらい 開発のtipsいろいろ Max上で動かすときはMaxの中にNodeが入っているので、nodeやnpmがインストールされてなくても問題はありませんが、開発時は手元で動かせるように入れておいた方が良いと思います。（もちろんバージョンは揃えて） 基本的には、普通のNode.jsを書いている感覚で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ノムリッシュ翻訳ライブラリをnpmに公開しました - Qiita
Node.js Mongooseのインスタンスメソッドとクラスメソッドの実装でハマったこと - Qiita
【Node.js】たった1行のプログラムでWebサーバを構築!? - Qiita
RxJSを覚えないAngularの書き方 - Qiita
axiosでrequestと同じようにjarを使えるようにする方法 - Qiita
Node.js - ExpressでPOSTデータを取得する - Qiita
Node.jsへのMySQLのインストール方法 - Qiita
