個人開発で利用している言語、フレームワーク、ツールなど

はじめに

この記事は個人開発 Advent Calendar 2017の6日目の記事です。

2017年も間もなく終わりということで、仕事での環境とは別に2017年度に個人開発で良く利用していた言語やフレームワークなどを記録しておこうかと思います。 ※成果物はありません

個人開発のコンセプト

Webアプリケーション開発をターゲットとしています。その中でのコンセプトとしては、以下です。

フロントエンドからサーバーサイドの開発をいかに気持ちよく書けるか
デプロイ、CIをスケールできる形でいかに楽できるか
実用的でありながらモダンな状態
出来る限り無料でお金がかからない

これらを実現するため様々ツールを利用してきましたが、最近落ち着きつつあります。

フロントエンド

VSCode

この辺は好みのところがありますが、オールインワンで開発に集中でき、手に馴染むところが好きです。

ターミナルが統合されている
Vimのキーバインディングができる
マルチプラットフォームでどこでも同じ環境で作業できる

Javascript, TypeScript

規模が本当に小さければほぼvanillaで書きます。ある程度の規模になればjQueryを入れます。

なんだかんだjQuery最強

上記よりもっと大きい規模でクライアントにゴリゴリコードを書く必要がある場合は、TypeScriptを採用します。

APIとの通信とかちゃんとインタフェース越しにできると効率上がる

Webpack

クライアントのビルド環境。ちょいちょい画面を確認する必要がある場合は、ホットリローディングの有無で効率がだいぶ変わる。

サーバーサイド

RubyMine or VSCode

Railsを書くににはRubyMineがやっぱり書きやすい。けど、VSCodeでもある程度いける。フロントとサーバーサイド横断して利用する場合とかはVSCodeだけとかのほうが楽だったりする。エディタ一つで完結した開発スタイルが手に馴染むような気がします。

だいたいdeviseをつないでSNS認証から実装するケースが多いです。そしてフロントエンドどうしようかなぁ。Turbolinks切ろうかなぁと悩むところから始まる。規模が小さければTurbolinksはONのまま開発していきます。その際のTipsとして、以下のように呼び出しをコントローラやアクションを制御するというのがわかり良いです。Assetsパイプラインでスクリプトは統合されるので、Turbolinksを採用する場合はどこから呼ばれるかというのは常に意識していないといけません。

[rails] 特定のページのみで実行するJavascript | Oh My Enter!

this.onPageload = function (controller_and_actions, callback) {
    return document.addEventListener('turbolinks:load', function () {
        var conditions = regularize(controller_and_actions);
        if (!conditions) {
            console.error('[onPageLoad] Unexpected arguments!');
            return;
        }
        return conditions.forEach(function (a_controller_and_action) {
            var ref = a_controller_and_action.split('#');
            var controller = ref[0];
            var action = ref[1];
            if (isOnpage(controller, action)) {
                return callback();
            }
        });
    });
};

var regularize = function (controller_and_actions) {
    if (typeof controller_and_actions === 'string') {
        return [controller_and_actions];
    } else if (Object.prototype.toString.call(controller_and_actions).includes('Array')) {
        return controller_and_actions;
    } else {
        return null;
    }
};

var isOnpage = function (controller, action) {
    var selector = "body[data-controller='" + controller + "']";
    if (action) {
        selector += "[data-action='" + action + "']";
    }
    return document.querySelectorAll(selector).length > 0;
};

JSから画像ファイルへアクセスしたいときなどは以下のようにしてimage_path関数経由で取得できるようにしています。

image_pathをJavaScript側から使う - Qiita

<%
images = {}
Dir.chdir("#{Rails.root}/app/assets/images/") do
    images = Dir["**/*"].inject({}) do |h,f|
      h.merge!(f => image_path(f)) unless Dir.exists? f
      h
    end
end
%>

window.image_path = function (name) {
    return <%= images.to_json %>[name];
}

その他にも

豊富なgem、ドキュメント
設定より規約による爆速開発
APIモードでクライアントとの分離も可能
Herokuとの相性が良い

インフラ

Heroku

個人開発においてインフラメンテほど無駄な時間はない。 git pushするだけでPaaSが環境を構築してくれる。ありがとう。

Pipelineでステージングでの確認、そのまま本番にボタン一つで反映が可能
dynoというサーバーインスタンスをスライダーで上げ下げできる。急に負荷が必要になったときにもすぐに対応が可能
趣味範囲なら無料で遊べる
Add-onでSendGrid経由のメール、スケジューラ、FastlyCDNなども利用可能
すぐにメンテに入れられる
SSL設定がデフォルト
オリジナルドメインへの設定も簡単

欠点としては、regionがTokyoではないので若干ネットワークが遅いところでしょうか。そのあたりもTokyo regionがないわけではないので、必要に応じてHerokuのPrivate Spacesという機能を使えるようにする必要があるかもしれません。ただしEnterpriseアカウントしか使えないようなのでどうしたものか。

www.heroku.com

SendGrid

メールの開封状況などを計測できる
SMTPサーバーの利用だけならRailsとの連携がまじで簡単
Herokuとの連携
APIがちゃんと用意されている

PostgreSQL、Postico

DBはHerokuがRailsデプロイで標準サポートしているPostgreSQLを使っています。GUIクライアントとしてPosticoを使用しています。

AWS

個人開発ではS3くらいしかつかわない。 Herokuに直接ファイルアップロードなどはできないので、PerparClipなどを利用する場合のファイルサーバーとして使用しています。

コード管理

Bitbucket

GitHubも使うけど、publicリポジトリになんかアピールするかOSSのコントリビュートくらいにしか最近は使いません。

何と言ってもPrivateリポジトリが無料
Pipelines機能（Herokuのものとは違う）でgit pushをhookにしてrspec実行からherokuデプロイまでを自動実行してくれる
Trelloとの連携

こんな感じでルートディレクトリにbitbucket-pipelines.ymlを置いておくとあとはmasterブランチにpushすると自動でテスト実行してHerokuにデプロイまでしてくれます。

image: ruby:2.4.0

pipelines:
  branches:
    master:
      - step:
          caches:
            - bundler
          script: # Modify the commands below to build your repository.
            - bundle install --path vendor/bundle
            - bundle exec rspec
            - git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git HEAD -f

definitions:
  caches:
    bundler: vendor/bundle

タスク管理

Trello

込み入ったことをしない（できない）ので良い
Bitbucketと連携している
やることだけをカジュアルにストックしておける

まとめ

とにかくRails + Herokuの組み合わせが個人開発では一番使いやすいです。そんなに目新しいものはありませんが巷にたくさんあるものなんでもかんでも使うのではなく、自分の開発スタイルに馴染むものをちょこちょこ採用している感じです。普通に気持ちよくWebアプリケーションを作るためにはということで色々試行錯誤していく中で見つけたものなので人によって感じ方はまちまちかもしれません。

sou's blog

落ち着いた華やかさがあり、上品に明るく陽気なさまを表す。