26歳営業が未経験からプログラミング勉強してDMMでエンジニアになるまでの話

f:id:b1840943:20180827215902p:plain

 

背景

なぜエンジニアになろうと思ったか…とかはこっちの記事を見てくれたらうれしいです。この記事では実際にエンジニアになるまでの全体の流れをメインに書いてます。

 

b1840943.hatenablog.jp

 

前職の仕事をしながら、「このままの仕事でいいんだろうか」とか「本当に自分がやりたかったことってなんなんだろうな」とか考えていたときに、「やっぱり自分はプログラミングをやりたいんじゃなかろうか…」という気持ちがわいてきたんですね。

 

MacBook Proを買う

2017年10月

いきなりどうでもいい話すんなよと思ったかもしれませんが、僕にとっては一大イベントでした。「自分は多分プログラミングが好きだ」という仮説は立ったんですが、それだけで会社辞めちゃうのはあまりにも見切り発車すぎる気がしたので、とりあえず仕事終わりや休日にプログラミングをやってみることにしました。

 

プログラミングを始めようと思ったんですが、パソコンを持ってませんでした。持ってたWindowsは福岡の実家に置いてきてたので、送ってもらうか新しく買うかどちらかを選ばなきゃいけませんでした。で、思い切って買っちゃえばプログラミングのモチベーション上がるんじゃないかと思って買いました。

 

大学に入ってすぐ(5~6年前)からMacBookが欲しかったんですが、Windowsを持ってたし別にMacじゃないとダメな合理的な理由がなかったので、ずっと我慢してきたんですよね。26万円ぐらいでした。翌月のカードの請求見て走って逃げようかと思いました。

 

 

 

でも本当にこれがきっかけだったと言っても過言じゃないかもしれないです。

 

N予備校に入学

2017年10月〜2018年12月

小学生の頃にHTML&CSSをメモ帳に書いて個人ホームページを作ったり、WordpressECサイトを運用してみたりした経験はあったのですが、プログラミング言語にはほぼ触れることはありませんでした。ほとんどコード書かなくてもECサイト作れちゃうご時世なのです。

 

「とりあえずMac買ったしプログラミングを勉強したいと思ってるけど、どうやってやろうかな〜」といろんな学習系サービスを探していたときにN予備校を見つけました。

 

N予備校について書いた記事に対するコメントで

N予備校から就職とか使いものならんやろwwwとなめてたけど、 これをすべてできるなら及第点どころか即戦力やな。 

まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 ..

というコメントをしているのを見て「マジかよこれさえやれば即エンジニアなれるじゃん」と思ってやってみることにしました。

 

N予備校は大学受験のための教育を高校生向けに提供していて、月額1,000円でアプリや動画で勉強ができるサービスです。そこに新しくプログラミングコースができました。内容は「複数人で共有できる予定管理アプリ」をNode.jsでつくります。内容は未経験には重ためでボリュームもだいぶあるんですが、とてもわかりやすく根元から説明してもらえるので、なんとか最後まで終わらせることができました。

 

基本的な学習スタイルは解説資料と動画を見ながら実際に自分のMacで作業していく形です。動画は生放送とそれの録画版があって、生放送だとリアルタイムで先生に質問しながら授業を進めていきます。なので他の生徒がつまずいたとこや疑問に思った点を解決しながら進めていくので、初心者でもちゃんと理解しながら学習できるようになってます。もちろん録画版にもそのコメントは残っているので、時間を気にせずいつでも勉強できます。

 

この時点では「WEBアプリケーションのぼんやりした概要はつかめたかな…?」ぐらいだったと思います。

 

会社に退職通知&転職活動

2018年1月〜2月

一応会社規定としては退職1ヶ月前に通告することが定められていたので1月中に上司に伝えたんですが、「仕事が忙しすぎるので3月末まで勤務してくれないか」とお願いされたので、まあいいかと思って承諾しました。

 

N予備校でNodeを一通りやってみたんですが、JavaScriptを基礎から理解できてない感じがあったのでこのころはドットインストールで簡単なJSアプリを量産してました。ロジックを組み立ててコードにして一つのアプリをゼロから作るというプロセスにはある程度慣れました。

 

そしてこのころはWantedlyで転職活動をやってました。未経験でもエンジニアとして雇ってもらえそうなとこを探して、5社ぐらいカジュアル面談を受け、2社面接まで進みました。1つ目は受託系の会社。もう1つはWEB制作会社。

 

結果は全部落ちました。やはり自分のスキルの無さが一番の理由だったかなと思ってます。20代後半になって「経験はないけどがんばるるので雇ってください」というスタンスは通用しないんだな…ということを実感しました。あとは見せれるものやアピールできるものがあまりにもなさすぎて、企業側からしたらエンジニアとしてのポテンシャルがあるのかどうかの判断すら難しい候補者だっただろうなと振り返ってみて思います。

 

プログラミングスクール探し

2018年2月〜3月

転職活動がうまくいかなかったことから、照準をプログラミングスクールに合わせました。やっぱりある程度はスキルを身につけてないと相手にされないし、うまく転職活動をサポートしてくれるパートナーが欲しいと感じていたからです。

 

転職をサポートしてくれるスクールだけに絞って探した結果、TECH::EXPERTにしました。理由は別で書いたので、ぜひ見てください。

 

b1840943.hatenablog.jp

 

Ruby

2018年1月〜3月

大昔にRubyは本当に基本的な文法だけかじったことがあったんですが、すでに脳内から消え去っていたのでもう一度学び直す必要がありました。

 

まずはじめにProgateRubyコースをやってみたんですが、これがめちゃくちゃわかりやすくてどんどん学んでいくことができます。ですが、どうしても無料で学べる範囲だと一つの技術をマスターするには物足りないです。なので有料プランへ切り替えるか迷ったんですが、もうすぐ無職になる僕は1円でもセーブしたかったので他を探すことにしました。今考えればそこまで節約する必要はなかったと思います。

 

それでCodecademyをやってみるとある程度ボリュームがあって、新しく学ぶ部分が多くてわりといい感じでした。幸い英語は苦手じゃないので、いい英語の勉強にもなると思いCodecademyでRubyを学ぶことにしました。

 

でもわかりやすさでいうとProgateですね。自分の勉強の経過とかをTwitterにシェアすれば他のProgateユーザーから応援してもらえるし、オフラインのオフ会も開催されているのでモチベーション上がります。今からプログラミングやりたいならProgateをオススメします。

 

Railsチュートリアル

2018年2月〜4月

Codecademyを一通りこなしながらいろいろ探してたところ、Michael HartlさんのRuby on Rails チュートリアルを見つけました。内容は環境構築からTwitterのクローン的なものを作るというもの。

 

実は3年前ぐらいに半分程度やったことがあって、そのときはバキバキに挫折しました。初心者からするとかなりハードな内容です。もう一度チャレンジしてみようと思ったんですが、やっぱり見事に忘れてました。でも進めていくにつれてわりと楽しくなってきたのと、もう挫折はしたくないという気合いでなんとか進められました。

 

このチュートリアル自体はcloud9というクラウド開発環境を推奨してるんですが、N予備校でせっかく習ったのでVirtual BoxとVagrant使って仮想環境で進めてみました。あんまり初学者の段階で仮想環境触ることってないと思うので、いい練習になりました。

 

内容は初心者からするとかなり濃くて、全ての説明は書いてないので自分で調べる必要があるし、意味不明なエラーが出たりして何回もつまずきましたが、エラーに対する恐怖感とかわからないことに突っ込んで行くことには慣れました。

 

振り返ると、このタイミングでRailsチュートリアルやったのはすごくよかったです。MVCの概念を大枠で理解することができたので、スクールのカリキュラムを高速で消化できました。そのおかげでやったことないSQLなどにフォーカスして効率的に学習できたと思います。

 

あとRailsチュートリアルN予備校でよかったなーと思うのはGitです。常にGitを使いながら勉強してたので、TECH::EXPERTの入学時点ではぶっちぎりでGit使えてたと思います。これはめっちゃ助かった。

 

ただ注意点としては、初心者がいきなりRailsチュートリアルから入ると絶命します。チャレンジする前にある程度は基礎を固めたほうがいいです。ProgateのRubyRailsを最低2周ぐらいはしてないと厳しいかな…それでも厳しいぐらいかもしれません。

 

TECH::EXPERT

2018年4月〜6月

スクールでどんなことしてたかは毎週このブログでまとめてたので、そちらを見てください。雑にまとめるとRailsでいくつかアプリを作りました。Pairsのコピーとか、チャットアプリとか。

 

 

転職活動

2018年5月〜6月

スクールに通いながらほぼ同時期に転職活動を進めていました。面接やその準備等でけっこう時間は使うんですが、普通に転職活動するよりはスクールにもろもろ任せられるので勉強に集中できます。

 

面接した会社のトータル数は両手で数えられる程度でした。わりと早く転職が決まったほうだと思います。このころは面接と勉強でけっこう時間がなかったな〜という印象です。それでもチーム開発は進めていたのでメンバーに迷惑はかけれないし、わりと大変でした。

 

「面接で技術的な質問をされて、その質問が初歩的な質問なのに答えられないのが一番やばい」と思っていたので、基礎的な部分を本を読んでカバーしようと心がけてました。SQLとかHTTP通信とかオブジェクト指向とか、プログラミングの土台にある技術を習得しようとしてました。この辺はいつまでたっても重要なところなので、勉強しておいて損はないと思います。

 

で、DMMに内定をもらえたわけですが、僕が「カリキュラム以外のことを勉強していた」というところを特に高く評価してもらえたそうです。実際本当に何も考えずに卒業するとスクール卒業生はみんな金太郎飴状態になっちゃうと思うんですよね。学ぶカリキュラムは同じなので、なぜエンジニアになりたいのかとか、どういうエンジニアになりたいのかとか、見えづらい人材になりがちです。

 

例えば

  • 前の業界が非効率的だった→作業効率化させたいのでPythonやってます
  • 簿記の資格持ってて数字の出し入れが好き→SQLが楽しくて勉強してます
  • さいころから絵を描くことが好き→CSSのアニメーションで表現したい

(ちょっと無理やり感ありますが…)

とか別に内容は100人いれば100通りのストーリーがあると思うのでなんでもいいと思いますが、それを自分の言葉で表現できることを心がけてました。

 

その他もろもろ

不安対処法

わりと早く転職が決まった方ですが、ふとしたときに本当に転職できるのかものすごい不安に襲われることがありました。転職できたとしてもめちゃくちゃブラックな会社だったりするんじゃ…とか、本当にエンジニアとして一人前なレベルまで技術的に成長していけるのかな…とか。そんな時はいろんな記事を見て勇気をもらってました。

 

note.mu

 

gigazine.net

 

特にゆかさんのnoteはエンジニアになろうと思ったきっかけの一つでもあります。何回も読み返しました。いやー本当にこの記事に出会えてよかった。退職届を出す引き金を引いたのは完全にこの記事です。

 

お金について

だいたい3ヶ月で生活費で70万ぐらい無くなりました。これには授業料の40万弱は含まれてません。授業料を分割払いにしててよかった…。

 

なので70万ぐらいあればスクールに入って卒業するまでは心配いらないと思います。別に極端に切り詰めた生活とかではなかったです。

 

時間

スクール入る前はなんか本当に時間的に切り詰めた生活するかなと思ってたんですが、個人的にはそんなに切羽詰まった感じではありませんでした。お酒飲みに行くこともありましたし、週に3回はジムに行ってました。

 

むしろ他のこともやりたいという気持ちが強かったので、なるべくプログラミングを効率的に学習しようというモチベーションになった部分もある気がします。

 

Twitterとブログ

この二つをスクールに入学したタイミングで始めました。これは個人的にはかなりよかったと思ってます。スクールの人から「ブログ見たよ〜」って言われたり、面接官から「ブログ見たんですけど、今後も続けますか?」とか質問されたり、意外と見てくれてるんだな…と思いました。

 

スクールに入る前に転職活動しているときに、いろんな面接官から「アウトプットしないとダメだよね」って何回も言われていたので、この二つは継続してやろうと決めてました。でも僕は正直どっちも得意じゃないので、Twitterは最低一日一ツイート、ブログは一週間に一記事を必ず上げることを目標にしてました。

 

Twitterを始めたことで本当にいろんな人と出会うことができました。Progateオフ会に参加させてもらったり、Yahoo!ロッジでのもくもく会に参加させてもらったりしました。みなさん本当にモチベーションが高くて、いつも刺激をもらってました。本当に感謝しかないです。Twitter始めてよかった…!

 

というわけで、もし興味を持っていただけたらフォローしてもらえるとうれしいですm(_ _)m

 

twitter.com

 

TECH::EXPERTが一番オススメなプログラミングスクールである理由

f:id:b1840943:20180624203256p:plain

 

プログラミングスクールはすごい勢いでどんどん増えてます。でも何を基準にすればいいのかなかなか難しいし、まだ新しいスクールがほとんどなので実際どんな感じなのかあまり情報がないですよね。

 

今実際に僕はTECH::EXPERTでプログラミングを勉強しながら転職活動をしているので、なぜこのスクールを選んだのか、僕の意見を書こうと思います。

 

前提

僕のプロフィールはブログトップから飛べるAboutページTwitterを見てください。

 

前提としてエンジニア未経験からの転職を目標にスクールを選びました。なのでフリーランスになりたい人や起業したいという人にはあまりあてはまらないかもしれません。でも転職を希望しているのであればガッチリ参考になると思います。

 

複数のスクールに実際足を運んで話を聞いているのである程度は比較できたかなとは思いますが、なんせTECH::EXPERTは現在通っているスクールなのでかなりバイアスかかってしまってる前提でお願いします。

 

選ぶときに考えてたこと

カリキュラムは度外視

未経験から転職する場合だと企業側が見るのは面接時点でどのような技術を持っているかというよりも、プログラミングに対しての適性や継続して技術習得するモチベーションがあるかなど、ポテンシャルの方を重視します。

 

それに未経験からプログラミングを習得する場合、勉強する内容によって数週間で他の人と強烈に差がつくことはないです。差がつく要因としてはモチベーションの方が圧倒的に影響します。勉強内容というよりも、目の前にあるものを貪欲に吸収していけるかどうかです。

 

なので個々のスクールがどのような教材を使ってるとか、どういうカリキュラムかはあまり関係ないと考えてました。モチベーション保ってスクールに通えばどのスクールでもある程度のスキルはつくので、スクールを選ぶときに教育内容基準で選ぶのはオススメしません。

 

f:id:b1840943:20180506234642j:plain

 

メンターの質は比較できない

ネット上のいろんなスクールのレビューで「ここのメンターはレベルが低い」とか「あまり教えようという態度じゃなかった」とかいう評判をちらほら目にしていて、そんなメンターだったら嫌だな…と思ってました。

 

でもよくよく考えればそのレビューをした人たちというのは多分一つのスクールのメンターしか知らないと思うんですよ。なので他のスクールと比較してメンターのレベルが高いとか低いとかはわからないんですよね。何個もスクール通った人って相当レアケースなので。

 

「ここのメンターはレベル低いなあ」と思ってる人がもし他のスクールに行ってみたらさらにレベル低いかもしれないし、その逆も然りです。というわけでメンターは比較しようがないので、ここを軸に選ぶことはできないと思います。

 

EXPERTを選んだ3つの理由

転職保証

転職が目標だったので、やっぱり転職を保証してくれるとこがいいなと思ってました。TECH::EXPERTでは転職保証があるので、もしもの時は授業料が全額返金されます。

 

卒業生が全くどこにも行けなかったなんてことは基本的には起こらないんだろうなと思います。ですが、僕は転職保証はスクール側の責任と自信の現れだと思っているので、それがないスクールには大事な数ヶ月を預けたくないなと思います。

 

なので授業料が無料(もしくはかなり安い)とこはオススメできないです。しっかり生徒がどういうエンジニアになりたいか、どういう組織で働きたいか、そういうところまで考えた上で転職するまで面倒を見るとなると、生徒側からもお金取らないとそりゃしっかりしたサービスは提供できないと思います。

 

ちなみにお金を払った分、TECH::EXPERTの渋谷校はむちゃくちゃ快適です。静かで涼しいし、Wi-Fi爆速です。1杯100円のコーヒーメーカーもあるので、好きなときにカフェイン摂取できます。あとめっちゃきれいです。間違いなく僕の家より100倍ぐらいきれいなので教室に行くモチベーションにもなります。

 

f:id:b1840943:20180506231055j:plain

 

チーム開発

企業で働くエンジニアは100%チーム開発することになります。なのでチームで働くことをイメージしながらプログラミングを学習しているかどうかは結構大きいと思ってます。

 

もちろんチーム開発の技術的なことも重要ですが、スクールで初めて出会った人たちとチームを組めばコミュニケーションスキルやチームワークみたいなところも鍛えられます。

 

スクールに入る前に何社か未経験エンジニアとしての採用面接受けたりしてたんですけど、そのときに企業は僕が「チームの一員としてフィットするかどうか」という部分をかなり気にしてました。結局企業に入るということはチームとして働くことなので、もっともだと思います。

 

その部分を「スクールでチーム開発をした」という実績でアピールできるのは差別化になります。あとチーム開発で使うGitとかSlackはほぼ間違いなく転職してからも使うので、それを早い段階から習得できるというのも強みです。

 

コネクション

上記2点に関しては実は他のスクールでも満たすところは実際あります。ですがTECH::EXPERTが圧倒的な強みを持っている(んじゃないかと僕が思っている)のはこれです。

 

TECH::EXPERTの運営会社は「TECH::CAMP 研修」という事業もやっていて、企業にプログラミングの研修サービスを提供しているんですね。僕がスクール選びの前に転職活動していたら「TECH::CAMP 研修」を受けたことがあるという企業と話する機会があって、かなりその評判が良かったんです。

 

tech-camp.in

 

研修の評判が良ければTECH::EXPERTの評価も連動して上がりますし、いいプログラミング教育を企業に提供している会社であれば、その会社がやってるスクールの卒業生もわりと鍛えられているだろうと考えるのはごく自然です。

 

あと単純に日ごろからそういう経路でも企業とコンタクトしているはずなので、他のスクールよりも企業の採用意欲とかキャッチしやすいと思います。そうなれば他のスクールよりも卒業生を紹介しやすいはずです。

 

なので研修サービスがある分、単なる転職エージェントよりも提案力も強いはずですし、いろんな企業とのコネクションがある程度蓄積されている…と考えてます。 結局転職を目標とするのであればここが一番重要なところなので、ここが一番強そうなTECH::EXPERTにしました。

 

f:id:b1840943:20180728130609j:plain

 

実際行ってみてどうだったか

 

けっこう書く勇気がいりますが、思い切って書こうと思います。本当にこのスクールのことは好きですが、じゃあ良くないな〜と思ったとこがゼロかと言われるとそうではないので、公平に書きます。

 

いいとこ

メンターさん

他のスクールに通ったことがないので比較しようはないんですが、メンターさんは技術力が高くてやさしい人ばっかです。ほんとに個人のレベルに合わせて丁寧に教えてくれます。

 

自分より全然年下のメンターさんがめちゃくちゃ技術力持ってたりすることもあって、いい刺激になります。超有名企業で実際に働いてたりするメンターさんもいるので、現場の話を聞くこともできます。本当に勉強になったなーと思うことは、ほとんどメンターさんのおかげでした。

 

 

環境

とりあえず教室が綺麗です。Wi-Fiめちゃくちゃ早いです。ぼろっぼろの教室だとモチベーション下がりますが、こんだけ綺麗だと自然に教室に行きたくなります。周りに安くて美味しいランチも多いです。

 

わりとここはモチベーション保つ上で影響がでかい気がする…

 

転職実績

ここはほんと他のスクールに圧倒的な差をつけてると思います。たぶんウェブサイトを見比べてもらえたらわかると思います。企業名は出せませんが、有名企業への転職はざらにあります。

 

研修サービスがあることが理由かどうかは正直わかりませんが(というか多分違うw)、IT業界のコネクションは相当強いなと感じました。「なんでそんなとこのコネクションあるんですか」みたいなこともありましたし、「行きたい会社があるなら、コネがなかったとしてもどうにかしてつなげる」と言ってくれたりもしたので、この点は安心していいと思います。

 

事業の成り立ち

けっこう人材紹介会社がスクールを始めたパターンってあるんですが、個人的にはこのパターンの成り立ちのスクールはあんまり信頼できません。

 

なぜかというと、人材紹介会社がスクールを始めるパターンは常に「人材紹介」が軸にあるようなイメージがあるからです。「人材紹介事業の売り上げを上げるためにどうするか」を考えたときに出てきたのがプログラミングスクールなんじゃないかと。

 

その点TECH::EXPERTは「エンジニア育成」が軸にあります。社長も元エンジニアですし、「転職させたら終わり」とは思ってないです。エンジニアになればいいことがいっぱいあるし、社会のためにもエンジニアを増やしたい!というところから始まったスクールだと思ってます。なのでこれはほぼ言い切れますが、「仲介料さえ入ればいいからSESに売り払う」みたいなことはないです。

 

切磋琢磨できる仲間

TECH::EXPERTは入る前に選考があるので、ちゃらんぽらんな人はまずいません。それどころかみんな本気でエンジニアになりたくて入ってきてる人たちばかりなので、すごくいい刺激をもらえます。

 

なんでエンジニアになりたいと思ったかとか、これから何がしたいかとか、そういう話だけじゃなくてもっとプライベートな話をしたりとか、切磋琢磨した仲間であり友人をつくることができました。

 

よくなかったとこ

段取り

正直、入ってすぐはこれからどう進めていくのかがわからなくて、けっこう不安でした。もちろんカリキュラムは進めるんですが、じゃあいつごろ面接を開始するのか、チーム開発のメンバーはどうなるのか、スクールは自分の希望の求人を持ってきてくれるのか、いろいろ事前説明がなかった点がありました。

 

あとでこちらから質問したらいろいろ説明してもらえたし、結果的に想像と違ったみたいな部分はないんですが、とはいえ別に不安にさせる必要もないかなと思います。

 

横のつながりが弱い

「同期」ってすごい特別な存在なのに、それをつくれるタイミングって人生の中で本当に限られてると思うんですよ。でもTECH::EXPERTでは同期ができます。しかもみんな未経験からエンジニアになりたいという同じ志を持った人です。

 

そんな千載一遇のチャンスなのに、あんまり交流する機会がありません。何もしなければたまたま同じチームになった5〜6人ぐらいしか深く知るチャンスはないです。運よく活発で仲がいい同期だったのでご飯行ったりしてましたが、そうじゃなかったらけっこうさみしかったかもしれません。

 

スクールにいる間も友達と呼べる人がいればもっと楽しんで学習できるし、スクールを卒業してからもいろんな情報交換をすることもできます。こんなにコミュニティを作りやすい環境はないのに、交流する機会がほとんどゼロだったのはちょっと悲しかったです。スクールとしてここにもっと注力してもいいんじゃないかと思いました。

 

最後に

ちょっと身もふたもないこというと、できる人ってどこのスクールで勉強してもあんまり変わりないと思うんですよね。そのときに究極的に大事なポイントは自分が「いいな」と思う会社に転職できるか、です。この点に関してTECH::EXPERTは文句のつけようがないです。

 

もしスクールに行くことを考えているんだったら、僕は圧倒的にTECH::EXPERTをオススメします。

未経験者がプログラミングスクールに入る前にやっておくべき3つのこと

f:id:b1840943:20180719231420p:plain

 

僕が入学前にやっててよかったなーと思うことや、「何をしてたらいいですか?」と聞かれて考えたことをまとめました。未経験からエンジニアに転職したい人向けに書きます。あくまでスクールに通う前提の人向けです。

 

事前学習

どのプログラミングスクールも未経験者を対象にしているので、完了させるのが不可能なほど難しいカリキュラムということはありません。ですが、できるだけ早く転職を成功させることを目標として入学するはずなので、プログラミングの基礎的な部分に時間を取られることは避けたいです。

 

それにスクールに入ってから「やっぱりプログラミング好きじゃないかも…」とか「たぶんエンジニアに向いてないな…」ということにならないように、事前にある程度触っておいた方がいいでしょう。

 

おすすめはまずProgateをやってからRailsチュートリアルの黄金コースです。

 

Progate

以下の順番で学習していくといいと思います。大切なことは、理解しようとしないことです。とりあえず全体を把握することが大事なので、細かいところは「ほお〜、こんな感じか」ぐらいでどんどん先に進みましょう。

 

  1. HTML&CSS
  2. JavaScript
  3. jQuery(飛ばしていいかも)
  4. Ruby
  5. Ruby on Rails
  6. Git(とりあえずはいらないかも)

 

まずHTML&CSSはWEBページを支える最低限の技術なので、必ず押さえておく必要があります。ですが本当に必要最低限なので、WEBページを作れる以上のことは基本的にできません。そこでJavaScriptが登場します。JavaScriptは将来VueやReactを勉強するときの基礎にもなるので、やっておいて損はありません。というか絶対やってください。極論、JavaScriptさえできればなんでもできます。

 

jQueryはもしかしたら飛ばしてもいいかな…と思います。「jQueryは基礎だからやっておいて損はない」という意見を聞いたことがありますが、今VueやReactを勉強していて「jQueryやっててよかったー!!」という瞬間は特にないので、もうやらなくてもいいのかもしれません。反論は受け付けます。

 

だいたいどのスクールでもRailsを学ぶことになると思うので、RubyRailsは事前にやっておいた方がいいと思います。おまけでGitもどうぞ。

 

Railsチュートリアル

これを一周してるかしてないかで未経験エンジニアとしてランクが一つ変わる気がしてます。スクールに入ってからロケットスタートできること間違いなしです。

 

正直かなり時間かかったし、何回も挫折しそうになった(というか一回した)ので、あまり安直に未経験者にオススメはできませんが、Progate等である程度基礎がついている状態だったらぜひ一度挑戦してみてもらいたいです。

 

個人的によかったと思った点は、MVCの概念とGitの使い方を学べたところです。一周すればなんとなく「WEBアプリケーションってこんな感じで動いてんだー」っていうのがつかめるかなと思います。そこさえつかめればあとはわりと楽にスクールのカリキュラムが頭に入ってくるようになります。

 

貯金

f:id:b1840943:20180719231442j:plain

 

ある程度お金があるかどうかで転職活動がハードモードになったりイージーモードになったりします。もうすぐお金が尽きるという状態だと集中して勉強できないですよね。

 

ある程度生活のためのお金があれば、内定をもらっても「転職活動を継続する」という選択ができますが、お金がなかったらその余裕を持つのはなかなか難しいです。お金がなくなればなくなるほど、「早く転職して給料をもらわないと…!」という思考になっていくので、結果としてミスマッチが起こりやすくなります。

 

具体的には僕はざっくり100万あったらだいぶ余裕持って転職活動できるんじゃないかと思います。そこまでない状態だったとして「とにかく早くスクールに通うべき」か「まず貯金するべき」かは、僕はまず貯金してもいいかなと思います。

 

しっかりとエンジニアとしてのキャリアを見据えて、何をやりたいのかを明確にして、そこにハマる企業に転職するのがベストなので、そのためにはまず貯金して万全の状態でスタートを切る方がいいんじゃないかと僕は思います。中途半端にスタートするとそのあと全てが中途半端になる可能性が高いです。

 

スクールは必ず何週間は行かなきゃいけないというものではなく、早い人はさっさとカリキュラム終わらせて転職活動始めてすぐ卒業したりします。なのでしっかりと事前に自分で勉強してれば貯金のための期間はそこまでのタイムロスにはならないはずです。

 

情報発信の下準備

アウトプットすることは思っている以上に大事です。いろんなところで言われてることですが、実際に始める人はかなり少ない印象です。なおさらやれば目立つし、メリットしかないので絶対にやってください。Qiitaに書いたり、ノートにまとめたり、いろんな方法があると思いますが、オススメはTwitterとブログです。

 

 

なぜやるのか

アウトプットを前提にしていると、インプットと同時に頭の中でアウトプット用に編集するので、質が変わってきます。より噛み砕いて理解するようになるし、人に説明しやすくなります。体感では記憶の定着もいいです。

 

それに実際に文章にすることで自分がちゃんと理解していない部分に気づくことができるというメリットもあります。また公開することでフィードバックももらえるし、単純に文章力やプレゼン力が鍛えられるという利点もあります。

 

そういうメリットもあってか、アウトプットしているという点の面接官からの評価はすごいよかったなと感じました。大したこと書いてないのに。今でも「ほんとに大したこと書いてないな俺…」としばしばヘコむんですけどね。それでも評価してくれたのは「内容」よりもアウトプットしているという「行動」が重要なんだと思います。なのでとりあえずなんでもいいのでアウトプットしてみるのがいいでしょう。

 

準備は何をやればいいの

Twitterのアカウントやブログの開設をしましょう。自分がなぜエンジニアになろうと思ったのか、ブログにまとめてみるのもいいと思います。あとで振り返ることができるので、どれだけ自分が成長したのかを測れます。

 

あとどういう情報を発信していくのか、コンセプトもまとめておいたほうがいいと思います。わざわざ転職活動用にアカウントを作る必要はないと思いますが、全然関係ないツイートで埋まってるアカウントを面接官に見てもらってもあれなので、ある程度一貫性があった方がいいです。

 

なぜ下準備?

何を始めるにしても一番腰が重いのは一歩目です。ここを越えてしまえば二歩目、三歩目は自然と出ます。なのでスクールが始まる前に一歩目をもう踏み出してしまいましょう。

 

実際準備にそんなに時間はかからないはずなんですが、スクールが始まってしまうと忙しくなってなかなか気乗りしなくなってきます。たぶん入学前に何のアクションも起こさなかったら、卒業まで何もしないと思います。

 

なので今、やっちゃいましょう。

 

終わり

プログラミングスクールには人生を変える力があると思います。ですが、それは「入りさえすれば人生が変わる」というわけではなく、「人生を変えることができる環境を提供してくれる」だけです。結局自分がどうするか、です。

 

なので何も考えずにとりあえず入学するんじゃなくて、ちゃんと準備をして入るべきだと思います。これができてればあとからかなり楽になるはずです。辛いのは一歩目だけなので、ぜひやってみてください。

【CSS】はみ出した文字を「...」で省略する方法が簡単すぎた

f:id:b1840943:20180708122229p:plain

 

Pairsのクローンを作成していて、長すぎる文字を省略させたい部分があったので調べてみました。

jQueryでごにょごにょやるのかなー面倒くさいなーと思ってたらCSSでズバッと一撃で解決して感激したのでまとめます。

 

f:id:b1840943:20180614182531p:plain

 

長すぎるメッセージを送信した場合、最新のメッセージを表示している枠がどんどん大きくなってしまって時間を表示させる枠がおかしなことになっちゃう現象が発生しました。

本来はメッセージ本文の下に時間が入らないといけないことになってます。

 

これを解消するためにはjQueryで要素の幅とか文字数とか取得してあーだこーだやるのかなー…とか考えてたんですが、対象のCSS柴咲コウ 36歳って書いてるとこの下のaaaaaの部分)に以下の三つを追加するだけで解決しました。

 

.user_info02 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

 

これを入れるだけで

 

f:id:b1840943:20180614183132p:plain

 

こうなりました。CSSで制御できると楽でいいですね。

 

ただ注意点としては、このやり方だと複数行表示させてから「...」で省略させることはできないみたいです。その場合やはりjQueryとか他のやり方を考えないといけないですね。

 

まあでもあんまり無いケースな気がするので、大抵はこのやり方だけでなんとかなりそうです。

 

参考サイト

dev.classmethod.jp

autoplayを設定してるのにvideoが動かない

f:id:b1840943:20180629111034p:plain

背景

背景動画が自動的に流れるデザインのページを作っていて、autoplayを設定しているのに自動で動いてくれませんでした。解決方法自体はすごい簡単でしたが、その情報までにたどり着くまでまったく解決の糸口が見つからなかったので、書いておこうと思います。

 

作っていたのはこのログインフォームです。

 

 

最初のコード

最初に書いたときはこんな感じにしてました。

 

<%= video_tag "married_couple.mp4", class: "landing_video", loop: true, autoplay: true %>

 

Railsアプリなので、erbで書いてます。これで表示自体はまったく問題なくできるんですが、なぜか自動再生がされないんですよね。なので動画なのに静止画のような状態になってしまってました。

 

もちろん、コントローラパネルを表示させて再生をクリックすれば再生はされます。ですがコントローラパネルを表示させると再生ボタンとかが動画にかかって見た目が悪いんですよね…。

 

改善コード

で、調べたところ以下のようなコードにすれば解決することがわかりました。

 

<%= video_tag "married_couple.mp4", class: "landing_video", loop: true, autoplay: true, muted: true %>

 

muted: trueを追加しただけです。これを追加するだけで自動再生されるようになりました。

 

推測ですが、音が出る動画を自動再生されるとUXが著しく損なわれるので禁止してるんじゃないかな…と思います。昔(15年ぐらい前)はありましたけどね。動画じゃないけどMIDIオルゴールとか変な音楽とか流れる個人ホームページ。たしかにうるせえとは思ってました。

 

終わり

これはHTML5自体が音が出るautoplayはサポートしてないってことかな??素晴らしいっすねそれは。いきなり音が流れたらウザいし。

 

そういえばFacebookも動画のautoplay時に音を鳴らす鳴らさないでもめてた記憶があるんですが、あれってどうなったんだろ?最近Facebookのフィードがだいぶさみしくなってきたので確認とれませんでした。

【9週目】未経験からTECH::EXPERTでプログラミングやってみた

f:id:b1840943:20180701230217p:plain

 

今週は僕の開発最終週だったので、仕上げを中心にやりました。グループで個々が機能を開発して、それをマージして一つのアプリとしてちゃんと動くのを見るとやっぱテンション上がりますね!

 

スタイリング

マージするとやっぱりスタイリングが崩れるところがどうしても出てくると思うんですね。Bootstrapを入れてたブランチと入れてないブランチをマージしたりするとBootstrapが悪さしたりとか。cssファイルをimportする順番のせいで上書きされちゃったりとか。そこの調整をしました。

 

主にサイドバーなんですが、一つは現在いるページへのボタン背景を変えました。

 

f:id:b1840943:20180701225838p:plain

 

jQueryで今ユーザーが見ているページを取得して、それとリンク先が合致すればクラスを追加してます。こんな感じですね。

 

$(function(){
  $('.gnavi_item a').each(function(){
    var $href = $(this).attr('href');
    if(location.href.match($href)) {
      $(this).addClass('is_current');
    } else {
      $(this).removeClass('is_current');
    }
  });
});

 

その他もろもろきれいにしました。かなり細かい部分ばっかりなんで省略します。

 

スクレイピング

実際に誰かにアプリを見せるときにユーザーが全然いなかったらさみしいですよね。なのでダミーユーザーを30人前後準備することになりました。

 

手動で一人一人フォームから登録していくこともできますが、エンジニアを称する人間がそんな人海戦術を是とするなんて言語道断だという結論になったので、スクレイピングで女性の画像を引っ張ってきてseedでデータベースに入れていくことにしました。

 

 

いや、ちゃんとやりましたよ…?

 

だいぶ前にカリキュラムで書いたコードを改変して使いました。今回はメイン画像を一枚、サブ画像を二枚取得します。取得先は女優さんがたくさん一覧で出ているページです。女優一覧ページの女優名にリンクが貼ってあり、そのリンク先にその女優の画像がぶわっと並んでる感じです。

 

require "mechanize"

def image_page_urls
  agent = Mechanize.new
  links = []

  current_page = agent.get("取りたい画像があるURL")
  elements = current_page.search('.image_list .imageBox a')

  # get_imageで取得できない画像もあるので、多めにfirst(n)に指定する
  elements.first(40).each do |ele|
    links << ele.get_attribute('href')
  end

  links.each_with_index do |link, i|
    get_image('取りたい画像があるhost' + link, i)
  end
end

def get_image(link, i)
  agent = Mechanize.new
  page = agent.get(link)

  begin
    main_image = page.search('#1_img')
    agent.get(main_image.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}.jpg"  
  rescue
    return # メイン画像が取れなかったらこの女優は諦める
  end
  
  begin
    sub_image1 = page.search("#{i+2}_img")
    agent.get(sub_image1.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}_sub1.jpg"
  rescue
    begin
      sub_image1 = page.search("#{i+3}_img")
      agent.get(sub_image1.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}_sub1.jpg"
    rescue
      begin
        sub_image1 = page.search("#{i+4}_img")
        agent.get(sub_image1.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}_sub1.jpg"
      rescue
        puts "取得できませんでした"
      end
    end
  end

  begin
    sub_image2 = page.search("#p1_#{i+5}_img")
    agent.get(sub_image2.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}_sub2.jpg"
  rescue
    begin
      sub_image2 = page.search("#p1_#{i+6}_img")
      agent.get(sub_image2.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}_sub2.jpg"
    rescue
      begin
        sub_image2 = page.search("#p1_#{i+7}_img")
        agent.get(sub_image2.first.attributes["src"]).save "/Users/kosaburokaneko/projects/techexpert/pairs_clone/app/assets/images/avatar/user#{i+1}_sub2.jpg"
      rescue
        puts "取得できませんでした"
      end
    end
  end
end

image_page_urls

 

なんでこんなbeginとrescueがこんなことになってるかというと、画像があったりなかったりするページだったので画像を取得できない可能性があったんですね。なのでもしメイン画像が取得できなかったらその女優は諦めて次の女優に移るというようにしてます。サブ画像については取得できなかったら次の画像を取りに行って、それを二回頑張って無理だったら諦めるという風にしてます。

 

あと取得画像の制限ももっと上手な方法があると思うんだよなあ…スクレイピングはほぼやったことがないんだけど、やっぱり取得成功してデータがもりもり増えるの見てるとなんか興奮するからもっと勉強したい。

 

で、取得できた画像はそれぞれ

  • メイン画像: user_1.jpg
  • サブ画像1: user_1_sub1
  • サブ画像2: user_1_sub2
  • メイン画像: user_2.jpg
  • サブ画像1: user_2_sub1
  • サブ画像2: user_2_sub2

という風にユーザー別に保存するようにしました。最近each_with_indexが大活躍してます。

 

保存した画像はcarrier_waveを使って保存する必要があって、それをユーザーと紐づかせなければいけません。なのでseed.rbには以下のように書きました。

 

32.times do
  password = Faker::Internet.password(8)

  User.create(
    name: Faker::Japanese::Name.last_name,
    gender: 2,
    email: Faker::Internet.free_email,
    password: password,
    birthday: Faker::Time.between(50.years.ago, 20.years.ago, :all).to_s[0, 10],
    nationality_id: 48,
    narrow_address_id: rand(1..48),
  )
end

32.times do |i|
  CapturedImage.create(
    content: File.open(Rails.root + "app/assets/images/avatar/user#{i+1}.jpg"),
    status: 0,
    user_id: "#{i+1}".to_i,
  )
  CapturedImage.create(
    content: File.open(Rails.root + "app/assets/images/avatar/user#{i+1}_sub1.jpg"),
    status: 1,
    user_id: "#{i+1}".to_i,
  )
  CapturedImage.create(
    content: File.open(Rails.root + "app/assets/images/avatar/user#{i+1}_sub2.jpg"),
    status: 1,
    user_id: "#{i+1}".to_i,
  )
end

 

Fakerで日本語使う方法がいまいちわからなかったので、ruby-faker-japaneseというgemで対応しました。それでユーザー登録に必要な情報をダミーで入れて32人作成してます。

 

下の段がcarrier_waveの部分ですが、contentの部分は先ほど保存した画像を開くように設定してます。ちなみにstatusが0はメイン画像で、1はサブ画像です。これでユーザーとユーザー画像がちゃんとひも付けされるようになりました。この二つのファイルがあれば何百人だろうが自動でできます。

 

終わり

というわけで、僕の役目は終わりました。あとはグループでこのアプリを発表するだけです。とうとうここまで来てしまいました。

 

グループでスクラム開発をできたこともそうですが、既存のサービスのクローンをつくるのはすごい勉強になりました。どういう技術が実際に使われてるのかとか、CSSの細かなテクニックとか、自分で開発するプロセスじゃなかなかたどり着けない、既存サービスを研究することで初めてわかったことがいくつもありました。

 

スクールのカリキュラムとして既存サービスをコピーするのか、オリジナルサービスをつくるのか、どちらがいいのかは難しいところだと思います。正直自分でやる前は「既存サービスのコピーなんて大した勉強になんないでしょ」と思ってましたが、全然そんなことありませんでした。むしろ今では一からサービスを作るよりも勉強になる部分がたくさんあると思うようになりました。

 

あまり経験がない中でオリジナルサービスを作ろうとするとどうしても技術的に背伸びしにくい気がするんですよね。技術的にがんばるというよりも、サービス全体として一つ作り上げる方に意識が向くというか。なので結果的に本当の自分の技術的ポテンシャルより一段落ちる気がしてます。

 

でも自分の個性とか出す場所としてはオリジナルサービスってすごくいいと思います。デザインにこだわってもいいし、アイディアで勝負もできるし。もちろん技術的にすごいサービスってとこを狙ってもいいですし。

 

でもいろいろ考えた上で、多くの人には既存サービスをコピーする方が転職には役立つんじゃないかと思います。転職目的では。大概WEBサービスのアイディアなんてすでに作られてるので、どうせそういうインパクト勝負ができないんだったらコピーした方が見た目もきれいだしいろんな話もできると思うんだよなあ。

【8週目】未経験からTECH::EXPERTでプログラミングやってみた

f:id:b1840943:20180623102157p:plain

ポイント機能

ポイントをクレジットカードで買うことができる機能を実装しました。と言っても決済機能を実際に実装するわけではなく、単にダミーのカード番号等を入力するとポイントが増える、といった動作をするという感じです。

 

f:id:b1840943:20180623103142g:plain

 

文章にするとシンプルなので実装開始前はわりと簡単かなと見積もってましたが、ちょっと悩んだ点がありました。ユーザーにフォームに値を入力してもらった後に確認画面に遷移するんですが、その確認画面でどうやって入力された値を表示させるかです。

 

今回決済機能は実装しないのでフォームに入力された値はデータベースには保存せず、入力されたかどうかだけフロント側でバリデーションをかけて確認画面に遷移させようと事前にチームで話し合いました。

 

データベースに保存された値を引っ張ってくるのはお茶の子さいさいですが、保存されない場合どうしよう…ということでparamsを使うことにしました。はっきり言ってセキュリティ的に絶対クソです。現場でこんなことしないのは現場知らない僕ですら感覚的にわかりました…がとりあえず実装しなければいけないということで、この方法でいくことにしました。

 

キャッシュ使ったりいろいろな方法があるということを後で知ったんですが、まあ経験が無い中でひねり出したということで大目に見たいと思います。

有料会員登録機能

これも実装したんですが、ポイントを買うときと基本的な動きは一緒です。フロント側でバリデーションかけて、全て入力されてれば有料会員になる、と言った流れです。

 

f:id:b1840943:20180623103408g:plain

 

特に引っかかったところは無いです!はっきりこう言い切れるのは初めてかも。

 

唯一あるとすれば実際に使われてるフォントを再現できなかったところかな…あれなんでできないんだろう。他と同じようにCSSで指定するだけじゃできないみたいなんだよな。

ログインフォームデザイン

Pairsってメアドでサインアップ or ログインできるようにはなってなくて、FacebookアカウントかSMS認証のどちらかしかありません。あとログアウトも基本的にできません。

 

まーーーこれは開発してると本当にめんどくさいポイントでした。なんで他のメンバーにdeviseでログイン機能を実装してもらい、メアドでできるようにしました。

 

ただインストールしてもらっただけなので、あの初期のデザインのままのログインフォームでしばらく放置されていました。今週もスプリントレビューがあったので、さすがに見た目をキレイにしないとマズいということでデザインしました。

 

 

レビューのときにメンターさんに褒められたので満足。デザインからやるのって難しいけど、やりがいはありますよね。

終わり

今週はぽんぽん機能実装できた週でした。多分一度やったことある部分が増えてきたってことだと思うので、いい傾向なんじゃないかと。

 

来週がチーム開発最終週になります。始まる前は予想してなかったんですけど、なんかPairsに愛着湧いてきてるんですよね。もっと良くしたいみたいな気持ちがポロポロ出てきます。

 

スプリントレビューでメンターさんが「自分がやりたい機能とかチャレンジングな機能を実装すれば絶対あとでいい思い出になる!」って言ってたのがすごく印象に残ってます。今は同感できるんですが、スクールに入る前はその感覚はわかんなかっただろうなあ…と思って。

 

というエモい終わり方で来週もがんばります。