paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

「現職への転職を考えたきっかけは?」活躍するエンジニアたちに聞きました【paizaインタビュー】

f:id:paiza:20171226112548j:plain

エンジニアで転職を考えている人にとってのヒントが満載です!


IT/Webエンジニアのための転職サイト「paiza転職」では、転職を経験されたエンジニアの方、そしてその企業の採用担当者の方へのインタビュー記事公開しております

どういうきっかけで転職を考えたのか、そして、転職活動でうまくいったこと、苦労したことは? 実際に転職したエンジニアの生の声をご覧ください。


「プレーヤーとしてエンジニアを続けていきたい」 転職で出会った理想の環境

最初にご紹介するのは音楽アーティストのファンクラブサイトなどを手がけるエンタメ系IT企業、株式会社アクセルエンターメディアに転職したお二人。それぞれ違う経歴ながら、ともにプレーヤーとして技術を追い続けていきたいと決意して同社へ転職。今はとても充実した環境で仕事ができていると口をそろえます。彼らが転職活動でどうやって理想の会社に巡り合えたのかをじっくりお聞きしました。


――それぞれ今回の転職活動では、企業選びのポイントとして、どんなところを意識していましたか?

Mさん: 何よりプレーヤーとして仕事ができる環境を求めていました。そのほかでは、エンドユーザーの顔が見えて、風通しのいい会社で働きたい思いも強かったです。それもあって、あまり規模が大きくない会社のほうがいろいろと合ってそうだな、と思ってましたね。

Sさん: 自分はとにかくフロントエンドがやりたかったのでそのポジションかどうか、あとは自社開発をやっているかどうかを見ていました。まずは面談に行ってみて、その会社でどんな人が働いているのかを見たあとに決めようと思っていました。

――入社して実際に業務をされてみていかがですか。

Sさん: とても充実していると思います。特に変わったなと感じるのが、今は自社開発なので、前職の客先常駐スタイルと比較して施策の提案がしやすくなったことですね。社内で積極的に意見できる環境になったことは自分にとって大きいです。

Mさん: 今はプレーヤーとして、開発がメインに仕事ができているのでとても楽しいです。また、今まで苦手としていたインフラやネットワークにもチャレンジできていますし、自分にやれることも増えましたから、満足しています。瞬間アクセスが何十万といくこともありますし、改めてやりがいを感じていますね。

続きはこちら!
paizaインタビュー:株式会社アクセルエンターメディア


最先端領域で裁量をもって開発をしたい IoTの注目ベンチャーへ転職

続いては、クラウド録画防犯カメラのプラットフォームを手掛ける注目企業、セーフィー株式会社に転職されたエンジニアへのインタビューです。AIやIoTといった新技術が目覚ましい勢いで生活に浸透する時代を迎え、志あるエンジニアは、より自分の興味に沿ったフィールドで活躍のチャンスを求めるようになってきました。セーフィーに転職した大場悠介さんもそのひとりで、スキルや興味を生かせる環境を探してこの会社へ。現在、充実の日々を送る大場さんに、現職の魅力を語っていただきました。


――10年も勤務した会社を辞めて、今回転職しようと思った理由とは何だったのでしょう?

前職にいたときから、世の中が劇的に変化しているのを感じていました。5年前にはまったく想像もできなかったような世界になっているな、と。たとえば、AIとかドローンなんて、5年前にはこうなっているなんて思いもしなかったですよ。

そして、これからの5年はもっと変化のスピードが加速していくんだろうなと思いまして。そういう未来を想像したときに、自分もその波に乗って仕事をしたいと思ったんです。前職でも最先端の領域で仕事はしていましたが、ニッチな部分が大きかったんですよね。これからは自分が主導して世の中を変えられるようなものを作っていきたい、そういうものが作れる環境で働きたいな、と考えるようになりました。そんななかで、まず注目したのがIoTでした。

――今の仕事で印象的なことはありますか?

スピード感は前職とは全然違いますね。開発スピードはもちろん、会社としての判断も早いです。周りのエンジニアはみんなスキルのある人ばかりですが、手取り足取り教えてもらえる環境ではありません。今は会社の求めるスピードについていくために、とにかく勉強、勉強の日々です。

チームを組んでみんなで一生懸命何かをするというよりは、各々が自律的にチャレンジしていって、どんどん成果物ができあがるというスタイルです。エンジニアはみんなスキルがあってポリシーを持つプロフェッショナルの方々なので、技術的な議論が白熱することもあります。切磋琢磨できる環境で仕事をすることができているので、とても充実しています。

続きはこちら!
paizaインタビュー:セーフィー株式会社


自分の得意な言語で一点突破 非エンジニア職からゲーム開発へ

次にご紹介するのは、エンジニア職未経験からゲームエンジニア職に転職するという異色のキャリアを歩む男性。『SKYLOCK』『大戦乱!!三国志バトル』『大連携!!オーディンバトル』など、数々のモバイルコンテンツで知られる株式会社gloopsへ見事転職された美濃爽太さん(25歳)にお話を聞きました。


――転職活動では、どんなポイントで企業を選ばれましたか?

技術はあっても、前職ではエンジニア専任ではありませんでしたし、実質未経験のようなものでしたので、売り込めるものがあまりありませんでした。ですから、未経験でもエンジニアとして採用してくれるところとなると、それだけで絞られました。さらに、アピールポイントはスキルだけだと思っていたので、何より自分が得意としている言語、C#をメインに扱っている企業で選んでいきました。

今の会社ともう1社を受けて、結果的にどちらからも内定はいただけたのですが、一方はC#がメインではなかったんです。やはりエンジニアとして生きていけるか不安でしたので、最終的には得意とする言語をメインに扱うほうで、というのが決め手になりました。

――転職活動ではpaizaを使っていただきましたが、どういう理由からだったのでしょうか。

知ったきっかけは知人からの紹介でした。とにかくエンジニアになりたい気持ちが強かったので、特化した媒体だということで使い始めました。登録して2日くらいで今のスキルランクを取って、そこからはエンジニア職未経験でも応募できる求人をひたすら探していましたね。そのなかでこの会社を見つけました。

――今後、この会社でどんなキャリアを築きたいと考えていますか?

スペシャリストとして、尖った技術力を持った人材を目指していこうと考えています。欲を言うなら、もっとコードを書きたいですね。実は、ゲームへのこだわりはそこまでないんです。ゲームってどういうふうに動いているんだろうみたいなことが知りたくて入社したので、方向としては将来もっとベースの部分に関われればいいなと思います。それは会社にも希望を伝えています。

続きはこちら!
paizaインタビュー:株式会社gloops


自分の作ったもので人々をハッピーに その思いを自社サービス企業で実現

最後にご紹介するのは、アフリカの未電化地域に「電力量り売り」サービス『WASSHA(ワッシャ)』を提供している株式会社Digital Gridに、フルスタックエンジニアとして転職された方へのインタビューです。同社に転職された黒田悠人さんは、それまでは受託開発がメインのSIerで働いていましたが、あるきっかけで本格的に転職活動を始め、この会社にめぐり合ったそうです。入社までの経緯や同社で働こうと決意するに至った経緯を聞きました。


――今回、転職を考えたのはどういう理由からだったんでしょうか。

受託開発ではクライアントがいるので、開発していて使いにくいなと感じるなど、たとえ自分が納得のできないものだったとしても成果物として出さなければいけないときがあります。エンジニアとして最初のころは、設計通りに作れればそれで十分だったのですが、キャリアを重ねる中で、だんだんと「自分が作ったものにどれだけ意味があるのか」を知りたいという欲求が強くなってきたんです。「本当にクライアントのためになるものを作れているのだろうか」と考えることが増えていきました。業務量自体も案件によっては膨らむことがあって、心身ともに少しずつ疲れてきていたと思います。

そんなある日、仕事でとても疲弊した日があって、帰宅後に妻の前でポロっと仕事の愚痴が出てしまったんです。よっぽど疲れた顔をしていたんでしょうね、妻から「そんなにつらいなら転職したらいいんじゃない? つらそうな顔を見るのは私もつらい」と言われてしまって。そこから本格的に「妥協せずにやりたい仕事ができるところへ転職しよう」と思うようになりました。

――今回の転職活動ではどのくらいの企業に応募されたんですか?

本格的に就職活動を進める前から人材紹介会社は使っていて、そのときからいくつか応募してはいました。ただ、企業研究をしたり面接を受けてみたりしても、「ここだ」と思える企業になかなか巡り合えませんでしたね。他には知人のつてで1社お話をいただいていたところがあって、そこへの入社も検討していました。

paizaを転職に使い始めたのはそのころです。もともとはプログラミングの勉強のために使っていたんですが、その後求人票もパラパラと見るようになって、そのなかで見つけたのが今の会社でした。初めに見たときからとても興味深い内容だったので、「気になる」ボタンを押してみたんです。するとその後スカウトメールが送られてきまして。「お互いに気になっているならお話を聞こう」と思い応募したらそのままあれよあれよと決まってしまいました。結局、paizaを使って応募したのはこの会社だけだったんですが、その1社で決まりました。

――結果的にお互いに相思相愛だったんですね。

自分の考えていた企業選びのポイントにすべて合致していましたから、かなり志望度は高かったですね。

さらに、この会社の「『電気がある暮らし』を世界中の人々に。」という理念にも非常に共感できました。実は、過去に海外勤務の経験があるんです。当時仕事をしていた町には、廃墟のようなところにしか住めず、劣悪な環境で生活を強いられている人たちがまだまだたくさんいました。その記憶は今も自分の頭に強く残っているんですよね。この仕事を通じて、自分が作ったものでそういう人々の生活を変えていければいいなと思ったんです。

続きはこちら!
paizaインタビュー:株式会社Digital Grid


その他のインタビュー記事はこちらから読めます! お休みが多いこの時期、転職を検討されている方はぜひご一読ください!




paiza転職は、転職時のミスマッチをなくし、エンジニアがより技術面にフォーカスしたやりがいある仕事を探せる転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。

paiza転職

まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。

paizaのスキルチェック

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

初心者でも簡単快適なクラウド環境!HTMLでPaizaCloud拡張アプリ作ってみた

f:id:paiza:20171222035316p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@)です。

PaizaCloud Cloud IDEはブラウザ上で動き、デスクトップOS(Windows, Mac)のように使えるLinux環境で、簡単・手軽にWeb開発などができます。

クラウド上で動くので、手元で面倒な開発環境を設定する必要はなく、いつでもどこでも、すぐに開発できます。

PaizaCloudでは、ブラウザ上だけで操作できるように、ファイル管理、テキストファイル編集、ターミナル、ブラウザ(ブラウザの中で動くブラウザ)…などといったツールを利用できます。

これだけでも十分に使えるツールがそろっていますが、パソコンやスマートフォンのように、さらに自分が使いたい他のツールも追加することができれば、もっと便利ですよね。

そこで、PaizaCloudでは、PaizaCloud拡張アプリがインストールできるようになっています。

PaizaCloud拡張アプリをインストールすれば、自分の好きなツールを追加して機能を拡張できるんですよ。自分で好みのPaizaCloud拡張アプリを作ることもできますし、他の人が作ったものを追加することもできます。作ったアプリを友達など、他の人に使ってもらえるとさらに楽しそうですね。

PaizaCloud拡張アプリは、Webページと同じく、HTMLとJavaScriptだけで簡単に作れるようになっています。

今回は、実際に簡単なお絵かきアプリを例にして、PaizaCloud拡張アプリを作ってみましょう!

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。まずは、PaizaCloudにログインします。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

ログインできたら、サーバを作ります。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

ここでは、特に何も変更せずに、もう一度「新規サーバ作成」ボタンを押します。

f:id:paiza:20171218232242p:plain

3秒程度で、開発環境がブラウザ上にできあがります。

標準ツール(ファイル編集ツール)の使い方

PaizaCloud拡張アプリの前に、まずは標準ツールを見てみましょう。

画面左側のアイコンボタンが標準ツールです。一番上の「新規ファイル」で、テキストファイル編集ツールが起動します。アイコンをクリックしてください。

f:id:paiza:20171218232330p:plain

ファイル名を入力する画面が出てくるので、ファイル名を指定して、「作成」ボタンを押します。

f:id:paiza:20171218232345p:plain

テキストファイル編集ツールが起動して、ファイルを編集できるようになります。作成できたら、何か書いてみましょう。

f:id:paiza:20171218232517p:plain

書けたら「保存」ボタンを押すか、「Ctrl-S」や「Command-S」キーを押して、ファイルを保存します。

このように、ファイル編集ツールでは、テキストファイルの読み込み、編集、保存ができるようになっています。

他にも、ターミナル、ブラウザ、デスクトップに表示されているファイル管理ツールなども利用できますので、試してみてください。

PaizaCloud拡張アプリのインストール

標準ツールに慣れたら、PaizaCloud拡張アプリを見てみましょう。

PaizaCloud拡張アプリは、画面左側のアイコンボタンの一番下にある、PaizaCloudのロゴと"Apps"と書かれたアイコンをクリックしてインストールします。

f:id:paiza:20171222033819p:plain

アイコンをクリックしてみましょう。PaizaCloud拡張アプリのインストール画面が表示されました。

f:id:paiza:20171222033936p:plain

「インストールするPaizaCloudアプリを選択」でアプリを選び、インストールボタンを押すと、拡張アプリをインストールできるようになっています。

インストールしたアプリは、アイコン一覧に追加されます。

今回はPaizaCloud拡張アプリを作りますので、「PaizaCloudアプリを作成」ボタンを押します。

PaizaCloud拡張アプリ作成画面

PaizaCloud拡張アプリ作成画面が表示されました。

f:id:paiza:20171222034107p:plain

まずは、アプリケーションの名前を入力してみましょう。アイコンや、アプリの説明、関連づける拡張子なども指定できます。

画面下のテキスト編集部分で、HTML、JavaScriptを使ってアプリを作っていきます。簡単なテキストエディタのテンプレートが表示されていますので、これを書き換えて作っていきましょう。

PaizaCloud拡張アプリの作成

まずは、何も変更せずに保存(Save)ボタンを押して保存してみましょう。画面の真ん中あたりで、拡張アプリのプレビューが表示されます。

f:id:paiza:20171222034247p:plain

このプレビューを見ながらHTML、JavaScriptなどを書いていきます。(External URLをチェックして、外部のサイトを指定することもできます)

次に、タイトルなどを変更して保存(Save)ボタンを押してみます。すると、変更した内容が、すぐにプレビューに反映されます。

PaizaCloud拡張アプリのJavaScript API

HTML、CSSだけではPaizaCloudの操作はできません。そこで、PaizaCloud拡張アプリのJavaScript APIを利用します。

このAPIを利用することで、ファイル操作などができます。

APIではPenpalというライブラリを利用しています。

APIを利用するには、まず、以下のようにPaizaCloudと接続します。

const connection = window.Penpal.connectToParent({methods: ...});

methodsの中では、拡張アプリが呼び出された時の動作を関数で設定します。以下のような関数が設定できます。

API関数 機能
openFile(filename) ファイルがダブルクリックして開かれた時

拡張アプリから、PaizaCloudの機能を利用するには、このconnectionオブジェクトを使い、拡張アプリのAPI関数を呼び出します。

以下のようなAPI関数が利用できます。

API関数 機能
openSaveModal(options) ファイル保存ダイアログの表示
openLoadModal(options) ファイル読み込みダイアログの表示
writeFile(file, data, options) ファイルの書き込み
readFile(file, data, options) ファイルの読み込み
execFile(file, args, options) 指定したファイル(プログラム)の実行

APIはconnectionに関数名をつけて呼び出します。結果はPromiseで返ってきますので、以下のように呼び出します。

connection.[関数名](引数).then((result(結果)) => { /* 結果処理 */});"

writeFile / readFile / execFileなどの関数は、Node.jsの対応する関数と同じ呼び出し方です。(ただし、結果はコールバックではなく、Promiseで取得します。)

作成時のテンプレートでは"script.js"で、APIを呼び出してファイルの読み込み、書き込みをおこなっていますので、参考にしてみてください。

お絵かきアプリを作る

今度は、最初に作られたテンプレートを変更してお絵かきアプリを作ってみます。

まず、HTMLファイルで絵を描くためのcanvasを用意します。

index.html:

<html>
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="header">
    <span>My Paint App</span>
    <button type="button" class="btn btn-default save">Save</button>
    <button type="button" class="btn btn-default load">Load</button>
  </div>
  <div class="main">
    <canvas class="absolute w-100 h-100" style="border: solid 1px black;"></canvas>
  </div>
  <script src="https://unpkg.com/penpal/dist/penpal.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

次に、スタイルシートで表示を整えます。

style.css:

body{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main{
  flex: 1 1 auto;
  position: relative;
}
.absolute{
  position: absolute;
}
canvas{
    border: solid 1px black;
    cursor: pointer;
}
.w-100{
  width: 100%;
}
.h-100{
  height: 100%;
}

そして、JavaScriptでコードを書いていきます。

マウス操作を取得するため、mousedown, mousemove, mouseupイベントを監視します。マウスの動きに応じてcanvasに絵を書いていきます。

script.js:

// PaizaCloud App APIs:
//   Initialize:
//     * Penpal.connectToParent(options)
//   Call from App to PaizaCloud:
//     * openSaveModal(options)
//     * openLoadModal(options)
//     * writeFile(file, data, options, callback)
//     * readFile(file, data, options, callback)
//     * execFile(file, args, options, callback)
//   Call from PaizaCloud to App:
//     * openFile(filename)

var connection = window.Penpal.connectToParent({
  methods: {
    openFile: (filename) => {
      openFile(filename);
    }
  }
});
let parent;
connection.promise.then((parent_) => {
    parent = parent_;
    console.log('Penpal connected');
});

function openFile(filename) {
  parent.readFile(filename, {encoding: 'base64'}).then((result) => {
    var dataUrl = "data:image/png;base64," + result.data;
    var img = new Image();
    img.onload = function(){
        context.drawImage(img, 0, 0);
    }
    img.src = dataUrl;

  });
}
function saveFile(filename) {
    let dataUrl = canvas.toDataURL(); // data:image/png;base64,xxxxx
    let base64 = dataUrl.substr(22);
    parent.writeFile(filename, base64, {encoding: 'base64'});
}

$(".save").on('click', () => {
  parent.openSaveModal({extensions: ['txt']}).then((filename) => {
    saveFile(filename);
  });
});

$(".load").on('click', () => {
  parent.openLoadModal({extensions: ['txt']}).then((filename) => {
    openFile(filename);
  });
});

$('canvas').attr('width', $(".main").width());
$('canvas').attr('height', $(".main").height());

var canvas = $("canvas")[0];
var context = canvas.getContext('2d');

function getPos(event) {
    var x = event.clientX - canvas.getBoundingClientRect().x + canvas.scrollLeft;
    var y = event.clientY - canvas.getBoundingClientRect().y + canvas.scrollTop;
    return [x, y];
}
let lastPos;

$("canvas").on('mousedown', (event) => {
    lastPos = getPos(event);
});
$("canvas").on('mousemove', (event) => {
    if(!lastPos){return;}
    const p = getPos(event);
    context.beginPath();
    context.moveTo(lastPos[0], lastPos[1]);
    context.lineTo(p[0], p[1]);
    context.stroke();
    lastPos = p;
})
$("canvas").on('mouseup', (event) => {
    lastPos = null; 
});

これで完成です! 完成したら、保存ボタンを押します。

お絵かきアプリのインストール

それでは、作ったアプリをインストールして使ってみましょう。

画面上部の「マイサーバ」をクリックしてワークスペースを表示します。

画面左下の、「+ Apps」と書かれたアイコンをクリックして、インストール画面を表示します。

インストール画面では、作成したアプリを選択して、インストールボタンを押します。

インストールができると、画面左側にアイコンが追加されます。

f:id:paiza:20171222034609p:plain

このアイコンをクリックすると、作った拡張アプリが起動します!絵を描いたり、保存、読み込みもできますので、試してみてください。

f:id:paiza:20171222034806p:plain f:id:paiza:20171222035003p:plain

まとめ

PaizaCloud拡張アプリを作ってインストールしてみました。

PaizaCloud拡張アプリを作ったり追加すれば、どんどん自分好みの快適な環境になります。

HTMLとJavaScriptだけで簡単に作れますので、みなさんもぜひ作ってみてください。

完成したアプリは他の人も使えますので、友達などに使ってみてもらっても楽しいですね。

できたら(paiza(@paiza_official)にも教えてくれるとうれしいです!)


PaizaCloud」では、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

デザイナーにもGit/GitHubを使ってもらうようになったらメリットばかりだった話

f:id:paiza:20171219204804j:plain
Photo by Nick Quaranto
高村です。

エンジニアは、普段からGitやGitHubを使ってバージョン管理をしている人が多いですよね。一方、周りにいるデザイナーなどエンジニア以外の職種の方々はどうでしょうか?

普段からGit(GitHub)を使っているエンジニアからしたら「便利になるんだから、つべこべ言わずに使ってよ」って感じかもしれませんが、非エンジニア職の人たちに「使ったら便利になるっぽいけどよくわからない」「なんかコマンドとか必要で難しいイメージがある」「Git怖い」などと言われて、なかなか使ってもらえない&導入が進まない…なんてケースも多いのではないでしょうか。

paiza(ギノ)社内でも、かつてはそんな状態でしたので、社内で非エンジニア職向けにGitの勉強会を実施するようになりました。現在は、デザイナーさんなどの職種の人たちもGitHubを少しずつ使ってもらえるようになり、実装もスムーズに進むようになってきました。

今回は、弊社の事例を参考に、非エンジニアがGitを使えない場合のデメリットと使える場合のメリット、そして導入する際のポイントをお話ししたいと思います。

■Git/GitHubとは

Gitとは、簡単に言うとファイルの変更履歴を管理してくれるシステム(一般的にはバージョン管理システムと呼ばれているもの)です。

開発をしていると、ファイルを編集前の状態に戻したいとか、間違えて編集しちゃったとか、どれが最新かわからないとか、そういうことがたびたび発生します。(デザイナーの方がページデザインなどを作っているときも、こういう「間違えちゃった」「戻したい」みたいなケースって発生するかと思います)

そんなときに、バージョン管理をしておけば、コードの変更履歴を管理したり、過去のバージョンのファイルに戻したり…といった作業も簡単にできます。

さらにGitでは、リポジトリ(簡単に言うとファイルや履歴を保存する場所)を分散して保持できるため、ローカルのリポジトリを利用することで、リモートリポジトリのサーバにアクセスできない環境(オフライン環境)にいても作業ができます。

そしてGitHubは、このGitの仕組みを利用して、個人・企業問わずにオンライン上でリモートリポジトリの作成・公開ができるサービスです。複数人での共同作業に必要な機能も揃っているため、学校や企業などで広く使われています。

github.com

特にWebサービスアプリ開発をしている企業では、ユーザーの反応を見てすぐに機能追加するなどスピード感のある開発をしていくために、多くがGitHubを使った開発フローを実践しています。

■デザイナーさんがGitHubを使っていなかった時に起きていた不便

◆HTMLなどのデザインデータの共有が超不便

私が入社したての頃は、HTMLファイルなど、作ってもらったデザインデータはなんとチャットでやりとりをしていました。

まぁ、本当にちょっとしたファイルならよいのですが、徐々にデータが大きくなりすぎてチャットに貼れなくなる…といったケースが起こり始めます。

で、貼れないサイズのデータはどうやって共有するかというと、firestorageなどのオンラインストレージサービスにアップしてもらっていました。

これの何が不便かというと……

◇どのデータが最新かわからなくなりがち

一つのファイルを複数人で修正していると、「どのファイルが最新かわからない問題」がよく起こりますよね。

「これが最新だと思って作業してたのにどうやら違うらしい」「古いデータに新しい要素を追加してしまった」「いつの間に変わってたの?」「上書き前が正なの?後が正なの?」みたいな……。

◇差分がわからない

これ!!

例えばフォントサイズの変更や文言追加など、ちょっとした追加・修正でも、そのデータを新たにアップしてもらって、ダウンロードして、そのデータをエンジニアがGitHubリポジトリを作って差分をとって確認して、本番環境に反映して……ということをやっていました。

これはエンジニアにとって不便なだけでなく、デザイナーの方が複数いる場合でも、差分がとりづらくて大変だったのではないかと思います……。

◇とかやってる間にまた修正が発生したら、またアップしてもらって、ダウンロードして、差分確認して……

うぅ……。

◇オンラインストレージサービスだと数日後にはデータが消えてしまう

これも不便ですね。

社内サーバに置くようにしていても、外注しているデザイナーの方だと入れなかったりしますし、落とし忘れたまま期限が過ぎたらまたアップしてもらわないといけないし。やはり担当者であれば、誰でも・いつでも・どこからでも共有できる状態じゃないとつらいですね。


…というわけでいろいろ面倒な問題が多すぎたので、デザイナーさんにもGitHubを使ってもらうようにしました。

最初は「興味あるー!使いたいー!」という人もいれば、「怖い…」という人もいたので、paizaラーニングの「Git入門編」を使った社内勉強会を定期開催したり、段階を踏んで少ーしずつ導入したりしていったところ、以下のようなメリットがありました。

f:id:paiza:20171221135413j:plain

paizaラーニングGit入門編はこちら

■デザイナーさんもGitHubを使えるようになり生じたメリット

◆差分がすぐわかる!

まずは、「デザインデータをGitHubにアップロード(pushするといいます)するようにしてください!たったそれだけです!」というところから始めました。

これだけでも、いちいちダウンロードして、リポジトリを作って、差分をとって…っていう作業をしなくて済むので、エンジニアの作業的にはすごく楽になりました。

◆エンジニアが実装時に修正した部分もデザイナーさんと共有できる

作ってもらったデザインをサービス側に反映させていく際には、軽微な修正が発生するときがあります。実装してみたらちょっと文字がズレちゃいそうなのでいじりたいとか、画像の位置を調整したいとか…。

GitHubでデザインデータを管理できていれば、そういった実装時に発生した差分もすぐにデザイナーさんと共有できて最高です。

■非エンジニア職にGitなどのツールを導入してもらう際のポイント

そんなわけで、少ーしずつデザイナーさんにもGitHubを使ってもらうようになりました。今でも全機能をモリモリ使ってもらっているわけではありませんし(みんなが全機能使えるようになる必要もないですし)、導入の進み具合も人によって違いますが、導入に際してわかったことや気をつけたのは以下のことです。

◆まずは課題を明確にする

エンジニアはいろいろなツールを使うのに慣れているので、ついつい「使えば便利になるんだし、いいから導入しろよ!」と思いがちです。ただ、考えがそこで止まっているエンジニアは、「Git(GitHub
の導入」だけが目的になっちゃっているんじゃないかと思います。

でも、本当の目的って、今の仕事の進め方における課題を解決することで、Git(GitHub)の導入じゃないですよね。極端な話、導入したのにいつまで経っても誰も使えないとか、使える人が教える時間をとれないとか、わからないまま使い始めるしかなくて以前より効率が落ちるとか、そんな結果になったら意味がありません。

だからまずは、「このツール導入しようぜ!」じゃなくて、現在どこにどんな課題があるのかを明らかにしたほうがいいですね。

◆コストについて考える

当たり前ですが、新しいツールを導入するのであれば、誰かが使い方を教えなければなりませんから、教育コストがかかります。

また、今までのやり方を新しいやり方に変えるのであれば、担当者が慣れるまでの効率はどうしても落ちてしまいます。

長期的に見て考えたときに「それでも新しいツールを導入するのが本当にプラスになるのか?」はきちんと考慮した方がいいですね。「Git導入してよかったよ」という記事でこんなこと言うのもなんですが、コストを考慮した上で、導入しない選択肢をとるパターンも大いにあると思います。

実際、私は前職(受託開発をしていました)でSVNを使ってバージョン管理をしていた案件でもGitの導入を検討したことがあったのですが、そのときの現場の課題感や担当者たちの教育コストを考えて、最終的には「Gitは導入しない、SVNの利用を継続する」ことにしました。

このときは「コストの方がかかりすぎてプラスにならない」というのもありますが、前述の課題を明確にしていくうちに、「SVN自体が問題なのではない(≒改善すべき点はもっと他の部分にある)」とわかったからです。

◆導入を進めるなら一段階ずつ

弊社の場合だと、まずは「作ったデータをGitHubに置いてもらうだけ」から始めました。しばらくは他の難しそうな作業は置いといて、とにかくデータを置いてもらうだけです。で、置くのに慣れきったらもう一歩だけ新しいことを覚えてもらう…って感じで、本当に少ーしずつ導入していきました。

「使ったことない、怖い」な状態から、一通りの使い方をいっぺんに覚えてもらうなんて無理ですよね(もちろん業務の状況によってはそんなにゆっくりやってられないケースもあるかと思いますが…)。

急にすべてのやり方を変えてしまっても効率が落ちますし、そうなると担当者側も「効率落ちるのに何で今までのやり方を変えなきゃいけないの」ってなりますし、余計に「Git怖い」と思われてしまいますので…。

もちろん担当者が「Git興味あるー!使いたいー!」という人なら、一気に三段階ずつぐらい教えていってもいいと思います。その辺は人によりますね。仕事なのでそんなこと言ってられないケースもあるとは思いますが、本当はその人のペースに合わせて、柔軟に導入を進められるのが一番いいです。

◆「使ってくれたから、こんなに便利になったよ!」ってちゃんと言う

「まずはGitHubにデータを置いてもらうだけ」を始めた段階で、デザイナーさんに「GitHubに置いてくれたおかげで、差分がとりやすくなって、こんなメリットがあって、こんな場面ですごく助かってます!最高~!」みたいなことは伝えまくってました。

「Git(GitHub)やろうぜ」とだけ言われても、エンジニア以外の人たちが「何で今までのやり方を変えないといけないの」「何でよくわからないものの使い方を覚えなきゃいけないの」と思うのは当たり前です。コマンドとかコンソールとかに慣れてない人からすると、怖く感じるのも当たり前です。

だからこそ、「使ってくれてこんな場面で助かった、前よりもこんなことが便利になった」というのは伝えたほうが、具体的なメリットがわかるし、「そんなに便利なのか、じゃあ使おっかな」と納得感が出る(はずです)。

■まとめ

というわけで、デザイナーさんにもGitHubを使ってもらうようになってよかったですという話でした。

エンジニアチームがGitでバージョンを管理している現場であれば、やはりデザイナーやディレクターといったエンジニア以外の方も使えたほうが何かと便利になると思います。

導入にハードルがある場合は、前述のようにまずはデータを置くだけ~というように、段階を分けながら進めていくといいのではないでしょうか。

「最終的にはマージとかプルとかコミットとかもできるようになりたい~!」という場合は、paizaラーニングGit入門編を受講すれば、初心者でも使い方を少しずつ学べますのでぜひどうぞ。


paizaラーニングGit入門編はこちら





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza