Bootstrap3でスクロール可能なサイドバーがある2カラムレイアウトを作成する

Twitter Bootstrap3では、サイドバー（メニューバー）のクラスが用意されておらず、まだコレといった実装方法があるわけではない。
 プラグインを追加すれば、それっぽいハンバーガーメニューとともにサイドバーを表示することもできるのだが、なるべく素のBootstrapでつくりたかった。

というわけで、2カラム（サイドバー/メイン）のWebページをBootstrapを使ってつくった。

[図解]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ページ目にあった。

【JavaScript】変数を使って関数名を動的に指定する方法

let MY_FUNC = 'myFunction' という変数や定数を使って、関数名を指定したい場合がある。
たとえば、FluxライクなVuexライブラリで、mutation-typesにアクションの名前を定義し、actionやstoreのmoduleなどで同じ関数名を使いまわすときなどだ。

ということで、このMY_FUNCという変数を関数名として定義する方法をまとめる。

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の使い方は、次の記事を参考にしてほしい。