mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

社内研修「JavaScript基礎」の資料を公開します!

どうも、新卒2年目エンジニアでJavaScript委員会の重田です。
帰省がてら鳥取砂丘や小豆島に行ったらだいぶ日に焼けてしまいました。

さて、もう4ヶ月ほど前になってしまったのですが、新卒研修でJavaScript基礎の講師を担当したので、そのときの資料を公開します。加えて、JSを学ぶ上で押さえておくとよいポイントを解説します。

研修資料

https://github.com/mixi-inc/JavaScriptTraining

JavaScript初心者向けの資料になります。
JavaScriptに触れるのがはじめての人でも、配属後すぐに活躍できるようになることを目指して研修を実施しました。

デベロッパーツールで素早くトライ&エラーを繰り返し、JSを学ぶ

去年ぼくはこの研修を受ける立場でした。今年の講師を担当するにあたって、研修の進め方で最も変えたのはデベロッパーツールを積極的に使うようにした点です。

デベロッパーツールとは、Google ChromeやSafariなどのWebブラウザに付属している開発者用のツールで、HTML, CSSやJSを使った開発には欠かせません。chromeの場合は「右上のメニューボタン → ツール → デベロッパーツール」で起動できます。


右上のタブの1つにConsoleがあります。ここでは、JavaScriptのコードを自分で入力して実行することができます。すぐに実行結果を確認できるので、JSを学ぶのにもってこいです。


青が自分で入力したコード、次の行がそのコードの評価結果になります。

研修時は、introduction.jsを前で実行しながら説明して、実際に打ち込んでもらったり、コンソールからmixiのHTML/CSSを操作する課題(資料のp39, 40)をやってもらったりしました。


また、JSを理解する上で重要なポイントに

  • JSの世界ではだいたいのものがオブジェクト(ざっくりいうと複数の変数を1つにパッケージングしたもの)
  • 関数を変数に代入できる

というのがあると思うのですが、console.dir()を使うとそのへんもわかりやすいです。

例えば、jQueryエレメントを生成して、console.dir()で出力してみるとオブジェクトがもつ値やメソッドの一覧を見ることができます。


これを見るとbodyはaddClassやappendといったメソッドをもっていて、その実体は関数であることがわかります。コンソールにbody.appendと入力して実装を見ることもできますし、body.append()と入力して挙動を確認することもできます。

研修では、これ以外にもDOMやイベント駆動について解説しました。

おわりに

今回公開した資料とデベロッパーツールを使って、ぜひぜひみなさんもJavaScriptを学んでみてください。 資料の最初の方にも書きましたが、JavaScriptはブラウザさえあれば実行でき、いろんなプラットフォームで動作するサービスをつくれるので楽しいですよ!