はてなブックマーク

小ネタです。 トランジション Vue.js でフェードイン / フェードアウトを実装するには transition (トランジション) を利用します。 トランジションとは画面遷移など「 場面転換時の演出効果 」を指し、ビデオ編集などでも使われる単語ですね。 Vue.js では簡単にトランジションを利用することができますよ。

再利用可能なコードとは 格付けでいうところの A、B ランクのコードが「 再利用可能なコード 」です。 ランク C は、都度コードの中身を調べる確認作業が発生し、生産性向上には貢献しません。 そのため、ランク C は「 生産性を落とすゴミ 」と言われます。 全てのコードがランク A で構成されれば良いのですが、ランク C のコードがほとんど、というのが実際のところです。 タイトなスケジュールでは、どうしてもその場しのぎの「ゴミコード」を大量生産してしまいがちです。 しかし、その一瞬が苦しくても、後で楽をするために、ちょっと頭をひねらせてコードを改善する工夫が必要になってきます。 その積み上げは、数日後、数か月後に生きてきて、あなたに「定時帰り」という恩恵をもたらしてくれるでしょう。 それに、苦労して実装したコードがすべてゴミだなんて、、、悲しすぎるじゃないですか。 C ランクのコードと改善

Vue.js の勉強が着々と進み Mixin (ミックスイン) を覚えましたため、使い方をまとめます。 mixin とは mixin とは Vue.js が提供する「再利用のための仕組」みです。 公式から引用します。 ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。 ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。 コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。 Vue.js > ガイド > ミックスイン https://jp.vuejs.org/v2/guide/mixins.html mixin はとても簡単に使うことができます。 サンプルをご覧ください。 サンプル ゴール クライアントサイドレンダリングでよくある

Bootstrapを利用してフォームを実装しましたため、v-modelやバリデートなどについてまとめます。 イケてるフォーム イケてるフォーム 初期状態 初期状態です。 入力内容に不備がある入力欄はエラーとして赤字、赤枠で表示します。 また全ての不備が取り切れるまで Submit ボタンは disabled とします。 イケてるフォーム エラー状態が即時に反映 何か入力し、エラーがなくなるとリアルタイムでフォームに反映されます。 イケてるフォーム Submit可能状態 全てのエラーがなくなると、Submit ボタンがアクティブになり、ボタンを押下することができます。 ごめんなさい、普通のフォームでした。 環境 Node.js 7.7.x npm 4.4.x Vue.js 2.2.x 素のHTML イケてるフォーム Vue.js 化前の状態 上の状態、Vue.js の処理を入れる前の状態の

Vue.js を触って早数週間経過します。 最も理解に時間がかかった コンポーネントの連携 についてまとめてみます。 理解が怪しいところはマサカリをお願いいたします。 ゴール 子コンポーネントから親コンポーネントの関数を呼び出す 環境 Node.js 7.7.1 npm 4.4.2 Vue.js 2.2.4 propsでデータを渡す props とは「 親コンポーネントからデータを受け取るためにエクスポートされた属性のリスト/ハッシュ 」です。 Vue.js > API > props https://jp.vuejs.org/v2/api/#props 最もシンプルな例を見てみましょう。 呼び出し元

Vue.js が面白くなってきました。 過去に jQuery で実装したフォームを Vue.js で書き直しました。 jQuery 実装が Vue.js によってどう改善したか、比較いたします。 完成イメージ フォーム実装イメージ ラジオボタンを操作すると、下の補助入力欄が切り替わるフォームです。 環境 PHP 7 jQuery 3系 Node.js 7系 Vue.js 2.2.x Bootstrap フォームは Bootstrap で実装しておりますため、次に掲載いたします HTML は長めなことをご容赦ください。 jQuery実装 1<div class="form-group"> 2 <label class="col-lg-2 control-label">Input select</label> 3 <div class="col-lg-4"> 4 <div class="rad

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

今回はLaravelでprivateなメソッドのテスト方法を調べてみたことのメモです。 環境 PHP 7 PHPUnit 5.6 Laravel 5.3 PHPでprivateなメソッドのテスト方法 PHPでprivateなテストを行う方法は以下の2つがあります。 Reflection Closure この記事ではClosureを押します。 Reflection Reflection(リフレクション)とは、簡単に言うと[自分自身の構造を読み取って操作する]ものと言えば良いでしょうか。 コードはこんな感じです。 1$who = new Who(); 2 3$method = new ReflectionMethod($who, 'privateMethod'); 4$method->setAccessible(true); 5$method->invoke(); 「やったわー、こんなのJav

Laravel と S3 を連携させて遊んでみました。 連携方法は 2 通りありますので、まとめてみます。 環境は次の通りです。 PHP 7 Laravel 5.3 CentOS 6.6 (Vagrant) Filesystem 1 つ目は ファイルシステム を利用する方法で。 これは公式ドキュメントで紹介されている方法ですね。

Windows 10 へバージョンアップしたよ 2015年、Windows 10 がリリースされてすぐにアップグレードしました。 起動も早く、スタートメニューの柔軟性など、使い勝手も向上して快適ですね。 開発も全く問題ないと思っていたのですが、TortoiseSVN (以下、SVN) のマークが表示されていません。 マークとは、追加、変更、更新などを表すアイコン(マーク)で、アイコンオーバーレイという名称です。 プログラムは Git を使っていますが、ドキュメント類は SVN を利用することが多く、今まで出ていたアイコンセットが表示されないととっても違和感があります。 環境は次のとおりです。 Windows 10 TortoiseSVN 原因と対処方法 Windows のアイコンオーバーレイは上限がかなり少なく、15 しかありません。 今回はどうやら Windows 10 のアップグレード

PHPには非同期処理という概念がありません。 集計のような時間がかかる処理を実行するとブロックされ、ブラウザが反応しなくなってしまいます。 今回、Laravelを使ったプロジェクトで、 応答待ちを避けるためのバックグラウンド化 を実装するため試行錯誤しました。 Laravelには標準でキューシステムが用意されており、ドライバとしてBeanstalkd、Amazon SQS、Redisなどがサポートされていますが、「キューはちょっと大げさ」というケースの参考になれば幸いです。 検証した環境は次の通り Linux : Ubuntu, PHP5.5, Laravel 5.0.0 (Cloud9) Windows 10 : PHP5.4, Laravel 5.0.0 やってみたこと ケース1：exec() プロジェクト実装時はベターな方法が分からなく、最終手段のexec()に手を出してしまいました