21 Jul 2018, 01:17

Visual Studio Code で JavaScript開発環境の構築

はじめに

今まで有料のJetbrain IDEをつかっていたのだけれども、見た目のダサさに愛想が尽きた.そこで、いろいろ探していたところ Visual Studio Codeの美しさに一目惚れしてしまったのだった.

あんなに、あんなに、あんなに、Microsoftが嫌いだったのに・・・.

ということで、Visual Studio Codeの紹介と、JavaScript, Reactの開発環境構築をしたので紹介する。

見た目の設定

ルックスが最重要の設定項目である!!

というわけで、まずは外観の設定からはじめよう! ここでは、以下のテーマとフォントをオススメする。

続いて、フォントサイズとフォントの設定。

{
    "workbench.colorTheme": "Level Up", /* テーマ */
    "editor.fontSize" : 14,             /* フォント */
    "editor.fontWeight": "bold",
    "window.zoomLevel": 1,              /* 外枠のサイズ */
}

Image from Gyazo

アイコンもカッチョよく。 - vs-icons - https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

JavaScriptの設定

優れたIDEが揃えるべき機能は以下のとおり。

  • シンタックスハイライト/ インデント
  • 検索・置換
  • タグジャンプ
  • コード補間
  • エラーチェック
  • リファクタリング
  • インタープリタ・デバッカ
  • プロジェクト管理

vscodeを JavaScriptの最強エディタにするためには以下のツールが必要だ。

シンタックスハイライト/インデント ... defaultでOk
検索・置換  ... defaultでOk
タグジャンプ  ... defaultでOk
コード補間 ... defaultでOk
エラーチェック .. ESLint
リファクタリング ... deualtでOK, JavaScript Booster
インタープリタ・デバッカ ... Debugger for Chrome, Quokka.js
プロジェクト管理 ... defaultでOk

なんたることか、ほとんどDefaultでOkだ。つおい。やることがなかった。 - https://code.visualstudio.com/docs/languages/javascript

とりあえず、足りない機能をちまちま追加します。 - JavaScript Extensions in VS Code

ESLint

定番の静的解析ツール。

設定が必要。

$ npm install eslint --global
$ eslint --init 

Prettier + Format on Save

保存時にフォーマット整形できる。

設定が必要。

$ npm install prettier --global
$ yarn add -D eslint-plugin-prettier eslint-config-prettier

Debugger for Chrome

ブレークボイントをはって、Chromeでデバッグできるらしい。

JavaScript Booster

WebStormに激しく感化されたものだとか。賢いリファクタリングをSuggestしてくれる。 - JavaScript Booster - Visual Studio Marketplace

Auto Import

オートインポート.

スニペット関連

入れれば便利だけれども、自分はあまりつかわない。

Reactの設定

公式にまとまっている。 - React JavaScript Tutorial in VS Code

Web開発関連

HTML, CSSまわりの便利機能も調べておく。

  • HTML Snippets … HTMLのスニペット群
  • HTML CSS Class Completion … HTMLを解析してCSS補完

View in Browser

選択中のHTMLファイルをコマンド一つでブラウザで開くことできる。 - View In Browser - Visual Studio Marketplace

設定のクラウド共有・保存

参考リンク

09 Jul 2018, 17:37

一台のサーバでdocker-composeで管理された railsプロジェクトを複数立ちあげる方法

はじめに

さくらVPSで 1つのサーバで 2つの railsサービスを動かしたい。(そのうちの一つはマストドン)

この場合、ドメインを2つ使う必要があると思い、ドメインを2つ取得したのだが、 今サブドメインという仕組みを知った。これをつかえばやりたいことが実現できそうだ。 railsプロジェクトは docker-composeで管理している。 railsアプリを https化するために、let’s encryptの dockerもつかうと便利なことがわかった。

まとめると、以下のようなことをやりたい。

  • Dockerがインストールされているサーバに複数の docker-composeで管理されたWebアプリを動かす。
  • Webアプリには、それぞれのドメインを設定して、一意にアクセスできるようにする。
  • 各ドメインには、Let’s Encryptで取得した SSL証明書が適用される。

結末

調べて実施した結果、やりたいことはできた。

しかし、致命的な問題 が発生して、解決方法が分からず、結局挫折した。

その問題点とは、railsアプリ間でのコンテナ間通信ができない、というもの。 たとえば、pingは届くのだけれども、wgetやcurlが届かない。 これが解決できなくて、挫折してしまった。

解決方法がわかるかた、教えてください!

手順

挫折はしたものの、rails間で通信しない場合の運用ならば問題ないため、手順をわすれないように残しておく。

前提となる環境

  • さくらVPS(Ubuntu)
  • Dockerと docker-composeがインストールされている

コンテナ間通信をするための経路を作成

Dockerのコンテナ同士が通信するための経路を作成する。

# ネットワークを作成する
$ docker network create --driver bridge front
$ docker network create --driver bridge back-mstdn
$ docker network create --driver bridge back-wtdn

リバースプロキシサーバ & Let’s Encryptサーバ

リバースプロキシサーバとして、nginxを利用する。

こいつの役割がいまいちわかっていないのだが、複数ドメインを共存させることができる。 さらには、ドメインについてSSL証明書を発行してくれる。

nginxと letsencryptサーバの dockerイメージを利用する。

~/nginx-proxy ディレクトリを作成して、そのなかに docker-compose.ymlを作成する。 certディレクトリに証明書が保存される。

version: '2'
services:
  proxy:
    image: jwilder/nginx-proxy:alpine
    container_name: proxy-nginx
    ports:
      - 80:80
      - 443:443
    restart: always
    tty: false
    privileged: true
    volumes:
      - ./certs:/etc/nginx/certs:ro
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - /etc/nginx/vhost.d
      - /usr/share/nginx/html
    networks:
      - front

  letsencrypt:
    image: jrcs/letsencrypt-nginx-proxy-companion
    container_name: proxy-letsencrypt
    restart: always
    tty: false
    privileged: true
    volumes:
      - ./certs:/etc/nginx/certs:rw
      - /var/run/docker.sock:/var/run/docker.sock:ro
    volumes_from:
      - proxy
    networks:
      - front

networks:
  front:
    external: true

railsアプリ1(Mastodon)の docker-compose.ymlを作成

ひとつ目のWebアプリ、マストドンを立ちあげる。

Mastodonのリポジトリを closeすると、docker-compose.ymlがあるので、それを編集する。

  • Nginxコンテナを新規追加
    • ポートは9090(かぶらなければなんでもよい)
  • 各コンテナを back-mstdn ネットワークでつなぐ
  • db, redis の volumesのコメントアウトを外して、データの永続化。
version: '2'
services:

  nginx:
    image: nginx:1.11.10-alpine
    container_name: mstdn-nginx
    ports:
      - 9090:9090
    restart: always
    tty: false
    env_file: .env.production
    links:
      - web
      - streaming
    volumes:
      - ./setting/nginx/conf.d:/etc/nginx/conf.d:ro
      - ./setting/nginx/conf:/etc/nginx/conf/:ro
    volumes_from:
      - container:proxy-nginx
    networks:
      - front
      - back-mstdn

  db:
    restart: always
    image: postgres:9.6-alpine
    container_name: mstdn-db
    volumes:
      - ./postgres:/var/lib/postgresql/data
    networks:
      - back-mstdn

  redis:
    restart: always
    image: redis:4.0-alpine
    container_name: mstdn-redis
    volumes:
      - ./redis:/data
    networks:
      - back-mstdn

  web:
    build: .
    image: tootsuite/mastodon
    restart: always
    container_name: mstdn-web
    env_file: .env.production
    command: bash -c "rm -f /mastodon/tmp/pids/server.pid; bundle exec rails s -p 3000 -b '0.0.0.0'"
    networks:
      - back-mstdn
    ports:
      - "127.0.0.1:3000:3000"
    depends_on:
      - db
      - redis
    volumes:
      - ./public/assets:/mastodon/public/assets
      - ./public/packs:/mastodon/public/packs
      - ./public/system:/mastodon/public/system


  streaming:
    build: .
    image: tootsuite/mastodon
    restart: always
    container_name: mstdn-streaming
    env_file: .env.production
    command: yarn start
    networks:
      - back-mstdn
    ports:
      - "127.0.0.1:4000:4000"
    depends_on:
      - db
      - redis

  sidekiq:
    build: .
    image: tootsuite/mastodon
    restart: always
    container_name: mstdn-sidekick
    env_file: .env.production
    command: bundle exec sidekiq -q default -q mailers -q pull -q push
    depends_on:
      - db
      - redis
    networks:
      - back-mstdn
    volumes:
      - ./public/packs:/mastodon/public/packs
      - ./public/system:/mastodon/public/system

networks:
  front:
    external: true
  back-mstdn:
    external: true

.env.productionを読み込んでいるが、これは マストドンを動かすための環境変数がいろいろ書いてある。 編集するところだけ抜き出そう。メールサーバには、ここではsparkpostを利用している。

VIRTUAL_HOST=weightodon.site
VIRTUAL_PORT=9090
VIRTUAL_PROTO=https
LETSENCRYPT_HOST=weightodon.site
LETSENCRYPT_EMAIL=fox10225fox@gmail.com
LETSENCRYPT_TEST=false

LOCAL_DOMAIN=weightodon.site

SECRET_KEY_BASE=<rails secretで表示される値>
OTP_SECRET=<rails secretで表示される値>

SMTP_SERVER=smtp.sparkpostmail.com
SMTP_PORT=587
SMTP_LOGIN=SMTP_Injection
SMTP_PASSWORD=<Web APIで表示される値>
SMTP_FROM_ADDRESS=notifications@weightodon.site

最後に nginxの設定。mastodon/setting/nginx/conf.d/default.conf を作成して、そこに以下を記述。 編集する箇所は、

  • listen 9090
  • server_name を設定
  • ssl_certificate, ssl_sertificate_keyのパスのサイトを自分のドメインにする
  • rootのところをコンテナの中からみた、公開ディレクトリに設定。
map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

server {
  listen 9090 ssl;
  server_name weightodon.site;

  ssl_protocols TLSv1.2;
  ssl_ciphers EECDH+AESGCM:EECDH+AES;
  ssl_ecdh_curve prime256v1;
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;

  ssl_certificate     /etc/nginx/certs/weightodon.site/fullchain.pem;
  ssl_certificate_key /etc/nginx/certs/weightodon.site/key.pem;

  keepalive_timeout    70;
  sendfile             on;
  client_max_body_size 8m;

  root /mastodon/public;

  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  add_header Strict-Transport-Security "max-age=31536000";

  location / {
    try_files $uri @proxy;
  }

  location ~ ^/(emoji|packs|system/accounts/avatars|system/media_attachments/files) {
    add_header Cache-Control "public, max-age=31536000, immutable";
    try_files $uri @proxy;
  }
  
  location /sw.js {
    add_header Cache-Control "public, max-age=0";
    try_files $uri @proxy;
  }

  location @proxy {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header Proxy "";
    proxy_pass_header Server;

    proxy_pass http://web:3000;
    proxy_buffering off;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    tcp_nodelay on;
  }

  location /api/v1/streaming {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header Proxy "";

    proxy_pass http://web:4000;
    proxy_buffering off;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    tcp_nodelay on;
  }

  error_page 500 501 502 503 504 /500.html;
}

これで、すべて完了。docker-compse up -d をすれば゛自動で証明書がダウンロードされてhttps化されるはずだ。

2つめのrailsアプリを立ちあげる

2つめは自作 railsアプリ。基本的には、Mastodonと同じ。なので、一気に紹介。

  • docker-compose.yml
version: '2'
services:
  nginx:
    image: nginx:1.11.10-alpine
    container_name: wtdn-nginx
    ports:
      - 9091:9091
    restart: always
    tty: true
    environment:
      VIRTUAL_HOST: weightodon.club
      VIRTUAL_PORT: 9091
      VIRTUAL_PROTO: https
      LETSENCRYPT_HOST: weightodon.club
      LETSENCRYPT_EMAIL: fox10225fox@gmail.com
      LETSENCRYPT_TEST: "false"
    links:
      - web
    volumes:
      - ./setting/nginx/conf.d:/etc/nginx/conf.d:ro
      - ./setting/nginx/conf:/etc/nginx/conf/:ro
    volumes_from:
      - container:proxy-nginx
    networks:
      - front
      - back-wtdn

  web:
    restart: always
    build: .
    command: bundle exec unicorn_rails -p 3001 -c /app/config/unicorn.rb
    # command: bash -c "rm -f /app/tmp/pids/server.pid; bundle exec rails s -p 3001 -b '0.0.0.0'"
    container_name: wtdn-web
    volumes:
      - .:/app
      - bundle:/bundle
    environment:
      TZ: "Asia/Tokyo"
      RAILS_ENV: production
      RAILS_ROOT: /app
      SECRET_KEY_BASE: 7066cf88b55e4b76d4bc9196a96acc1ebc2d809dd6f6f3e854ddd6dba75a2616eee5de216a221b2b13da4932f2c6d6025e0d604b83a2c24c88701c2c2641214d
    depends_on:
      - db
    tty: true
    stdin_open: true
    ports:
      - "127.0.0.1:3001:3001"
    dns:
      - 133.242.0.3
      - 133.242.0.4
      - 8.8.8.8
    networks:
      - back-wtdn

  db:
    restart: always
    image: postgres:alpine
    container_name: wtdn-db
    volumes:
      - ./postgres:/var/lib/postgresql/data
    networks:
      - back-wtdn
    
volumes:
  db-volume:
  bundle:
    driver: local

networks:
  front:
    external: true
  back-wtdn:
    external: true

  • setting/nginx/conf.d/default.yml
map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

server {
  listen 9091 ssl;
  server_name weightodon.club;

  ssl_protocols TLSv1.2;
  ssl_ciphers EECDH+AESGCM:EECDH+AES;
  ssl_ecdh_curve prime256v1;
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;

  ssl_certificate     /etc/nginx/certs/weightodon.club/fullchain.pem;
  ssl_certificate_key /etc/nginx/certs/weightodon.club/key.pem;

  keepalive_timeout    70;
  sendfile             on;
  client_max_body_size 8m;

  root /app/public;

  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  add_header Strict-Transport-Security "max-age=31536000";

  location / {
    try_files $uri @proxy;
  }

  location ~ ^/(emoji|packs|system/accounts/avatars|system/media_attachments/files) {
    add_header Cache-Control "public, max-age=31536000, immutable";
    try_files $uri @proxy;
  }
  
  location /sw.js {
    add_header Cache-Control "public, max-age=0";
    try_files $uri @proxy;
  }

  location @proxy {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header Proxy "";
    proxy_pass_header Server;

    proxy_pass http://web:3001;
    proxy_buffering off;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    tcp_nodelay on;
  }

  error_page 500 501 502 503 504 /500.html;
}

基本的な考え方は、以下をすれば新しいドメインを追加できるはずだ。

  • Dockerのネットワークを追加
  • nginxのポートを決める
  • docker-compose.ymlを作成
  • setting/nginx/conf.d/default.ymlを作成

では。

References

01 Jul 2018, 15:41

炎上速(blazing-fast) 静的サイトジェネレーター GatsbyJs を試してみる

はじめに: Gatsby 導入する理由

このブログは、Hugoで運営している。(http://futurismo.biz/2018/04/wordpress-2-hugo/)

React 製のサイトジェネレーターである、 Gatsby へ移行しようと決意した。

その理由は、モダンなフロントエンド技術を使っているので。

私は、React エンジニアを目指すことに決めた。Gatsbyは Reactでかかれている。 そこで、ブログ製作をつうじで Reactに慣れ親しみ、改造できればいいなと思った。

Gatsbyについて

Gatsbyは、React で書かれた静的サイトジェネレーター。

Getting Started

gatsbyを npmでインストールする。

今後のメンテナンスを考え、インストールは v1ではなくv2とする

$ npm install --global gatsby-cli@2.0.0-beta.3


$ gatsby -v
2.0.0-beta.3

続いて、サイト生成。

# テンプレートからサイト作成
$ gatsby new futurismo3 https://github.com/gatsbyjs/gatsby-starter-default#v2
$ cd futurismo3

# 開発用サーバ起動
$ gatsby develop

まずは、デフォルトのページが生成された。これに改造を加えていく。下記リンクによると、いろいろと手順があるようだ。

というわけで、まずは 単一のMarkdownを表示するところからはじめます。

Markdownの記事を表示

ファイルシステムからデータを読み込む gatsyby-source-filesystem plugin, Markdown形式を HTMLに変換する gatsby-tarnsformer-remark pluginをいれる。

$ yarn add gatsby-source-filesystem
$ yarn add gatsby-transformer-remark

それから、ブログ内の別ページにリロードなしで遷移する gatsby-plugin-catch-links, head で囲まれた部分を制御するための、gatsby-plugin-react-helmetを入れる。

$ yarn add gatsby-plugin-catch-links gatsby-plugin-react-helmet

gatsby-config.jsに以下を書く。

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/src/pages`,
      name: "markdown-pages",
    },
  },
  `gatsby-plugin-catch-links`,
  `gatsby-plugin-react-helmet`,
  `gatsby-transformer-remark`,
];

ではでは、はじめの記事を投稿します。src/pages/06-09-2017-getting-started/index.md に以下の内容を書き込み。

---
path: "/hello-world"
date: ""2017-07-12T17:12:33.962Z""
title: "My First Gatsby Post"
---

Oooooh-weeee, my first blog post!

続いて、記事のテンプレートを src/templates/blog-post.jsに作成。

import React from "react";
import Helmet from "react-helmet";

// import '../css/blog-post.css'; // make it pretty!

export default function Template({
  data, // this prop will be injected by the GraphQL query we'll write in a bit
}) {
  const { markdownRemark: post } = data; // data.markdownRemark holds our post data
  return (
    <div className="blog-post-container">
      <Helmet title={`Your Blog Name - ${post.frontmatter.title}`} />
      <div className="blog-post">
        <h1>{post.frontmatter.title}</h1>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: post.html }}
        />
      </div>
    </div>
  );
}

そして最後、動的ページ生成を可能にする NodeAPI を作成。(gatsby-node.js)

const path = require("path");

exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;

  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
};

これでできるかな???できた!

次回は、Hello World テンプレートを試します。

References

日本の Gatsbyユーザの方

まだそんなに GatsbyJsをつかってブログ作成している人は少なさそうなので、検索で引っかかったブログを集めてみた。

25 Jun 2018, 06:24

Railsのbetter_errorsとRubyMineの連携でコードにジャンプ

はじめに

RubyMine, とてもいい。使わない人は、人生損してる。

railsでエラーがでると、ブラウザが赤くなりエラー画面がでるのだけれども、 このエラーからRubyMineで表示しているコードの該当部分にジャンプできたら最高だと思っていたら、 better_errorsというgemで解決できそうなので、鼻血でた。

better_errors

better_errorsを導入すると、 railsのエラーをいい感じに表示してくれる。

導入は、Gemfileに以下を記述。

group :development do
  gem "better_errors"
  gem "binding_of_caller"
end

dockerとの連携

そもそも、docker, rails5では、better_errorsが既知障害で動かなかった。

config/initializers/development/better_errors.rb を新規作成して、以下を記述。

if defined? BetterErrors
  # Private subnets defined by RFC1918 as stated in https://docs.docker.com/v1.5/articles/networking/
  BetterErrors::Middleware.allow_ip! '10.0.0.0/8'
  BetterErrors::Middleware.allow_ip! '172.16.0.0/12'
  BetterErrors::Middleware.allow_ip! '192.168.0.0/16'
end

RubyMine & Dockerとの連携

config/initializers/development/better_errors.rb に、以下を記述。

if defined? BetterErrors
  BetterErrors.editor = proc { |full_path, line|
    full_path = full_path.sub(Rails.root.to_s, '/home/tsu-nera/RubymineProjects/techacademy/weightodon')
    "rubymine://open?url=file://#{full_path}&line=#{line}"
  }
end

Docker環境をつかうには、一工夫必要だ。 Rails.rootは Docker環境でのパス、’/home/tsu-nera/RubymineProjects/techacademy/weightodon’のところはローカル環境でのパス。 これを subコマンドで置換する必要がある。

Ubuntu環境での設定

Ubuntu環境では、Chromeから xdg-openが発行されても、それに対応するハンドラがないのでソースが開けない。

以下を参考に、解決した。 - https://gist.github.com/IslamAzab/9d00ce7096bd429ddd69

はじめに、RubyMineの Tools > Create command-line Launcherからコマンドラインで起動するためのコマンドを作成。ここでは、mineという名前。

次に、desktop entry を作成。

# /usr/share/applications/rubymine-urlhandler.desktop

[Desktop Entry]
Name=RubyMine
GenericName=URI handler
Exec=/usr/local/bin/rubymine-urihandler %U
Icon=RubyMine
Type=Application
StartupNotify=true
Categories=GNOME;GTK;Utility;TextEditor;Development;
MimeType=x-scheme-handler/rubymine

次に/usr/local/bin/rubymine-urlhandlerを作成

#!/bin/bash
# /usr/local/bin/rubymine-urlhandler

# $1 is formatted like subl://open?url=file://%2Fpath%2Fto%2Ffile.txt&line=xx 
url=$1

# Strip off subl://open?url=file://
file=${url#*file*//}

# Strip off &line=...
file=${file%&line=*}

# Decode URL
file=$(echo $file | sed "s@+@ @g;s@%@\\\\x@g" | xargs -0 printf "%b")

# Strip off everything but what's after &line=
line=${url#*line=}

# Launch sublime
mine "$file:$line"

sudo update-desktop-database を叩く。

これで、better_errorsのリンクからRubymineが開けるようになった。

23 Jun 2018, 22:37

CAREER SKILLS ソフトウェア開発者の完全キャリアガイド を読んだ

はじめに

結構待望にしていた、ジョン・ソンメズ氏の SoftSkillsの続編、CareerSkills ソフトウェア開発者の完全キャリアガイド が発売されたので、早速購入して読んでみた。

感想

5つのパートにわかれていて、ソフトウェア開発者のキャリアの段階ごとにオススメの章が分かれている。初心者、中級者、上級者。ちなみに、私は中級なので、後半の章に書いてあるものが役に立った。

この本は、分厚い。600ページ以上。なので、自分に必要な部分を取捨選択して読んでいくのが良い。幸い、大事な部分は太字になっているので、目立つ。

アメリカのソフトウェア開発者向けなので、途中、日本人にとってはいらない部分もある。とはいえ、読後感は SoftSkillsと同等、それ以上。私のソフトウェア開発者のキャリアの方向性を変えるものだっだ。

私がこの本の翻訳を待っていた理由は、私の現在の境遇にある。SoftSkillsを読んだときは会社員だったので、自分のキャリアは会社が決めるものだと思っていた。しかし、わけあって、現在はフリーランスのWebエンジニアになろうとしている。なので、自分のキャリアについて、会社まかせではなくて、自分で責任を取っていかなければいけなかった。それはとても不安なことで、これからどう生きていけばいいのだろうか、と思い悩んでいた。

著書のなかでソンメズ氏は、会社員は安定しない、とバッサリ言い放つ。そして、自分のキャリア戦略(戦略ということが好きなようだ)について、たくさんの紙面を書いて解説している。

社会的評価を築き、専門分野を作り、ブログを書くこと

私は、この言葉によって、自分がこれからどういうように振る舞い、自己の立場を確立すればいいか、教え諭された気がした。

私のアクションリスト

この本を読んだあとに、実行しようと思った私のアクションリストを以下に列挙する。

  • SoftSkillsを改めて読みなおす。
  • どういうことで有名になりたいか、個人ブランドのスローガンを決める。
  • 追求する専門分野を決める。
  • RailsとReactエンジニアになるための具体的なキャリアプランを立てる。
  • ブログの改築をしてSEOを意識したサイトにする。
  • ブログライティングのスキルをあげるための書籍か教材を購入する。
  • RailsでWebサービスをつくりポートフォリオ作品とする。
  • ミートアップかもくもく会に参加してみる。
  • サイドプロジェクトをはじめて、継続する。

読書メモ

以下は、本文のなかから私がこころに響いたフレーズを抜き出したり要約したものである。

第1部 ソフトウェア開発者になる方法

ソフトウェア開発者になるための具体的なプランを立てることが必要。ソフトウェア開発者は、アスリートとおなじような広い概念なので、どのスポーツで勝負するかを選択しないといけない。

第2部 就職する方法

職歴がない状態で採用されるコツは、コーディングの実力があることを面接官に示すこと。具体的には、

  • オンラインで存在感を示す(つまりブログを書く)。面接官はまず名前をグーグル検索するので。
  • ポートフォリオを用意する。まずは、GitHubのプロフィールが魅力的なものにする。作品にはテストコードを含める 就職先を見つける準備として、まず見栄えのよい履歴書を書く。

人脈を築く。具体的には、ミートアップやもくもく会に顔を出す。手土産でLTをすると歓迎される。

第3部 ソフトウェア開発の必須知識

ソフトウェア開発に関わる知識が網羅的に扱われる。

第4部 ソフトウェア開発者の仕事

本物のワークライフバランスを達成することとは、ワークとライフの境界をあいまいにして、すべてが生活になるようにすることだ。落合陽一さんのWork as Lifeと同じ。

第5部 キャリアの伸ばし方

社会的評価を築くこと。スキルがあっても評価がなければ意味がない。

個人ブランドを作る。どういうことで有名になりたいかを決める。専門分野を利用して自分を売り込む。追求する専門分野を決める。

スキルの鮮度を保つ。ブログを読む、本を読む。現実的な目的を持って学ぶ、焦点を定める。サイドプロジェクトを持ちコードをたくさん書く。今までコードをあまり書いてこなかったのはチャンスがなかったからではない、自分でチャンスをつくらなっかた。

ブログを書く。参入障壁が少ないのに、極めて効果的。他の人が理解できる形で自分の考えをまとめるスキルが身につく。コミュニケーションスキルの向上。 自分はコミュ障で話し下手なので、ブログで鍛えるか?

フリーランスで仕事を得るのは大変。安定して稼ぐ方法は、クライアントが自分の方にやってきてくるようにする。そのためには、社会的評価を築き、専門分野を作り、ブログを書くこと。専門分野をつくってブログを書くことをはじめたい。ブログはもっているのだけれども、自分のダメダメなライティング力と、全くSEOを考慮しないサイト構成をなんとかしたい。

どこかの会社に就職すれば、引退したり年金をもらったりするまでの20年、30年、そこに留まることができる時代は終わった。職の安定や保障が不要なくらいに自分を高めてみてはどうか?今日では、職の保障や安定は幻に過ぎない。

サイドプロジェクトをいつも手がけることで、ソフトウェア開発者としてのキャリアを伸ばす。案が思いつかなければ、既に存在するもののクローンを作るのがよい。

おわりに

私のSoftSkillsの書評のリンクも張っておきます。

21 Jun 2018, 19:41

プログラミング経験者はオンラインスクールよりも独学をオススメしたい

はじめに

よいとみんながオススメしていたので、 20万かけて申しこんだ TechAcademyのオンライン講座、 おもっていたほどのものではありませんでした。

結局オススメしている人たちは、アフィリエイトで儲けたいのでしょう。

経験者にはやさしすぎるのでは??

私がもうしこんだのは、WEBアプリケーションとフロントエンドがセットになって学べるコース。

この講座を通じて、WEB技術、具体的には Ruby on Railsと JQueryを学べる。2ヶ月で 23万円なり。

オンライン教材なので、基本は用意された教材を独習していくのだが、 メンターとのオンライン会議が週2回あったり、Slackで質問に答えてくれたりして、 結構サポートは手厚い(そうだよね、結構お金払っているので)

教材はよくできており、初心者にはよいかもしれない。しかし、私は、この道 xx年の組み込みエンジニアだぞ!

講座のほとんどが瞬殺できるほどの簡単さだった。 TechAcademyの教材は、難しいという口コミもある。しかし、私には簡単だった。

私の実績では、講座開始から3日で、正確には事前期間もふくめて10日間で教材を一通りやり終えた。ここまで、60時間。 一応、目安の時間が書いてあって、教材を一通り終わらせるのは、 120時間 x 2 かかるのだが、私の場合は 30時間 x 2で終わった。

まあ、そうはいってもまだオリジナルサイトの作成課題が残っているので、残り期間はじっくりと最終課題に取り組んでいこうと思う。 プロのWebエンジニアが手厚くサポートしてくれるので、この機会を存分に活用したい。

結論: 経験者はプログラミングスクールよりも独学で

ある程度技術がわかっていてる経験者ならば、私と同じくらいで終わってしまうだろう。

私と同じようにある程度知識や経験がある人は、 プログラミングスクールに通うよりも独学したほうがいい 、というのがこの記事で伝えたいことだ。

21 Jun 2018, 05:13

Dockerで立ち上げたRails + MySQL 環境をRubyMineで接続

はじめに

Dockerで立ち上げた、Railsサーバ、MySQLサーバに RubyMineから接続する方法を紹介します。

Dockerを利用して、Rails環境をたちあげる手順は、前回の記事を参考にしてください。

RailsサーバにRubyMineで接続

これで実現できることは、ローカルPCに RubyやRailをインストールしてなくても、 リモートにあるDocker内のRubyリモートインタプリタを利用して、RubyMineが動作することだ。

  • 設定 > 言語&フレームワーク > Ruby SDK及びGemを選択。
  • +の追加ボタンを押す。新規リモートを選択。
  • Docker Composeを選択し、以下の図のように設定
    • サーバ: 好きな名前
    • 構成ファイル: ./docker-compose.yml
    • サービス: docker-compose.ymlで定義したサービス名

https://gyazo.com/678a9bcd1d6a9a6d89923067d63640fb

これで、リモートインタプリタとしてDocker内のRubyが利用できる。

MySQLサーバにRubyMineで接続

これで実現できることは、ローカルPCに MySQLをインストールしてなくても、 リモートにあるDocker内のMySQLを利用できる。RubyMineは、DBのための見やすいViewerを提供する。

Docker内で立ち上げたMySQLと、ローカル環境ですでに立ち上げていたMySQLがどちらもPort 3306 を利用していたので、 Dockerが立ち上がらなかった。

docker-complse.ymlを以下のようにして、3306 > 3307にポートフォワーディングする設定を書いた。

db:
  image: mysql:5.5
  volumes:
    - db-volume:/var/lib/mysql
  environment:
    MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
  ports:
    - 3307:3306
  • データベースビューで+の追加ボタンを押す。
  • データ・ソース > MySQLを選択
  • 以下のように設定。

https://gyazo.com/c41c17d670472b824692b6a8d10b0ee6

これで、データベースの中身がグラフィカルに分かるようになりました。

https://gyazo.com/b60d989df0987c5732786d7a14e35abe

おわりに

Dockerのすごさがようやくわかってきたかもしれない。

19 Jun 2018, 01:23

Ruby on Rails + MySQL 開発環境を Dockerで構築

はじめに

TechAcademyの Webエンジニアになるべく、Webアプリケーションコースを受講している。

受講の感想はあとで書くとして、このコースの課題としてRailsアプリをつくることになった。

自分のPCはUbuntuなので、環境は比較的容易に作成できるものの、やはりローカル環境はあまり汚したくないので、 流行りのDockerを利用することにした。けっこう、この手の情報は Web上になかったので、まとめてみる。

Dockerを、正確には Docker Composeを利用することで、Railsのコンテナと MySQLのコンテナを Dockerで動かし、 Rails server, DB serverをローカル環境にインストールすることなく、開発が可能になるのだ。

それでは、いってみよう。

設定ファイルの用意

Gemfile, Gemfile.lock の準備

Docker内で bundle install を実行して railsをインストールするために, Gemfileを用意。

source 'https://rubygems.org'
gem 'rails', '5.0.6'

空の Gemfile.lockも用意。

Dockerfileの準備

以下のような、Dockerfileを用意。

FROM ruby:2.4.1
RUN apt-get update -qq && apt-get install -y build-essential nodejs
RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app

docker-compose.ymlを用意

webと dbの2つのコンテナをたちあげる docker-compose.ymlを用意。

version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    image: mysql:5.5
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
volumes:
  db-volume:

docker-composeの実行

Railsのコンテナを起動してRailsのプロジェクトを作成する。

$ docker-compose run web rails new . --force --database=mysql --skip-test

Railsイメージのビルドを実行する。

$ docker-compose build

config/database.ymlのdefault内の項目 host: localhostを dbにを修正。

コンテナをデタッチドモード(バックグラウンド)で実行する

$ docker-compose up -d

RailsのコンテナでDB作成のタスクを実行する

$ docker-compose run web bundle exec rake db:create

マウントしたvolumeの書き込み権限がない問題

Dockerの操作は基本すべてroot権限で実行されるので、生成されたRailsアプリの所有権が root:root となる。ログインユーザーに変更しておく。

$ sudo chown -R $USER:$USER .

16 Jun 2018, 22:33

富士通コンピュータテクノロジーズ(FCT)を退職します

はじめに

退職願も受理されたようなので自分も退職エントリを書いてみようと思うのだが、退職エントリというものはとかく辞める会社に対するマイナスな内容だったり、ネガティブな内容だったりで、読んでいてあまりよいものではない。そこで、自分が退職エントリを書く心がけとして、辞める理由やネガティブなこととかは書かないようにしたい。

これまでのこと

富士通コンピュータテクノロジーズに2010.04から新卒入社して、ソフトウェア開発者を8年やってきました。

職務経歴書っぽいけど、つらつらと今までの経歴を書きます。

  ストレージシステム(ETERNUS DX) ファームウェア開発 201004-201401
  [概要] システム制御、とくにエラーリカバリの機能
  [担当] 詳細設計、プログラミング、評価
  [技術] C言語, VxWorks, Clearcase

富士通のストレージシステム ETERNUS の S2, S3シリーズについて、新卒から4年間携わってきた。

  社内R&D 201402-201407
  [概要] インフラ機器を管理するためのアプリケーションのプロトタイプの実装
  [担当] プログラミング、評価
  [環境] Ruby, RSpec, Selenium, RubyTk, Excel VBA, Subversion

窓ぎわエンジニアとして部内の研究開発費を使って、 アプリケーション開発をしていたが開発中止になって長くは続かなかった。

  WAN 高速化 研究開発 201408-201502
  [概要] Windowsのファイルアップロード、ダウンロードの高速化についての研究開発
  [担当] 詳細設計、プログラミング、評価
  [技術] Java6, Windows, Wireshark, Subversion

遠隔地からのファイルアクセスを高速化するデータ転送技術を開発 : 富士通

  Automotive Grade Linux(AGL)プロジェクト 研究開発 201503-201506
  [担当] リサーチ

開発中止。

  インフラ管理ソフトウェア開発 (ServerView Infrastructure Manager) 201507-201512
  [概要] インフラ機器を管理するためのソフトウェア開発
  [担当] 要件定義、基本設計
  次世代ストレージシステム ミドルウェア開発 201708-201806
  [概要] ソフトウェアアップデート、エラーリカバリ機能開発
  [担当] 詳細設計、プログラミング、評価

現在開発中なため、機密情報に触れるかもしれないので書きません(>_<)

会社のこと

うちの会社、ネット上に情報があまりないので、今後の就活生のみんなのために企業文化やらを書いてみる。機密情報に触れるようなことは書きません。

組み込み開発の専門会社と名を売っているのだけれども、実は幅広く色んな業務をしていてそこまで組み込みに偏っているわけではない。組み込みソフト開発というと、C/C++なイメージが自分のなかではあるのだけれども、実際はC/C++の仕事ばっかりやっているかというとそうでもない。C#やJavaやRuby, Pythonなどなど。

昔から富士通本体からの受託製品開発をしてきた。サーバ、ストレージ、ネットワーク、携帯、PCなどなど。ただし、それは変わりつつある。富士通のビジネスモデルがものつくりからサービスの提供へとかわっていって、ものつくりから離れてきた。この傾向は今後も続いていくと思われる。最近の傾向として、富士通本体からの受託以外にもチャレンジしている。グループ会社や他社の受託とか、自主ビジネスとか。まあようは、部署によって、富士通のプロダクト開発以外にもいろんなことをやっている。

大企業のお膝元なので、安定している。給料や福利厚生も富士通グループは一律平等だ。川崎工場の敷地内に本社があるため、建物はボロいものの、工場内の施設も利用できる。ただ、仕事も対等かというと、全然そんなことはない。親会社の富士通から受託で仕事をもらっているので、立場上上下関係ができている。そこは親会社子会社の関係上、しかたがない。

家庭を大切にしているひとや、趣味やプライベートを充実させようとしている人が多い気がする。エンジニアは家に帰っても技術を磨くために勉強するべきだと思うが、いっぽうで仕事は仕事として割り切って趣味を充実させたいという考え方はあってもよいと思っている。技術動向にのんびりしているひとが多い。まあようは意識やレベルがけっこう低いのだ。

辞める理由

円満退職をしたいので、書きません(>_<)

これからのこと

次のお仕事が決まっていません。フリーランスのWEBエンジニアになろうと思っていて、ここ数ヶ月はとりありず退職金で食いつなぎながらRuby on Railsの勉強と筋トレをしようと思っています。お仕事ください!

10 Jun 2018, 22:17

そうだ、ひきこもろう

現在転職を考えているのだが、最近フリーランスに憧れてきた。結論から書くと、

Ruby on Railsを学んで、在宅フリーランスエンジニアにオレはなる!

フリーランスに憧れる3つの理由

フリーランスに憧れる理由は以下のとおり。順番にコメントする。

  • リモートワークがしたい
  • コードをもっと書きたい
  • 金を稼ぎたい

リモートワークがしたい

会社員とか、朝がつらくて無理だ。会社から徒歩3分の場所に住んでも遅刻するので、どうしようもないと思う。

なので、家から仕事したいなとか、密かに妄想し始めた。リモートワークをしたい。

リモートワークができれば、朝ゆっくり起きることができる。

自宅で作業できれば、まったりおいしいコーヒーを飲みながら、Jazzを聴きながら仕事できたりする。 自慢のトリプルディスプレイの30万の機械学習用パソコン、ゲーミングチェアで仕事ができる。 または気分が乗らないときは、カフェにPCを持ち込んでドヤったり、勉強カフェに行って仕事ができる。いわゆるノマドワーカー。

コードをもっと書きたい

この前自分の仕事を振り替えってみると、ちっとも会社は自分にコードを書かせてくれていないことが分かった。

上の記事にも書いたのだが、自分はプログラマだと思っていて、もっとプログラミングをしたいのに、実際はあまりプログラミングをしていない。 なにをしているかというと、仕様書つくったりテストしたり、上流ではないのだが、下流でもない。なんとも中途半端な中流ばかりをしている気がする。

これからもっとコードがかけないことが予想される。OSSを組み合わせてそれを評価したり、リーダになったり上流をまかされる傾向が強い。

プログラマとして、もっと自分は成長したいのだ。WordやExcel、パワポ職人になりたくて、エンジニアになったのではない。

フリーランスになれば、下流のコーディングの仕事にあふれている。上流をすることはあるかもしれないが、仕事は選べるのでコーディングを選べばよい。

金を稼ぎたい

エンジニアで年収1000万を越えるには、どうすればいいか?

  • マネージャー
  • コンサル
  • 外資系
  • フリーランス

マネージャーとコンサルって、ソフトウェア開発から離れてるよね。自分がマネージャーにはなれないな。コンサルはデータアナリストにならばいいかもしれないが、論理的思考で抜きん出る自信があまりない。 外資は英語を使わないといけない、まあ使えるけどね。

そこで現れるフリーランスという道!金持ちになるにはこれではないか??

今年、350-400万くらいしか年収なかったので、年収を倍にしたい。年収をあげるにはフリーランスしかない!

リモート案件についての調査

リモート案件をとってくるにはどんな仕事を選べばよいか?いろいろ調べると、たどり着くところは、一つ。

ずばり、WEB系

Web系は低予算の案件が多い,案件の数が多い、短期プロジェクトが多い、などの理由から WEB系。

残念ながら、リモート案件は、今現在多くない状況だ。しかし、時代は働き方改革。これから、どんどんリモートワークが導入されていくことは明らか。風はこっちに吹いている!

今まで、PythonやAIの勉強をしていてデータサイエンティストになりたいとおもっていたけれども、ここでまさかの方向転換だ。

リモート・非常駐、在宅の案件はどの言語が有利か??

ちなみに、私ができるのは、C言語、Java、Python。

  • Java … 全然ダメ。常駐型SIerの言語。
  • Python … 機械学習、 AIで単価がいいけれども、リモート案件はない。
  • Ruby(Rails)
  • PHP

Ruby on Rails か PHPの2択だ。Rubyは3ヶ月間だけ仕事で使ったことがあって馴染みがあるので、Railsを選ぼうと思う。

参考までに今回調査に使ったサイトは、以下。

以下のエージェントは、常駐型の仕事しか紹介されていない。

結論

Ruby on Railsを学んで、在宅フリーランスエンジニアにオレはなる!

フリーランスを目指すときの信条は以下のとおりだ。

  • 常駐型よりもリモート案件であること
  • 上流よりも下流であること
  • 単価よりも成長できること