gulp4再入門 gulpfileの分割とnodeモジュールの利用 - Qiita
先に結論だけ 私のポートフォリオサイトのメンテナンスを行い、タスクランナーをgulp4へ更新しました。その結果、gulpfileが8行になりました。 ▼./gulpfile.js/index.js "use strict"; const revision = require("gulptask-revision")("./dist/"); exports.revision = revision; const { s3_deploy, s3_staging } = require("./awsPublish"); exports.s3_deploy = s3_deploy; exports.s3_staging = s3_staging; gulp4は以前のバージョンと比べ、gulpfileの管理工数を減らすことができます。 はじめに 2018年12月にgulp4が正式リリースされました。
JWTライブラリの危機的な脆弱性について調べた - Qiita
JWT 脆弱性 で検索すると 【翻訳】JSON Web Tokenライブラリの危機的な脆弱性 って記事(4年ぐらい前の記事)が出てきて読んでいたのですが、よくわからなかったので手を動かしながら調べてみました。 ※ 翻訳の元記事はこちら node-jsonwebtoken, pyjwt, namshi/jose, php-jwt, jsjwtを非対称の鍵(RS256, RS384, RS512, ES256, ES384, ES512)で使っている場合、最新のバージョンに更新してください。 とのことなので、バージョン更新で直ったようなので修正を読んでいきます。 また、 js を利用して開発する機会が多いので node-jsonwebtoken の修正を確認してみます。 確認したコードは下記にあります。 https://github.com/OshiroSeiya/jsonwebtoken-a
React Redux の難しかった点をできるだけシンプルに図解 - Qiita
はじめに この記事はだいぶ古くなっており、現在はReact Hooksを使ったReduxとComponentの繋ぎこみ方法があるようです。この記事ではそのあたり触れられてないので注意です。（Reduxの基本的な記事としてはまだ使えると思います、、、思いたい。） React-Reduxを人に教える機会があるのですが、中々キャッチアップが難しいFWです。 自分自身もReact自体未経験のところから、それなりに規模のある開発に参画したので、 その時に「ここが難しかったなあ」というところを自分なりに図解してみたいと思います。 前提 ReactとReduxの接続にはreact-reduxのconnectを使うこととします。 この記事で伝えたいところ 自分が難しく感じたのはこのあたりでした。 （ソースが色々あって）全体の流れがよくわからない actionを起こすとreducerが反応する仕組みがよくわ
Reduxにドメイン層を導入する - Qiita
【2018/6/18更新】immutable.js を利用せずに、当エントリー同等以上の開発が可能な、FP・型推論の強いモジュールを公開しました。https://qiita.com/Takepepe/items/a79e767b38981c910c3f ドメインモデルの需要 フロントエンドフレームワークでプロダクトを作り込んでいくと、ビジネスロジックが view に介入しすぎてしまうことが少なからずあります。下記の様なビジネスロジックが散在しているコードに、スケール耐性があるとは思えません。リリース当時は単純だったものが、複雑に変化していくケースは往々にしてあります。 function TodoItems (props) { const { todos, updateTodo, deleteTodo } = props const items = todos.map(item , i) =
AMP で任意の JS を実行できる amp-script を試してみた - Qiita
明日の AMP Conf のための事前に動かしてみた。 amp-script とは何か 今まで https://github.com/ampproject/amphtml に登録された一部のJSしか出来なかったAMPだが、amp-script を使うと任意の JS を実行できる。ただし、 WebWorker コンテキストの中でのみ。 本来ならDOMが存在しないWebWorkerだが、しかしDOMに触れないわけではない。 WebWorker の中に DOM と似たようなオブジェクトが実装されており、それを操作することでメインスレッドのJSに反映される。 この DOM がすごい2018: worker-dom - mizchi's blog amp-script を導入する <head> <!-- ... --> <script async src="https://cdn.ampprojec
typelessというReact向け状態管理ライブラリがめっちゃいい - Qiita
typelessというreactの状態管理ライブラリが非常に良いので紹介します 2019/10/24: 入門記事 書きました What is typeless? react+typescriptで使う前提のreduxラッパーライブラリ。reduxが抱える以下のような課題を解決する 異常に多いボイラープレートコード 重複した型注釈 大量の依存ライブラリ 欠如したコーディングガイドライン これらの課題を踏まえて以下のコンセプトでデザインしている TypeScriptフレンドリー 実用に耐えうる機能を全て内包する 容易なモジュール追加 多くのユースケースに対する解決策をデフォルトで提供 ＊参考： https://typeless.js.org/introduction/motivation reduxの抱える課題について ドキュメントのmotivationの項で書かれていることは多くの人が課題を
TypeScript v3.4.0-rc 変更点 - Qiita
こんにちはメルペイ社な@vvakameです。 TypeScript 3.4 RCがアナウンスされました。 What's new in TypeScriptは消滅したようです。 Roadmapはこちら。 v3.4.0での破壊的変更はこちら。 今回から進捗管理の方法に変化があるようですね。 外部から変更を後追いしやすくなった印象です。 TypeScript 3.4 Iteration Plan TypeScript Roadmap: January - June 2019 とかがあります。 かなりボリュームがあるので逐次追うのはかなりMPが必要そうですね…。 この辺に僕が試した時のコードを投げてあります。 変更点まとめ --incremental の追加 --incremental builds with .tsbuildinfo files --watch と違ってプロセスを跨いで(cold
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita
来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザーの方は、当然 React Hooks の情報を常に追っており正式版がリリースされたらすぐにでも自分のコードで使いはじめる準備ができていることと思います。しかし、この記事をご覧の方々の中には React を使っているにも関わらず「React Hooks のこ
MSを偲び、ここにIE6対応SPAの作り方を記す - Qiita
JavaScript2 シェアフル Advent Calendar 2018 10 日目の記事です。 Microsoft EdgeがChromiumベースになるということで賑わっていますので、私も話に乗っかりたいと思い、IE6の話を書くことにしました。 BabelとParcelとHyperappでIE6対応SPA作ってみました デモ: https://boiyaa-ie6-compatible-spa.appspot.com ソース: https://github.com/boiyaa/ie6-compatible-spa これを見ているほとんどのみなさんはIE6を持っていないと思うので、↑を開いてもただの簡素なSPAでしかありませんが。。 記事の最後に載せた画面キャプチャのようになります。 IE6で見る方法 Windows XP マシンを入手するか、BrowserStack の有料プラン
Node.jsで高速にファイル一覧を取得するfs.readdirのwithFileTypesオプション - Qiita
この記事はNode.js Advent Calendar 2018の2日目の記事です。 ちょっとしたネタですが、Node.js v10.10から入ったfs.readdirのwithFileTypesオプションとfs.Direntについて紹介したいと思います。 TL;DR 特定のディレクトリ配下のファイル一覧を表示する方法を紹介 読み込んだディレクトリのファイル種別がファイルかディレクトリか判定する方法を紹介 fs.statを使った従来の方法 Node.js v10.10.0から使えるfs.readdir(またはfs.readdirSync)のwithFileTypesとfs.Direntを使った方法 fs.statを使った判定方法 例えばNode.jsを使ってディレクトリ配下のファイル一覧を表示したいとき以下のようにfs.readdirとfs.statを使って書くことができます。 cons
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog
もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも中途半端に重いので、とりあえずのバッファが必要、という感じで作った。なので速度重視。 ブラウザのストレージで永続化してる。オフラインで動く。できるだけエディタとしてはスコープを大きくせず、単に編集バッファ(textarea)でしかない、というのを意識している。 結構頑張って作り込んでしまった https://nedi.app が色々肥大化してしまっていて入力時にラグを感じるので、編集体験を見つめ直す自戒もある。 機能 数式対応 コードハイライト対応 バックグラウンドで自動保存 改行を br に
QiitaのTypo検出にtextlintを追加しました + 編集リクエストを送り続けて気づいたこと - Qiita
人間性をさがせよ QiitaのTypo検出 - Qiita にtextlintを追加しました。 まとめ textlintの追加は簡単だった ほんのり(優しく)チェックできるtextlintプラグインを探さなければならない ホワイトリスト機能を改善してもらった textlintに引っかかる投稿はそこそこある 誤判定は割と出る。が、一部は慣れでスルーできる 編集リクエストは一つにまとめて送信する 編集リクエストが採用されなくても泣かない 追加コード 人間性をさがせよ QiitaのTypo検出 - Qiita のコードを見ていないとなんのこっちゃですが、diffで表示します。 --- a/index.js +++ b/index.js @@ -4,6 +4,9 @@ const axios = require('axios'); const DICTIONARY = require('./dic
Web Audio APIの闇 - Qiita
HTML5でゲームやリッチなコンテンツを作る上で欠かせない「Web Audio API」 しかしコイツがなかなか・・・モバイルでの特殊実装やメモリ使用量まわりで色々と闇を抱えていて・・・ ということで闇を見つけ次第、検証結果や対処方法など記録を残していきます。 iOS SafariはBGMなどの自動再生ができない iOS Safariは以下ようなコードでサウンドの自動再生ができない const AudioContext = window.AudioContext || window.webkitAudioContext; const ctx = new AudioContext(); const request = new XMLHttpRequest(); const url = 'https://zprodev.github.io/web-audio-test/assets/Campf
【Reduxに疲れた人のための】Undux入門 - Qiita
巷のフロントエンドではReact+Reduxの技術スタックがどちゃクソ流行ってますね！ とはいえ、Reduxだとやはりどうしてもひとつアプリを作る際のボイラプレートコードの多さや、ステートの更新によってトリガされる副作用処理のハンドリングをredux-sagaやredux-side-effectsなしではうまくやれないケースが多いです。 もし、Reduxとその周辺ライブラリのよせあつめにちょっとでもツラミを感じ始めたら、Unduxを試すチャンスです。 Unduxとは？ Dead simple state management for React Reactのための死ぬほどシンプルなステート管理ライブラリです。 特徴 TypeScriptやFlowなどでの型付けを意識した設計。 ReduxにおけるAction, Reducer, Dispatcher, Containerなどの概念を必要とし
JavaScriptでメモリ効率を考える その２（メモリアロケータ篇） - Qiita
JavaScriptでメモリ効率を考える その１（シングルフレームバッファ篇） JavaScriptでメモリ効率を考える その２（メモリアロケータ篇）←この記事 通常の配列生成 前回のシングルフレームオブジェクトで大量のオブジェクトは捌けました。 捌けましたが、あれはプロパティやら何やらが色々固定されたクラスだから出来たことで、例えばこんなケースだと難しいです。 function loop(){ let i = 1000; while(i--){ // ランダムなサイズを指定 const size = Math.ceil(Math.random() * 100000); // 配列を生成 const arr = new Float32Array(size); // 破棄する arr = null; } requestAnimationFrame(loop); } サイズが変動する配列はプー
webpack で moment.js の無駄なロケールファイルを除去する - Qiita
と書いて webpack でビルドすると、生成される bundle ファイルのサイズが非常に大きくなってしまいます。これは、moment.js が持つすべてのロケールファイルが bundle ファイルに含まれてしまうためです。ファイルサイズにシビアなフロントエンドではかなり大きな問題です。 (上図は source-map-explorer を使って生成しました） 解決策 webpack の IgnorePlugin か ContextReplacementPlugin を使えば、この問題を回避することが出来ます。 IgnorePlugin を使う場合 「デフォルトの en 以外にロケールファイルは必要ない」という場合は、IgnorePlugin が使えます。 const webpack = require('webpack'); module.exports = { //... plugi
Node.jsのフレームワークhapiを試してみる - Qiita
'use strict'; const Hapi = require('hapi'); // Create a server with a host and port const server = new Hapi.Server(); server.connection({ host: 'localhost', port: 3000 }); // Add the route server.route({ method: 'GET', path:'/hello', handler: function (request, reply) { return reply('hello world'); } }); // Start the server server.start((err) => { if (err) { throw err; } console.log('Server runnin
eslint-config-airbnbを守りたかった - Qiita
ESLint のルールに eslint-config-airbnb v5.0 を採用してみたけど、一部のルールが厳しかったという話です。 eslint-config-airbnb の設定 おそらく、一番デフォルトの全部入りの設定 Our default export contains all of our ESLint rules, including EcmaScript 6+ and React. It requires eslint and eslint-plugin-react. npm install --save-dev eslint-config-airbnb eslint-plugin-react eslint add "extends": "airbnb" to your .eslintrc no-param-reassign http://eslint.org/docs
ES6のconstを使い倒すレシピ3 - immutable.js編 〜 JSおくのほそ道 #036 - Qiita
こんにちは、ほそ道です。 Object.freeze編でやったようにオブジェクトの状態を完全に凍結させたい場合はfreezeしてしまえばよいのですが、アプリケーションを作っていると当然、拡張/変更が必要になるシチュエーションは出てくると思います。 今回はライブラリを使って不意なデータ変更によって生まれる複雑性に対抗する方法を紹介していきます。 1.前提共有編 2.Object.freeze編 4.コレクション一発代入/一発返却編 5.条件分岐一発代入/一発返却編 目次はこちら const宣言したオブジェクトの不変性を保ちながら変更に対応する 前回、deepFreezeという関数を作るときに、freezeされた新しいオブジェクトを生成して返すようにしましたが、そのようにして破壊的メソッドを使用せずに、変更を加えた新しいオブジェクトを返す、というようにするのが拡張/変更による想定外を生まないた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
