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

早くも2週目が終わりました。

入る前に少しプログラミングを触っていたので余裕かましてましたが、世の中甘くないですね。

 

一つずつどのようなことを1週間で学んだかを紹介します。

 

コーヒーメーカーとWi-Fiの話を書くこと

ランチに困らない

Ruby on Rails

Twitterのようなアプリケーションを教材の指示に従いながら作りました。同じ要領で映画レビューサイトも作りました。

Railsチュートリアルを入学前に一周しててMVCの基本概念が頭に入っていたので、ここはわりとスムーズにいきました。でも周りを見ていると本当に未経験の場合ここが一番つまづくポイントみたいです。ModelとViewとControllerがどう連動しているのかを把握するのが難しいみたいですね…逆に言えば入学前にここを押さえとけばスタートダッシュできるかも。

僕はスクレイピングでちょっとつまづきました。

1ページの情報のみを取得するのは簡単なんですが、同じドメインの複数のページをスクレイピングするのが少し複雑でした。ブログとかで過去全部の記事の写真をスクレイピングしたいときなんかがこれと同じ状況ですね。

次へのボタンから次ページへ辿る動きをwhile分で基本trueで動くようにしておいて、次のページのリンクがなかったら（次へボタンがなかったら）breakさせるというロジックはすんなり理解したんですが、実際コードを書くとちょっと複雑な気がしました。

多分4年前ぐらいに自力でnokogiriというgem使ってスクレイピングしようと思って挫折したのがちょっと苦手意識つけちゃってるんだろうなと思います。

中間テスト

この時点で中間テストを受けました！

Rubyでコンソール上で動く簡単なアプリを作ったり、設計書通りにHTMLとCSSを組んだり、Railsのエラーを解きまくるという試験でした。

これは特に問題なくパスしたので、カリキュラムをもう一周しました。基本的に同じことをもう一回やるのは好きじゃないのですが、最終基礎試験に合格するために仕方なくCodecademyでReact.jsを息抜きにやりながらなんとか乗り越えました。

そしてそのまま最終基礎試験を受けました。この試験に合格すると次のステップへ進めます。合格しないとずっと同じカリキュラムを何回もやらなきゃいけないという恐ろしいことになります。

JavaScript

無事に試験に合格したのでJavaScriptとjQueryに入りました。JavaScriptの基礎から一気に非同期通信まで学びます。このセクションの最後にはあるサイトのお天気情報APIを取得し、フォームに入力があった街の天気を非同期で返すといったアプリを作ります。

JavaScriptに関してはN予備校でNode.jsを使ったタスクアプリ作成をやったことがあったので、すんなりいけました。ただjQueryはなんか書き方がごちゃごちゃして見づらいですね。なんとなくReactと比べて規模が大きくなった時の管理が難しそう…という印象を受けました。

非同期通信もN予備校で（たしか）やったので、特に理解に苦しむことはありませんでした。

なんかこれだけ見ると楽勝に見える…そんなことないのに。

学習環境について

ちなみに、TECH::EXPERTの学習環境はめっちゃいいです。

教室は新しくて綺麗でおしゃれですし、いつも静かで涼しくて、Wi-Fi爆速です（250Mbpsオーバー）。コーヒーメーカーもあるので1杯100円でそこそこのコーヒーが飲めます。椅子も疲れにくいし、文句なしです。

これだけで教室に来るモチベーションになりますね。

プロとしてのプログラミング

エンジニアになるということはよっぽどのことがない限りチームで仕事をすることになります。なのでいいエンジニアとは他人にとっても見やすいコードを書けるエンジニアでもあると思います。

そのためにはできるだけコードを短く、かつ動作は早く、綺麗に書くことが大切です。RubyにはRubyの書き方の規則がありますし、RailsにはRailsの規則があります。変数の命名、改行等少し工夫すればかなり可読性が上がります。

また会社ごとにも少しずつ規則は変わってくるはずなので、他人のコードを読んでどんな規則に則ってコードを書いているのか読み取る力も大事ですね。

TECH::CAMPでは単独作業の段階からメンターさんがどうやったらもっと綺麗なコードを書けるかレビューしてくれます。そのおかげで早い段階から他人の目を意識したコードを書けるようになります。

Git

エンジニアになるためにはコードが書ければいいわけではなく、その周辺ツールも使いこなせる必要があります。Gitは間違いなくエンジニアに必須のツールです。

むちゃくちゃ簡単にいうと、どこまで作業したのか履歴を残すことができます。チームでGitを使えばAさんは検索機能、Bさんは買い物かご機能をバラバラに実装して後でがっちゃんこしてもごちゃごちゃならないようにできます。

本当に良かったなと思うのは、N予備校でNode.jsを勉強した時もRailsチュートリアルやった時もGit使ってたんですよね。誰とも共同作業はやってませんでしたが、リモートリポジトリも作って時々プッシュしてました。なのでGitの基本的な使い方は困ることがなかったので助かりました。

SQL

もちろんしっかりSQLも学びました。データをうまく使いこなして初めてサーバーサイド言語が真価を発揮します。

SELECTやWHEREを使って望んだデータを引っ張ってくることができるようになるまで一通り勉強しました。JOINまではやってません。

正直Rails使ってるとSQLの存在を忘れちゃう感じはありますね。むちゃくちゃ簡単にデータ持ってこれるので、SQLが一番脳に定着しなさそうです。

チャットアプリ実装開始

ここからが本番です。試験を突破した後の目標はこのアプリを完成させることです。

今まで学んで来たことの応用なので、教材のサポートは最小限です！自分の力で実装していかなきゃいけません。わからなければ検索です。それでもダメだったらメンターさんが助けてくれますが…できるだけ自力で解決していきます。

フロント実装

まずはアプリの原型となるフロントの大枠を与えられた設計書通りに実装していきます。

今回はSassを使って書いていきます。CSSを便利にしたやつですね。変数使えるのでDRYな記述ができます。

できるだけBEMに則って書いていきます。BEMはフロントエンドの要素をBlock、Element、Modifierという三つの要素に分けて整理します。特にクラス名の規則が厳格です。クラス名が冗長になりがちな印象を受けましたが、コードの再利用性は高いと思います。

ふむふむ…と思いながら実装開始しましたが、なんでこいつがここに行かねえんだよ！とかおい！あいつちょっと見ないうちにどこ行きやがった！！みたいなことが頻発しました。正直全体を通してここが一番時間かけたとこだと思います。

やんちゃなdiv要素たちをなんとか手懐けてフロントエンドの大枠は固まりました。

2週目終わり

そんなこんなで2周目が終わりました。やることが多かったので苦労しましたが、だんだん慣れてきて実装にスピードが出るようになってきました！

この調子で3週目もスパッとこなしたいと思います。

Sassパーシャルをapplication.scssで@importする順番

Railsでチャットアプリを作っていて、まず手始めにSassで見た目を作っていました。

その時にパーシャルをいろいろ作ってたらハマってものすごい時間を食ったので、こんなしょうもないハマり方を今後一切人類が繰り返さないようにここに記します。

パーシャルとは 

振り返りも兼ねてほんの少しだけ丁寧めに書くので、理解している方は飛ばしてください。

CSSでは下記のようなページを構成するそれぞれのパーツをパーシャルと呼ばれるCSSファイルに分割します。

• ヘッダー
• サイドバー
• メインコンテンツ
• フォッター

理由はメンテナンスしやすいことと、可読性を良くするためです。

一つのCSSファイルになんでも詰め込んでしまうとどうしても長くなってしまいますし、どこがHTML内のどの要素を指しているのかわかりづらくなります。

Sassとは

SassとはCSSをもっと便利にしたものです。主に二つ、大きな特徴があります。

• 変数
• Mixin

変数

変数の概念はRubyと同じく、何か値を入れる箱のようなものですね。例えばRubyだとこんなんです。

name = "Kosaburo"

これと全く同じことがCSSでできるんです！

例えばこういうCSSファイルがあったとします。人間のリスト（human_list）と日本人のリスト（japanese_list）があり、どちらも文字の色（color）にはblueが使われてますね。

.human_list {

 font-size: 20px;

 color: blue;

}



.japanese_list {

 font-size: 20px;

 color: blue;

}

これくらいのサイズならいいんですが、これがamerican_listとかchinese_listとか国ごとに増えていくとすると、毎回同じblueを指定するのは大変です。

それに後から文字色をgreenに変えようと思ったら、全部変更しなきゃいけません。

そこでSassの変数を使い、こんな風に書くと便利です。

$name_color = blue;



.human_list {

 font-size: 20px;

 color: $name_color;

}



.japanese_list {

 font-size: 20px;

 color: $name_color;

}

これであれば色の変更があっても、変数を変更すれば一発で全部適応されますね。

Mixin

これは個人的には変数を進化させたもののような印象があるんですが…どうなんですかね。Mixinを使えば上のコードがなんとこうなります。

@mixin human_style() {

 font-size: 20px;

 color: blue;

}



.human_list {

 @include human_style();

}



.japanese_list {

 @include human_style();

}



.american_list {

 @include human_style();

}

いちいち要素ごとにスタイルを指定する必要はなく、一緒にスタイルであれば全部まとめて最初に定義しちゃいます。それを使い回せばほらスッキリです。

そしてこの変数とMixinをまとめたものを「_variables.scss」というパーシャルに切り出して保存します。

 パーシャルを呼び出す

準備は整ったので、「application.scss」から「_variables.scss」を呼び出しましょう。下記のように「application.scss」に記載します。

@import "./reset";

@import "font-awesome";

@import "main_wrapper";

@import "side_bar";

@import "main_content";

@import "variables";

これで完成！

全然ダメ

全然完成じゃありませんでした。いろんな変数が定義されてないっぽくレイアウトが激崩れを起こしていたのですが、スペルミスもないしなんでダメなのかしばらくハマりました。

そうなんです！原因は「application.scss」で@importする順番だったのです。

変数を定義する「_variables.scss」を他CSSファイルよりも後に読み込んでいたのでうまくいかなかったようです。他CSSは「_variables.scss」の中の変数を使うように設計されているので、先に読み込む必要があります。

変数を使う前に先に定義するぐらいわかってたつもりだったんですが…慣れてないものがいくつか重なるとこういうことが起こりますね。

頑張ります。

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

せっかくなので学んだことを多少アウトプットする意味でもブログ書いていこうと思います。

スクールに通おうかなと思ってる人がなんとなく雰囲気つかむのにもいいんじゃないかなとか思ってます。

オリエンテーション

まずオリエンテーションがあったわけなんですが、だいたい20人ぐらいが同じタイミングで入学するようでした。20代の方がほとんどだったと思いますが、30代の方もちらほらおられましたね。

契約書や分割払いのための口座引落申請書を書いて、手続きは終わりです。ちなみに受講料は最大24回払いまで分割できるのですが、24回払いをオススメします。

理由は、受講料がおおよそ40万円として、そんな多額のキャッシュを一気に支払いにあてるならその40万円でインデックス投信買って運用した方がいいです。

分割払いの利率はめっちゃ低いので、それを差し引いても若干お金残ります。ありがたやー。それに退職して収入が無くなってる状況なのでキャッシュはできるだけキープしておきたいですからね。Macとか買うかもしれないし。

話逸れましたが、そのあとはカリキュラムの簡単な説明をしてもらいました。またきっちりコースを終わらせられれば転職時の年収が大幅に変わるというデータも見せてもらいました。

やっぱりやりきった人とそうじゃない人と、企業から見て評価が変わってくるのはそりゃそうですよね。生徒みんなで支えあっていこうと思いました。

オリエンテーション終わったら早速勉強開始です！

HTML&CSS

ある程度経験はあったので概念の理解自体は問題ないんですが、改めて実践的な問題やってみるとできないもんですね…。

簡単な設計図をもとにHTMLとCSSを書いていくんですが、久々にfloatに再会したのでフッターが吹っ飛んじゃったりとかヘッダーにposition: fixed指定したら消えちゃったりとか大変でした。

Ruby

Ruby on Railsやる前にRubyやります。Railsチュートリアルやってたので特に難しいと感じる部分はありませんでした。引数を除いては。

ターミナル上で動く身長体重を保存してBMIを教えてくれるアプリケーションを作ったときに苦戦しました。

例えばこんな感じで配列にハッシュを入れて保存していくんですけど、register_dataを呼び出すときregister_data(records)で配列を引数に取ってるんですよね…今は理解しましたが、この動き方がなかなか理解できず苦しみました。

プログラミング始めてすぐに理解した引数の概念とちょっと違うというか、応用編というか…割と周りでもここの理解でつまずいたようだったので、やっぱり難しいんだなと思いました。

def register_data(a_records)
  record = {}
  puts "名前を入力してください"
  record[:name] = gets.chomp
  puts "年齢を入力してください"
  record[:age] = gets.to_i
  puts "身長を入力してください"
  record[:height] = gets.to_f
  puts "体重を入力してください"
  record[:weight] = gets.to_f

  record[:bmi] = calculate_bmi(record[:weight], (record[:height]))
  puts "あなたのBMIは#{record[:bmi]}です"

  a_records << record
  return a_records
end

records = []
register_data(records)

懇親会

スクールに懇親会を開いてもらいました！近くの居酒屋で2時間ぐらい食べ飲みしながらおしゃべりしました。

本当に色んなバックグラウンドの人たちが集まってて、お互いの自己紹介がなかなか終わらなかったのが印象的でした。

元商社マン、元自衛隊員、コンビニバイトだった人、現役大学生など他にも興味深い経歴の方がたくさんいました。人との出会いだけでもスクールに行く価値はあるなと思います。

あと完全未経験の方が圧倒的に多かったです。

僕はRailsチュートリアル一周したりとかしてたのである程度慣れてたんですが、本当にHTMLを一回も書いたことないぐらいの状態で入学される方もいました。それでも入学前に選考をパスすれば転職を保証してくれます（転職コースの場合）。スクールの力ですね。

もちろん自分の努力は絶対に必要ですが、「完全未経験の人も育てて転職させる！」というスクールの気概が見えてモチベーション上がりました！

だいたい1週目はこんな感じでした。

そもそもなぜエンジニアになろうと思ったのかについても書いているので、ぜひ見てください！

b1840943.hatenablog.jp

2週目、頑張ります。

26歳営業が未経験からエンジニアになると決めた理由

三月末に会社を退職してプログラミングスクールに通い始めたので、記念にブログを書くことにします。

僕自身もともとプログラミングは多少知ってたのですが、エンジニアになる！となるまでは結構時間がかかったので、この記事で迷ってる誰かの背中を押せたらいいなと思ってます。

簡単に自己紹介をして、そのあとになぜエンジニアになる決断をしたのかその理由を書きます。

自己紹介

1991年生まれの26歳です。福岡県出身です。

三月末まで技術営業職として産業機械メーカーに勤めてました。プラスチックとか化粧品とか医薬品や食品などを作る機械メーカーで、営業と機械の保守をやってました。実際に工場に行ってスパナ握って機械のメンテナンスをしたりするも僕の仕事でした。

この会社には1年半ほど在籍して待遇も不満はなかったのですが、エンジニアにジョブチェンジすることに決めました。そう決めた理由を書こうと思います。

社会にインパクトを与えられる

ここ20年でソフトウェアは世界を変えました。機械やエネルギーが世界を変えたスピードよりもはるかに早く世界を動かしています。

BtoBの仕事をしていて直接消費者と対峙することがなかったので、余計に自分が社会に対してインパクトを与えれているのかどうか実感が得られませんでした。

もちろん僕にもクライアントがいて、そのクライアントは消費者向けに商品を開発していて、巡り巡って何かしらの形で社会に貢献しているのはわかるのですが、僕がどう頑張っても世界は変わらないし、社会が動き出すこともまあないです。

決して産業機械という業界や営業という職種が社会に貢献してないという意味ではありません。ただ僕が個人的に貢献感を感じにくいんだと思います。

一方ソフトウェアは、FacebookやAmazon、Googleは、文字通り世界を変えました。一人一人が書いたコードが世界を変えるパワーを持っています。人の役に立ってることを実感できるし、世界を変えれるポテンシャルを持ってます。

何のために仕事をするのかというところまで立ち返った時に、社会に貢献していると思えるかどうかはとても大きな要素でした。

トライアンドエラーが早い

エンジニアはアイディアを形にする力を持つ職業だと思います。他にもそれができる職業はありますが、エンジニアが最強なところは低いコストでそれをできることと、スピードです。

産業機械の業界にいたので余計にそう思うんですが、アイディアを形にするまでは途方も無い時間がかかります。しかもむちゃくちゃコストがかかります。

例えばこんな機械作ってみれば面白そうじゃない？と思ってからデモ機作るまでにかなり時間とコストがかかるし、それで作ってみて売れなかったなんてなればもう首が飛ぶレベルです。

でもエンジニアはローコストでスピード感をもって新サービスを開発できます。とりあえず社会に出してみて、評価をもらって、ダメだったら潰すこともできます。潰すにしても大したデメリットはないはずです。

作って出すまでのスピードもそうなんですが、世に出してからフィードバックをもらうまでが圧倒的に早いです。デジタルワールドなので、出せば確実に何らかの数字が出ます。このスピードはかなり早いと思います。

機械だったらまずお客さんがテストする場所代を払わなきゃいけないし、使う材料代もあるし、次のお客さんに出す前に洗浄しなきゃいけないし、機械を運搬するにもコストかかるし…これでやっと一つのお客さんからのフィードバックを得られます。費用も時間も結構かかります。

まずやってみて、ダメなとこを改善して、またやってみるというサイクルをなるべく早く繰り返せるほうが良い製品やサービスができるはずです。より良い製品やサービスができれば、より良い世界をつくれます。

つまりこのスピード感を持つ環境の方が、社会を良くできるチャンスも多いと思ってます。

働く場所を問わない

僕はいわゆるミレニアル世代ですが、僕らがおじさんになる頃には定年80歳になるとかいう話もあります。もしかすると定年自体なくなり、ずっと死ぬまで働き続けることになるかもしれません。

それを踏まえて自分のキャリアを考えると、一生同じ場所で働き続けるというのは非現実的だと思います。東京から地元に戻る可能性もあるし、海外で働きたいと思うかもしれません。

ちょっと誤解されそうなのですが、僕は現時点でリモートワークは全く考えてません。ですが、将来的にどこかのタイミングで居住地を移す可能性は誰しもあるので、それを考えると自分が移動しても問題ない仕事がベストな選択肢ですよね。そういう意味でエンジニアは比較的自由な職業です。

エンジニアはどの国でも求められることは変わらないし、国や環境が変わっても成果を出しやすい職業だと思います。またリモートワークという選択肢も手元に残せるので、何か大きく環境が変わったとしても幾分かは安心できます。

しかも技術職って言語を取っ払ってコミュニケーション取れたりするんですよね。前職で外国人技術者と日本人技術者の通訳をすることが多々あったんですが、結局彼らが勝手にホワイトボードに数式とか図とか書いてコミュニケーション取り始めるので、あまり僕の出番はありませんでした。それでも問題なく意思疎通できるんですよ。

プログラミングはユニバーサルです。機械と比べれば国際規格とか気にしなくても全然やってけるはずです。そしてエンジニアは世界のどこでも通用するスキルを持てます。フラットな世界で仕事をできるというのは競争が激しい一方、自由です。

僕は外部要因に不必要に人生を縛られるよりも、変化があればそれに適応し、自分で選択できる人生を送りたいと思ってます。そのためにはエンジニアのスキルは僕にとって必須でした。

未来がある

今までいろんなものがソフトウェアに置き換わってきましたし、これからもそれは続くと思ってます。そんな世界の中でソフトウェアに通じているかどうかは大きな違いになるはずです。

堀江貴文さんと落合陽一さんの10年後の仕事図鑑でエンジニア職はコモディティ化するとの予想がありました。どんどんプログラミングができる人が増えて安くなっていき、究極的にはAIに代替されると。

10年後の仕事図鑑

僕もプログラミングができる人が増えるというのは同意です。でも、じゃあできる人はいっぱいいるんだから学ばない方がいいよね、ということではないと思います。むしろプログラミングやソフトウェアを理解した上で、それプラスアルファが必要になるという風に捉えてます。

もしエクセルみたいに誰もがプログラミングできるようになるとすれば、なおさらプログラミングぐらいできないとヤバいじゃん、と感じます。

WEBとかシステム開発に関わる狭義のスキルはもしかしたら今ほど重要じゃなくなるかもしれませんが、それらを含むソフトウェアそのものの重要性は今よりもさらに上がると予想してます。

どんどんソフトウェア中心の世界になっていっているのは確実です。Amazon、Facebook、Google、Netflix、Uber、Tinderもソフトウェアです。車もソフトウェアがコントロールするようになってきてます。IoTもAIもブロックチェーンもさらに普及してくるはずです。

もっともっとソフトウェアが世界の中心になっていったときに、プログラミングやWEB開発などを通じてソフトウェアと仲良くなった経験は大きな意味を持つと思ってます。なのでエンジニアとしてソフトウェアに携わる時間をもっと持ちたいと思いました。

という感じです

大前提としてプログラミングを面白いと思えることは必須だと思いますが、面白いと思っててもそれを仕事にしようとするとなるとまたいろいろ考えちゃうよね〜っていう気持ち、わかります。

なのでエンジニアの世界に未経験から飛び込む奴がどんな人間なのか少しでも感じてもらえば、と。

この記事を見て「う〜ん、やっぱ俺はエンジニアになりたいと思わない」とか「確かにそうだな！エンジニアになりたい！」とか思ってくれたら嬉しいです。

楽な道ではないと思いますが、ワクワクしてます！ここまで見てくれてありがとうございましたm(_ _)m 何かあればお気軽にご質問ください。

プログラミングやWEBサービスなどIT関係、それと英語に関してつぶやいてるので、よかったらTwitterフォローお願いします。

twitter.com