Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)第2回Vue.js勉強会で使用したスライドです。 状態管理ライブラリのVuex, ルーティング設定ができるVue-Router, サーバサイドレンダリングフレームワークのNuxtを紹介。
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。 - Qiita
フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。 選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。 私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。 これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。 Why choose React over Angular and Vue.js 上で述べたように、フロントエンドフレームワークの学習という観点では何から始めても大きな問題はない。ここでは、その'何か'でReactが選ばれる理由を述べる。 Reactは小さく、シンプル。 Reactは、ちょっとしたReactとの対
FilePond - 多機能で格好良いファイルアップロードフォーム MOONGIFT
HTML5でファイルアップロード機能も多少改善されました。ファイルのドラッグ&ドロップなど機能は増えているのですが、それを使いこなすためにはコードを書かなければなりません。 そこで使ってみたいのがFilePondです。簡単に設置できて、格好良いファイルアップロードフォームが作れます。 FilePondの使い方 使っているところです。ファイルをドロップするとアニメーションが走ったり、ボタンをクリックしてアップロードを開始できます。 複数ファイルにももちろん対応しています。プレビューもできます。 プロフィール画像のようなデータのアップロードにも。 FilePondを使うと複数ファイルに対応したファイルアップロードフォームが簡単に作成できます。ファイルごとにアップロード処理を行えて、サムネイル表示もできるなどユーザビリティも高そうです。 FilePondはJavaScript製のオープンソース・
TensorFlow.js | Machine Learning for JavaScript Developers
Deploy ML on mobile, microcontrollers and other edge devices
Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
async/awaitを使ったモダンな非同期処理 - Qiita
2017年6月リリースのES2017で、JavaScriptはようやくまともな非同期処理を手に入れました。 以下はMODERN ASYNCHRONOUS JAVASCRIPT WITH ASYNC AND AWAITの日本語訳です。 MODERN ASYNCHRONOUS JAVASCRIPT WITH ASYNC AND AWAIT JavaScriptで非同期処理を行う近代的な方法とは。 Introduction JavaScriptはコールバック地獄からES2015のPromiseまで瞬く間に進化しました。 そしてES2017では、async/awaitによってより簡潔に非同期処理を書けるようになりました。 非同期関数はPromiseとジェネレータの合わせ技であり、そしてPromiseより高いレベルの抽象化です。 リピートミー。「async/awaitはPromiseで作られている」
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
酔っ払ってもコードが書きたい！JavaScriptを書き散らかしてPrettierに介護してもらう方法 - pixiv inside
こんにちは、一般ノーマルエンジニアのgeta6です。社内ではpixiv SketchというサービスでJavaScriptを書く仕事をしています。今日はPrettierの話をします。 JavaScriptを書くのが大好きな皆さま各位におかれましては、きっと酒のつまみにコードを書くこともあるでしょう。しかし酔っ払いながらコードを書くと、往々にして上記のような書き散らかしをしてしまうことがあります。 このコードは動きます。動きますが、思わず目を背けたくなる汚さです。この世に存在することが許されるべきか疑うレベルです。ESLint先生も思わずブチギレです。当然ですね。 CIにLintを仕込んでいた場合は当然通りませんし、gitのprecommit hookにLintを仕込んでいた場合はgit commitすら許されません。堅牢なシステムは酔っ払いにコードをコミットする権利すら与えてくれないのです。
async/awaitでiterateがんばる - Qiita
async/awaitが使える環境がまぁまぁ増えてきてNodeとかでは普通に使うようになりました。 多分みんな一回は頭を悩ませるのはiterate周りだと思います。 例えばforEachとか雰囲気でかくと下みたいな感じになるけど、あくまでasyncキーワードはpromiseを返してくれるようにしてくれて、awaitはpromiseを待つっていう単純な機能を提供するものなのでforEach自身がpromiseを返さない限りはこのコードはうまく動かない。 function timer() { return new Promise(resolve => setTimeout(_ => resolve(), 100)) } (async () => { let list = []; await [1,2,3,4,5].forEach(async v => { await timer(); list
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
Dashboards - 自由度の高いダッシュボードライブラリ
Webサービスや業務システムを通じて集められたデータを表示するのに必要なのがダッシュボードです。ダッシュボードは常に固定表示よりも、各自の使い方に合わせて情報の並び替えが求められます。 そんなUIを作成できるのがDashboardsです。ユーザが自由に画面要素を変更できます。 Dashboardsの使い方 最初の表示です。ダッシュボードを作成します。 色々なウィジェットを配置した例。 ドラッグ&ドロップで配置は変更できます。 変更しているところ。 ウィジェットは右側に並んでいます。 色の変更もできます。 全体の大きさも変更できます。 Dashboardsはウィジェット同士を重ねて表示することができ、多くのダッシュボードライブラリに比べて自由度が高くなっています。開発者としてはウィジェットさえ作成すれば、後は利用者が自由に配置を決めてくれるはずです。 DashboardsはJavaScrip
Stopify - JavaScriptをフリーズせず安全に実行
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web IDEなどが流行っていく中で必要になるのが、ユーザが開発したコードを安全に実行できる仕組みです。セキュリティ的な意味合いはもちろん、無限ループしてしまった時であったり、重たい処理を実行している時に途中で止められる仕組みが必要です。 今回はその一つ、Stopifyを紹介します。JavaScriptから安全な実行できるJavaScriptに変換します。 Stopifyの使い方 メイン画面です。左に書いたコードでの出力が右側に反映されます。デモではDartやPythonなど、JavaScriptへの変換をサポートしたライブラリを用いています。 例えばPython製。このコードは通常、確実にハマってハングアップしてしまいます。しかしStopifyを通して実行することで、止まることな
LeaderLine - 情報に関連性を持たせる線を描画
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 情報はただ並べただけではその関連性が分かりづらいものです。線を使って表現すると情報同士の関連性が分かるようになり、理解度が増します。多くの場合、そうした内容はプレゼンテーション用のソフトウェアで作ったり画像編集ソフトウェアを使います。 しかしそれではメンテナンスが面倒になります。そこで使ってみたいのがLeaderLineです。 LeaderLineの使い方 使い方です。とても簡単ですね。 応用するとこんな複雑な線も描けます。マウスオーバーによるアニメーションもサポートしています。 DOMにラインを付けることもできます。 写真に説明を追加するなんて使い方も。 さらに範囲を設けたりもできます。 グラフをインタラクティブにするデモです。 LeaderLineは実に多彩な表現が可能です。情
フロントエンド開発に Babel も Webpack も必要ない ※ - KAYAC Engineers' Blog
できらぁ！ 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはなく、 ECMAScript の新しい構文や JavaScript Modules など、 多くの機能がネイティブの状態でも使えます。 もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、 ビルドツールを使ったほうが良いのは間違いないのですが、 JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。 ソースコードはこちら！ そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。 ECMAScript に関するクイズゲームです。 最新版の Google Chrom
JavaScript 長く使える系の知識 - Qiita
フロントエンドが戦国時代を迎えて数年が経ちましたね。 最新のあれこれの前に、その前提となる部分を押さえると理解が早くなります。基礎知識は土台の様なものです。こういう部分には大きな変化は頻繁には起きないので、長く使えます。また、一度知っておけば変化が起きてもキャッチアップが早くなります。 ※ 読みきれないと意味ないので、だいぶ削りました。 コーディング全般に関する知識 長く使えますし、JavaScript以外でも使えます。設計技法とデザインパターン、美しいコードを書く為のテクニックetc。良い本が沢山出てます。 ↓ 2017年末にバズってました。 【年末年始に読みたい！】優秀なエンジニアが影響を受けた本ランキングトップ32冊！（559冊収録の全ランキングデータPDFファイルつき） あと、変数と関数の命名は超大事 プログラミングでよく使う英単語のまとめ【随時更新】 - Qiita 今さら聞けな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
やわらかVue.js
hyperHTMLやlit-htmlが効率的に再描画を行う仕組み - Qiita
JavaScript の テンプレートリテラル を極める！ - Qiita
