やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度

アンチパターンなので、見出しの内容はすべてバッドノウハウです。 前に書いたやつ PHPのモダンな開発環境を紹介する - Qiita PHP - Functoolsを作った - Qiita PHPのlist()はタプル展開のための機能 - Qiita 関係ないけどこれも: シェル、ターミナル、コンソール、コマンドライン 追記: 本文中でとりあげた「怖い話」について、ちゃんと説明しました PHP - namespaceとBOMに何の関係があるのさ - Qiita ファイルの最後に?>を書く PHPコードは<?phpで始まり?>で締める。それがPHPの常識(ｷﾘｯ ……そんなことはもう綺麗さっぱり忘れよう。PHPはテンプレートエンジンではあるが、Webアプリケーションを書く上では、もはやテンプレートエンジンとしての機能は求められなくなりつつある。 不要な?>を書いてはいけない理由は明確で、<?p

流れ SSH認証の公開鍵と秘密鍵を作成 Mac側（クライアント側）へのSSHキーの設定 GitHubへの公開鍵の登録 ローカルリポジトリの設定を変更する (おまけ)SourceTreeユーザーの方 1. SSH認証の公開鍵と秘密鍵を作成

追記 RailsでJS辛い問題に関しての結論：http://qiita.com/kaiinui@github/items/dad6180f1910c6a4bfd5 -- 近年、(1) Web/App両対応が増えてきたこと、(2) WebでもJSを多用するようになったこと、の二つがあり、以下の点でRailsが微妙になっている。 ViewのJavascriptがRailsから独立している API層のサポートが微妙 最初に書いておきますが、特に決定的な解決策もなく、辛いから今後解消されてほしいよね、な話です。 ViewのJavascriptがRailsから独立している Railsはとても堅牢。 モデル、コントローラ、ルーティングと、変にいじらない限りはほとんどテストが要らない。 必要なのは、モデルに新たにpublicメソッドを付けたときくらいだろう。 実際、バックエンドはそうそうバグが出ない。

TL;DR Chromeで console.profile() と console.profileEnd() を使うと超簡単にJSの実行パフォーマンスを解析できる、という事実を今日知ったのでシェアさせていただきます。 やりたいこと JSの任意の関数の実行プロファイル (コールスタックごとの所要時間) を見たい。 やりかた Google Chromeのデバッグコンソールで以下のようなスクリプトを入力して実行 (見やすくするため改行入れてますが実際には一行で)

はじめに ECMAScript2015(第6版、通称ES6)が承認され、Babelも登場し、世はまさにES2015時代。なのだけど、JavaScript初級者としてはES5自体をちゃんと把握していなかったりするので、今さらながら調べてみることにした。 間違っている所があれば、ご指摘いただけると大変助かります。 ECMAScript5で追加されたもの ECMAScript5 compatibility tableにて、ES5で追加された機能がどのブラウザに対応しているかが分かる。また、es5-shimというライブラリが、古いブラウザでES5の一部の機能が実装可能になる。 基本的には、IE9以上／iOS7以上、それ以外はモダンなブラウザであれば大抵対応している。 use strict スクリプトの先頭、もしくは関数内の先頭に記載することでstrict modeで実行される。自分が書いているもの

自分が良く使う npm パッケージを、雑に紹介し感想を述べる記事です 非 Noder さん用にもなるように、超有名ライブラリも載せました 個人的感想の羅列で、また 1年以上使ってない/調べてないものも含みます。申し訳ないのですが、参考程度でよろしくです Web アプリケーション作成 express 一番有名でたぶん利用者も多い、Node.js の Webアプリケーションフレームワーク function (req, res, next) { return next(); } のような middleware という概念のフィルターを重ねて処理し、どこかで res.send(content) 返したら終了という感じ シンプル、覚えることが少なく直ぐ動かせる。JSON保存する位ならほんとに直ぐ しかし、機能らしい機能が URL の Routing くらいしかない。特にバリデーション周りで決まったノ

論理演算子「&&」「||」について JavaScriptの基本である論理演算子の && || について、 根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。 論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。 それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その１ AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l

tvOSの発表 日本時間きょう(2015/09/10)未明に発表されたtvOS。iPhone6sなどの発表もありましたが、Apple TVがアップデートされ、サードパーティー製アプリが開発できるようになったことが個人的には一番興味がわいたので調べてみました。 新しいApple TV、だいぶ肉厚ですね。高さ倍くらいあるのか...？ 新しいほうが10mm背が高いみたいです。 なお、ここに記載している内容はデベロッパーアカウントを保持していなくても閲覧可能なページ、ドキュメントを参考に書かれています。 開発に必要なソフト SDKなど こちらにあります。ひとまずここからいろいろな情報がゲットできると思うので、興味がある場合はブックマークしましょう。 https://developer.apple.com/tvos/ SDK こちらのページでSDKやらtvOSのベータやらをダウンロード可能です。 h

概要 この数年　「QA(Quality Assurance)エンジニア職」 という職種が重要視されております。 所謂、品質保証です。 振り返ると2000年代は、求人自体も少なかった職種ですが、昨今はIndeedやスタンバイなどの求人情報専門の検索エンジンで　「QAエンジニア」 「テストエンジニア」 「品質管理エンジニア」 で検索すると大企業からスタートアップまで多くの掲載求人がヒット・掲載されています。 最近は、企画段階から　「QAエンジニア」 が参加し、プロダクトUI・UXの意見交換や、仕様書レビュー、テストフロー、プロダクトリリース判定基準、どのテストレベルを対象とするか策定する。 そのため、QA職種だからこの範囲（領域）だけという決まりはありません。 また、QA職種詳細については　「品質担当でも名称がいろいろ」 に記載しております。 「QAエンジニア」 って、そもそもどのような役割な

今回はComponentのlifecycleについて書きたいと思います。 React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 よく使うのはcomponentDidMountやcomponentWillUnmount辺りです。 イベントの登録をcomponentDidMountでやってcomponentWillUnmountで解除するというのがよく使うパターンだと思います。 componentWillMount() ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 なので初期化処理を行うのに適しています。 この中でsetStateするとrender時にまとめて行われます。 server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。 c

今回はReact.jsでのFormの扱いについて書きたいと思います。 例えばReact.jsでは↓のようなことをすると変更出来ないテキストフィールドになってしまいます。どうしてなのかという話ですね。 // ダメ <input type="text" value="initial value" /> // ダメ <input type="text" value={this.state.textValue} /> var Text = React.createClass({ getInitialState() { return { textValue: "initial value" }; }, changeText(e) { this.setState({textValue: e.target.value}); }, render() { return ( <div> <p>{this.st

【2021/10/15 追記】 この記事は更新が停止されています。現在では筆者の思想が変化している面もありますので，過去の記事として参考程度にご覧ください。PDO に関しては大きく変わっていない部分が多いとは思いますが， PHP 8.x 以降での動作保証はありません。 あらかじめ読んでおきたい記事 Qiita - 【PHP超入門】クラス～例外処理～PDOの基礎 by @7968 初心者がやりがちなミス 以下のどれかに1つでも当てはまるコードは見直す必要があります．付録にリンクを貼っておきましたので，「該当するかも？」という人はクリックして飛んで読んでください．太字にしてあるものは脆弱性に直結する危険度の高いものです． mysql_query などの非推奨関数を利用している SET NAMES あるいは SET CHARACTER SET などで文字コードを指定している そもそもデータベース

Linux系のサーバー管理ツールといえば Webmin や、有料なら cPanel なんかが有名。 だけど他にフリーなのないかなと探してみると Ajenti というのが最近人気があるっぽい感じだった。 Ajenti 公式サイト http://ajenti.org/ インストール インストールは簡単で、例えば CentOS6 なら以下のコマンドで一発。 （すべて yum で入れてくれる模様） curl https://raw.githubusercontent.com/ajenti/ajenti/1.x/scripts/install-rhel.sh | sh Ubuntuとか他のものは以下のページにインストール方法がある。 http://support.ajenti.org/list/27624-kb/?category=9290 Pythonで動いてるらしく、上記インストールコマンドでそ

Fluxのドキュメントページにある、Actions and Dispacherというページを日本語訳してみた。 ※ わーと、っと訳してしまったので、随時なおしていく。誤訳等あればご指摘下さい。 Dispatcherとは？ DispatcherはFluxアプリケーションのデータフローの中央ハブとなるSingletonである。それは、本質的にコールバックのレジストリであり、登録されたコールバックを呼び起こすことができる。各StoreはDispacherにコールバックを登録することができる。新しいデータがDispatcherに入ると、Disptacherは登録済みのコールバックを用いてStoreにデータを伝搬する。dispatch()メソッドを通じてコールバックを呼び出す。dispatchメソッドはデータペイロードオブジェクト引数にとる。このペイロードオブジェクトは一般的にアクションと同義である

CSS3プロパティを使った、便利な実装テクニックを随時追加していきます。 1. 並んでいる要素の最後だけスタイルを適用しない ★対応ブラウザ → 確認 リストなどでマージンを調整する際、通常は:last-childで最後の要素のスタイルを上書きすると思いますが、:not()を使うことでもっとスマートに記述できます。

ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！ ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める！（この記事） また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ジェネレータ、ジェ

ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は イテレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！（この記事） Qiita: JavaScript の ジェネレータ を極める！ また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ことばの定義 1.1. イテレータ (Iterator

10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use