ファミコン風CSSフレームワーク「NES.css」をリリースしました

ファミコン風（8bitライク）なCSSフレームワーク「NES.css」を、2018年12月19日に正式リリースした。開発した経緯や、タイムライン、OSS活動の感想、「そのロゴ、SNESじゃね？」の反論を書こうと思う。

つくったもの

ウェブサイトを懐かしいファミコンテイストにしてくれるCSSフレームワークを開発した。口で説明するより、実際にデモサイトを見ていただいたほうがわかりやすいだろう。

https://nostalgic-css.github.io/NES.css/

自作フレームワークをつくって学ぶ 仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。

ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！
そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。


フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。

[golang]goaを使ってAPIの設計・開発し、OpenAPIドキュメントを自動生成する

golangでAPIサーバーを開発したい！でも、何からやっていいかわからない。そんなときにはgoaがオススメだ。

goaの特徴

goaの最大の特徴はAPIデザインを書くとモック、クライアントツール、ドキュメントなどを自動生成できるところだ。

開発は以下のような手順になる。

1. DSLでAPIデザインを書く
2. goagen(コードジェネレーター)で自動生成する
• クライアントのスケルトン
• テストコード
• CLIツール
• OpenAPI仕様のドキュメント
3. APIを実装する
4. ビルドして実行する

このように人の手が入るのは「1.DLSでAPIデザインを書く」と「3.APIを実装する」だけだ。それ以外はgoagenというコードジェネレーターが自動的にやってくれる。

golang初心者の私でも、はじめて触ってから3時間くらいで動くAPIサーバーをつくることができた。


以下にgoaを使ってAPIサーバーを開発する手順をまとめていく。

[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン

Vue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。

親子コンポーネント間についてはProps down/Events upでデータのやりとりができる。
子子コンポーネント間（いわゆる兄弟間）はどうするのが良いのかを3つのパターンを紹介する。

• $on/$emitでのイベントによるやり取り
• 親コンポーネントをコントローラにして子コンポーネント間を取り持つ
• Storeパターンの適用

親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。

vue2.5でTypeScript統合が改善されthisが推論されるようになったので試してみた

2017年10月13日に、ついにvue 2.5（コードネーム: Level E）がリリースされた。
今回のリリースの目玉はなんといってもTypeScript統合の改善！ TypeScriptのアップデートにともない、vueの憎きオブジェクトリテラルの中で、なんと「thisが推論される」ようになったのだ！

vue 2.4以前は、vue-class-componentのデコレータを使いクラスベースで実装しなければならなかったのが、vue 2.5からはvue.jsのAPIのままTypeScriptで開発できるようになった。

vue 2.4以前のTypeScriptでの開発については、以下の記事を参照してほしい。

ということで、今回はvue 2.5を使ってTypeScriptで実装する方法をまとめる。
ついでにvue 2.4から2.5へのアップデート方法もまとめる。

実装するにあたりハマった点があるので、参考になればと思う。

[Vue.js][CSS3]会話風吹き出しでLINE風チャットアプリをチャチャッとつくる

フロントエンドエンジニアという肩書きになってからもうすぐ2年が経とうとしているのだが、未だに思い通りにCSSを操ることができない。圧倒的CSS力の欠如だ。

CSS力を高めるために、難易度がそれほど高くなく、かつよく使われそうな会話風吹き出しを作って練習しようと思った。でも、それだけじゃ物足りないので、Vue.jsも使って動的なものを作りたい。

当記事では、会話風吹き出しをつかってLINE風チャットアプリのつくり方を解説する。
※ ただし、サーバサイド（WebSocketとかデータベース周り）については触れない

Vue.js2.x系でInfinite Scroll（無限スクロール）を実装する

Infinite Scroll（無限スクロール）とは、TwitterやfacebookをはじめとしたSNSやモバイルアプリなどでよく使われている、スクロールすることで自動的に次のコンテンツを読み込む機能だ。
従来のページネーションでは、1ページに表示できるコンテンツが限られたり、「Prev/Next」などのボタンをクリックすることで以降のコンテンツを読み込んだり、モバイルユーザには不便な点が多い。そのため、モバイルデバイスではボタンによる更新よりも無限スクロールのほうが好んで使われている。


ということで、当記事ではVue.js2.x系（サンプルコードはv2.2.1で動作確認）でInfinite Scrollの実装方法をまとめる。

Vue.jsのMixin機能でViewModelを共通化する

photo by César Astudillo

Vue.jsを開発しているとおのずとViewModel（computedやmethodsなど）が肥大化してしまう。

Vuexを使ってActionsやMutationsに処理を掃き出すこともできるが、小規模アプリケーションだと逆に面倒だ。そもそもVuexは状態管理ライブラリなので、処理の共通化を目的に導入することもおかしな気もする。

jsファイルを作成、importして使うことも考えられるが、@click="method" みたいに直接メソッド名が指定できないので結局ViewModelが肥大化してしまう。

何か良い方法はないかとドキュメントを読んでいたところ、Mixin（ミックスイン）を使うことで解消できるらしい。

ということで、Mixin機能を使ってViewModelをスリムにしようと思う。

TypeScript + express-openapiでOpenAPI（Swagger）準拠のRESTful APIをつくる

仕事でOpen API（旧Swagger）について調べる機会があった。せっかくなのでNode.jsでOpen APIに準拠したRESTful APIをつくろうと思う。

今回はexpress-openapiというフレームワークを使う。Express.jsを拡張し、スキーマのバリデーションをしてくれたり、コードを管理しやすくしてくれたりする。また、標準でTypeScriptをサポートしているので、チーム開発にも向いている。

使う環境やフレームワークは以下のとおり。

• Node.js: 6.10.2
• TypeScript: 2.2.2
• express: 4.15.2
• express-openapi: 0.35.0

[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法

引用: Components#Composing Components - vue.js

Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則としてPass Props/Emit Eventsで行う。

親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。
ただ、公式ドキュメントに載っている図を見るだけではよくわからなかったので、実際にサンプルを作ってみた。

JS製テキストエディタAceをVue.js2.0のコンポーネントとして使う方法

Vue.jsでWebサービスを作っているとき、JavaScrip製のテキストエディタ「Ace」を使いたくて検索していたら「vue-ace-editor」というパッケージを見つけた。
しかし、いざ実装しようとしたら動かない。コードを読んでみるとVue.js1.x基準で書かれており、2.0ではDeplicatedになっていたりで古いままだった。

ということで、自分でAceのVueコンポーネントをつくった。


使用するバージョンは以下のとおり

• vue.js - 2.0.1
• ace-editor - 1.2.5（ace-builds/src-min-noconflict）

requireやimportで読み込むことができる「brace」というパッケージもあったが、あまり更新されていないようなので本家からコードをダウンロードしてきて使っている。
そのため、index.htmlなどで<script src="./<任意のディレクトリ>/ace.js"></script>と指定する必要があるので注意。

vue-loaderでVueファイルが肥大化する前に分割する方法

vue-loaderを使っていると「App.vue」というファイルに、template（HTML）、style（CSS）、script（JavaScript）を書くことになり、ファイルが肥大化しやすい。また、ファイルタイプを認識してくれないエディタの場合、自動補完機能がうまく動作してくれない。

ということで、Vueファイルを分割する方法はないかと調べていたら、公式ドキュメントの1ページ目にあった。

Vue.js2.0とvue-routerでナビゲーションバーをつくる

「ブログの中の人」のページを新しくするために、Vue.jsとvue-routerを使ってWebサイトを作っていた。ちょっとだけ引っかかったところがあったので、共有も含めてナビゲーションバーの作り方を説明する。

今回は、最小構成でつくる場合と、vue-cli（vue-loader）を使ってつくる場合を紹介する。


使っているバージョンは以下のとおり。

• Vue.js - 2.0.1
• vue-router - 2.0.0

Vue.js2.x系で親から子コンポーネントにデータを渡す方法

Vue.jsの2.0がリリースされたということで、1年半ぶりに勉強している。
そんな中、なぜか親コンポーネントから子コンポーネントにデータを渡すことができずハマりかけたので共有する。

ちなみにvue-cliを使っているので、次のようなディレクトリ構成になっている。

.
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── icon.png
│   ├── components
│   │   ├── Card.vue
│   │   └── TimeLine.vue
│   └── main.js
└── static
    └── data.json

vue-cliの使い方は、次の記事を参考にしてほしい。

文章の構成を考えるための専用エディタ『PlotEditor』

文章の構成を考えるためのエディタ『PlotEditor』をつくってみた。

Plot Editor

いくつかのテキストエリアに分かれており、それを付箋のように入れ替えたり、追加したり、消したりしながら作れるエディタ。
 

つくったもの

Plot Editor

文章の構成を考えるためのエディタ。

文章を考えるとき、いくつかのプロットを書き、組み立てながら仕上げていく。
その工程をサポートするためのエディタが『PlotEditor』

イメージとしては、付箋に書いて、入れ替えたり、追加したり、捨てたりできるエディタ。

【JavaScript】Vue.jsでカレンダーをつくる

ライフログアプリには欠かせないカレンダーをVue.jsを使って実装してみた。
基本的なカレンダーのつくり方は、Vue.jsとかAngularJSとかフレームワークに関係なく使えると思う。
ということで、さっそく実装方法とまとめていく。

【JavaScript】Vue.jsでタグクラウドをつくる

photo by Kamil Porembiński

XHISTORYSの機能追加のため、Vue.jsをつかってタグクラウドを実装した。
今回はVue.jsを使っているが、ほとんどが素のJavaScriptなので、どのような場合でも応用できると思う。

ちなみにタグクラウドとは...

アルファベット順にリスト化され、タグの頻出度はフォント・サイズや色によって表示される。したがって、アルファベットと人気度数の両方でタグを見つけることが可能となる。

引用元：タグクラウド – Wikipedia

たぶん言葉で説明するより、実際に見てもらったほうがわかりやすいだろう。

Vue.jsでページ番号付きのページネーションをつくる

以前、『Vue.jsだけでページナビゲーション（ページネーション）をつくる』という記事を投稿した。
それをちょっと改良してページ番号付きのページネーションをつくってみた。

普通のページネーションをつくる場合は、以下の記事を参考にしてほしい。

---

追記: 2017/10/26 8:00
当記事のVue.jsのバージョンはv0.12と古いため、新しいバージョンで書き直した。
Vue@2.x+系は、以下の記事を参照してほしい。

---

Vue.jsだけでページナビゲーション（ページネーション）をつくる

Webサイトなどでページ番号が横一列に並んで、クリックするとそのページ番号に移動するということがしたかった。
最初は、ページ2なら11～20までのレコードを取得して表示するのかと思っていたが、Vue.jsを使うともっと簡単に実装できることがわかった。

ページナビゲーション（ページネーション）の実装方法をまとめる。

---

追記：2015/07/08
ページ番号付きのページネーションを実装する場合は、下の記事を参考にしてほしい。

---

追記: 2017/10/26 8:00
当記事のVue.jsのバージョンはv0.12と古いため、新しいバージョンで書き直した。
Vue@2.x+系は、以下の記事を参照してほしい。

---

Vue.jsのv-transitionをちょっと実践的に使ってみた

条件に合わせてCSSを変えたくてTransitionについて調べてみた。

でも、公式ガイドにあるサンプルを見ても今ひとつ理解できなかった。
ボタンを押して表示される、消えるだけなので、どんなときに使ってよいかイマイチわからない。

ということで、もうちょっと実践的なサンプルをつくってみた。