mixi Engineers' Blog

株式会社ミクシィで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Mixi Engineers Blog

2日でできる!JavaScript トレーニング

こんにちは。SNS mixi の JavaScripter、kuniwak です。

新しい仲間たちが入社する季節になりましたね。

さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています!

f:id:mixi_engineers:20150415181827p:plainf:id:mixi_engineers:20150415183035p:plainf:id:mixi_engineers:20150415181908p:plain

2015年度の JavaScript 研修は、Web アプリケーションの部品(モジュール)をつくれるようにすることを目標とした、実践的な研修として計画されました。

JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaScriptの研修資料となっています。

資料の目次

  • セットアップ
  • JavaScriptとは
  • JavaScript に会いにいこう
  • 開発環境道場
  • トレーニング
    • ステージ1 DOM 要素を取得するトレーニング
    • ステージ2 DOM 要素の属性・テキストを変更するトレーニング
    • ステージ3 DOM の構造を変更するトレーニング
    • ステージ4 DOM イベントを利用するトレーニング
    • ステージ5 非同期処理のトレーニング
    • ステージ6 モジュールを実装するトレーニング
    • ステージ7 よくあるイディオムを読むトレーニング
    • 解答・解説について

資料の全体は、mixi-inc/JavaScriptTraining からご覧いただけます。

内容に盛り込めたこと

Custom Elements + CSS Animation

すでに Stage1 に挑んだ方は、唐突に現れる「アレ」に驚いたかもしれません。 実は「アレ」は Custom Elements + CSS Animation によって実現されています。

この Custom Elements は、Web ページの再利用性を高めることを目的とした新しい技術のひとつです。また、CSS Animation は CSS で実現できるアニメーション技術です。

これらの技術の利用に至った理由をまとめると、Elements タブから意図した HTML タグを見つける方法も学んで欲しい、ということになります。

Stage1 では、ほとんどが開発ツールのインスペクター(虫眼鏡のアイコンのツール)で見たい情報を調べることができます。しかし、ときにインスペクターでは捕捉できない要素(不可視・アニメーションしている要素)の調査をしなければならない状況に出くわすこともあります。その場合は、開発ツールの「Elements」タブから、地道に HTML タグを辿っていくことになるでしょう。この状況を体験してもらいたいという意図があって、簡単にはわからない目印 + インスペクターでは捉えられない要素といった、2つの条件を満たすべく、Custom Elements と CSS Animation を採用しました。

ES6 Promise + Fetch API

Stage5 では、ECMAScript 6 の目玉機能のひとつである Promise のトレーニングを盛り込みました。これからの JavaScript は Promise 抜きに語れない時代になりつつあります。

早い段階で Promise に触れておくことで、Fetch API などがやってきた場合に備えておこう、という意図があるわけです。

Lint の教育的活用

私は VimScript の Lint である「Vint」の開発者であるということもあって、Lint について強い信念があります。

Lint には2つの目的があるのですが、そのうちのひとつがミスの発生しやすいコードの指摘です。 JavaScript の言語仕様には多くの罠が潜んでおり、初心者はミスの発生しやすいコードを書いてしまいがちです。しかし、ESLint、JSHint、JSLint といった素晴らしい Lint たちが、ミスの発生しやすい箇所を指摘してくれます。 Lint 開発者にとっては、初心者にこそ Lint を使ってもらいたいのです。

このトレーニングでは、ステージクリア後に下のコマンドを実行すると Lint が実行できます。 ステージのクリア後には、ぜひ Lint を試してみてください!

gulp lint-stage1

内容に盛り込めなかったこと

ECMAScript 6 の構文たち

じつは ECMAScript 6 を使った内容にしようかどうか非常に悩みました。JavaScript の未来を見据えるのであれば、prototype を使った継承よりも class 構文を使った継承を優先的にレクチャーするべきだからです。最近は信頼できる ECMAScript 6 transpiler が複数公開されているため、導入も容易です。

ただ、これにはデバッグがしづらくなるという問題点があり、泣く泣く断念しました。 デバッグ難度がさほど変わらない Proimise や Fetch API については、Polyfill を使って利用できるようにしています。

ところで、ミクシィはなぜ研修資料をつくるのか

プログラミング言語としての JavaScript を学ぶのであれば、よい書籍・Webサイトがたくさんあります。しかし、私はこれらの資料がデバッグについての視点に乏しいことに不満をもっていました。 開発にはデバッグがつきものなのですから、Chrome や Firefox などの「開発ツール」によるデバッグを含めなければ、最前線で Web アプリケーションを開発できるレベルまで到達できないと考えていたのです。

また、JavaScript は進歩がとても速い言語ですから、時期にあわせて適切な内容であることも必要だと考えていました。たとえば、これまで Ajax (非同期通信)といえば XMLHttpRequest でしたが、これからは Fetch API を使って実現することになっていくことでしょう。これを見越して、非同期通信のトレーニングでは Fetch API などのこれからの技術を使いたいと考えました。

そしてもうひとつ、ミクシィの Ruby や Perl の研修資料がわかりやすい秘訣のひとつが、テストをクリアしていく形式だったということがあげられます。2013年の資料ではテストをクリアしていく形式ではありませんでした。

これらの背景を整理すると、私が研修資料に求めた条件は以下の3点でした。

  • 開発ツールのトレーニングにも重点をおいている
  • 未来の JavaScript を見据えている
  • テストを解いていく形式になっている

私の調査した限り、これを満たす資料は存在しませんでした。

欲しいものがないならつくるのがエンジニアですので、つくることにしたというわけなのです。

むすびに

ミクシィの JavaScript 研修資料を自習等にご活用いただいて構いません。

内容に誤り等あれば、お気軽にご指摘ください。 Issue や Pull Request からでも対応いたします。

御社クラック志望です: Scrap Challenge卒業生9人に8つの質問

マイナーなエレポップ・ユニットには目がない、人事 & イノベーションセンター もりもとです。オランダの2人組Rupesh Cartelいいですねー。

ミクシィでは、2004年から開発運営しているSNS「mixi」に、わざと脆弱性を仕込んだクローンを立ち上げ、みなさんに穴を探してアタックしていただくという学生向け技術イベントScrap Challengeを定期的に開催しています。最初の開催は2011年。腕に自慢の、あるいは技術的好奇心にあふれた多くの皆さんにご参加いただき、チャレンジいただきました。

加えて、このイベントを通してミクシィにご興味いただき、結果として入社いただいた腕利きの新卒エンジニアのみなさんも9名います。

ひとつの振り返りとして、いわば「Scrap Challenge卒業生」のみなさんにお話をうかがってみました。

ミクシィでの仕事

: 皆さん今日は年末のお忙しいなかどうもありがとうございます。Scrap Challengeがご縁になって仲間になったみなさんに、まずは最初の質問として、「ミクシィでどんなお仕事をしてらっしゃるのか」概要を教えてください。

北原さん: 入社年度は13年(2013年)、新卒として入社しました。得意な開発分野はAndroidでのネイティブアプリ開発です。入社してまずは社内新規系Androidアプリの開発を行い、その後で「mixi」のサービスの改善に移りました。プロフィール機能の改善は、Web版、Android版、iOS版と、クロスプラットフォームで担当しています。他は社内のコードレビューにも関わりました。

へんてこさん: 2014年入社です。5月の配属からは、「mixi」のネイティブアプリ(主にiOS)の開発を行っていました。iOS 8が出る時期には、新機能であるShare Extentionなどの実装をしていました。また10月からはDeployGateに配属が変わり、今は主にサーバーサイド(Rails)の開発を行っています。

生島さん: 13年に新卒で入社しました。「mixi」事業において、データ分析基盤の整備と、実際の分析業務を行っています。

鈴木さん: 同じく13年に入社です。「mixi」のiOS版アプリの開発をやっています。

f:id:mixi_engineers:20141222163510j:plain

2014/11/16開催Scrap Challengeのチューターを務める鈴木さん

木下さん: 2013年入社です。「mixi」の、おもに期間限定コンテンツを手がけています。例えばタイアップ企画などですね。開発対象の種別としてはWebアプリケーションです。

: ここまでが、2011年12月4日のScrap Challenge第1回開催に参加いただいたみなさんですね。Scrap Challengeは、それほど採用色イベントは強く出さず、参加者のみなさんの想定入社年度にもこだわっていないので、参加後の入社年度もいろいろだったりします。
このときの第1回の様子はtogetterでもご覧いただけます。


當眞さん: 2014入社です。「mixi」のコミュニティを担当しています。WebアプリケーションとAndroid版アプリの両方をやっています。

f:id:mixi_engineers:20141222164320j:plain

2011/11/16 Scrap Challenge懇親会での當眞さん

 

国分さん: 「mixi」のトップページ、いわゆるhome.plの高速化を担当しています。同じく2014年入社です。

齋藤さん: 同じく2014年に新卒で入社です。入社前にはCS(Customer Satisfaction)でモンスターストライクの問い合わせに対応する際に使用される管理画面の改修や機能追加を行っていました。入社後は研修の後、グループ会社の株式会社Diverseで婚活支援サイトのyoubrideのサーバサイドの開発や同期と共に会員の分析や施策の提案、実施を行っていました。

齋藤さんはその後、秋に新進気鋭のベンチャーにジョインされ、2社をまたがって技術的活躍しています!

 

 

: 當眞さん、国分さん、齋藤さんは2013年1月19日のScrap Challenge第5回の参加者ですね。


2013年入社の鈴木さんもそうですが、當眞さんと国分さんには、その後Scrap Challengeの概論やチューターも担当いただいてます。参加する立場から、今度は開催する立場へと転身。

参加した理由

: では、Scrap Challengeというイベントはどうやってお知りになりました? 参加した理由もあればぜひ。

齋藤さん: Twitterで流れてきて知ったと思います。

生島さん: Twitterか就活サイトで知りました。

北原さん: 就活系サイトですね。

木下さん: ミクシィのエンジニアさんから「遊びに来たら?」と誘われて、会社見学中にイベントのことを教えてもらって知りました。

鈴木さん: 僕も、木下さんと一緒に会社見学したときに聞きました。

へんてこさん: 大学でも会社でも1年先輩にあたる鈴木さんが参加すると言っていたので知りました。

: おお、最初はメディア経由になりますけど、その後はいわゆる口コミやつながり経由にもなってきてるんですね。

當眞さん: 某社の説明会で会った就活生仲間に教わりました。

国分さん: 「リアル版:サンタのためのコードゴルフコンペ&クリパ」というイベントで話を聞いて知りました!

: リアルが充実……

北原さん: 参加した理由ですが、当時はまだネットワーク・セキュリティに関する知識がそんなにありませんでした。しかしセキュリティまわりを押さえておくのは非常に大事だと思っていました。かつ、「mixi」ってすごい規模と技術でできていると思ったので、そこが開催するセキュリティ関連イベントなら、知識に結びつく体験が得られると思ったのです。

斎藤さん: 以前からセキュリティには興味があったからです。昔セキュリティキャンプに参加したのが懐かしく、こういったイベントに改めて出たいと思いました。

鈴木さん: 面白そうだったからです(うなずき多数)。「mixi」を攻撃できるチャンスというのは面白いです。そのころ、同じくミクシィのBuild Challengeという、Androidネイティブアプリを開発するワークショップイベントにも参加したので、Build(創り上げ)してScrap(ぶっ壊す)するという組み合わせも面白いと思いました。

木下さん: 同じく面白そうだったからです。そのころは就活まであんまり考えてなかったですし。

: あんまり「就活就活」したイベントにはしたくなくて、その辺は少しゆるくやってきているので、そうおっしゃっていただけると嬉しいです。

當眞さん: 面白そうだったし、面接や会社説明会ではなくイベント参加なのに、沖縄からの交通費も助けてもらったのが良かったです。

: なるほど…… じゃあ、他にも勉強会とか、あるいは会社開催の就活系イベントには出てました?

北原さん: 就活のころはいろいろと。もちろん、技術勉強会系のイベントは結構当時は参加していました。新規事業のアイディア出しイベントにも出ていました。

斎藤さん: 逆求人形式のイベントや新規事業コンペなど様々なイベントに出ていました。ただ、こういったCTF形式のイベントの参加は初めてでした。

鈴木さん: 就活っていうより、勉強会の一環ですね。

木下さん: 鈴木さんといろんな勉強会に行ってました。各社のエンジニアと話せるのもチャンスです。

続きを読む

ミクシィスマホアプリ研修説明会を開催しました & iOS-Training #1 開催のお知らせ

最近の作業用BGMは、マリオ&ルイージRPG3!!!のイン・ザ・ファイナル です。

こんにちは、武田です。

 

さて、先日お伝えしたオープン版スマホ研修の説明会の模様とiOS研修の第一回目についてお伝え致します。

 

説明会の模様について

 

説明会の概要については、connpassのページをご覧ください 


第0回 iOS/Android Training(説明会) - connpass

100名の枠に対して200名以上の応募をいただき、その反響にびっくりしているのですが、皆様の期待に応えらえるように講師一同頑張っていきたいと思います。

また、先日の説明会に参加できなかった方でも、本編の方は参加いただけますので奮ってご参加ください。

続きを読む

ミクシィスマホアプリ研修をオープンに開催します

はじめまして、mixiのiPhoneアプリ開発などをやっています武田です。

最近サントラ欲しさにスマブラを買いました。

 

さて、1年半ほど前に社内でのスマホアプリ研修を行い、その資料を公開したり電子書籍化などを行いました。

ただ資料も古くなっている部分などもあり、その更新も兼ねて第2回の勉強会を行うことになり、どうせなのでオープンな形で開催しようという運びになりましたのでお知らせいたします。

続きを読む

VimConf 2014 と Vim と mixi

こんにちは。エンジニア兼 Vimmer、Kuniwak です。11月08日(土)、Vim の国際的な会議「VimConf 2014」が弊社でおこなわれました。

VimConf では、Vim の機能の詳細な解説や、自作プラグインの紹介、Vim の未来など、多くの Vim に関するディープな知識が発表されています。また、登壇者陣も非常に豪華で、Vim のコントリビュータから、Github で 1,500 もの☆がつく有名プラグインの作者など、Vim をとりまくさまざまな開発者が登壇しています。

発表タイトル一覧は、Timetable - VimConf 2014 をご覧ください。

なお、ミクシィも Vim に支えられている一企業として、Vim との関係についてお話ししました。

それぞれの発表の様子

続きを読む

mixi SNSを攻略しよう! Scrap Challenge 2014年度シーズンのご案内

Aphex Twinの13年ぶりの新譜 'Syro'、捨て曲なしで素晴らしいですね。もりもとです。

株式会社ミクシィで毎年開催している、学生向けのWebセキュリティ実体験イベント 'Scrap Challenge' が、2011年に始めてから かれこれ4年目になりました。
もちろん今年度もやってますよ! ということで、これまでの道のりと、改めての内容のご紹介です。

f:id:mixi_engineers:20141028142113j:plain f:id:mixi_engineers:20141028141948j:plain

自社サービスを攻撃させるイベントを思いつく

どこの会社でも、優れた能力をお持ちの方と知り合いたいと思うのは同じです。
また、どうせなら面白いことをやろうと考えるのも大事なことだと思います。ある課題に対する解決策がいろいろあるとき、「可能性」「重要性」「簡単さ」といった軸で切り分けて、それぞれの判断をもとに総合的にどうするか決めるというやり方*1がありますが、いずれも甲乙つけがたいぞ、といったケースでは、「やって面白いかどうか」も加味すべき評価軸だと考えます。課題はひとが成すものですし、ひとに取って面白さは大事なこと。課題自体がひとの交わりであれば、なおさらです。

ミクシィの仲間を採用していくうえで、優れたよい人たちとご縁を作っていくにはどうしたらいいか。エンジニア領域において、技術力や課題解決能力に実技面でも優れたみなさんとどうやって知り合っていくか。
それにはプログラム・コンテストなどいろんな方法がありますが、他にはないユニークなものをやってみたい。そこから2011年の夏頃に思いついたのが、「わざと脆弱性を作り込んだSNS mixiのクローンをみんなで攻撃してもらう」という、Scrap Challengeという技術イベントです。
一種のCTF風味もあると思います。企画立案中は「風雲! たけし城」と呼んでいました。

f:id:mixi_engineers:20141028141953j:plain

思いついたはよいのですが、社名をそのまま背負っている、ユーザのみなさんのプライバシーもお預かりしているサービスの、たとえクローンとはいえ、サイトを参加者に疑似攻撃してもらう技術イベントというものが社内で認められるか。ひょっとしたら微妙かな、怒るひとがいるかもなぁ…… とも思いつつ提案をまわしてみましたが、拍子抜けするほどに「それ、面白いね!」という反応が得られ、じゃあ各種機能のどのへんにどう穴をあけていこうか、という検討に進むことができました。このへんは、課題を面白い方法で解決していこうじゃないかという社風のよいところ、風通しのすっきりしたところだと思います。

どういう穴を開けていこうか、たとえばport 22にsshdを開けておいて、でもそれはhoneypotだよ、あるいはパケットレベルでいじってもらい…… と企画は膨らみましたが、ある程度いろんなスキルの方にWebセキュリティの実技を体験していただきたいという思いもあったので、当初はいわゆるXSS的な課題にしぼっています。実技を通した競い合いでもありますが、それ以上に、普段はできない体験をしていただき、学んでもいただければうれしいと感じているからです。参加者のみなさんに「面白かった」という体験を持ち帰っていただくのが一番大事なことです。

Scrap Challengeに出てくる課題たち

イベントは、弊社で勉強会やイベントをよく開催している「コラボルーム」にお昼まえに集合いただき、まずはWebセキュリティ概論からご説明します。
一般的なお話だけでなく、mixiというSNSが長年体験してきた、いろんなissueも含んで、実例をあげて説明していきます。
そのあとはみなさんの環境設定も兼ねたチュートリアル。
これから攻略する「偽mixi」にログインしていただき、弊社が設けた「やられ役」のmixiユーザたちとマイミクになっていただいたりします。
「やられ役」は、当日アテンドするミクシィ社員が務めます。挑戦者から送られてきたmixiメッセージを、全部言われたとおりに開いてクリックするなど…… この係の呼び名は「鴨ネギ」です。

f:id:mixi_engineers:20141028141955j:plain

その後、簡単な実例を、チューターと共に解いてみて、この手のアタックがはじめての方への手ほどきや、ウォーミングアップも兼ねます。
アイスブレイクを兼ねた昼食もはさんで、そのあとがいよいよ実技です。

f:id:mixi_engineers:20141028142000j:plain f:id:mixi_engineers:20141028142002j:plain

実技の時間は2時間半設けています。攻略すべき課題がみなさんに示され、偽mixiに挑んでいただきます。時間を追って、だんだんヒントが出てきたりしますが、そのかわり課題攻略成功時に得られるポイントは減っていったりします。ゲームバランスってやつですね。

f:id:mixi_engineers:20141028142003j:plain f:id:mixi_engineers:20141028142007j:plain

f:id:mixi_engineers:20141028142008j:plain

具体的な内容の説明は…… ここでは控えさせていただきます。ご興味お持ちのみなさんは、ぜひエントリしてお試しください!

かれこれ運営3年め

Scrap Challengeを最初に開催したのは2011年の冬です。


当時は社内の開発用サーバの一部を専用に割り当てて偽mixiを稼働させましたが、競技開始直後に思いのほか負荷が高くなり、その場で速攻で台数を増やしたりなど…… 想定と違うところで攻略されてしまったりしました。

それから、いったんAWSにプラットフォームを移したり、社内で開発運用している仮想サーバ運用プラットフォーム 'Gizmo' で動かしてみたり (くわしくは「OpenStackとLXCを導入した話 - mixi Engineers' Blog 」をご覧ください)、運用側もさまざまなトライを繰り返しています。

出題面でも、むやみに難しくせず、とはいえ攻略の楽しみも確保したいと、言うなればゲームバランスも大事なところです。
先日まで、全問攻略完了チームはいませんでした。あと20秒あれば全問正解だったのに…… というチームがこれまでのベストだったのですが、ついに2014/8/23の回で、全問クリアのチームが出てしまいました。微妙にくやしい……(笑)

とはいえ、通算8回も開催してきた結果、いままで157名もの学生のみなさんに出場いただきました。その中には、Scrap Challengeを通してご縁ができて、いまは同じくミクシィで活躍されている若手エンジニアも10名近くいます。加えて、インターンとして実務体験のご縁ができたみなさんも。
気がつくと、Scrap Challengeで知り合った学生さんだったみなさんが、いまやミクシィの若手エンジニアとして、Scrap Challengeの司会や解説、あるいは鴨ネギをやってくれたりしています。企画の言い出しっぺとしては嬉しいかぎりです。

Scrap ChallengeはSNS mixiを題材としていますが、ご縁となって入社されたみなさんは、モンスターストライクであったり、あるいはDeployGateであったり、もちろんSNS mixi、あるいは新規事業と、Webアプリケーションやネイティブアプリ、ミドルウェアといったレイヤにかかわらず、優れたエンジニアとして活躍していただいています。

何かしらWebやネットワークに関わる立場であれば、Webセキュリティに関する実務的知識は素養として大事ですし、そういった知識をイジワルな課題に対してあれこれ行使する地頭と突破力は、どんなエンジニアリング領域にも通底する能力だと思います。

f:id:mixi_engineers:20141028142011j:plain f:id:mixi_engineers:20141028142014j:plain

このように、他では中々できない技術体験を一緒に行うと、学生さん側も、社員エンジニア側も、体験共有を通して仲良くなれます。

技術解説の中にはオフレコなトピックもありますし、その後の懇親会でも、フードや飲み物と一緒に、楽しく濃ゆい語らい(S式な話とか、マニアックなコンパイラの話とか……)や、ミクシィのエンジニアのワークスタイルや考え方など、エンジニア志望のみなさんには楽しい時間だと思います。

f:id:mixi_engineers:20141028142016j:plain

ともあれ、Scrap Challengeのねらいは「おもしろかった! と思ってもらうこと」です。
せっかく足を運んでいただくリアルイベントなのですから、他ではできないユニークな体験知見を過ごしていただくこと。これが大事です。
よき採用につなげたい思いももちろんありますが、エントリいただくみなさんが新卒採用年度にマッチするかどうかは、それほどこだわっていません。

f:id:mixi_engineers:20141028142018j:plain

今年度(2014)は、すでに夏休み中の2014.8.23に一回開催し、次の開催は2014.11.16(日)です。2014.11.5までエントリ募集中です。募集数によっては、2015.1.17にも続けて開催の予定はあります。11月がゼミなどで忙しい方は、ぜひ1月を楽しみにしていてください。

当日の様子は、みなさんにどんどんtweetしていただくのも歓迎しています。ネタバレはダメですが…… 我々もその模様を毎回togetterしたりしています。#mixi_scrapで検索していただければ、いままでの様子がわかると思います。

ほほう、と思った方は、ぜひ見てみてください。 

そして、いつか将来のScrap Challengeを、ともにネタ出ししたり開催したり、新たな挑戦者の学生さんと語らったりする側に、一緒に立てれば嬉しいです。

f:id:mixi_engineers:20141028142020j:plain

*1:Potential + Importance + Ease = Scoreで考える、PIESフレームワークってやつですね

Copyright © mixi, Inc. All rights reserved.