FabricJSを使ってみた

FabricJSというのは、SVG要素をCanvas化したりまたその逆ができちゃうCanvas用のJavaScriptライブラリです。お互いに変換できるだけじゃなく、canvasの1つ1つのオブジェクトを認識して簡単なマウス操作で回転したり移動リサイズできるようにしてくれます。

画像系の何かアプリみたいなのを作れたらいいなぁと思ったので使ってみました。

Read more

CircleJSを使ってみて、まとめる

Asyncに対応したReduxパッケージを探してたら、redux-circleというのを見つけて、そもそもcircle.jsってなんだと思ったので調べました。

A functional and reactive JavaScript framework for predictable code

そもそも今はまだReactiveという言葉自体よく分かっていないので、説明できないのでとっとと使ってみる😓

ちなみに、フレームワークを使う時、MVCやらMVVMといったそのフレームワーク推奨のパターンに従って書いたりしますが、CycleJSの場合はMVI(Model-View-Intent)らしいです。

Read more

【snapline】Chromeのキャプチャータイムラインからgif画像を作成

僕は仕事なんかでよくGif画像を取ります。GithubのIssueとかで説明するときダラダラ文章を書くより、Gif画像をドーーーンと置いてしまったほうが分かりやすいんですよね。

他のキャプチャアプリとかKapとか使ってもいいんですが、キチンとサイズを図ってキャプチャしたい場合におすすめです。

ちなみにChromeだけの話なので、入ってない方は入れるなりしてください😇

Read more

Mithrilv1を使ってみたので、まとめる

先日MithrilJSのVersion1がReleaseされました。

Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.

MithrilJSはシングルページを作成するためのフレームワークです。ReactやAngularなんかと似ていますが、たった8kbというファイルサイズと他よりもレンダリング速度が早いことを売りにしています。

Read more

Angular2を使ってみたので、まとめる

JavaScriptのフレームワークと言えば、Angularを思う人も多いのではないでしょうか。最近はちょこちょことAngular2の名前を見かけることも増えてきましたが、僕は未だに無印Angularをちょこっと使ってみた程度です。さて、今日というか30分ほど前、適当にネットサーフィンしていたら「Angularの次のバージョンは4だ!」みたいな記事を見かけて、😲顔になっていました。

Angular4は2017年3月にリリースされて、今後は6ヶ月毎にメジャーバージョンアップされるようです。

ただAngular4は2と互換性があるようなので、勉強自体は2から始めても無駄にならなそうです。というわけで重い腰を上げてAngular2のイロハぐらいは理解しておきたいな思ったので勉強してみることにしました。

Read more

Webpackを使ってみたので、まとめる

最近、フロントエンドの周りではよくWebpackについて耳にすることが多くなりました。

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Webpackは、モジュールバンドラーと呼ばれるもので、コードを複数のファイルに分割して管理することができます。NodeJSの世界では、reuqireimportという構文を使って別ファイルの内容を使ったりということは既にできていますが、ブラウザの世界に話を変えると、そのままでは対応はまだまだなのが現実です。ブラウザの世界でもそういった構文を使ってJavascriptなどを書くことができるようにするツールがWebpackです。

ただWebpackには若干ややこしい設定があり、困惑する部分もあります。自分の理解も兼ねて一度まとめてみようと思います。

Read more

NuxtJSを使ってみたので、まとめる

Nuxt.js is really easy to get started with. A simple project only need the nuxt dependency.

NuxtJSと言っていますが、その中身は即戦力なVueJSの開発環境を作ることができるVueTemplateの1つです。これは以下のパッケージに依存してます。

  • Vue2
  • Vue-Router
  • Vue-Meta
  • Vuex(をすぐに使い始める機能があるだけでTemplateに含まれてはいない)

ぶっちゃけJavaScriptには即戦力なパッケージやらジェネレーターやらテンプレートが多すぎるので、これも触ってみて今後の判断材料にできればいいなと思い使ってみました。

Read more

VueJSを使ってみたので、まとめる

VueJSはMVVM(Model-View-ViewModel)という設計パターンを使っていて、シンプルで学習コストも少ないフレームワークです。 AngularJSのようにVueJSも双方向データバインディングを使っています。 双方向データバインディングとは、Viewに起きたことをすぐにModelと同期したり、Modelに起きたことをViewと同期することを言います。

では、実際に使ってみます。

Read more