今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる
Vue.jsの公式ドキュメント 最初にVue.jsの公式ドキュメントを紹介します。 コチラです。 バッチリ日本語にも翻訳されていて、とても見やすいです。Vue.jsは学習コストは低いと言われているとはいえ、とても奥は深く、多機能です。 そして、本来はWebエンジニアがメインターゲットとなるフレームワークですから、GASユーザーにとっては遠回りになる情報も多くあります。 なので、最初のうちは、このブログのシリーズなどを参考にしながら進めたほうが良いかも知れません。 何かそれ以上に知りたいことがあるときには、この公式ドキュメントが頼りになると思います。 CDNを使用してVue.jsを導入するVue.jsのインストールについてお伝えしていきます。 Webエンジニアの皆さんはnpmなどを使うのでしょうけど、GASの場合はCDNが便利です。 CDNとはContent DeliveryNetwo

GASでクライアント側にもJavaScriptを使用してWebアプリを作成する方法をシリーズでお伝えしています。今回は、GASでクライアントJavaScriptを使用する超簡単なプログラムについて紹介します。 前回のおさらい まず、前回作成したプロジェクト構成を紹介します。 URLリクエストを受け取ったら、後述するindex.htmlを受け渡すdoGet関数を含むmain.gsです。 function doGet() { varhtmlOutput =HtmlService.createTemplateFromFile("index").evaluate();htmlOutput .setTitle('GAS+Vue.js') .addMetaTag('viewport', 'width=device-width, initial-scale=1') returnhtmlOutpu

マイクロアドでアプリケーションエンジニアをしているNです。 日々、バッチを作ったりWEBアプリケーションを作ったりしています。 今回はライトにJavaScriptフレームワークを導入したお話を書いていきたいと思います。 導入のきっかけ その1~きっかけのきっかけ~ マイクロアドではいろいろな用途でWEBアプリケーションを利用しています。 当然ではありますが一部特殊な用途ではない限りJavaScriptでの実装が含まれています。 これらのいくつかにはjQueryが使われており、現在も運用されています。 そんな中、 あるWEBアプリケーションを刷新する機会があり改めてjQueryを多用したコードを見返すことに、、、 その2 ~jQueryって非常に強力~ jQueryを多用した実装を見返して、改めて思ったのが jQueryって非常に強力。 一方で、この強力なライブラリになんでもお世話になってい

最近、FREETEL のスマホ(SIMフリー)を使い始めている kouraku です。おはこんばんちわ。 とりあえず、OCN モバイル ONEでデータ通信の契約だけしてのお試し中なのですが、これが思いの外なかなか良い感じです。何しろ、金額がとても安い!このまま移行しちゃおうか・・・なんて考えてしまうほどです。 さてさて前回は、コードの見直しとともに、カテゴリを動的に表示させるところまでやりました。 【前回】Vue.jsでCSSスタイルガイド作成に挑戦!(3) 今回は案件で使用することを想定して、 まずはstyleguideディレクトリへファイルを移動し、 setting.jsonで読み込ませたいCSSを設定し、 さらに複数のCSSを読み込めるようにしたいと思います。 styleguide ディレクトリを作成しファイルを移動する 現時点では、スタイルガイド用ファイル全てルート直下にある形にな

Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか? 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし!Vue.jsのデータ駆動と

私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークでVue.js、Vuex、Storybook を導入する際にどうすれば良いのか?などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーはAPI のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。

AWSの料金、ややこしいですよね。 サービスの選択肢が多く構成が柔軟なおかけで、さまざまな要件をカバーできるのは嬉しいのだけど、そのぶん料金体系がややこしいので、やるせない気持ちになります。 この気持ちはなんだろう、この気持ちはなんだろう、と自問しているうちに春になってしまったので、AWSの料金を「ざっくり」計算できるサイトを作り始めました。 ざっくりAWS 公式ツールの存在Simple Monthly CalculatorというAWSの料金を計算できる公式のツールがあるのですが、悲しいことに名前ほどシンプルではありません。 正確な料金を算出するために入力項目が多いのは仕方がないとは思うのですが、サイトを開いたときの威圧感がすごいので、もう少しさっぱりできないかという気持ちがありました。 なので、公式ツールの敷居が高いと感じる自分のような人向けに、料金を「ざっくり」計算できるサイトを作り

LearnCode.academy とは? www.youtube.com LearnCode.academy という YouTube チャンネルがあり,Vue.js やReact + Redux などを解説した,無料の学習動画が公開されている.今回受講したのは「Vue Tutorial」で,全9回となっている.合計しても「約1時間程度」なので,スキマ時間を活用して気軽に学ぶこともできる.「Vue.js は気になるけどまだ試したことがない」という人にオススメ!Vue Tutorial #1 -Vue JS Tutorial for Beginners #1 setting up an appVue Tutorial #2 -Vue.js filters and computed dataVue Tutorial #3 -Vue.js directives and event

引用: Components#Composing Components -vue.jsVue.jsで親子コンポーネント間でのデータの受け渡しは、原則としてPass Props/Emit Eventsで行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ただ、公式ドキュメントに載っている図を見るだけではよくわからなかったので、実際にサンプルを作ってみた。 親子コンポーネント間でデータの受け渡しをする方法 <div id="app"> <div class="parent"> <h2>Parent</h2> <!-- 子コンポーネントからのデータを表示 親.applyメソッドで更新される --> <p>{{ messageFromChild }}</p>
![[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f3e2407ba7d8fb2983c260617cf5c8d799d8516b7%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fblogger.googleusercontent.com%252Fimg%252Fb%252FR29vZ2xl%252FAVvXsEjbjVTF6b1dMxmqfReQmbC4ZM_IP8UH8WTF3f0U-3TNqQCNBA5_gqqBWX1X2iD-Fb5cQbYJGwk2k0qRCaPAQTVKqMQFciyBwwVqwiYjwqyiNjtIDlPGABH-DjvHQDqI1RWq1p75YuMCX2XC%252Fw1200-h630-p-k-no-nu%252Fprops-events.png&f=jpg&w=240)
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く