読者です 読者をやめる 読者になる 読者になる

20代後半にWebエンジニア未経験で転職して1年が経つので振り返る

はじめまして、エンジニアのあらきです。

先月の10月1日で、晴れてi-plugに入社して1年が経ちましたので、ブログのスタートと合わせて、未経験Webエンジニアとして入社する少し前+入社1年を振り返りたいと思います。

前職

前職は某インテリアECサイト&店舗運営の会社でカスタマーサポートの業務を行なっていましたが、その傍ら、大学の講義で習ったExcelVBAを使って必要書類etcの作成をしてました。

入社半年前

そんな中、沸々と湧き上がるエンジニアへの想い。

実は私、新卒で受託開発企業の営業かーらーのーエンジニアとして入社したのですが、いわゆる黒い系企業でして。心身ともに崩してしまい、3ヶ月という短さで新卒チケットを棒に振る形となりました。

にも関わらず、コードを書いたり仕様を考えたりしていると時間がどんどん過ぎていく = 楽しい

もう20代後半、色々考えたが最後のチャンスだと諦めきれず、転職を決意。

なら以前から興味があったWebだろ!ってことで初学者お馴染みドットインストールや、サービス開始直後だったprogate等で、HTML/CSS/JSjQuery/PHPVagrantでの環境構築を勉強して見よう見まねの在庫管理システムを組みました。

転職活動

『新卒3ヶ月で退職』『20代後半』『実務未経験』の3本柱のおかげで、書類選考の通過しにくいこと。書類選考に通過したとしても、当たり前のように面接では落とされてしまう始末。嫌になる(´ー`)
それでも、システムは少しずつブラッシュアップ!

そんな中、Wantedlyにて『未経験OK』で募集をしていたところを見逃さず、すかさず連絡&応募!これがi-plugとの縁の始まりです。
(入社後に聞いた話なのですが、未経験での募集はその1回きりだったそうです)

i-plug面接

面接当日。仕事の帰り、i-plugへ向かう電車の中。面接で見せるために用意していた在庫管理の確認をしようとMacBookAirを起動して、Vagrantを起動...

しない。Vagrantが起動しない。なんか赤い文字が。

$ vagrant reload → 起動しない
$ vagrant halt$ vagrant up → 起動しない
血の気が引く。

そうこうしてるうちに最寄駅に到着してしまった。面接30分前に駅に着いたのですが、駅のベンチに駆け寄ってiPhoneで調べながらのVagrantと格闘(ポケットWifiなかった)

残り20分...残り15分...残り10分
「あぁ、終わった...直らない...」

為す術もなく、そのままi-plugの事務所に向かい現CTOとご対面。色々お互いに話をしていく中、現CTOの「何か見せてもらえるものがあれば!」

冷や汗をかきながらコンソール画面を開き一言
Vagrantが起動しないんです」

そして混乱していたか、いったい何を血迷ったか
「コレ、どうすれば直りますか?」

i-plugへ入社

面接後、「じゃあソースコードを送ってください」という神の言葉があり、帰宅後にコードを送信。こんなありえない面接でして、一体、現CTOのどこに刺さったのか不明ですが、面接は無事通過。 その後の役員面接でも色々話をさせていただいてi-plugへの入社が決定しました。

ちなみに、1回目の面接の時にFuelを使っていると聞いていたので、面接の帰りに紀伊国屋書店にて『はじめてのフレームワークとしてのFuelPHP』を購入。
その名の通り、自身はじめてのフレームワークで後日、在庫管理をFuelで書き換えてみる。

入社初日

支給されたMacに開発環境を整えました。まずはiTerm2をインストールして立ち上げます。

Araking:~ araki $
(...アラキング...イジメだろうか)

引き続きVirtualBoxVagrantをインストールして、準備されていたBoxをVagrantfileに設定して起動!当り前ですが自分のVagrantと違い、何事もなく起動。
その後、会社のこと/事業のこと/開発のことなど色々と研修を受け、i-plugでの生活がスタート。

入社1ヶ月

簡単な改修などで、少し仕事にも慣れてきたかと思ってた矢先、入社して最初の関門にぶち当たる。Chef。

ん〜、難しい。
crontab追記とかならまだしも、レシピを書くとかnodesだのdata_bagsだのわけわからんかったさ。 しかも調べたらsoloじゃなくてzeroとかもあるし。
Linuxやらサーバーやら、上辺もわかってないから、会社で軽く教えてもらったとはいえ、家で写経して続きを勉強する他なかったです。

入社1ヶ月半

OfferBoxのログイン処理の改修を担当することに。
バックエンド9:フロントエンド1だったことで約2ヶ月、ほぼ私1人での作業を行なってました。 集中できるという点ではとてもよかったのですがそうは言っても、やっぱりなんか寂しい(ノД`)シクシク

その後のデザイナーさんフロントさんとの仕事は誰よりも楽しんでいたのではと自負しております。

入社3ヶ月

外の話ですが、自分が所属のバンドの管理ページを任せてもらえることに。3ヶ月の知恵を振り絞る。拙いながら完成し、ちょくちょく機能追加しながら現在も運用中です。

入社5ヶ月

少し前にリリースされたサービスに新たに機能を追加することになり、後ろを私がアサインされる。スタート前にコードを見ようと思ったのですが

「ふぁ〜なんやこれ、知らん書き方がいっぱいや」

コントローラーやら モデルやら コアやら 何やら行ったり来たり。この頃はメチャ大変だったけど、今改めて見ると、すごく整理されててわかりやすい。『他人のコードを読むことが勉強になる』が初めて実感できた瞬間でした。ほんと、Githubは宝物庫。

入社7ヶ月

今後を見据えてバックエンド開発基盤改修が入る。私自身は経験も浅いため噛んでなかったのですが、改修されたものを色々見て回って感嘆しました。

制作会社や開発会社での経験皆無の私にとって、これが開発会社というものか、と思い知りました。私の周りの人達、みんな本当にゴイスーすぎるわ。

早速、家に帰ってバンドの管理ページに搭載する。

入社1年 ←今ここ

もっと色々手を出していかないとーと思ってます。でないと、私の周りのゴイスーな人たちの話しにまともについていけないので。

別のFW、別の言語、インフラ、データベースサーバー、フロントエンド、ディレクション ...

今あるバンドの管理ページを別に書き換えたり公開せずとも、サービスのコピーを作ったり。いや、もちろん自前のサービス作りたいけど。

あとがき

入社前の話で半分使ってる(汗)
エンジニアブログとか言いながら、今自分が書けるネタがこの振り返りしかなかったという... みんなぽんぽんネタがでてくるようなので、自分もそうなれるように色々と勉強していきます(´ー`)

Django REST frameworkで爆速API開発 導入編

エンジニアの島袋です。
DjangoのパッケージであるDjango REST frameworkを使用したWeb APIの開発について、何回かに分けて書いていきたいと思います。
日本語での資料が少なかったので公式ドキュメントソースコードを見ながら、なんとかかんとか確率させたノウハウっぽいことを紹介していきます。
今回の導入編はほぼほぼ公式チュートリアルの簡略だけど、きっと需要はある...はず。
ちなみに爆速なのは開発スピードであって、APIのレスポンスタイムではないです。

環境構築

さらっと環境を構築します。それぞれの詳しい説明が欲しい人は検索しましょう。
Mac前提で書いてはありますが、WindowsでPytonの環境を入れている人であれば問題ないはずです。

pyenv / pyenv virtualenv

Macにデフォルトで入っているPythonは2系なので、3系の環境と使い分けしやすいように pyenv pyenv-virtualenv を導入。
Homebrewで入れていきますが、最低3系が動けば良いので無くても(たぶん)大丈夫。
今回は現時点でほぼ最新の3.5.1にします。

# Homebrewでインストール
brew install pyenv
brew install pyenv-virtualenv

# 作業用ディレクトリの作成・移動
mkdir test-django-rest
cd test-django-rest

# 該当のPythonバージョンをインストール
pyenv install 3.5.1

# 作業用ディレクトリ以下でのPython環境を設定
pyenv virtualenv 3.5.1 test
pyenv local test

# バージョンの確認
pyenv version
python -V

最後のコマンドでPython 3.5.1と出ればOK。

pip

必要なパッケージのインストール。

# pip自体をとりあえず最新に
pip install -U pip setuptools

# 下記2つが今回の主役
pip install django
pip install djangorestframework

Project start

さくっとDjangoプロジェクトを作成。

django-admin startproject tutorial
django-admin.py startapp quickstart
python manage.py migrate

# 管理ユーザ作成(あとでログインに使うのでIDとパスは覚えておこう)
python manage.py createsuperuser

# サーバ起動
python manage.py runserver

http://127.0.0.1:8000/で起動を確認。 ここまではDjangoの導入。

Django REST framework

ここから今回の主役 Django REST framework
文字通りWeb APIを作成するためのフレームワーク。シンプルで強力な機能が一通り揃ってます。

Serializers

Djangoと違うのがこのファイル。簡単に言えばどんなデータを表示するか制御するところです。
tutorial/quickstart/serializers.pyに作成。

from django.contrib.auth.models import User, Group
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ('url', 'username', 'email', 'groups')


class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ('url', 'name')

Views

Django REST frameworkには、モデル(DB)駆動型の特性を最大限に活かすために色んなクラスが用意されています。
今回はチュートリアルなのでオーソドックスにModelViewSetを使用します。

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from quickstart.serializers import UserSerializer, GroupSerializer


class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer


class GroupViewSet(viewsets.ModelViewSet):
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

URLs

Djangoのルーティングを設定します。場所はtutorial/urls.py

from django.conf.urls import url, include
from rest_framework import routers
from quickstart import views

router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)

urlpatterns = [
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Settings

最後にtutorial/settings.pyを設定したら準備はOK。

INSTALLED_APPS = (
    ...
    'rest_framework',
)

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAdminUser',),
    'PAGE_SIZE': 10
}

ログイン

上記設定が終われば、もう一度サーバを起動させてhttp://127.0.0.1:8000/api-auth/login/からpython manage.py createsuperuserで作成したユーザでログインしてみましょう。
ログイン後、http://127.0.0.1:8000/を確認して、下記のようなページが表示されればチュートリアルは完了です。 f:id:i-plug-develop:20161011174730p:plain

ちなみにCLIから確認する場合は下記のようなコマンドになります。

curl -H 'Accept: application/json; indent=4' -u [USER]:[PASS] http://127.0.0.1:8000/

まとめ

Django REST frameworkはDjangoの設計思想を反映して短いコード迅速な開発が可能な素敵なフレームワーク
もともとDjangoで開発していてAPIも、という場面で活躍してくれるはずです。
導入も簡単でブラウザでの確認作業も行えるので、ぜひとも試して下さい。

次回は開発編をお届け予定。

参考URL

ReactとAWS API Gatewayの連携方法

はじめに

こんにちは。OfferBoxの中の人の串上です。

最近サーバーレスとかいうものが注目されつつありますよね。 個人でWebアプリ作ったりするのが好きな人にとって必ずネックになるのがサーバーの設計ですが、 それを一気に解決してくれるのがサーバーレスではないかなと個人的に思っています。

さすがに個人でAWSのEC2を2つ立てて、RDS借りて、ALB立てて。。 っていわゆるAWSの最低限の構成ってやつをやると一気にコストかかって、やる気が削がれてしまいますよね。

かといってこれからの時代にVPS借りてっていうのもなんか違う感じがして、気持ち的に嫌ですよね。

そんなときに解決してくれるのが、AWSのS3、API GatewayとLambda、DynamoDBだと思います。 それぞれの詳細はこちら。

※S3 https://aws.amazon.com/jp/s3/

API Gateway https://aws.amazon.com/jp/api-gateway/

※Lambda https://aws.amazon.com/jp/lambda/

※DynamoDB https://aws.amazon.com/jp/dynamodb/

簡単に説明すると、API GatewayはアマゾンさんがAPIサーバーを提供してくれて、 APIサーバーの中の処理をLambdaで実行して、 ユーザーが入力したデータなどはLambdaからDynamoDBに貯めたり、参照したりして、 S3にHTML、CSS、JSを配置してWebアプリを作ってしまおうということです。

上記のメリットとしては、以下のようなものが挙がられるのかなと思っています。

  • EC2等を立てるよりも、初期導入時のコストが安い(リクエスト数等による)

  • S3の99.999999999%の耐久性とAPI Gatewayの自動スケール機能による個人で開発するには最強すぎるスケーラブルなアーキテクチャを実現可能

  • アマゾンさんが大体のセキュリティをやってくれているのであまり考えなくていい。

デメリットももちろんあります。

  • サーバーの設定をごにょごにょしたい人には物足りない。(というかほとんどできない)

  • DynamoDBをメインのデーターベースとして使う場合は、ころころと仕様が変わるサービスは作れない。(インデックスを途中で変えたり、足したり出来ない) ※お金出せばちょっとなら足せます。(5つまで)

  • RubyとかGoとかPHPとかで書きたいって思っても出来ない。(NodeかPythonJavaでしかLambdaは実装できない)

他にもいろいろありますが、長くなるので割愛します。

いよいよ本題に入りますが、そんなサーバーレスの根幹となる ReactとAWS API Gatewayの連携方法をご紹介します。※Macユーザー向け

(ReactじゃなくてもAngularとかBackboneでもいけますが、そちらを使いたい場合はAPI Gatewayの部分だけ参考にしてください。)

Nodeのインストール

まずは、Nodeをインストールします。 (普通にインストールしてもいいんですが、バージョンが上がったときにすぐに対処できるようにnvm(Node Version Manager)インストールします。) ターミナルを立ち上げて以下を実行してください。

nvmのインストール

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash

これを実行するとホームディレクトリに.nvmフォルダが作成されます。

さらに~/.bash_profile, ~/.zshrc, ~/.profile, ~/.bashrcのいずれかに以下を追記して保存します。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

保存し終わったら、以下のようにして追記した設定をすぐに反映させます。

source ~/.bashrc

ここでnvmがインストールされたか確認します。

nvm --version

を実行して以下のように表示されればnvmのインストール完了です。

0.32.0

nvmがインストールされたのでいよいよNodeのインストールを行います。

Nodeのインストール

ひとまず最新のものをインストールしましょう。 バージョン指定などもできますが、詳しくは公式HPを参照してください。

https://github.com/creationix/nvm

nvm install node
nvm use node

上記を実行するとNodeがインストールされるので、以下を実行してインストールの確認を行って下さい。 (node, npm)

node --version
v6.4.0
npm --version
3.10.3

上記のようにバージョンが表示されればNodeのインストールは完了です。

Reactでフロントを作成

Reactを使用する準備が整ったので、早速フロント用のスクリプトを作成していきます。

各種インストール

# フロントスクリプト用ディレクトリ作成
mkdir sample_front
cd sample_front
# reactをインストール
npm install react react-dom
# APIと連携するためにaxiosもインストール
npm install axios

フロントスクリプトを作成

まずsample_frontディレクトリの構成は以下のようにしたいと思います。 少し補足しておくと、Reactは事前にコンパイルが必要なため、コンパイル前のjsとコンパイル後のjsでディレクトリを分けています。

.
├── assets
│   └── js
│       └── bundle.js #コンパイルされたjs
├── index.html
└── src
    └── js
        └── app.js #コンパイル前のjs

index.htmlの中身は以下のようにします。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="container"></div>
    </body>
    <script src="assets/js/bundle.js"></script>
</html>

上記の例ではsrc/js/app.jsの中にスクリプトを実装していき、 assets/js/bundle.jsにjsをコンパイルするようにしています。

コンパイルってどうするの?って疑問には以下でお答えします。

コンパイルするための方法はいろいろありますが、今回はwebpackというものを使っていきます。

まずはwebpackをインストールしましょう。 webpackコマンドを使用できるようにしたいので、-gオプションをつけてインストールします。

npm install -g webpack

またこれらも必要なので何も難しいことは考えずにインストールしてください。

npm install babel-loader babel-core babel-preset-react babel-preset-es2015

上記を実行するとwebpackがインストールされるので、 sample_frontディレクトリの直下に以下のような内容のwebpack.config.jsを作成します。

module.exports = {
    entry: [
        './src/js/app.js'
    ],
    output: {
        path: __dirname + '/assets/js/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

以上の設定が終わったら、早速src/js/app.jsを作成します。 以下のような内容で保存してください。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

const API_BASE_URL = '';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            message: ''
        }
    }
    componentWillMount() {
        // コンポーネントがマウントされる前にデータを取得する
        this.getDataFromApi();
    }
    getDataFromApi() {
        // APIをコール
        axios.get(API_BASE_URL)
            .then((response) => {
                // APIから取得したデータをstateに保存
                this.setState({
                    message: response.data.message
                });
            })
    }
    render() {
        return (
            <div>
                {this.state.message}
            </div>
        );
    }
}

// index.htmlの.containerに描画する
ReactDOM.render(<App />, document.querySelector('.container'));

これでReactの準備は整ったので、次はAPI Gatewayの設定を行います。 AWSのアカウントは事前に取得しておいてください。

API Gatewayの作成

AWSのコンソールにログインして「サービス」の中から「API Gateway」を選択すると以下のような画面が表示されるので、 「今すぐ始める」ボタンをクリックします。

f:id:i-plug-develop:20161011165551p:plain

すると以下のような画面が表示されますが、ひとまず「OK」をクリックします。

f:id:i-plug-develop:20161011165716p:plain

ダイアログが閉じたら「新しいAPI」をクリックし、以下のように入力して「APIの作成」ボタンをクリックします。

f:id:i-plug-develop:20161011165741p:plain

すると以下のような画面が表示されるので、早速エンドポイントを作成していきましょう。

今回は単純な例なので、早速GETメソッドを作成します。

「アクション」ボタンをクリックして、「メソッドの作成」をクリックしましょう。

すると以下のような画面になるので、表示されたプルダウンから「GET」を選択して、プルダウンの右にあるチェックボタンをクリックします。

f:id:i-plug-develop:20161011165837p:plain

少し待つと、以下のような画面が表示されるので、「統合タイプ」は「Lambda関数」を選択して、「Lambdaリージョン」は「ap-northeast-1」※ を選択します。 ※リージョンは好きなのをどうぞ。

すると、「ap-northeast-1 内にLambda 関数 がありません. Lambda 関数を作成します」というアラートが表示されるので、「Lambda関数を作成します」をクリックします。

f:id:i-plug-develop:20161011165926p:plain

以下の様な画面が開くので、「All runtimes」のプルダウンからPython2.7を選択して、「Filter」に「hello」を入力します。

※NodeやJavaが好きな人はそちらでやってもらっても大丈夫です。

入力したら、「hello-world-python」というのが表示されるので、タイトルをクリックしてください。

f:id:i-plug-develop:20161011165950p:plain

以下のような画面が表示されるので、「Next」をクリックしてください。

f:id:i-plug-develop:20161011170034p:plain

以下の様な画面が表示されるので、

f:id:i-plug-develop:20161011170122p:plain

「Name」に「helloWorld」を入力し、 「Lambda function code」に以下を入力します。

from __future__ import print_function

import json

print('Loading function')


def lambda_handler(event, context):
    response = {}
    response["message"] = "Hello World"
    return response

また画面をスクロールして、以下の画像のように

f:id:i-plug-develop:20161011170159p:plain

「Role name」に「helloWorldRole」を入力して、 「Next」ボタンをクリックします。 ※その他の設定はひとまずデフォルトでいきます。

すると以下のような画面になるので、「Create function」をクリックします。

f:id:i-plug-develop:20161011170249p:plain

以上でLambdaの作成は完了です。

再度サービスメニューから「API Gateway」を選択します。

API Gatewayの画面が開いたら、「HelloWorldApi」をクリックします。

先ほど作成した「GET」メソッドをクリックしてください。 以下のような画面が表示されるので、

f:id:i-plug-develop:20161011170512p:plain

「Lambdaリージョン」を「ap-northeast-1」に変更し、「Lambda関数」に「helloWorld」を入力してください。

すると「保存」がクリックできるようになるので、「保存」をクリックします。

次に以下のようなダイアログが表示されるので、「OK」をクリック。

f:id:i-plug-develop:20161011170548p:plain

すると以下のような画面が表示されるので、早速APIのテストを行いましょう。

「クライアント」の上のほうに表示されている「テスト」をクリックします。

f:id:i-plug-develop:20161011171605p:plain

以下のような画面になるので、「テスト」をクリック。

f:id:i-plug-develop:20161011170627p:plain

以下の表示表示されたらテスト成功です! レスポンス本文にHello Worldが返されているのがわかります。

f:id:i-plug-develop:20161011170646p:plain

ただし、このままではまだ外部からアクセス出来ないので、「アクション」メニューから「CORSの有効化」をクリックします。 すると以下のような画面が表示されるので「CORSを有効にして既存のCORSヘッダーを置換」をクリックします。

f:id:i-plug-develop:20161011170711p:plain

次に以下のようなダイアログが表示されるので、「はい、既存の値を置き換えます」をクリック。

f:id:i-plug-develop:20161011170726p:plain

次に作成したAPIをデプロイしてURLを生成します。

「アクション」メニューから「APIのデプロイ」を選択してください。 選択すると以下のようなダイアログが表示されるので、以下のように入力して「デプロイ」をクリックします。

f:id:i-plug-develop:20161011170746p:plain

以下のような画面が表示されたらAPIの作成は完了です!

赤枠の部分にAPIのURLが表示されているので、このURLをコピーします。 次にReactでAPIのURLを設定します。

f:id:i-plug-develop:20161011170802p:plain

ReactでAPIのURLを設定

src/js/app.jsを開いて、API_BASE_URLにコピーしたURLを貼り付けます。

Reactをコンパイルしてブラウザで確認

このままではまだassets/js/bundle.jsは作成されていないので、sample_frontディレクトリ直下で以下のコマンドを実行します。

webpack

するとassets/js/bundle.jsが生成されるので、index.htmlをブラウザで開いて下さい。

以下のように「Hello World」が表示されたら完了です!

お疲れ様でした。

f:id:i-plug-develop:20161011170825p:plain

思ったより長くなりましたが、だいたいこんな流れで連携できます。

本当はAPI Gatewayの設定などもコマンドラインからできるのですが、最初なので画面からの作成方法を説明しました。

APIの数が多くなるといちいち画面で一つずつ作成してられないので、Serverless Frameworkという便利なフレームワークがあるのですが、

そちらについてはまたおいおい書きたいと思います。

serverless.com

また、実際は作成したフロントのスクリプトをS3にアップロードしてWebホスティングを有効にして外部からアクセスできるようにしたり、 Lambdaの中でDynamoDBに接続してデータを取ってきたりしないと本格的なWebアプリは作成できませんが、 今回はひとまずさわりの部分だけご紹介しました。

また時間があればその辺も書きたいと思います。