JavaScriptのES2019で追加された新機能まとめ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ESLint導入環境にprettierを追加して運用する - Kenta Katoh's Blog
ESLint導入環境にprettierを追加して運用する July 15, 2017 prettierというコードフォーマッタが最近OSSでよく使われていて、OSSに限らず複数人開発しているプロジェクトなどで非常に有用だと感じたので、導入した。以下はその際の覚え書き・注意点など。 prerrierとは Node.js製のコードフォーマッタ。以下のコードに対応している。 JavaScript, including ES2017 JSX Flow TypeScript CSS, LESS, and SCSS JSON GraphQL ESLintとどう違うのか 似たようなツールでESLintが思い出されると思う。prettier公式のドキュメントにも言及があるが、ESLintのリンティングには大きく分けて二種類あって、 Formatting rules Code-quality rules p
off-the-main-thread の時代 - mizchi's blog
off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
Firestoreをもっと手軽に使えるfirestore-simpleを作った - Kesinの知見置き場
追記: v2についてのエントリはこちら Firebaseの新しいDBであるFirestoreは使っているでしょうか？ 今まではどうしてもサーバー側の実装が必要だったDBへのデータの格納がクライアントだけで済むようになったので圧倒的に便利ですね。 そんなわけで自分もjsからFirestoreを使う機会が増えてきたのですが、毎回書くたびにAPIが微妙に使いづらいと感じていました。そこで、Firestoreをいい感じに扱えるfirestore-simpleというライブラリをリリースしました。 npm: https://www.npmjs.com/package/firestore-simple GitHub: https://github.com/Kesin11/Firestore-simple サンプルコード まず、比較のためにFirestoreを素で使った場合のコードです。 const ad
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
An Overview of JavaScript Testing in 2020
(Updated on: 21.11.2021) This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing for the year 2022. It combines information from the best articles recently released (they are referenced at the bottom) and adds from my own experience. It’s a little long but whoever reads and understands this guide, can safely assume they know the
次にJSガッツリ書くときはTypeScriptで - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? すっかりTypeScript厨（同僚談）になっているyprestoです。 AndroidでKotlinがどんどん採用されていくのを横で指を加えて見てるわけには行かないので、JSにもTypeScriptをぶち込みました。SwiftかKotlinを書いたことがある人ならばすっと馴染むと思います。 新しく書くJSはもう基本的にTSで書いてます（botすらTypeScriptに書き換えて引かれましたｗ）。ちょうど1年前からガッツリ使っていたので知見を垂れ流すフェーズに入ります。 完全な初級というよりは、ちゃんと使いたい中級な人向けに、基本的な使
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
逆引きRxJSの使い方パターン - Qiita
RxJSを覚えようとして調べたところ、mapやfilterなどRxJSが提供している機能の解説はすぐに見つかりましたが、実際にウェブページを作るときにありがちなパターンをRxJSでどのように実現するかという例があまり見つからないので苦労しました。 RxJSの勉強のためにちょっとしたサンプルアプリを作り、その中で見えてきたありがちなパターンを実現するRxJSのコードをまとめてみました。 この記事のRxJSは5系です。4から5で結構メソッド名などが変わっているようなので以前からRxJSを知っている方はご注意を。 また、動作確認はnode v8.1.3で行いました。 ダブルクリック RxJSの入門として紹介されることが多いサンプルですが、まずはここから。 色々なところで紹介されている入門。 const Rx = require('rxjs/Rx') const Emitter = require
React + RxJSで始める状態管理 - CARTA TECH BLOG
こんにちは、fluctの@nekoyaです。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションはReactとRxJSを軸として作られており、コードはTypeScriptを使って書いています。 アプリケーションを流れるデータと状態の管理について、Write StackとRead Stackという考え方を取り入れたところ、いろいろなメリットが得られたので、そのあたりを軸に掘り下げてみます。 全体の大まかな構成 各Stackの前に、まずはアプリケーション全体の構成をざっくりと見ておきます。 流れとしては、DispatcherからWrite Stack, Read Stackを通ってStateが生成され、それをViewが受け取るという構成になっています。 全体の流れとしてはFluxっぽい何かのひとつのあり方なのですが、
GitHub - Shinpeim/NekogataDrumSequencer
MVVMパターンは、GUIのアーキテクチャパターンの一種で、PresentationとDomainの分離（PDS）を目的としたパターンです。MVVMパターンを採用することによって、プラットフォーム依存なUIを実現するプレゼンテーション層をViewとViewModelに書き、その他すべてをModelに書くことによって、「複雑だしプラットフォーム依存でテストしにくいUIのコード」と「アプリケーションの挙動をモデリングしたコード」を分離することができます。 その一方で、MVVMは「モデルはこう設計しましょう」ということについては指針をくれません。これは、言い方を変えれば、MVVMを採用したからといってアプリケーション全体の設計が決まるわけではなく、MVVMは「プレゼンテーションとその他をどうやって分けるか」について指針をくれるだけ、ということです。 ところで、混乱が起きやすいポイントですが、PD
これはなに？
これはなに？ しんぺい a.k.a. 猫型蓄音機が、MVVMとCleanArchitectureの解説のために作ったデモアプリケーションです。「状態をたくさんもつ」ものとして、ドラムシーケンサーを実装しました。デモをGithubPagesで公開しています。 MVVM や LayeredArchitecture、Clean Architectureの名前は知っているが混乱している、というひとを対象読者として想定しています。 まずは、MVVMやLayered Architectureの概要から見ていきましょう。 MVVM と DDD-like Layered Architecture MVVMパターンは、GUIのアーキテクチャパターンの一種で、PresentationとDomainの分離（PDS）を目的としたパターンです。MVVMパターンを採用することによって、プラットフォーム依存なUIを実現
フロントエンドの未来の話 - Qiita
const fsbx = require('fuse-box'); const fuseBox = fsbx.FuseBox.init({ homeDir: 'src/', sourcemaps : true, outFile: './dist/app.js', plugins: [ [ fsbx.SassPlugin({ outputStyle: 'compressed' }), fsbx.CSSPlugin({}) ], fsbx.TypeScriptHelpers(), fsbx.JSONPlugin(), fsbx.HTMLPlugin({ useDefault: false }) ] }); fuseBox.devServer('>main.ts **/*.html', { port: 4445 }); シンプル！！ fuse-boxの特徴として ・TypeScriptはデフォル
vue-playとvue-styleguide-generatorでVueコンポーネント開発 - FLINTERS Engineer's Blog
こんにちは、丸山です。 JavaScriptフレームワークのひとつVue.jsの主な機能のひとつに、コンポーネントがあります。 コンポーネントはUIの部品のようなもので、（最初から特定の機能のために使われることが想定されている場合以外は）なるべく独立して再利用可能な状態を保つべきです。 また、そういったコンポーネントは作った人以外が使用することも多々あるので、どのように使うか、どういう機能を提供しているかといった情報が簡単にわかれば、開発の手助けになるかと思います。 そこで今回は、そういった場面でVueコンポーネントの開発を助けるライブラリを紹介します。 サンプルコンポーネント 今回下記のようなコンポーネントを用意しました。内容は簡単なMarkdownエディタです。 <template> <div id="editor"> <textarea v-model="input"></texta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jestの曖昧な比較 - Qiita
Jestの曖昧な比較 - Qiita
Promise と async/await の理解度をもう1段階上げる - Qiita
シンプルだけどシッカリ働く最新のECMAScript開発環境 - Qiita
