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

paiza開発日誌

paiza(https://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScriptコードは1行のみ!超手軽にWebサイトでパララックス効果を実現できる「Rellax.js」使ってみた

プログラミング初心者 プログラミング学習 Webサービス紹介 開発ネタ

f:id:paiza:20170222111957j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、自分のWebサイトに「パララックス効果」を取り入れたいと考えたことはありませんか?

「なんだか難しそう…」とか、「実装が面倒くさい…」のようなイメージをもし持っているのであれば、今回ご紹介するJavaScriptライブラリが一発解消してくれますよ!

Rellax.js

f:id:paiza:20170222112116j:plain


今回のテーマである「パララックス(視差効果)」がどんなモノであるかは、「Rellax.js」の公式サイトを見ると分かりやすいです。
f:id:paiza:20170222112127g:plain
このように画面を上下に動かす際に、複数のHTML要素が異なるスピードでアニメーションすることで、Webページが立体的になって印象に残りやすいサイトになります。


Rellax.js」は、このような「パララックス効果」を可能な限り簡単に書けるようにしてくれるJavaScriptライブラリというわけです!(ちなみに、「ver1.0」からモバイルにも対応しました)

■必要なファイルを準備しよう!

それでは、早速「Rellax.js」を使って簡単なサンプルデモを作りたいので、まずは必要なファイルの確認をしておきましょう!


と、言っても必要なのは「rellax.js」ファイル1つだけです!

GitHubページからダウンロードしても良いし、CDN経由でHTMLに組み込んでも構いません。

<script src=”https://cdnjs.cloudflare.com/ajax/libs/rellax/1.0.0/rellax.min.js”></script>


そして、JavaScriptでゴリゴリとプログラミングを書いていくのかと思いきや、実はたった1行のコードを書くだけです!

var rellax = new Rellax(' .rellax ');

JavaScriptライブラリと言いつつも、実は「HTMLファイル」に記述する内容に秘密を持っているのが「Rellax.js」の面白いところなんです。


ただし、今は基本的な「HTMLファイル」の骨組みを先に作っておくことにします。

<!-- index.html -->


<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Rellax.jsのサンプルデモ</title>
  </head>
  <body>
  
  
    <script src=”js/rellax.min.js”></script>
  
  </body>
</html>

ここまで来れば、「パララックス効果」を実現する準備は完了です!

早速サンプルデモを作っていきましょう!

■簡単な「パララックス効果」を作ってみよう!

まずは、簡単なサンプルデモとして、CSSで作った複数の「円」にパララックス効果を組み込んでみたいと思います!
f:id:paiza:20170222112331j:plain


今回作る「円」は4種類あり、「div要素」に「ball1」〜「ball4」というクラス名を付けてカタチを作っています。

div {


    position: relative;


}


.ball1 {


    width: 70%;
    padding-top: 70%;
    background-color: #0f0;
    opacity: 0.5;
    border-radius: 50%;
    top: -150px;
    left: 30%;


}
・
・
・

「div要素」は「relative」にし、「top」「left」でそれぞれの「円」の配置を決めていきます。


そして、HTMLの記述はこんな感じになるでしょう。

<div class="rellax ball1"></div>


<div class="rellax ball2"></div>


<div class="rellax ball3"></div>


<div class="rellax ball4"></div>

お気づきかもしれませんが、「rellax」というクラス名も一緒に記述しているわけですが、これを付けることによって「Rellax.js」側から自動的に「パララックス効果」を実現できるようにしてくれます。

ただし、このままではすべての「円」のアニメーション速度が同じなので、画面を上下に移動させても期待通りにはいきません。


そこで、HTMLの属性に「data-rellax-speed」を記述します。

<div class="rellax ball1" data-rellax-speed="-7"></div>
<div class="rellax ball2" data-rellax-speed="0"></div>
<div class="rellax ball3" data-rellax-speed="5"></div>
<div class="rellax ball4" data-rellax-speed="10"></div>

「data-rellax-speed」には、「-10(遅い)」から「10(速い)」までの好きな数値を記述することが可能で、これによってバラバラの速度によるアニメーション移動が簡単に実現できるわけです!


この「サンプルデモ」の出力結果はこんな感じになります!
f:id:paiza:20170222112520g:plain
HTML要素に、チョコっと属性値を記述しただけで立派な「パララックス効果」を実現できているのが分かると思います。


このサンプルデモは、以下のリンクから実際に体験できます。

4つの「円」を使ったサンプルデモ

ソースコードコチラから閲覧できます。

■既存のWebサイトに「パララックス効果」を導入しよう!

さて、「Rellax.js」の概要をだいたい把握したところで、今度は既存のWebサイトに組み込んでいく方法を見ていきましょう!


今回は、Webサイトのサンプルとして、「Start Bootstrap」から好きなテンプレートを1つ選んで、それをベースに用意してみました。
f:id:paiza:20170222112646j:plain
これは、ごく普通の静的なWebサイトですが、「Rellax.js」を使って「テキスト」や「写真」に「パララックス効果」をつけてみましょう!


まずは、先ほどのサンプルと同じように、WebサイトのHTMLファイル内に「rellax.js」の本体ファイルと「new Rellax()」を記述します。

<script src="js/rellax.min.js"></script>


<script>


    var rellax = new Rellax(' .rellax ');


</script>

これで、導入準備は完了です!簡単ですね。


あとは、アニメーションさせたいHTML要素を選び、そこにクラス名「rellax」と属性の「data-rellax-speed」を追加するだけです!
f:id:paiza:20170222112728j:plain
アイコン、テキスト、写真…など、どれでも良いので好きなモノを選んで「rellax」を適用してみてください。

見事に「パララックス効果」を付与することが出来ます。


ただし、1つだけ注意点があります!

例えば、以下の「サンプルタイトル」というテキスト文字に「rellax.js」を適用したとします。
f:id:paiza:20170222112739j:plain


ところが、移動速度によっては画面をスクロールする途中で通り過ぎてしまい見づらくなります。
f:id:paiza:20170222112747j:plain
これではせっかくの「パララックス」も台無しですね。


理想としては、スクロールして画面の中央くらいで「サンプルタイトル」という文字が「本来の位置」に配置されていて欲しいところです。

そのために、速度を調整したり、CSSで配置を再指定したりなど、細かい調整をしていたのでは本末転倒ですよね…。


そこで、「Rellax.js」では便利なオプションが用意されています。

「new Rellax()」を実行する際に、以下のようなオプションを設定してみましょう!

<script>
    var rellax = new Rellax(' .rellax ', {
        
        // 中央寄せ
        center: true
        
    });
</script>

この「center: true」を記述するだけで、先ほどの「サンプルタイトル」というテキストが、ちょうど画面中央へ来るようにアニメーション移動されるのです!

分かりやすいように、オプション「center」を適用していない状態と、適用した状態のGIFを掲載しておくので、ぜひ見比べてみてください!


【オプションを適用していない状態(centerなし)】
f:id:paiza:20170222112847g:plain


【オプションを適用した状態(centerあり)】
f:id:paiza:20170222112938g:plain
GIFを見ると分かりやすいと思いますが、オプションを適用するとテキスト要素の「サンプルタイトル」という文字が、しっかりと画面中央にタイミング良く移動してくれるのが分かります。

このように、「Rellax.js」を活用すると、非常に簡単なコードで細かい調整まで可能な「パララックス効果」をすぐに導入できるようになります。


このサンプルサイトは、以下のリンクから実際に体験できます。

WebページにRellax.jsを適用したサンプルデモ

ソースコードコチラから閲覧できます。

JavaScriptやHTML/CSS講座も公開中!動画でプログラミングが学べるレッスン

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

今回の記事で登場したJavaScriptやHTMLを学べる入門講座も好評公開中です。ぜひごらんください!

↓詳しくはこちら
paiza.jp

■まとめ

駆け足で「Rellax.js」の使い方を見てきましたが、ポイントになるのは以下の3つだけです!

  1. 「new Rellax()」を記述する
  2. 好きなHTML要素の属性に「data-rellax-speed」を追記する
  3. 「中央寄せ」はオプション設定に「center:true」を記述する

この3つのポイントを覚えていれば、今すぐどんなWebサイトも「パララックス」を手軽に導入できるようになるでしょう。

ご興味ある方は、ぜひサンプルを確認しながら実際にトライしてみてください!


<参考>




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいという方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
paiza.jp
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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

【主要タグ一覧&解説】5分でわかるHTML・CSS入門

プログラミング初心者 プログラミング学習
f:id:paiza:20170125183513p:plain

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

あらゆる情報が集まるインターネットですが、パソコンや携帯電話のWebブラウザで表示される情報は、全てHTML・CSSで書かれています。逆に言えば、HTML・CSSを使えば、好きなデザインのWebページが作り放題ということです。

HTML・CSSは多くのブログサイトでも使うことができますので、記事にHTML・CSSを少し追加すれば、より表現豊かにわかりやすい記事が書けるようになります。

さらにJavaScriptPHPRuby on RailsJavaなどを学べば、本格的なWebサービスを作ることもできますし、スマートフォンなどで動くモバイルアプリケーションでも、HTML・CSSを使っていることが多いです。

ここでは、HTML・CSSの基本を5分でわかるように簡単にまとめてみます。

【目次】

HTML・CSSファイルの作り方

HTML・CSSファイルの作り方はいくつかあります。

エディタで作る

HTML・CSSは普通の文章と同じようなテキストファイルで使えますので、Windowsのメモ帳や、Macテキストエディタなどでも利用できますが、専用のテキストエディタであれば、HTMLタグの色を変えてくれるなどの便利な機能もあります。

たとえば、Sublime Text、AtomVisual Studio Codeなどは、WindowsMacで利用できる便利なエディタです。

エディタでHTML・CSSファイルを作成した後は、ブラウザでHTMLファイルを開いて表示します。

また、作ったHTML・CSSファイルは、GitHub PagesなどでWebページとして公開することもできます。

ブログで作る

このはてなブログを含めて、多くのブログではHTML・CSSを利用できます。

はてなブログでは、はてな記法Markdown記法の中にHTMLを埋め込むこともできます。

オンラインHTML共有サービス(JSFiddle, CodePen)を使う

JSFiddle, CodePenでは、Web上でHTML・CSSを作成できます。

Web上でファイル作成とページの確認が同時に行えて、環境設定も必要ないので、やってみたいことを気軽に試すことができます。

また、作ったファイルは公開できますので、他の人に見てもらうときにも便利です。

はじめてのHTMLファイル

それでは、HTMLを書いてみましょう。

以下のようにファイルを作成してみます。

index.html:

はじめてのHTML

普通のテキストですね。HTMLでは、書いた文章はそのまま表示されますので、実はこのままでも表示できます。

ブラウザなどで確認すると、「はじめてのHTML」と表示されているかと思います。

次に、この文章を大きく表示してみましょう。

以下のHTMLファイルを作成します。

index.html:

<h1>はじめてのHTML</h1>

結果を見てみましょう。

結果:

はじめてのHTML

大きい文字で表示されました。

このHTMLには、見慣れない"<h1>“と</h1>が追加されていますね。

“<”(小なり記号)と">“(大なり記号)で囲まれた”<h1>“の部分をタグといい、タグの中の文字をタグ名と言います。

タグは"<h1>“と</h1>のように、2つを1セットで扱い、その間に何らかの文章を囲むことが多いです。

文章をタグで囲むと、その文章がタグの影響を受けます。ここでは、"<h1>はじめてのHTML</h1>“と書くことで、「はじめてのHTML」という文章に"h1"タグが適用されます。

正式なHTML

今書いたHTMLファイルですが、実は正式なHTMLとはいえません。

正しいHTMLファイルは、下記のような形式になります。 HTMLファイルを一から作る場合に、最低限必要な部分です。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトルです。</title>
  </head>
  <body>
    <h1>はじめてのHTML</h1>
  </body>
</html>

<head>で囲まれた部分をヘッダといい、ブラウザのページとしては直接表示しません。例えば、titleタグではブラウザのタイトルバーに表示する文章を書きます。

<body>で囲まれた部分が、ブラウザの中で実際に表示される文章になります。

【参考】HTML5公式で推奨されているDOCTYPE宣言についてはこちら

タグ

先ほどはH1タグを使いましたが、HTMLでは様々なタグが使えます。ここでは、よく使われる主なタグを紹介します。

ヘッダタグ(H1, H2, H3, H4, H5, H6)

H1, H2, H3, H4, H5, H6タグはヘッダを表すタグで、タグで囲まれた文章を大きく表示します。

H1が一番大きく、H2, H3…とだんだん小さくなります。

例:

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

結果:

H1
H2
H3
H4
H5
H6

改行(BR)

HTMLファイルの文章では、普通に改行をしても改行せずに表示されてしまいます。

改行するにはBRタグを使う必要があります。

例:

1行目
<br>
2行目
<br>
3行目

結果:

1行目
2行目
3行目

リスト(UL, LI)

ULタグの中にLIタグを入れることで、一覧表示を行います。

例:

<ul>
  <li>はじめに</li>
  <li>次に</li>
  <li>最後に</li>
</ul>

結果:

  • はじめに
  • 次に
  • 最後に

リンク(A)

他のWebページへのリンクを作ります。文字をクリックすると、"href"属性で指定したURLのページに移動します。

例:

<a href="http://paiza.jp/works/">paizaラーニング</a>

結果:

クリックした場合に別ウインドウを開くには、「target=“_blank"」と書きます。

例:

<a href="http://paiza.jp/works/" target="_blank">paizaラーニング</a>

結果:

画像(IMG)

画像を埋め込むにはIMGタグを使い、"src"属性で画像ファイルを指定します。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paiza/20170221/20170221130631.jpg">

結果:

画像のサイズを指定すると、それにあわせて画像が伸び縮みします。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paiza/20170221/20170221130631.jpg" widht="100" height="100">

結果:

整形済みテキスト(PRE)

改行やスペースなどをそのまま表示します。コードなどを埋め込む場合に利用できます。

<pre>
1行目
2行目
3行目
</pre>

結果:

1行目
2行目
3行目

表(TABLE/TR/TD/TH)

HTMLで表を作るにはTABLE/TR/TD/THタグを使います。TRタグで囲んだ範囲が表示一行になり、その中にTRタグで列を書いていきます。テーブルのヘッダではTRの代わりにTHを使います。

例:

<table>
  <tr>
    <th>ヘッダの1列目</th>
    <th>ヘッダの2列目</th>
    <th>ヘッダの3列目</th>
  </tr>
  <tr>
    <td>1行目の1列目</td>
    <td>1行目の2列目</td>
    <td>1行目の3列目</td>
  </tr>
  <tr>
    <td>2行目の1列目</td>
    <td>2行目の2列目</td>
    <td>2行目の3列目</td>
  </tr>
</table>

結果:

ヘッダの1列目 ヘッダの2列目 ヘッダの3列目
1行目の1列目 1行目の2列目 1行目の3列目
2行目の1列目 2行目の2列目 2行目の3列目

コメント

HTMLの一部を表示したくない場合、「<!–」と「–>」で囲むことで、その部分が表示されなくなります。

例:

<!--
  ここは表示しない
-->

インラインフレーム(IFRAME)

インラインフレームでは、他のWebページを埋め込むことができます。

ブログパーツのように提供されているパーツを埋め込む場合に利用できます。

実際のHTMLは、埋め込みパーツ提供元で、「共有」や「埋め込み」のようなメニューを選ぶと取得できます。

例:

<iframe src="https://paiza.io/projects/e/kQ-3_NdqqP2OeYmlOViulQ?theme=chrome" width="100%" height="500" scrolling="no" seamless="seamless"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d51855.75168019686!2d139.69540495346882!3d35.6773841396102!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf482f2123e4fb08f!2z77yI5qCq77yJ44Ko44Og44Ki44Km44OI!5e0!3m2!1sja!2sus!4v1485331884759" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

結果:

フォーム(FORM, INPUT)

フォームを使えば、テキスト入力欄、チェックボックス、ボタンを表示することができます。

例えば、Google検索を利用することもできます。

paiza開発日誌検索 Powered by Google

スタイル

タグでは文章の構造を表しましたが、色や大きさなどの文章の表現方法はスタイルを使います。

スタイルの使い方には以下の3つの方法があります。

インラインスタイル

タグのstyle属性にスタイルを記述します。一番基本的な方法です。

<div style="color: red;">赤色</div>

スタイルタグ(STYLE)

styleタグでスタイルを定義する方法です。

タグなどの条件を指定して、スタイルを指定します。複数の場所で同じスタイルを適用する場合に便利です。

例えば、H1タグの色を赤色にするには以下のように書きます。

<style>
h1 {
  color: red;
}
</style>

スタイルを適用するにはクラスを指定すると便利です。クラスはドットで始まる名前で以下のように書きます。

<style>
.color_red {
  color: red  
}
</style>

スタイルを適用するタグには、クラスを"class"属性で指定します。

<div class="color_red">赤色</div>

複数のタグをスペースで区切って指定することもできます。

<div class="color_red font_large">赤色で大きい文字</div>

スタイル情報をファイルとして読み込むこともできます。この場合、以下のようにスタイルを書いたCSSファイルを指定します。

<link href="path/to/file.css" rel="stylesheet">

様々なスタイル

ここでは、便利なスタイルを紹介します。

大きさ

  • font-size

文字の大きさを指定します。

文字で指定する場合、大きい順に"xx-large", “x-large”, “large”, “medium”, “small”, “x-small”, “xx-small"を使います。”%“で指定することもできます。

例:

<div style="font-size: xx-large;">大きいフォント</div>

結果:

大きいフォント
  • width, height

タグが表す四角部分(ボックス)の大きさを指定します。

<div style="background-color: green; width: 100px; height: 25px;">横長の四角</div>

結果:

横長の四角

  • color

文字の色はcolorプロパティを使います。

色は"red", “blue”, “yellow"のように名前で指定できます。

利用できる名前はこちらで確認できます。

HTML Color Names

16進数で"#RRGGBB"のように、3原色(赤、緑、青)で指定することもできます。

例:

<div style="color: red;">赤色</div>
<div style="color: #336633;">暗い緑色</div>

結果:

赤色
暗い緑色
  • background-color

背景色を指定します。

例:

<div style="background-color: red;">赤色の背景</div>

結果:

赤色の背景

  • text-shadow

文字に影をつけます。この例では2ptずれた位置に赤色の影をつけています。

例:

<div style="text-shadow: 2px 2px red;">影付き文字</div>

結果:

影付き文字
  • box-shadow

四角い範囲(ボックス)に対して影をつけます。insetを指定すると内側に影が着きます。

例:

<div style="box-shadow: 10px 5px 5px black;; background-color: #e0e0e0;">影付きボックス</div>
<div style="box-shadow: inset 0 0 5px gray; background-color: #f0f0f0;">影付きボックス</div>

結果:

影付きボックス


影付きボックス

枠線(border, border-left)

  • border

タグの四角(ボックス)に枠線をつけることもできます。

“boder"タグでは、枠線の幅、形状、色を順に指定します。

例:

<div style="border: 2px solid black;">黒い枠線</div>
<div style="border: 2px solid red;">赤い枠線</div>
<div style="border: 2px dashed black;">点線(ダッシュ)</div>

結果:


黒い枠線

赤い枠線

点線(ダッシュ)
  • border-left

左だけ枠線をつけることもできます。

例:

<div style="border-left: 2px solid black; background-color: lightgray">黒い枠線</div>

結果:

黒い枠線

丸まった枠線も作れます。

<div style="border: 2px solid red; border-radius: 5px;">丸まった枠線</div>

結果:

丸まった枠線

回転(transform)

回転させることもできます。

例:

<div style="background-color: yellow; width: 100px; border: 1px solid black; padding: 5px;">普通の文章</div>

<div style="transform: rotate(20deg); background-color: yellow; width: 100px; border: 1px solid black; padding: 5px;">20度回転した文章</div>

結果:

普通の文章
20度回転した文章

まとめ

Web開発の基本となるHTML・CSSの応用範囲はどんどん広がっています。Webサイトを構築する場合だけでなく、ブログを書いたり記事を投稿したりする場合に使えることも多く、またモバイルアプリケーションでHTMLを使っているものも多いです。ITエンジニアにとっては基本となる技術ですね。

初心者でもブラウザさえあれば、タグをつけながらいろいろとデザインを変えていけるので、気軽に始めて様々な使い方を覚えていくことができるでしょう。実際にいろいろ書いて試してみることで、より理解が深まります。

動画で学べる「paizaラーニング」でも、動画を見ながらブラウザ上でHTML・CSSを書いたり演習問題を解いたりすることで、気軽に学べるレッスンを公開中です。ぜひお試しください。

paiza.jp HTML/CSS入門編(3レッスン) | プログラミング学習ならpaizaラーニング

HTML/CSS講座も公開中!動画で学べるレッスン

paizaは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを、新サービスとして独立オープンいたしました。

今回記事の中で使用しているHTML/CSSの入門講座も好評公開中です。ぜひごらんください!

↓詳しくはこちら paiza.jp


paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいという方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。 paiza.jp そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。 paiza.jp スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

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

元SIエンジニアが、Web系に転職しても役立ったスキル5つ

ITエンジニアの転職 ITエンジニアのキャリア

f:id:paiza:20170217150650j:plain
Photo by Maryland GovPics
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

エンジニアが自社サービス開発企業に転職する場合、「とにかく技術力が必要」だと言われがちです。paizaでも、よく「自分は自社サービスの開発経験がないので、転職は難しいですよね……」といった相談を受けることがあります。

エンジニアとして転職するのであれば、もちろん開発技術はとても重要です。ただ、実際に転職した人にとって「前職で身につけたスキルで、転職後も役立っているのは開発技術だけなのか?」と言うと、決してそうではありません

実際、paizaでは業務経験がない分野への転職を叶えている方もたくさんいます

さらに言うと、むしろ異なる分野の企業にいたからこそ身についたスキルが、転職先で重宝されている……という方も意外と多いのです。

そこで今回は、SIerから自社サービスを開発している弊社へ中途入社したエンジニア2人に、SIer時代に身につけたスキルや経験で、転職してからも役立っていることを聞いてみました。

転職に興味のある方の参考になればと思います。

■聞いた人の簡単な経歴

◆中村

経歴:文系大学→文系大学院中退→SIer→自社サービス開発企業→paiza(ギノ)に来て1年半です

◆高村

経歴:大学(情報工学系)→メーカー系の大手SIerpaiza(ギノ)に来て1年ぐらいです

■1.問題と解決手段を正しく見極める力

受託開発をしていて、お客さんに「××機能がほしい」と言われたけど、本当に必要なのは××機能じゃなかった……ということがすごく多かったです。

「××機能がほしい」とは、あくまでもその人が「私の悩みは××機能があればきっと解決するはず」と思ったから言ってきただけです。イコール本質的な課題の解決策なわけではありません

根本的な課題は「××機能がほしい」に至った経緯にあるわけです。それを把握した上で、本当に××機能を作れば解決する話なのか、もっと違うところからのアプローチが必要なのかを考える必要があります

別に、言われたまま××機能だけを作って「はいご注文の品ですよ」で終わっても仕事になるといえばなります。でも、本当に必要なのが××機能じゃなかった場合、それでは何も解決していませんよね。費やされた工数ももったいない。

そういうことをなるべく減らすために、言われるままに要件を固めるんじゃなくて、課題を見極めてから解決策を考える力は、SIerでかなり鍛えられたと思います。

今でも、事務局や営業の人が使うバックエンドシステムに対して「××機能ほしい!」みたいな要望は上がってきます。そういうときにSIerでの経験が役立っています。あと、フロントエンドを作る際も、ペルソナを立てて考えたりするときに活かせていると思います。

「受託じゃないんだからそこまで考えなくてよいのでは?」と思われるかもしれませんが、「××機能を追加することになったからただ作っているだけ」の場合と、「本質的な課題を把握した上で作っている」場合とでは、特にUIや画面フローに落とし込んだときに差が出やすいです


SIerではお客さんの要望を聞いて、要件定義をするのにもかなり時間を使っていましたが、逆にそのおかげで要件定義力が身についたと思います。

今だと、例えば「××機能を作ったらユーザーがもっと増えるのでは?」という仮説が出てきたとして、特にスタートアップだと実行までのスピード感がめちゃくちゃ早いので、すぐに「いいね!それ作ろう!でき次第公開しちゃおう!」となる場合もあります。

ただ、ここでスピードを重視しすぎると、仮説の検証が浅くなってしまいがちです。誰かが言い出した仮説のようなものは、実は仮説として成立していなくて、よくよく検証すると思い込みにすぎなかった……といったパターンもあり得ます。

つい熱くなって、検証が欠けたままで××機能を作っても、結局誰にも使われなかった……ユーザーも増えなかった……これ何のために作ったんだっけ……?となってしまっては不幸な負の遺産が増えるだけです

ここで(スピード感とのバランスも考えながらですが)しっかり仮説を検証して、先の例で言うと「開発工数に見合ったユーザーの増加が見込めるの?」「そもそも本当にユーザーは××機能を望んでいるの?」といった要件を詰めていく力SIerで鍛えられたと思います。

■2.あらゆるソースコードを読み解く力

SIerにいた頃は、スキルのある先輩のもとできれいなコードを参考にさせてもらえる現場とか、逆にデータ構造がすごく複雑なのに全体を見通せる人がいない現場とか、実に様々な現場を経験しました。そのおかげで、ベストプラクティスに近いコードにも、アンチパターンにもたくさん触れてきました。(ちなみに一番のトラウマはEAVパターンです。参考→5章 EAV (エンティティ・アトリビュート・バリュー) - Qiita

コードに限らず「このやり方が絶対的な正解だ」と思い込まずに「もっといいやり方があるのでは?」と考えるのは、エンジニアとして非常に重要です。また、当然ですがアンチパターンはなるべく回避しなければなりません。これはどこで何を作るにしても、どんな課題を解決するにしても、共通して言えることだと思います。

だから、よいコードにも、決してよいとは言えないコードにもたくさん接触できた経験は今でも役に立っていると思います。


SIerでは、仕様書よりソースコードを信じてきたというか、そもそも仕様書がなくて、信じられるものは既存のコードのみ……みたいな現場もよくあったため、とにかくコードは読みまくりました。

入社して2、3年でマネジメントもするようになってからは、コードレビューもよくしていたので、人が書いたコードをたくさん読みました。「この人は何でここでこんな書き方をしているんだろう?」とか「何がやりたかったんだろう?」とか、想像して考えながらコードを見るのが習慣になりました。

特にレビューの時は、頭ごなしに指摘をしてもお互いつらいだけで意味がありません。「ここってこういう処理がしたかったんだよね?でも、それだったらこっちのやり方のほうがよさそうじゃない?」といった感じでお互いに納得し合ってコードをベストの状態に近づけていかないといけないですから。

SIerだろうが自社サービスだろうが、いろいろな技術レベルの人が、いろいろな状況で書いたコードが集まってシステムはできています

作者の気持ちじゃないですけど、コードを読んで「何でこういう書き方したのかな」といったことが想像できるようになると、既存のコードを読み取いて理解するとか、手を入れてリファクタリングするとかが、すごくやりやすくなりますよね。今でも、既存のコードを見ると「あの人がまだRubyを勉強したてほやほやの頃のコードだな…」「これ作ったとき質よりスピードが必要だったんだろうな…」とかいうことがわかります。

■3.スケジュールとタスクを管理する力

SIerでマネジメントをしていたころは、なるべく無駄な工数を発生させてしまわないために、タスクがかぶったり競合したりしないように気をつけていました。

どこで何を作るにしても、チームで開発をする以上タスクの競合は起こり得ることです。そして、なるべく回避したいことでもあります。

今でも常にアンテナを張るようにして、スクラム会議でタスクをチョイスするときなども「このタスクとそのタスクはかぶりそうだから同じ人がやった方がいいですよね」とかよく言っています。

あとは、宙に浮いている部分を明確にしてタスクに落とし込むようなこともよくやっています。

宙に浮いた部分を放置していると、SIerだとまず火種になります。「この機能、必要なのに誰も手をつけてない……?」という発覚が遅れると、みんな自分の担当タスクでいっぱいいっぱいなのに、追加業務まで発生しちゃう、でも納期には遅れられない……といった感じで炎上を避けられなくなってしまいますよね。

それを防ぐために、「ここ、誰がどう作るか曖昧になってない?」とか思ったらその時点でなるべく早く明確にする、タスクに落としてスケジュールに入れる、ということは徹底していました。もちろん今でもタスクを決める際は同様にして、手戻りとかスケジュールの遅れを最小限にできていると思います。


SIerだとタスクを細分割して、スケジュールを作ったり人を何人アサインしたり……ということを概算で見積もらないといけなかったので、見積もりを立てるためのいろいろな手法を学べたのはよかったです。

スタートアップだと、次々に機能を作っていかなければならない段階もありますが、それでも「いつ頃までにできそうか」と言う感覚は重要です。自分のタスクを管理して、事業的な優先順位と作業量から、どれが重要な機能なのかを見極めていかないといけないです。

■4.コミュニケーション


特にスクラッチ開発の場合、自分のチームの担当機能だけができればOK、なんて状況はあり得ないので、ほかの機能の担当者ともコミュニケーションがとれないといけません。

そういった時に、ざっくり「ここってどういう仕様ですか?」みたいな聞き方をすると相手もざっくりした回答になってしまいますよね。

例えば「そっちの機能でこういう形に加工されたデータがこっちに流れてくると思ってるんですけど、それで合ってますか?」みたいな、既に知ってる情報をもとにこっちの想定を提示した方が相手も答えやすいはずです。

こういったことは、SIerにいた頃に、他のチームともコミュニケーションがとれる窓口や、常に情報共有し合える状況を作ったりする中で学びました。

今はチーム単位ではなく個人で機能を担当していますが、チームでも個人でも、そのへんのすり合わせを普段から怠らないことは重要だと思います。

■5.何でもやるし誰とでも話す姿勢


エンジニアであればどんな会社でも言えるかもしれませんが、「とにかく何でもやろう」という姿勢でいたことは、ずっと生きています。

業種も技術環境も、本当に様々なプロジェクトのシステムに携わってきましたし、前述したような宙に浮いたタスクとか、炎上プロジェクトのヘルプとか、やったことある人がいない分野の作業とか、全部手を挙げてやってきました。もちろんめちゃくちゃ大変なときもあるんですが、乗り越えられたらそれは必ず自分のスキルになって、できることが増えます。

あと、お客さんもパートナー企業もあわせて本当にたくさんの企業の人たちと接してきたので、誰とでも臆せず話したり交渉したりできるヒューマンスキルやビジネススキルも上がりました。これは、例えばずっと特定の人達と同じサービスを作り続けるみたいな仕事をしていたら身につかなかったスキルだと思います。

SIerと自社サービスでは、得られるものが全然違います。中規模以上のSIerの場合はビジネスからプログラミングまで、かなりしっかりした教育をしている企業も多いので、先に経験しておいてよかったなと思っています。

だから、日本でももっと転職やフリーランスみたいな仕事の仕方が一般化して、やりたい人は受託開発も請けるとか、ずっと一つのサービスに携わるとか、もっと柔軟にできる世の中になったらいいなと思いますね。

■まとめ

転職で、今まで使ったことのない技術や開発経験のない分野へ飛び込んでいく場合、最初は誰でも不安を感じるかと思います。

ただ、実際に入社をしてみると、開発技術さえあればサービスは勝手にできていくわけではないことがわかるはずです。(当たり前と言えば当たり前のことですが)

既に運用されているサービスがあって、開発チームに入り、メンバーの人たちと一緒になって、新機能を考えて追加したり、既存部分を改修したりしていく……といった通常業務の中では、SIerで得たスキルや経験もすごく役に立ちます。

paizaでは、開発業務未経験の方や経験の浅い方でも、エンジニアとしての転職をサポートするサービスをスタートしました。

EN:TRY」は、エンジニア職未経験者や経験が浅い方をITエンジニアキャリアへ導く転職サービスです。

これまでのpaiza同様、「EN:TRY」もプログラミング力、コーディング力で転職をする「コーディング転職サイト」です。転職希望者には「プログラミングスキルチェック」を受けていただき、提出していただいたコードをもとにスキルランクを評価します。求人には必要なスキルランクが設定されており、評価がそれを満たしていれば書類選考なしで応募が可能です。

paiza.jp




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

paiza転職」は、自分のプログラミング力が他社で通用するか(こっそり)腕試しができる、IT/Webエンジニアのための転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。
paiza.jp
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
paiza.jp

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

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編