Clean Architecture with VueAttempting Clean Architecture with Vue.js and Vuex. Event Link: https://kfug.connpass.com/event/90962/ GitHub Link: https://github.com/andoshin11/cl…
JavaScriptでClean Architectureを導入してみた - Vue.js・Reactのサンプルつき - Qiita
事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h
TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
tesseract.jsがスマホ上で動くOCRアプリケーションを作る - Qiita
初投稿です。 目標 スマホのブラウザとカメラで動く日本語OCRアプリケーションを作る。 経緯 会社で社内便（複数）の郵送を頼まれる事がある。その際、宛名読む→宛名から郵便受け番号への変換→宛名の郵便受けまで行って投函→宛名読む→...を繰り返す必要があり効率化したい。 ↓ 配達の前にPCで宛名を一括で打ち込み、郵便受けの番号リストを作成すれば良いがタイピングが面倒。 スマホのカメラで動くOCRなら便利そうだが、Google Cloud Vision APIの社内利用はセキュリティの問題もあって（多分）無理。 ↓ tesseract.jsなら入力情報を外部に送信しなくて良いので安全なのでは！？ AndroidとかiOSのアプリは作れないけどhtmlなら何とかなりそう！？ ↓ 今ここ ↓ 社員情報のAPIを使用した最短ルートの提案など... 作成物 作成物のデモ 処理速度の関係でiPhone
npm Blog Archive: npm Joins ECMA International and TC39
The npm blog has been discontinued. Updates from the npm team are now published on the GitHub Blog and the GitHub Changelog. We’re excited to announce that npm has joined ECMA International and is participating in TC39, the working group of ECMA International that defines the standard for the JavaScript programming language. (The standard is, strictly speaking, called ECMAScript, although everyone
2018年Vue.jsとVuexを使ってる人に提案するコンポーネントの分類と設計パターン - Qiita
はじめに 私はVue.js with Vuexを使った業務で1画面３０APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 その際に得られたノウハウを言語化し、共有出来たらと思います。また、これらのノウハウよりも良いノウハウがあった場合は共有・議論して頂けるととても嬉しいです。 ※注釈 この記事はサンプルコードが全然ないです。 OSSの様に気軽に編集リクエストでサンプルコード等を提供頂けたら幸いです！ 目次 コンポーネント設計の使い分けの効果 コンポーネントに関わるレンズの種類と重要性 技術者のレンズから覗く、コンポーネントの分類 プレゼンテーションコンポーネントを更に分類 複雑なコンポーネントの設計パターンとパターン名 デザイナーのレンズでコンポーネントの分類と技術者レンズからのプラクティス 技術者レンズでの
「prop-types」でPropsのデータ型を担保する
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS Sierra 10.12 Node.js v8.9.4／npm 5.6.0 React 16.2.0 prop-types 15.6.0 Propsにはどんなデータを渡せばよいのか Reactを使う機会が増えていくにつれて、他人が作ったコンポーネントを触る機会も増えていきます。連載第3回の「React×Material-UIでモダンなUIを実装する」で取り上げたmaterial-uiなどは典型的な「他人が作ったコンポーネント」ですね。数カ月前の自分自身が書いたコードも他人のものと考えたほうがいい、とする説もあるので、一人で開発していても期間が長くなれば、見覚えがないコンポーネントをメンテナンスする機会はやはり増えていくと
webpackを可視化するツールを紹介 - Qiita
フロントエンドのビルド（webpack）に関わる部分でパフォーマンス改善を考える時に、 現状を可視化するため、いくつかプラグインを使ってみましたので、軽く紹介したいと思います 可視化したい対象は以下の2つです ・webpackの速度改善の為、遅いloaderやpluginを知りたい ・バンドルファイルのサイズを減らしたいので、バンドルファイル内の各パッケージがどのくらいの容量を占めているか知りたい 今回分析に使ったコードはこちらです https://github.com/kurosame/vuejs-boilerplate 遅いloaderやpluginを知りたい speed-measure-webpack-plugin
Webdash | The customizable web dashboard
Orchestrate your web project with Webdash - the customizable web dashboardWebdash helps you visualize, monitor & manage your web project using community-driven plugins. This project has been archived. If you're curious, check out one of my latest courses: Learn JavaScriptLearn TypeScriptLearn ProgrammingReact TutorialLearn HTML CSSIf you work with JavaScript, check out the fetch use cases and Java
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
「はじめてのフロントエンド開発」という本を書きました - massa142's blog
共著者として参加していた書籍『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に技術評論社さまより発売となりました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎出版社/メーカー: 技術評論社発売日: 2018/05/09メディア: 単行本（ソフトカバー）この商品を含むブログを見る どんな本か React、Angular、Vue.js、React Nativeそれぞれが、同じサーバのAPIを参照し、同様の機能を持ったアプリケーションとして作成します。React Nativeは、ネイティブアプリを開発するためのフレームワークなため、SPA（Single-page
How To Use the Resize Observer JavaScript API | DigitalOcean
Introduction Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API. It allows for elements to be notified when their size changes. The most frequent reason for an element’s size to change is when the viewport is resized or the device’s direction changes between portrait and landscape. Up until this point, we’ve had to rely on the glob
メンテナンスしやすいVueComponentを設計するために気をつけていること
はじめに VueをつかってWebアプリケーションを実装するとき、Componentをどう切るかって誰でも一度は悩みますよね(悩みますよね？)。とりあえず思いつくままに切ってみたり、繰り返し使いそうなもので切ってみたり、CSSのスコープで切ってみたり…。いろいろな切り口があると思います。 この「いろいろな切り口」でコンポーネントを切ることができる点が、コンポーネント設計を難しくしている所以だと考えています。 そこで今回は、どのような切り口・観点でコンポーネントを切ればよいのか、そのときに気をつけるべきことは何か、といったComponentの設計方法についてまとめてみます。 すべての実用ケースを想定できているわけではないと思いますが、大小いくつかのWebアプリを開発する際に利用してみて今のところいい感じに運用できている方法です(というか自然と収束して出来上がった考え方という感じです)。 はじめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - libp2p/js-libp2p: The JavaScript Implementation of libp2p networking stack.
firestore で配列の検索・追加・削除がサポートされたので試してみた - Qiita
pax/README.md at master · nathan/pax · GitHub
Virus in eslint-scope? · Issue #39 · eslint/eslint-scope
GitHub - alxpez/vuegg: dnd visual editor - mockups and code in one go!
GitHub - GoogleChromeLabs/prerender-loader: 📰 Painless universal pre-rendering for Webpack.
pecoでnpm-scriptsを超簡単に実行したい - Qiita
