Frontrend Advent Calendar 2014の15日目の記事です。 
近年NYLONを始めとするファッション雑誌でit girlと呼ばれるキーワードを目にします。NYLON JAPANではit girlを募集していたりします。しかし実際のところ何をもってit girlと呼ぶのか定義は難しいです。ここではitをもう少し具体的にJavaScriptのデキる女 JavaScript Girlとして、it girlになるための第一歩紹介します。JavaScript Girlsは俗に、JS Girlsと呼ばれ、今ではLINE スタンプになるほどの人気です。it girl憧れる女子のためのJS Girl入門方法を紹介します。
必要なもの
必要なものはすくない。
- Macintosh
- インターネット
- 本
Macintosh
パソコンじゃないですMacです。Mac OS X以降、Unixのパワーを活かせるため、多くのJSオジサンがMacを使っています。
近くのJSオジサンにWindows でwifiが繋がらないとか嘆いても基本的に対処してくれません。しかもWindow 8以降の場合は、確実に逆ギレされます。
Mac Book Pro 15inch
Mac Book, Mac Mini, iMacと機種はいろいろありまが、JS Girlになるためには、Mac Book Pro 一択です。
リンクも貼っておきます。PCを持っていなくてもiPhoneのアップルストアアプリをインストールすれば、お店に行かずに買うことができます。MacはApple Storeだけでなく、近所の電気屋で買うこともできますが、カスタマイズできない場合が多いので、Apple Storeで買うか、ポイント貯めたいなら、Sofmapを利用します。Apple Storeは定期的にローンの金利を安くしたりしますが、それでもSofmapの分割のほうが安い場合があるので、Genius Barのイケメン外国人にそそのかされないように冷静にSofmapのおじさんにも見積もりをとってもらいましょう。
メモリとストレージ
メモリと、ストレージは出来る限り大きくしておきましょう。無駄にVMを走らせることができますし、コンパイルも早くなります。
キーボード
キーボードは好みで、イケメンエンジニアとペアプロしたいという目標があるなら、USキーボード選択はよいと思います。おすすめはMac Book Pro 15inchです。
Mac Book Pro 15inchの理由
Mac Book Airのほうが軽くて良いのではという意見もあります。Mac Book Proそれも15inchを選択する理由は、幾つかあります。
1つ目は、パフォーマンス面。やはり、Airやその他の下位モデルよりもはるかに高性能です。Airなどは2〜3年で動作的に辛くなってきます。これはハードウェアの劣化だけでなくソフトウェアの進化も影響します。ソフトウェアも日々進歩していて、より高いハードウェアのスペックを要求します。Mac Book Airをメインマシンとして買ってしまった場合、将来トレンドになる便利ソフトを使うのにハードウェアのスペックが足りずにストレスを感じることになるかもしれません。
2つ目は、大きなディスプレイです。フロントエンドではPhotoshopやSketchといった画像編集ソフトも使います。また、iPhone Simulatorを使って動作確認する場合は、縦方向の解像度がそれなりに必要です。iPhone 6 plusの場合、縮小表示しない場合、縦方向に1080px以上必要です。
Mac Book AirはRetinaディスプレイでもないので、このあたりの確認を行うためにはMac Book Pro 15inchを選択するしかありません。
3つ目は大きなディスプレイによる不可抗力ですが、もっとも重要な特徴です。それは筐体により多くのシールを貼ることができる点です。
近年IT勉強会が普及しています。主に、開催者はこぞって、シールを作るようになりました。クソみたいなデザイン・クソみたいな素材なシールから、不必要にこだわったシールまで、様々なIT系シールが日々作成されています。一度勉強会に参加すれば、たくさんのシールをお土産として持って買えることができるでしょう。これらのIT系シールは家のタンスに貼るものではありません。Mac Book Proの背中に貼ってください。多くのエンジニアがApple製Mac Bookを使っています。そのため無個性になりがちです。Mac Book の背中にIT系シールを貼ることによって、会社で他人のMac Bookと間違えたりしなくなります。また多くのJSオジサンたちはIT系シールをMac Book Proに貼ることで、無駄な自己主張と少しの自己満足を得て明日のコードへの糧にしています。自分自身は普段全身ユニクロでもシールで自己主張しようと頑張るのです。とはいえ、IT系シールの無駄な自己主張が痛いのはおじさん達だけにいえることで、JS GirlsがMac Book ProにIT系シールを貼るのは最高にクールです。どんどん貼りましょう。
Mac Book Proの賞味期限は3〜4年程度なのでMac Book Airよりも1〜2年長く使えるのでシールもより多く貼れるはずです。積極的に勉強会に参加して、Mac Book をシールでうめつくしましょう。
http://tsuchiyashutaro.com/archives/4828
http://manemanezi.hatenablog.com/entry/2014/12/09/204316
本
電子書籍でもいいですが、書籍で買っておくとよいでしょう。重量があるのでブックエンドの代わりにもなりますし、勉強にもなります。常にバッグに入れえおけば、不意に刺されそう担っても防御できます。基本的に〇〇入門系は買わなくてよいです。代わりにQiitaやドットインストールを使えばよいと思います。フロントエンドの技術の書籍特に紙の書物は基本的に、出版されたころには過去のものになっていて当てになりません。これは技術書の出版が持つ根本的な欠陥です。技術は常に変わっているし、毎晩誰かのコミットがmasterに取り込まれるので、それを紙の書籍にすることは不可能です。どれがいい本かなとか悩む暇があったら、Qiitaを検索しましょう。本屋に言ったり、Amazonのレビュー読んだり、発送を待ってるのは時間が無駄なだけです。
Mac Book のセットアップ
JS Girlsになるためには、開発のためのツール群をインストールしないといけません。近年のMac OSには、Apple純正のApp Storeが付属していて、ここからiTunes Storeのようにアプリをインストールできます。しかしXcodeを除く、多くの開発ツールはApp Storeでは配布されていません。一つ一つ、ホームページを訪れてダウンロード&インストールを繰り返しても良いですが、それだけで一日が終わってしまいます。JS Girlsはデートやネイルに忙しいので、実際はそんなことやらずに、homebrewを使って自動でインストールを行うのが一般的です。
Xcodeのインストール
泣きながらApp Storeを開いて、Xcodeをインストールしましょう。インストールが完了したらCommand Line Toolsをインストールします。おもむろにターミナルを開いて以下のコマンドを実行しましょう。
ターミナルの開き方は、まずキーボードのcontorlキー + スペースキーを同時におして、Spotlightを開きましょう。出てきたフィールドに「ターミナル」と入力すると候補ができてます。アプリケーションのターミナルを選択して起動しましょう。
$ xcode-select --install
Homebrew
[homebrew] (http://brew.sh/) はbrew install 〇〇の形で〇〇をインストールできます。
Command Line Toolsと同様にターミナルからインストールします。
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
homebrewがインストールできたら、同じようにターミナルで以下のコマンドを実行して、homebrewの状態を最新の正常な状態に保ちましょう。
$ brew doctor
$ brew update
まずはじめにwgetをインストールしてみましょう。wgetはインターネット上の画像を収集するのにも使える便利なコマンドです。
$ brew install wget
インストールが終わったら、whichコマンドを使って、インストールされていることを確かめましょう
$ which wget
/usr/local/bin/wget
/usr/local/bin/wgetのようなURLのようなものが出たら正常にwgetがインストールされていることになります。
wgetコマンドを使ってみましょう
$ wget http://upload.wikimedia.org/wikipedia/commons/e/e1/Ryuichi_Sakamoto_side.jpg
$ open Ryuichi_Sakamoto_side.jpg
坂本龍一の画像が開きましたか？ 
Homebrew Cask
Homebrew単体では、普通のMacのアプリケーションがインストール出来ない場合があります。そこを補うのがHomebrew caskです。Caskとかもう時代遅れという話もありますが。便利なので使っていきましょう。
Homebrew Cask
Caskのインストールはhomebrewから行えます。brewコマンドを以下のように叩きます。
$ brew install caskroom/cask/brew-cask
caskがインストールできたら、早速試しにアプリケーションをインストールしてみましょう。ここでは無料で使える最強のエディタことTextMateをインストールしてみます。
$ brew cask install textmate
インストールが完了したら、Launch Padを開いてみましょう。紫色のコスモスのようなオシャレなアイコンがTextMateです。このアイコンをクリックしてもいいですが、ちょっとした設定をすることでターミナルから開くこともできます。
TextMateを起動した状態で、“⌘ + ,” をおすと設定画面が開きます。Terminalの項目の[install]をおしてmateコマンドをインストールしましょう。インストールができたらwgetと同じようにターミナルにwhich mateを実行してみましょう。/usr/local/bin/mateが見つかるはずです。
インストールの自動化
—
brew と brew caskコマンドを使って、簡単に無料でソフトウェアを手に入れる方法はわかりました。これでは対して時間の節約にはなりません、インストールコマンドをシェルスクリプト化して一括ダウンロードして、まつエクしに行く時間を確保しましょう。
かつてBrewfileとかがあったりなかったりして、一悶着ありましたが。Brewfileを単純なシェルスクリプトと考えればなんてことないありません。
ターミナルから、TextMateを開きます。
$ mate brewfile.sh
エディタが開いたら、インストールコマンドを書いていくだけです。caskからインストールするものはbrew cask installとします。サンプルのbrewfile.shはこちら
実行
$ sh brewfile.sh
これでbrewfile.shに書かれたインストールコマンドが実行されて、開発に必要なツール群が手に入ります。
エディタの選定
エディタの選定は重要です。将来に渡るエンジニア人生を決める決定かもしれないので、慎重かつ大胆に決めましょう。
おすすめのエディタはいかになります。（上からおすすめ度高）
- TextMate https://github.com/textmate/textmate
- vim
- NeoVim http://neovim.org/
- MacVim https://code.google.com/p/macvim/
- VimR https://github.com/qvacua/vimr
- emacs
- Atom https://atom.io/
- Adobe Brackets http://brackets.io/
- メモ帳
- Sublime Text
TextMateはお勧めですが、将来が不安なのでここでは、残念ながらvimを選ぶことをおすすめします。GUI系のvim MacVimやVimRでも良いでしょう。違いは色の選択肢が広がること、スクロールなどOS標準のインターフェースが使える点です。
CUIのvimはMacなら標準でインストールされているし、何より無料なので、vimを使って節約しましょう。間違ってもSublime TextやWeb Stormを購入してはいけません。女子は、ファッションや遊びにお金を使うべきです。Adobe BracketsもRaphaëlの作者Dmitryが一枚噛んでるから気になりますが、まだまだ不安定な部分が多いです。
標準インストールされていて、無料なら、emacsでも良いのではという意見もあります。でもVivian Westwood,Louis Vuitton, Victoria's Secretなどクールなものは”v”が付いています。あなたがイケてるJS Girlsを目指すなら”v”imを使うべきなのです。
Vim
vimは一日にしてはならず、とよく言われています。どんなに使いづらくても、毎日Vimに触れるようにしましょう。日記や日報を書くのにvimを使うのも良い練習になります。
Hello, World!
プログラミングの始まりはいつでもHello, World!です。電子工作におけるLチカのようなものを、”Hello, World!”と呼びます。世界にはおびただしい数のプログラミング言語がありますが、多くの言語のチュートリアルはどれも”Hello, World!”から始まっています。
さっそくはじめてのプログラムを書いてみましょう。開発環境は整っています！ここではMac Bookの歴史を振り返りながら、アラン・ケイの白髪を思い受けべつつ、Smalltalkを使います。
Smalltalk
$ vim hello.st
'Hello, World!' printNl!
$ gst hello.st
Hello, World!
Lua
Huluでワイルド・スピード MEGA MAXが配信されているので、Luaでやってみます。
うまく動けば”Hello, World!”と標準出力に表示されるはずです。簡単すぎるのでもう一個ぐらいやってみましょう。
vim hello.lua
print("Hello, world!")
$ lua hello.lua
Hello, world!
なんとなくプログラミングする感覚がつかめてきたと思います。あとは時間の許す限り、Runnableへ行って片っ端からHello, Worldしていきましょう。
Runnable http://runnable.com/
チュートリアルなら、ドットインストールを使うのもありでしょう。
ドットインストール: ドットインストール
ドットインストールの中には無責任なチュートリアルもあるので、ドットインストールで分かった気にならないように注意が必要です。ドットインストールは計算ドリルとか同じで、それだけやってれば算数がわかるものではありません。
インプット
JS Girlの初期は基本的に地道な学習の日々が続きます。なるべくお金と時間をかけずに効率よく一人前のJS Girlになるために頑張りましょう。
インターネット
基本的なインプットはインターネットがあれば大丈夫です。検索しましょう。
TwitterやFacebookでJSオジサンたちをフォローするのも有効です。どうしてもキモいからFacebook繋がりたくない場合は、Facebookの購読機能を使って購読しましょう。GunosyやSmart News確実に良質なフロントエンド情報をあなたに届けてくれます。
Qiita
Qiitaはコード版クックパッド的なサービスです。クックパッドに唐揚げで検索するとたくさんのレシピが出てくるのと同じで、「ruby インストール」とかで検索するとアホ見たいな量の投稿が見つかります。しかしQiitaは有益な情報の宝庫です。英語コンプレックスを持つエンジニアの多くはQiitaの記事で一命を取り留めた経験があるのが一般的です。
勉強会
勉強会も大事です。
コネ作りに勉強会に行くのも良いです。
最近では勉強会人数制限とか厳しいので、昔みたいにひょっこり行けなくなりました。人気の勉強会にうまく潜り込めたら、必ず勉強会行ってきた系のブログを書いて、アピールしましょう。女子要素が少ないトピックの勉強会ほど、行ってきてレポートを上げればバズります。
勉強会も大事です。
dots: http://eventdots.jp/
connpass: http://connpass.com/
アウトプット
アウトプットはJS Girlにとっては大事です。JS Girlsと呼ぶものの本質は、あなたの自身を指しているのではなくて、あなたのアウトプットです。JS的フロントエンド的なアウトプットが何もないただの女の子を我々はJS Girlと呼ぶでしょうか？サーフボードも持っていない、丘サーファーをサーファーと呼べるのでしょうか？きっと呼べないはずです。
JS Girlになりたければ、何かしらのアウトプットを出さないと行けません。
個人ブログ
アウトプットの基本は、個人ブログです。独自で運用できるのと、マサカリを持った人に遭遇する確率が少ないためです。
アメーバブログ、はてなブログ以外の場合は独自ドメインで運用したほうがよいでしょう。この辺りは、自分のブランディングに関わる部分です。技術系ブログなら、はてなが一番無難です。Tumblrでもいいですが若干コードとかが書きづらいです。Tumblrを使う場合は、Markdownモードにすることをおすすめします。
ブログではブログ名が名刺代わりになるので、慎重につけましょう。渋谷で働いていてアメブロを使うなら、「渋谷ではたらく〇〇のアメブロ」を付けたくなりますが、なんとなくこのタイトルは、渋谷の西側の緑の会社の社員という暗黙の了解があるので注意しましょう。また「渋谷ではたらく〇〇」系のタイトルはレッドオーシャンです。相当刺さる〇〇が思いつかない場合は避けたほうがよいです。
エディタの項目でも言いましたが、vimを使って日記をつけるのであれば、静的サイトジェネレータでブログをやるのも良いかもしれません、Jekyllやmiddleman、assemble, wintersmithなどいろいろありますが、ブログをやるなら最初からoctopress.orgを使ったほうが楽です。。タコが嫌いならhaxoという選択肢もありますが、個人的に関西方面しゅっしんなので、octopressを推します。
octopressやhaxoで作ったブログはgithub pagesで運用することができます。
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress
$ bundle --path vendor/bundle
$ bundle exec rake install
$ bundle exec rake preview
$ open http://localhost:4000
これでMacの中にローカルで日記をつけられる。さらにgithub pagesとしてgithubでホストしたいなら、gihub上で、your_username.github.io.gitというレポジトリを作っておき、ここにファイルを送ればインターネット上に公開されてブログが出来上がる。
$ bundle exec rake setup_github_pages
$ bundle exec rake deploy
新しい記事を書くときは
$ bundle exec rake new_post[記事タイトル]
これでsource/_posts/以下に日付と記事タイトル名でファイルが生成されるので、それを編集するだけ。
例えば
$ bundle exec rake new_post[hello]
$ vi source/_posts/2014-12-15-hello.markdown
---
layout: post
title: "hello"
date: 2014-12-15 01:48:54 +0900
comments: true
categories:
---
Hello, world
で保存して、bundle exec rake previewでhttp://localhost:4000を開くと記事が見れるはず。確認が終わったらまたbundle exec rake deployを実行するだけで新しい記事がインターネットに生まれる。githubすごい。
Qiita
Qiitaはインプットだけでなくアウトプットにも活用しましょう。気負いせずに大した事ない内容でもどんどん投稿して行きましょう。クックパッドで俺んちの炒飯の作り方を公開するのと同じくらい感覚でよいです。間違った投稿も山ほどありますし、Qiitaにはコメント昨日の他に編集リクエスト機能があるので、心のやさしいフロントエンドお兄さんが赤ペン先生のように指導してくれたりします。
例: http://qiita.com/tokimari/items/eeeffe641d918bdd0df3
QiitaではContributionという指標があります。Qiitaに投稿するということは、この激しいContributionレースに参加するということでもあります。死に物狂いで記事を書き、ストックを集めてContributionを高めていきましょう。
GitHub
個人的に学習の段階からバージョン管理する派です。いろいろなチュートリアルをやるときに、課題ごとにコミットする感じで使っています。後から振り返ったりするときも便利なので、githubに公開しないとしても自分のコードはいかなるものでも、常にバージョン管理しておきましょう。心の安らぎを得られます。
githubでソースを公開してみましょう。お遊びで作ったものでもよいので、どんどん公開していきましょう。IT業界ではgithubに公開しているコードがなければほぼ転職は不可能です。gitの使い方わかりませんといえるのは、新卒3ヶ月目までです。
ネットで調べてもどうしてもgithubの使い方がわからないという人はしょうがないので、本を買いましょう。githubに関する良書は1冊しかないので、迷わずにすみます。ランチを一週間ヨーグルトだけにして、節約して購入しましょう。
Facebook/Twitter
アウトプットしたら必ず、自分の持っているありとあらゆるソーシャルアカウントを駆使してアピールしましょう。ただし、いいねをたくさんもらってもいい気にならないように注意してください。どんなにくだらないアウトプットでも必ずイイねはつきます。それよりもQiitaのストック数やgithubのスターのほうが何百倍も価値があります。
個人的な感覚では
github star > Qiita ストック > はてなブックマーク > Twiiter fav > Faceboook like
の順に価値があると思っています。(個人の意見です)
どうでもいいね Chrome Extension
その他
英語
ほとんどのドキュメントは英語です。日本語のドキュメントがある場合もありますが、嘘が書いてあったりするので信用してはいけません。英語のしかもアップデートされているドキュメントだけを信用してください。ドキュメントもそうですが、エラーメッセージもほとんどが英語です。つまりJS Girlは英語できないと話になりません。JSオジサンと呼ばれる人たちは実は英語がペラペラです。その証拠にドヤ顔で英語のブログ記事をシェアしたりしています。英語を勉強できない人はJS Girlを諦めたほうがいいです。ポルトガル語勉強してLuaをやりましょう。映画ソーシャル・ネットワークのFacemashを作るシーンを字幕なしで聞き取れるようになるまで、毎日睡眠学習してください。
飲み会
飲み会は基本すべて参加です。
まとめ
JS Girlsに必要なのは継続的なインプットとアウトプットです。貪欲にインプットして地道にアウトプットすることが近道です。おっさんたちにただちやほやされたいだけなら、わざわざJSやらなくて良いのです。またJS Girlは自分自身のエゴでJS Girlになっていくものです。他人からJSやれよと言われて、いやいややっていても真のJS Girlにはなれません。仕事だからで割り切ってやってるうちはただのJSerです。JG Girlには強いエゴが必要です。
P.S.
つくレポや編集リクエストお待ちしています。こんな長文にしたのは、長い記事だとめんどくさいと思って一旦ストックしてあとで読む人が多くなるのではないかという戦略からです。目指せ100ストックです。
あわせて読みたい