派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

【イベントレポート】DeNAスキルアップイベント開催!Babelで先取り次期JavaScriptの仕様(ES6)を体験してみよう

ITスタッフィング運営するリクルートスタッフィング主催の、第3回DeNAスキルアップイベントが、2月25日に開催されました。開発に役立つ機能や仕様など、JavaScriptの知識をさらに深めていただくことを目的にした今回のテーマ、「Babelで先取り次期JavaScriptの仕様(ES6)を体験してみよう」です。

株式会社ディー・エヌ・エー(以下DeNA)のフロントエンドエンジニア守谷豊さんを講師に迎え、同じくDeNA社員の皆さんにチューターとして入っていただきハンズオン形式で勉強会を行いました。

f:id:pinq4387:20160404172046j:plain

今回の講師:守谷豊さん
株式会社ディー・エヌ・エー デザイン戦略室 第三グループ
Web制作会社、スマホアプリ開発会社を経て2014年より現職。Webデザイナー、Flashエンジニア、ディレクターなど幅広いポジションを経験後、現在はフロントエンドエンジニアとしてマークアップ、JavaScriptを中心に担当。現在担当する「SHOWROOM」でもES6、Babelを活用している。

ECMAScript 6の新機能を紹介

まず最初に説明されたのは、ECMAScript 6について。ECMAScriptとはJavaScriptの中核仕様を抜き出して標準化したもので、1年ごとにアップデートされ、ブラウザに実装されていきます。ECMAScript 6は2015年6月に策定された新バージョンのことをいいます(正式名称はECMAScript 2015)。

f:id:pinq4387:20160404173212j:plain

ECMAScript 6では新たな文法や機能が多く追加され、便利なプログラム言語に進化しています。その主な新機能について解説されました。

  • Arrow Function:Functionを省略することができる
  • Default Parameters:Functionの引数にデフォルトパラメータで値を指定できる
  • Classes (Base):Classのメソッドで書くことができ、静的なメソッドも書ける
  • Classes (Extend):ClassのExtendのメソッドを書くことができる
  • Let, Const:Functionのローカル変数を指定できるブロックスコープ
  • Template Strings:文字列のテンプレートリテラル
  • Promise (Required babel-polyfill):非同期処理を抽象化するデザインパターン

 

f:id:pinq4387:20160404174939j:plain

上記に挙げた以外にも、ECMAScript 6には便利な新機能があるのですが、各ブラウザのバージョンによっては搭載されているJavaScriptエンジンが対応していないケースもあります。「ECMAScript 6 compatibility table」では、そのブラウザの実装状況についてわかりやすく表にされています。

f:id:pinq4387:20160404174710j:plain

Babelを使ってみよう!

上記のように、ブラウザ対応されていない最新のECMAScriptの仕様を、ECMAScript5へ変換するトランスパイラが、今回のテーマでもある「Babel」です。

f:id:pinq4387:20160404180446j:plain

インストールはターミナルからnpm経由で行います。そして、Babelを使うための4つの準備をハンズオン形式で、講師の守谷さんやDeNA社員のチューターの皆さんと一緒に行っていきました。

1.babel-cli(単体で動作するbabel製CLI) 

Babelをコマンドラインから操作するパッケージです。
babel-cliはglobalにインストールします。

f:id:pinq4387:20160405023259j:plain

シェルを再起動してインストール確認をします。

f:id:pinq4387:20160405023317j:plain

2.babel-preset-es2015

BabelでES6を扱うためのプリセットです。

f:id:pinq4387:20160405023406j:plain

3..babelrc

babelの設定ファイルを作成してES6を指定します。

f:id:pinq4387:20160405023427j:plain

4.babel-polyfill

PromiseやGeneratorsなどをES5で扱うためのパッケージです。

f:id:pinq4387:20160405023448j:plain

node_modules/babel-polyfill/dist/にあるpolyfill.js(polyfill.min.js)をHTMLで読み込みます。

f:id:pinq4387:20160405023507j:plain



準備が終わったら、実際にBabelで出力できるか試してみます。

Babelのいろいろな使い方として、下記プラグインやタスクランナー、Webpackやbrowserifyなどのビルドツールが紹介されました。

守谷さんは、ES6とBabelを以下のようにまとめました。

  • ● ES6は2015年6月に正式策定された
  • ● ES6の新機能で格段に書く易くなる
  • ● 各Webブラウザの対応状況がまちまち
  • ● Babelを使ってES5にトランスパイルすることでクリア
  • ● 今後実装予定の機能もPresetによって扱うことができる
  • ● タスクランナーやビルドツールと組み合わせて開発効率アップ 

 

f:id:pinq4387:20160405023550j:plain

DeNAフロントエンドエンジニアの開発環境

最後に守谷さんは、DeNAのフロントエンドエンジニアがよく使う開発ツールやフレームワークや、社内の開発体制などについて、その特徴を下記のように挙げました。

  • ● Gitでのバージョン管理が行われている
  • ● プルリク、コードレビューが行われている
  • ● タスクランナーはGruntやGulpを使っている
  • ● CSSはCompass、Sassがメイン
  • ● JavaScriptはCoffeeScript、Babel、TypeScriptなどを活用
  • ● React、Angular、Backboneなどのフレームワークは要件に合わせて選択
  • ● バグ、ベストプラクティスなどWikiにまとめる文化がある
  • ● 社内勉強会は積極的に開催される

 

「エンジニア×派遣」なぜ、派遣で働いているのか?

休憩をはさみ、座談会に入る前にITスタッフィング運営しているリクルートスタッフィングより「エンジニア×派遣」と題したLTを実施。実際にリクルートスタッフィングに登録し、派遣エンジニアとして働くスタッフに聞いた理由TOP3が紹介されました。

f:id:pinq4387:20160405032445j:plain

1.給与は労働時間で計算

派遣スタッフの給与は時給制で、労働時間分の時給が全額支払われる働き方です。また、フロントエンドエンジニアの案件相場は時給1800-2500円が相場です。

2.大手企業の仕事、複数のプロジェクトに携わることができる

大手企業の案件も多く、自分が興味のある技術やプロジェクトを選択して働くことができます。また、契約期間が明確に決まっているため業務進捗やクライアントの状況次第で次のステップで働く決断をすることもできます。

3.希望するキャリアやライフスタイルに合わせて働くことができる

「プライベートの時間もしっかり作りたい」「フリーランスの仕事も両立したい」という希望を叶えることができます。自分の時間はしっかりと守れるので仕事やプライベートも含めあなたが実現したいことに合わせて仕事内容や働き方を選ぶことができます。

さらに今回はDeNAで働く派遣スタッフに聞いた、「DeNAで働く魅力」も4つ紹介されました。

1.雇用形態に関わらず、意見交換ができる
2.最先端の技術に挑戦できる
3.人を大切にしている。ランチ補助制度、開発に適した椅子など心地よく働ける環境がある
4.自分でタスクコントロールができ、遅くとも20時には退社できることが多い

DeNAでは現在フロントエンドエンジニアを募集中なので、興味を持った人は、自宅でも派遣登録が完了するオンライン登録や、ITスタッフィングの職種専門コーディネーター(仕事紹介担当)に相談してほしいと語りました。

DeNA職場紹介と座談会

さらに今回は、エントランスやミーティングルーム、執務スペースなど、DeNAの社内の様子を写真で紹介。

f:id:pinq4387:20160405032050j:plain

ゲーム機やソフト、雑誌などが数多く置かれているスペースや、カフェの利用やランチ補助制度のこと、自社開催のテックカンファレンスの話など、DeNAの職場環境の魅力が伝わってきました。

座談会では参加者たちがDeNA社員に、開発ツールの選び方やプロジェクトの進め方などを質問したり、意見を交換し合ったりなどして、大変盛り上がりました。

f:id:pinq4387:20160405032109j:plain

興味を持っていただいた方は、ぜひ次回のセミナーにご参加いただき、実際にフロントエンドエンジニアとしてご活躍されている方の生の話を聞くことで ご自分のさらなるスキルアップに繋げてみてはいかがでしょうか?


▼派遣登録をご検討される方は、2つの登録方法があります!
 オンライン登録/来社登録 ご自分にあった登録方法をどちらかお選びください。

 

(取材・文:馬場美由紀 撮影:延原優樹)