Twitter Facebook github

Archive for 3月, 2016

2016-03-30
No Comments

WebPackでnodeランタイム向けにビルドする

By

前回まででTypeScriptを使ってフロントエンドJavaScriptをビルドする話を書きましたが、TypeScrptに慣れてしまうとES2015で書く気にはなれません。

当然のようにサーバーサイドもTypeScriptでコードを書き始めたのですが、ビルドにフロントエンドでも使っていたWebPackを採用して少しハマったので共有します。

やりたかったこと

  • TypeScriptでsocket.ioを使ったソケットサーバーを書きたい
  • 変更検知でビルド自動化したい
  • glup/grunt抜きでWebPackでやりたい

環境

  • Mac OS X El Capitan
  • node.js v5.7.1 / npm v3.6.0
  • TypeScript v1.9.0-dev.20160312
  • typings v0.7.9
  • webpack v1.12.14

上3つのモジュールは npm でグローバルインストール済み。

  • ts-loader@0.8.1

WebPackでTypeScriptをビルドするためのローダーをローカルインストールしています。

忙しい人のために

先に結論を書くと、nodeランタイム用にWebPackを使ってビルドするとき、単に node_modules をexcludeするだけではダメで、代わりに webpack-node-externals を使いましょう、という話。

Read More »

2016-03-20
No Comments

おとといやったこと

Reactでログイン画面のマークアップ。ベースとなる部分が曖昧だと死を見るので、設計に時間をかけた。
成果は画面比率を固定するコンポーネント。

昨日やったこと

昨日の記事にある通り、APIサーバー用の開発環境を構築。

今日やったこと

APIドキュメントとモックアップに apiary.io を採用

マークアップに独自のシンタックスを覚える必要があった。

マークアップのドキュメントとサンプルはgithubにあり。
apiaryio/api-blueprint

後述のSuperAgentでリクエストした際にParse Errorになって、何かと思えば Response のキーの後ろにカンマ , が入っていた。TSlintではカンマを強制するルールを有効にしていて、癖で入れてしまっていた。apiaryのコンソールやcurlからはエラーにならなくてハマった。

SuperAgentを使ってApiaryのAPIを叩いた

Apiaryとても便利。

ログインAPIの応答に基づいてシーンの変更を行った

コンポーネントの構造として App の下に各シーンを並列に設置しているんだけど、
シーンの切り替えはAppが責任を持つべきなので、Appに現在のシーンをステートとして持たせた。

Reactの子コンポーネントから親コンポーネントを呼び出して、シーンを切り替えする必要があるが、その実装に迷った。

  • Reactドキュメント通り、親から子へpropsで渡して呼ぶ
  • AppにstaticなAppインスタンスの変数を作り、そのインスタンス経由で呼ぶ
  • JSのEventを使ってPubsubぽく実装する

どれもpros/consがあるが、2番目の方法を選択。
3番目の方法と同じく、どこからでもコール可能であることと、3番よりもコードのトレーサビリティに優れているため。

どこから呼ぶ関数か、によって、1番と2番の方法を切り替えると良いのではないかと推測・・・。この辺は実装を続けていく中で見えてくると思う。

2016-03-20
No Comments

nginx + php7 + Lumen な開発環境をVagrantでつくる

By

趣味のプロジェクトで、APIサーバーとしてLaravel製の軽量PHPフレームワーク、Lumenを採用することにしました。

ここではVagrantを使ったローカルの開発環境を作るための手順を残します。

前提

  • ホストOS: Mac OS X El Capitan
  • ゲストOS: CentOS 7.1 (bento/centos-7.1)
  • ホストOSにVagrant 1.7.4 をインストール済み

今回は開発用なので、Lumenは /vagrant の中に配置し、
パーミッションの問題を避けるために、nginxもvagrantユーザーで起動することにします。

Read More »

2016-03-20
No Comments

変更すべき php.ini の設定項目

By

リファレンス用にまとめてみました。随時追記・編集していきます。

前提

PHP 7の php.iniをベースにしていますが、ほとんどの設定はPHP 5系と共通です。

Read More »

2016-03-19
No Comments

Let’s Encrypt の証明書を更新した

By

（関連記事: Let’s Encryptをnginxで使ってみる）

SSLの更新時期を思い出した

ウソです忘れてました。忘れてたところ、こんなメールが先週届いていました。

これはありがたい・・・本当にエラーになってから思い出すところでした。

本体のアップデート

3ヶ月ぶりなので、まずはLet’s Encrypt本体をアップデートしておきます。

Read More »

2016-03-18
No Comments

DropBoxの写真を整理するスクリプトを書いた

By

FacebookやTwitterでgistに上げたものを公開したら思ったより反響があって驚きました。

DropBoxにはiPhone等を接続したとき、自動で写真をインポートしてアップロードする機能があります。
iPhoneを同期する際、すぐに写真はDropBoxにバックアップされますし、iPhoneからは写真を削除できるのでとても便利に使っていました。

でも普通に使い続けていると、どんどんファイルが肥大化してしまって、Finderで開くのさえ時間がかかるようになってきます・・・。

そんな肥大化した写真フォルダを、こんな感じに年月でフォルダ分けしてくれるスクリプトを書きました。

Read More »

2016-03-17
No Comments

Python開発環境構築メモ

By

完全に自分用。Macにpython関係の環境構築したときのメモです。

バージョン管理マネージャを入れる

pyenvを使う

Read More »

2016-03-17
No Comments

WebPack-Dev-ServerからBrowsersyncに乗り換えた

By

前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。

WebPack-Dev-Server を捨てた理由

大きく次の問題がありました。

  • Scssで@importされているファイルを変更しても、正しくビルドされない
    • TypeScriptのimportは問題ない
  • ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない
  • ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない

特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。

この3つの問題をすべて解決できるのが WebPack + Browsersync です。

Browsersyncとは何か

Browsersyncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。

タスクランナーと合わせてLive Reloadの機能を提供してくれるnpmモジュールは他にもありますが、Browsersyncの特徴の一つはそれらに依存せず、単体で動作する点が挙げられるでしょう。例えばgulpであればgulp-webserver、前回のwebpackであればDev-Serverなどがありますが、これらと違い完全に独立したモジュールとなっています。

また大きな特徴として、複数環境でのデバッグ容易性向上に関する機能が多く含まれているという点です。

例えばFireFoxとChromeで同じページを開いておきながら、片方のブラウザでページ内をクリックしたとき、もう片方のブラウザでも同じ箇所へのクリックイベントを実行することが可能です。スクロールも同期することが可能なので、複数のブラウザを開いていても常に同じ箇所を表示していることになり、同時デバッグやブラウザ間の表示比較などがとても容易に実現できるはずです。（今回はこの機能については触れていません。）

Read More »

2016-03-17
No Comments

TypeScriptのインターフェースに「I」のプリフィクスを付けるのはよくないのか

By

タイトル長くてすみません。
最近TypeScriptの勉強をしていて、様々な文章を読ませていただいています。

その一つが次のものなのですが、納得できなかったところがあったので自分なりにまとめてみます。

“TypeScript早わかりチートシート【1.5.3対応】 (2015/08/03）”
http://www.buildinsider.net/language/quicktypescript/01

上の解説では、TypeScript 1.5の文法解説などが分かりやすく書かれており、とても参考にさせていただきました。

“I”は使うべきではない？

インターフェースの宣言には、通常のクラスではないことを示すために、接頭辞に”I”を追加することが多々あります。例えば、”User”クラスはインターフェースとして”IUser”インターフェースを実装している、といったようにです。

先に挙げたページの、インターフェースについての解説で著者は次のように述べています。

命名規則として、先頭にIを付けていた時期もありましたが、現在ではマイクロソフトのガイドライン上で、Iは付けないこと、と改められています。

これを読んだとき、どうしても納得できませんでした。
「Iをつけること」ならまだしも「つけないこと」をガイドラインで明文化されているというのは、自分の中で全くもって同意できなかったからです。

Read More »

2016-03-14
No Comments

モダンなフロントエンド開発環境をつくる

By

最近、趣味で作りたいWebアプリがあって、結構クライアント側が要になりそうなので、思い切って勢いで Deep Dive してみた話。かなり長いです。

モダンって言ってるけど、TypeScriptが苦手ならES2015+ES7も全然アリだと思う。前回の記事で触れてるから、TypeScriptの代わりに書き換えればうまく載るはず。というか人口的にはTypeScriptよりES2015使う人のが当然多いだろうけど、今回はTypeScript使ってみたかったんです・・・。

背景

わたしは今までフロンドエンド開発っていうと、CSS3+HTML5で特別な開発環境も使わず、気合いで頑張って作ってきた勢です。

一応、フリーランスでバックもフロントもまとめて依頼されたり、趣味で書いたり、プログラミングスクールで先生やってた頃はフロントも教えていたんですが、とても苦手でした。特にデザインとか全くセンス無いし、デザインも決まってないようなサイトをまるっと任されたりするとすごくストレスで辛かったのを覚えています。

最近はバックエンドやインフラにフォーカスした仕事をしていて、ほぼほぼフロントを書くこともなくなったのですが、数年前より便利なツールや面白そうなライブラリがいろいろ増えていて、せっかく書くならとことんモダンに！ということでやってみました。

今回のゴール

ここで作る環境の最終的なコードはgithubにあります。
https://github.com/syamn/sakuio-blog-160314

  • node.js と npm をインストール
  • JavaScript には TypeScript を使う
  • CSS には Scss (Sass) を使う
  • ビューライブラリには　RectJS を使う
  • WebPackだけでビルド (GruntやGulpは使わない）
  • WebPack-Dev-Serverで自動リフレッシュを試してみる

ネットで情報を探すと、TypeScriptやScssのトランスパイルには未だにGulpが主流で（Gruntは減ってきましたね）、せっかくWebPackを導入してもGulpと組み合わせて使うみたいな記事を多く見かけます。

せっかくWebPackを導入したのなら、WebPackだけで完結させましょう〜！

Read More »

« Older Entries