はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Vue.jsにおけるユニットテストの情報源としてはじめに参照すべきなのは公式ドキュメントです。 単体テスト - Vue.js ここでは、セットアップ方法についてはテストツールのドキュメントに委譲しています。 詳しいセットアップについては、各テストツールのドキュメントを確認して下さい。 モダンなJavaScript開発の常として、複数のツールを組み合わせた環境のセットアップが必要になります。 ゼロから作るアプリケーションなら、vue-cliでvue init webpackすれば、テスト周りのセットアップもやってくるので問題ありません。しかし、既存の（テストのない）JavaScriptアプリケーションにVue.jsを導入しようとしている場合、このアプローチは取れません。 本記事では、Vue.jsのユニットテスト環境をゼロから構築する方法を解説します。 なお、本記事のコードは下記Gi

フォームのふりがな自動入力ライブラリとして、最も有名なのはjquery.autokanaだと思います。このライブラリはjQueryプラグインです。2018年現在では、jQueryを使わない開発環境は普通にありますし、ライブラリはscriptタグで読み込むのではなくwebpack等でバンドルするのが一般的になっています。 そこで、jQueryに依存せず、ES Modulesとして使用できるライブラリを作成しました。 vanilla-autokana https://www.npmjs.com/package/vanilla-autokana デモ ↓のURLで、vanilla-autokanaを使ったフォームを試すことができます。 http://5ac8f708be40f12ac4c70db9.clever-wiles-e716bc.netlify.com/ インストール npm insta

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

WordPress Advent Calendar 2017 23日目に空きが生じたようなので、埋め草を投下します。 本記事では、Gutenbergプラグインを開発するためにはどのような知識が必要か、概観することを目標にします。それぞれの技術については、解説記事がいくらでもあるので深掘りはしません。 本記事のターゲットは以下のような読者です。 WordPressプラグインを作ったことがある（または、作り方を知っている） JavaScriptの基本的な知識がある 変数定義にvarをつけないといけない理由がわかる 現行のブラウザ(IE11含む)で動作するのはES5であることを知っている ES2015（またはESNext）という仕様があることを知っている React.js、Babel、webpackといったキーワードを聞いたことがある GutenbergとモダンJavaScript WordPr

本記事は、WordPress Advent Calendar 2017の7日目です。 Gutenbergとは Gutenbergとは、WordPressのエディタ画面の新UXのことです。UIではなくUXというところがミソで、記事を編集する際の体験はGutenbergで大きく変わることが期待されます。一方で、今まで蓄積されてきたWordPressのエディタのカスタマイズ方法が使えなくなるという、大きな変化も伴っています。 本記事では、はじめにGutenbergの開発環境をローカルに構築し、手元で動かしてみます。次に、GutenbergのキモであるBlock（ブロック）について解説します。 開発環境セットアップ Gutenbergは、WordPressプラグインとして公開されています。手元に適当なWordPress環境があれば、それにこのプラグインを入れればお手軽にGutenbergを試すこと

本記事は WordPress Advent Calendar の15日目です。12月の初め頃はいくつか空きがありましたが、無事全部埋まって良かったです！ 本記事では、Gutenbergで実用的なCustom Block Type（独自のブロック型）を作るための第一歩として、Gutenbergにおける3つのレンダリングについて紹介します。 なお、本記事のサンプルコードは下記リポジトリで公開しています。 https://github.com/ryo-utsunomiya/my-gutenberg-ext 静的ブロックと動的ブロック Gutenbergのブロックには、二つの種類があります。 一つは「静的ブロック(Static Block)」で、これはエディタで保存した際にコンテンツが決まります。通常の記事データはこちらです。 もう一つが「動的ブロック(Dynamic Block)」です。これはサ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Vue.jsのドキュメントには以下のような記載があります。 プレーンな JavaScript オブジェクトを data オプションとして Vue インスタンスに渡すとき、Vue.js はその全てのプロパティを渡り歩いて、それらを Object.defineProperty を使用して、getter/setter に変換します。これは ES5 だけのシム (shim) ができない機能で、Vue.js が IE8 以下をサポートしない理由です。 Object.defineProperty メソッドを通してVue.jsのリアクティビティは実現されている、という内容です（ここでの「リアクティビティ」とは、モデルのデータ変更がリアルタイムでビューに伝播する仕組みのことをいいます）。 では、Vue.jsは Object.defineProperty をどのように使ってリアクティビティを実現しているので

操車場(Shunting Yard)アルゴリズムとは 中置記法(infix notation)の数式を、逆ポーランド記法(Reverse Polish notation、後置記法)に変換するアルゴリズム。 1 + 2を1 2 +に置き換える。 参考: https://ja.wikipedia.org/wiki/%E6%93%8D%E8%BB%8A%E5%A0%B4%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0 仕様 サポートするもの 一桁の自然数の入力 四則演算(+-*/) 括弧による優先順位変更 サポートしないもの 2桁以上の自然数の入力 演算子の結合規則 括弧の非対応に対するエラー処理 実装 入出力がはっきりしているので、テスト駆動開発で進めるとやりやすいです。 まずは以下のようなテストケースを用意します。 <?php na

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Phalcon公式チュートリアル(1)を和訳しつつ解説（v1.2.6対応） 「最速 PHPフレームワーク」Phalconのインストールからサンプルアプリを動かすまでをやります。基本的には公式チュートリアルの流れをなぞります。 が、公式チュートリアルは最新バージョンに追従していない部分があるので、ところどころツッコミを入れながらやっていきます。 本記事では、公式チュートリアルでは使用していないPhalcon Devtoolsを使用しています。Devtools 1.2.6が生成するコードは、公式チュートリアルに掲載されているものと比較すると、機能はほぼ同等ですが、記述や構成は異なります。 Vagrant Boxのセットアップ インストールにはVagrantを使います。手順を再現しやすいのと、壊しても簡単に作り直せるのが理由です。 VagrantとVirtualBoxのインストールは終わっている