脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって

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

Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 1. 前提条件 前回の実習を終わらせておくこと 2.axiosとmockeyをインストール VueでAjaxするには何を使えばいいの？っていう話が調べていくときな臭い感じ・・・・・ https://jp.vuejs.org/2016/11/03/retiring-vue-resource/ とりあえず、上記の公式コミュニティでおすすめされてる、axiosを使ってみたいと思います。 var mocky = require('mocky'); mocky.createServer([{ // simple GET route without request body to match

Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery

どんな本？ 機能ごとに解説している Vue.js 入門書です。これからはじめる方にも、すでに Vue.js をお使いの方にも、楽しんでいただける内容になっています。 しっかり学習できる！ Vue.js は直感的に使える機能が多く、雰囲気で使ってしまいがちです。どんなメリット＆デメリットがあるかも解説しているため、しっかりと学習できます。 「Vue.js が楽しい！」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の進化によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに？」「フレームワークってなに？」という基礎概念と導入からプロダクトに役立つ情報までを体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの

webpackは「バンドラー」と呼ばれるもの 複数のJSファイルを一つにまとめるもの 依存関係にあるJSファイルを結合して、一つの「build.js」というJSファイルを出力するようなイメージ webpackの動作を見てみよう vue-cliはこのwebpackを使う際の設定なども出力してくれる雛形作成ツール 内部的には、cli-serviceというライブラリを使っている これがwebpackをラップして隠蔽している ついでに.vueファイルをコンパイルするにあたっての標準的なデフォルト設定も渡してくれる .vueファイルを処理してくれる仕組み webpackは、拡張子ごとにプラグインに渡すことで「前処理」みたいなことをしてくれる .vueファイルは、JSでそのまま読み込める形にコンバートする必要がある それをやってくれるのが、vue-loaderというwebpackのプラグイン 処理後の

はじめに Vue.jsも流行ってきて色々ライブラリなども充実してきたと思うので色々まとめようと思います（適当） UI Framework 名称 解説

最終更新日: 2018年3月20日 基本的な例SVG アイコンシステムを作成する方法は多くありますが、 Vue の機能を活かす 1 つの方法は、編集可能なインラインのアイコンをコンポーネントとして作成することです。この方法のいくつかの利点は以下の通りです: 即座に編集することが簡単です アニメーション可能です 標準のプロパティやデフォルトを使用して標準サイズを保つことができ、必要ならば変更することもできます インラインなので、 HTTP リクエストは必要ありません 動的にアクセス可能に作ることができます まず、全てのアイコン用のフォルダを作り、簡単に検索できるように標準化された方法で命名をしましょう。 components/icons/IconBox.vue components/icons/IconCalendar.vue components/icons/IconEnvelope.vu

はじめに 2017年11月15日に開催された「 オトナのLaravel＆Vue.js開発入門@未来会議室」勉強会に参加してきました。 内容としては Laravel + Vue.js で出席管理のWebアプリ作成をステップバイステップで行うものでした。 出席データの取得周りは全てAPI化し、Vue.jsで出席一覧などのビューを出力する作りになります。 今回、主催者の方から内容掲載の許可をいただきましたのでブログにまとめておきます。 オトナのプログラミング勉強会とは？ 「 オトナのプログラミング勉強会」は、熊本で開催しているプログラミングの勉強会です。 基本的に月2回（第1水曜日、第2水曜日）開催となります（2017/12/25現在）。 熊本のコワーキングスペース「 未来会議室」共催のオープンでやっている勉強会ですので、ご参加は完全無料です。 （プログラムを書く人を増やす、繋げることが目的なの

最近、JavaScriptフレームワークであるVue.jsの勉強をしているのですが、jQueryを用いて開発を進めるときと比べるとデバックに時間がかかってしまいます。 何か良い解決策を探してみると「Vue.js Devtools」というchromeブラウザの拡張機能の存在を知りました。 早速導入してみると、 作業がとても捗った ので、導入方法や使い方を簡単にまとめたいと思います。 Vue.js Devtoolsとは Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 です。これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。 Vue.js Devtoolsの導入方法について それではさっそくVue.js devtoolの導入方法について。まずは下記URLにアクセスして拡張機能を追加します。 Vu

JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ

はい。とてつもなくシンプルですね（笑）。 タスクを識別するためのキー「id」。主キーで、オートインクリメント。 タスク名を入れる「title」。 ………以上！！ …あ。バリデーションは面倒なのでナシで（汗）…。 開発環境について 本記事は下記の環境を想定して書いています。 お使いのPCの環境と異なる場合は、適宜調整してくださいませ。 macOS High Sierra ver.10.13.5 Composer – 1.6.5 npm – 5.6.0 Laravel – 5.5 Vue.js – 2.1.10 axios – 0.16.2 laravel-mix – 1.0 Laravel・Vue.js・axiosでTODOリストを構築する手順 変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。 Laravelのインストール・セットアップ Vue.jsとaxios

この数年、たいへんなスピードでフロントエンド開発技術が発展しておりますね。 私はバックエンド開発が続いていたことを言い訳に、直近の小規模な Web ツール開発をjQueryで頑張ってしまったため、次は同じ轍を踏まない ために Vue.js を勉強してみました。 jQuery で頑張ってはいけない理由 jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリ https://ja.wikipedia.org/wiki/JQuery jQueryはフロントエンドの開発に大きく貢献してきた素晴らしいライブラリで、「Web サイトにちょっとしたギミックを足す」用途には使いやすいツールです。 しかしながら、jQuery での開発で、少しでも規模が大きくなってくると途端に苦しくなってきます。 それ

去年にこれ（日付フォーマットなど 日付系処理） 書いたんだけど（思いの外ストックされた）、 これはライブラリ使用承認プロセスがとても難儀な環境の時書いたもので、 もしそんな悲しい環境でないなら先人たちの素晴らしいライブラリを使ったほうがいい。 ライブラリを使ういいところは、コーダの独自実装になりにくいし、他のプロジェクトでも知見が使い回しできるところだと思う。 ということでMoment.jsの使い方について書いておく。 GitHubにおいて、現在(2015/1)日付を処理するライブラリの中で多分一番Starがついてる日付系のライブラリ。人気が有るということは正義っぽい。 Qiitaにもたくさん記事ある。 公式ドキュメントはこちら。 http://momentjs.com/docs/ Moment.jsはJavaScriptのDateオブジェクトをラップするオブジェクトを生成して、そのオブジ

v-for で配列に要素をマッピングする配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです: <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 結果: {{item.message}} v-for ブロック内で

created と mounted どちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスできる DOMにはアクセスできない mounted created + DOMにアクセスできる APIアクセスは created と mounted のどちらで行う？ APIアクセスはほとんどのライブラリで非同期に行われる。そのため、 created と mounted のどちらでAPIアクセスを開始しようが、レスポンスが返ってきた時点でコールバックが実行される。 上記を踏まえて、レスポンス完了後のコールバックの中で、 propsにデータを設定するだけの場合は、 created を使う DOMを構築してる間

上記コマンドを使用すると、現在のディレクトリに「sample」という名前のディレクトリが追加され、その中にLaravelアプリケーションが作成されます。 作成直後のディレクトリ構造は以下のようになります。 $ tree -L 1 . ├── app ├── artisan ├── bootstrap ├── composer.json ├── composer.lock ├── config ├── database ├── package.json ├── phpunit.xml ├── public ├── readme.md ├── resources ├── routes ├── server.php ├── storage ├── tests ├── vendor └── webpack.mix.js 10 directories, 8 files