Laravelでプロジェクトを作成したらまずやることメモ
Node.jsのインストール Laravel ElixirやESLintを実行するためにはNode.jsが必要なので、インストールしておく。 Gitの設定を調整 キャッシュやLaravel Elixirが生成するファイルの設定 ### Composer ### composer.phar /vendor ### PHP Coding Standards Fixer ### .php_cs.cache ### Node ### /node_modules ## Laravel ## .env ## Laravel Homestead ## /.vagrant Homestead.yaml Homestead.json
たった29行でExcelを再現したJavaScriptコードが凄い | ソフトアンテナ
外部ライブラリを使わずたった29行でExcelのスプレッドシート機能を再現したJavaScriptコードが公開されています(jsfiddle、reddit)。 もちろんお馴染みの計算式「=A1+B2」なども使用可能。計算の循環防止機能や、自動的にlocalStorageに値を保存する機能なども実装されています。 問題のJavaScriptは以下の通り。 for (var i=0; i<6; i++) { var row = document.querySelector("table").insertRow(-1); for (var j=0; j<6; j++) { var letter = String.fromCharCode("A".charCodeAt(0)+j-1); row.insertCell(-1).innerHTML = i&&j ? "" : i||letter; }
Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
JavaScriptの「this」は「4種類」？？ - Qiita
javascriptの「this」は「4種類」？？ この記事ではベースとなる４種類の「this」を紹介します。 実際は４種類ではないのですが、 このベースの４種類を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン ここで重要なのは「呼び出し元」をみることです。 なぜなら「呼び出し元」に「this」は左右されるからです。 メソッド呼び出しパターン これはもう一番直感的にわかりやすいです。 説明はいらないんじゃないかという感じなのですが、 一応ソースを。。 //メソッド呼び出しパターン var myObject = { value: 10, show: function() { console.log(this.value); } } myObj
フロントエンドが嫌い
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
【音声対応】 iPhone Safariで動画をインライン再生する方法続き - Qiita
iPhone Safariで動画をインライン再生する方法への反応の中に「音声は？」との声がちらほらありました。 スマホは常にサイレントモードにしてて殆ど音出さないのですっかり頭から抜けていましたが、実験済みでしたので今回は音声付きでインライン再生する方法の話をば。 音声をAudio APIを使って同時に再生 最初に思いつくのは動画からDemuxして分離した音声をAudio APIを使って同時に再生する方法でしょう。 実際これで足りる場合もあります。が、足りない場合もあります。 VideoとAudioに同時に再生命令を送っても、同じ速さで再生されるかは保証されない 昔々にAviUTLだのTMPGEncだのでエンコしてた人なんかはわかると思いますが、分離された音声と映像は結構かんたんにズレます。 まして今回はVideoをまともに再生していないわけで。 ですからナレーションとBGMのみのCMなん
vue.jsでjQuery UI Sortableを使う - Qiita
ググって見つけたコードが動いてなかったので直してみた。 コンポーネントでDOMの変更をモデルに反映させる。 <div id="ex-sortable"> <ul v-component="v-sortable" v-with="model: list"></ul> </div> <template id="sort-template"> <li v-repeat="model">{{$value}}</li> </template> Vue.component('v-sortable', { template: "#sort-template", ready: function() { var self = this; $(this.$el).sortable({ opacity: 0.6, start: function(e, ui) { ui.item.data('from', ui.
vue.jsでバインディング済みのオブジェクトや配列を書き換えるときの注意点 - Qiita
はじめに vue.jsでバインディング済みオブジェクトや配列を書き換える際に，（ビューに反映させるために）状況によってはvue.jsが用意する拡張メソッドを利用する必要があります。 結論としては「Object.$addなりArray.$setなり使えよ」ということになるのですが，どういうケースでこれらのメソッドを呼ぶ必要があるのかが（わたしのような）初心者にはすぐに理解できなかったので，サンプルを交えつつ紹介したいと思います。 前提コード まず次のようなコードを考えます。 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.11.0/vue.min.js"></script> <div id="container"> <div> 0: {{array[0].name}}, {{array[0].prop}} </div> <div v-r
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
JavaScriptは如何にしてAsync/Awaitを獲得したのか Qiita版 - Qiita
はじめに JavaScriptは如何にしてAsync/Awaitを獲得したのか - がおさんち 技術部屋 ※事前に↑の記事は読まなくても大丈夫です という記事を、以前に個人ブログの方に書いたのですが、私も今年からはQiita始めたので、この記事をリファインして再度書いてみようと思います。 また、この記事では↑の記事では書ききれなかった話もいくつか増やしています。 例えば、不定回数実行されるPromiseの話だとか、非同期処理における例外処理周りの面倒くさい話だとか。 そういうちょっとだけ高度な話も混ぜつづ、前回書いたものよりもクオリティを上げるのを目標にします。それではいきます。 第一章 ～人類はsetTimeoutを採用しました～ 古代のJavaScriptで、以下のような処理をしたい場合、どうしていたでしょうか。 ブラウザ更新直後に『a』を表示し、その2秒後に『b』を表示し、更にその1
Electron の dialog モジュールを使ってみる - 機械人形の実験室
今回は、Electronのdialogモジュールを使って、いろいろとやってみます。 dialogモジュールは、各プラットフォームのネイティヴのダイアログを表示するためのモジュールです。 github.com 前準備 Electronアプリを動かすのに、必要なファイルをざっと作っていきます。 package.son { "name":"dialog-test", "version":"0.1.0", "main":"main.js" } main.js var BrowserWindow = require('browser-window'); require('crash-reporter').start(); var mainWindow = null; app.on('window-all-closed', function(){ if(process.platform != 'dar
分割代入 - JavaScript | MDN
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 const [a, b] = array; const [a, , b] = array; const [a = aDefault, b] = array; const [a, b, ...rest] = array; const [a, , b, ...rest] = array; const [a, b, ...{ pop, push }] = array; const [a, b, ...[c, d]] = array; const { a, b } = obj; const { a: a1, b: b1 } = obj; const { a: a1 = aDefault,
async関数が実装された - JS.next
概要 非同期な処理を同期的に書ける関数タイプが実装された。 基本 「async」キーワードに続けて関数定義を書くと、async関数となる。 async function afn1() { } afn2 = async () => { } obj = { async afn3() { } } async関数を呼び出すとプロミスが返される。 console.log( afn1() ) // <Promise> このプロミスは、async関数が終了するとその返り値で解決され、例外が起こると棄却される。 async function afn4( flag ) { if ( flag ) return 'Yes' else throw 'No' } afn4( true ).then( v => console.log( v ) ) /// "Yes" afn4( false ).catch( v
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
「ライフゲームの世界」という動画が面白すぎて眠れなくなったのでブログ書く。
ネタが無いので更新する予定では無かったのですが、ニコニコ動画でたまたま観た動画が面白すぎて感動したので紹介。 ライフゲームについては動画１で丁寧に説明されているのでそちらを。 一つの動画につきだいたい５分から１０分程度なので、最初からちゃんとみることをお勧めします。 ８個目の動画で、背中がゾクゾクとするような感動をきっと味わえるはずです。 非常に単純なルールによって、とても複雑な仕組み(世界/生態系)が形成されるのがライフゲームの醍醐味、魅力ですがその神髄を味わえます。 いやー、良い動画と巡りあった。 ライフゲームはJavaScriptでも作成することが可能です。 P5.jsを使って書いたサンプルコードを掲載しておきます。 （右画面をクリックすると実行されます）
日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。
先週書いた10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。という記事がまずまずの反響を得たのですが、僕の予想とは異なり、「こんなに多くのツールやフレームワークを必要とする現状はおかしい」といった、状況批判の意見が多く集まりました。 Mediumなど海外メディアでは、もはやこの種のツールを組み合わせたフロントエンド開発が当たり前として受け入れらており、この半年間ほどは「実際にどの組み合わせがベストか」という議論が行われていました。そして、そういった議論もようやく落ち着きを見せ、おおよそ僕が書いたような組み合わせに帰結しつつあります。 そのため、まさか「フロントは変化が激し過ぎる」とか「保守が大変そう」などといったような、1年くらい前に言われていた意見が、いまだに多くを占めるとは、まったく予想していなかったというのが正直な意見です。ひと昔まえであれ
JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
PHP+JavaScriptでクロスオリジンなシングルサインオン認証 - Qiita
[PDF] Electronの倒し方