JavaScriptのフレームワークである「Vue.js」、皆さんは使ってますでしょうか。 学習コストの低さ、小規模案件での導入のしやすさ、大規模案件にも対応できる拡張性の高さから、最近はVue.jsばかりいじっています。 今回は、そんなVue.js上で、すぐに高機能なUIパーツが使えるようになるコンポーネント詰め合わせライブラリ「Element」が予想以上にスゴかったので、紹介したいと思います。簡単に高機能なUIが実装できるので、Vue.jsを使ったことがない人も、一読していただき、「Vue.js使ってみよう！」となってくれると、嬉しい限りです。 Vue.jsとは知らない人のために、Vue.jsの紹介をしておきます。 Vue.jsはJavaScriptフレームワークの一つです。 他の一枚板のフレームワークとは異なり、初めから少しづつ適用していけるように設計されています。他のライブラリや既

現在、数多くのPHPフレームワークが登場しています。 ですが、私の周りでは、新規案件においては大体「CakePHP 3」か「Laravel 5」の二択になっています。この二つのフレームワークは、日本において、今現在PHPフレームワークの二強といってもいい存在ですね。 私はどちらのフレームワークもある程度使った経験があります。 そしてその結果、私の中では「CakePHP 3」よりも断然「Laravel 5」の方が優れているという結論が出ましたので、その理由を解説していきます。もちろん、好みの問題もありますので、フレームワーク選定の参考にしようとされる場合は、案件やチームのスキルを鑑みて総合的に評価してください。 自由なディレクトリ構成これはチームによってはメリットにもデメリットにもなりうる要素ですが、基本的にLaravelは、PHPのソースコードを配置する際のディレクトリ構成（名前空間の構成

はっきり言って1ミリも価値ないです。 知識労働者であるということITエンジニア（システムエンジニア・プログラマー）は、知識労働者です。知識労働者とは簡単にいうと、知識を持ってそれを使うことを職業とする言わば「専門家」のことです。 知識を生業とし、知識をもって何事かを成し遂げることを欲する、エンジニアはそういう職業の一つです。 別に休日まで返上して勉強をしろということではありません。仕事中に色々と得られることもあります。 仕事でも休日でも何でもいいから、自分の知識が間違っていたり、自分の知識よりもより良い知識があったりすることに気づくことが大事であり、周りの優秀な人間の知識やインターネット上のより深い専門的な知識を自分のものにできるかどうかが、重要になってきます。 Webデザイナー上がりのエセプログラマー悪い例を挙げます。 Webが流行り出して、業務で初めてHTMLを触りだしたWebデザイナ

JavaScriptにおける便利な関数の詰め合わせであるライブラリ「Lodash」。JavaScript（Node.js）での開発をしている人の多くは利用したことがあるでしょう。 今回はそのLodashを使う上で、ライブラリを導入後のファイルサイズを削減する方法を紹介します。 なお、今回当記事で紹介するにあたり、検証にモジュールバンドラーツール「webpack」を利用します。ですが、webpackを利用しない場合においても同様の方法でファイルサイズは削減できます。 ユースケースLodashに限らず、比較的高機能なJavaScriptライブラリは、場合によっては性能面や容量（ファイルサイズ）の面で、1機能特化のミニマルなものに比べ劣ることがあります。 例えば、そのライブラリの全ての機能のうち1つの機能しか使わなかったとしても、全ての機能分のファイルサイズを消費し、全ての機能を読み込んでしまい

現在JavaScriptは、ブラウザで使用されるのはもちろんのこと、サーバーサイドでWebサーバーとして動作したり、はたまた開発者のPCで各種開発ツールとして動作したりしており、様々な場面で利用されています。 そこで今回は、そのどちらでも使える、Node.jsとブラウザJavaScriptの両方に対応した画像処理ライブラリ「Jimp」を紹介したいと思います。 「Jimp」とはJimpは、外部またはネイティブの依存関係が全くない、完全にJavaScriptで記述されたNode.js用の画像処理ライブラリです。ライセンスはMITライセンスで、オープンソースで開発されています。 以下のnpmコマンドでインストールできます。 var Jimp = require("jimp"); // "lenna.png"を開く Jimp.read("lenna.png", function (err, len

最近、デザインされたQRコードを見る機会が多くなりました。QRコードの真ん中にアイコン等が配置してあるものを見たことがある人も多いと思います。LINE等でQRコードを生成すると、真ん中にアイコンが表示されますね。 今回は、高度にQRコードに画像を埋め込んで生成できるツールを発見したので、紹介します。 なお、こちらで検証はしていませんが、アイコンを中心に配置するだけのQRコードに比べ、画像や読み取り端末によっては読み取り成功率が低下する可能性がありますので、実際に使う際には十分検証の上、ご利用ください。 「CuteR」とはCuteRは、Python製の画像を埋め込んだQRコードを生成できるコマンドラインツールです。 以下のような画像から、 モノクロなら以下のようなQRコードを生成でき、 カラーなら以下のようなQRコードを生成できます。 使用するにはPythonが動作する必要があります。また、

2017年1月下旬頃から、当ブログをシングルページアプリケーション（SPA）としてリニューアル・公開開始しました。 公開してからある程度時間が経ち、SPAにした成果が見え始めてきているので、ここで一つ、実際のところSPAにしてどのように変化したかを振り返ってみます。 シングルページアプリケーション（SPA）とはSPA（Single-page application）は、単一ページアプリケーションとも呼ばれ、最初にページを読み込んで以降は画面遷移を全てAjax（非同期通信）で再現し、JavaScriptで従来のページ移動をエミュレートしているWebサイト・Webアプリケーションのことです。 通常のWebページでは、リンクをクリックして画面遷移をすると、ページを丸ごと読み直します。しかし、SPAでは画面遷移ごとにページを読み込み直すことをせず、Ajaxでデータをサーバーから取得し、ブラウザ上で

皆さんは普段、PCを使う上で、フォントは気にしますでしょうか。 最近は、Webフォントの登場によって、Webサイトごとに独自のフォントが表示されているのを見る機会も多くなりました。 しかしながら、Webや画像制作等の経験がない方は、あまりフォントをインストールする機会もないかもしれません。 そこで今回は、プログラマー向けに、普段使う開発環境等に導入したら良さそうな、オープンソースのフォント「Fira Code」を紹介したいと思います。 Fira Codeは、プログラミング用・コーディング用フォントで、リガチャー（合字）により、関係演算子（比較演算子）や論理演算子、アローファンクションなどを見やすくしてくれる等幅フォントです。様々なプログラミング言語に対応できるように設計・工夫されています。 具体的には以下のように変換してくれますが、リガチャーになっても表示幅は同じで、文字自体が変化している

Angularで作成したフロントエンドのWebアプリを、GitHub上で管理して、masterブランチにコミットされた変更を自動でAmazon S3にデプロイ（適用）させる方法を解説します。本記事では、S3をCloudFront経由でインターネット上へ公開し、名前解決をRoute 53で行… Vue CLIでは、デフォルトでパッケージマネージャーにYarnを使用します。ですが、開発環境や本番環境でのミドルウェアの制限等により、Yarnではなくnpmで管理したいプロジェクトもあるかと思います。そんなとき、Vue CLIでどのようにプロジェクトを作成すれば… Create React Appでは、デフォルトでパッケージマネージャーにYarnを使用します。ですが、開発環境や本番環境でのミドルウェアの制限等により、Yarnではなくnpmで管理したいプロジェクトもあるかと思います。そんなとき、Cre

SSHの鍵管理とその配布、皆さんはどのようにやってますでしょうか。 これまでの経験上、SSHキーの運用方法は、各企業やユーザーの風土・文化によって異なっていました。1つのキーを全てのサーバー・ユーザーで使い回す企業もあれば、各サーバーごとにキーを用意して使い回すとこもあり、中にはずさんな管理をしているところも少なくないと思います。 ずさんな管理をしてしまう原因、それは「ちゃんとした管理・運用は面倒くさい」というイメージからだと思います。 しかし、きちんと手順さえ構築してしまえば、そんなに難しいことではないので、ここで一つ、私の普段やっている手法をまとめてみたいと思います。 最も一般的でかつ安全な運用方法通常、SSHでは、接続したいサーバー側に公開鍵、接続するクライアント（自分のPC）に秘密鍵を配置して接続します。 秘密鍵と公開鍵のペアを作成後、公開鍵を接続したいサーバーの~/.ssh/au

今回の標的は、生産性の低いクソITエンジニアです。 これから述べることは、あくまで私の考える一説なので、エンジニアの皆さんは気を悪くしないようにお願いします。気を悪くしちゃった場合は、Twitterでボコボコに叩いてください。タイトルが若干誇大表現なのは、認めます。 優秀なエンジニアとそうでないエンジニアの違い一言に「有能」「無能」といっても、様々な要因がありますし、人それぞれの価値観によっても変わってくるかと思います。 ただ、一般的に共通して言えることとして、「有能」でいえば、以下のような要因があるかと思います。 コードを書くのが早い（頭の回転が早い）設計が綺麗（拡張性/将来を見通せる）バグが少ない（ミスが少ない/リスク回避が的確）技術の知識が広い/深い（視野が広い）的確にチーム内の情報共有ができる（コミュニケーション能力が高い）など。「無能」は、この逆ですね。 今回は、上記の5つを「有