世のサーバサイドエンジニアよ、フロントエンド技術を学ぼう！

# 概要
この記事のタイトルは、自分自身に向けて投げかけた言葉です(笑)

約10年、業務系アプリ、Webアプリの主にサーバーサイドを担当。DB周りの技術が好きで*1、DB周りやバックエンドのロジックばかり触ってきました。キャリアの後半は負荷試験番長。一時期本当にJMeterばかりを触っている日々が続き私自身がチームに対して、HTTP 503エラーを返してチームを抜けたいと思ったことも何度か。

小さなサービスが大きなサービスに育っていく様を身近に経験。そして私自身もそんなサービスに少しは貢献した模様。

*1 注意：好きでとは書いたが得意とは書かない逃げ。

# フロントエンド技術は苦手
概要に書いた通りサーバーサイドは好きですが、フロントエンドは大の苦手。しかし、最近自分は10年間もエンジニアを続けてきたのに何かサービスやアプリを一から自分で作った経験が全くないことに絶望感を感じ、これではいけないと思い、今年は何かアプリやサービスを作ってやろうと元旦に思いたつ。

しかし何を作りたいというアイデアは今のところなし。

ただ青臭いことを書くと「人を幸せにするサービス」「人の幸せをお手伝いするサービス」を作りたいと。

具体的なアイデアが閃き作りたいと思った時に作れるようにせめてしておこうと。

おっと、そうなるとフロントからバックエンドまで全部一人で作れないとだよなあと。

苦手な触りたくもないフロントエンドに触らないとだなあと。

これはいかん、まずはフロントエンドを触って楽しいと思えるようになるようになろうと、ということで[Progate](https://prog-8.com/)でHTMLとJavaScriptのコースを開始して終えました。

ProgateのHTML基礎編は面白い。レイアウトとか超苦手でも終えた時にはちゃんとしたページが出来ている。そこに感動。この教材もフロントエンドの技術があっての賜物。もちろん裏ではバックエンドの技術もありますよー

JavaScript編は３時間のコースで超簡単。

最近仕事でプログラミングを書く機会が減っていたために、単純なプログラミングでも面白いと思う。

# なんでフロントエンドに対して苦手意識を抱いているのか自己分析
フロントエンドの代表的な技術をざっくり書くと、HTML、CSS、JavaScriptです。

何故この３つに苦手意識を持っているのか。少し考えてみました。

まずHTMLとCSSですが、これはWebの見た目、要するにデザインに直結するところであり、私にはデザインのセンスがないし、関係ありませんが絵心もありません。妻にドラえもんを描いてみろと言われて描いたドラえもんを妻が見て言葉が出なかったぐらい絵心なしです(笑)

そして、昔から苦手なものを克服しようとかそういう気持ちがあまり起きないタイプなので、HTMLやCSSを今までちゃんと勉強しないでここまできちゃいました。

JavaScriptはどうか？JavaScriptは、昔々、JavaScriptがまだ出て間もない頃、少し触った経験あり。その後社会人になってまた触りましたが、その頃はIT業界には属していましたが、社内SEのような仕事をしており、今のように開発の仕事をしていなかったのでプログラミングに対する勘所とか全くなしのため挫折。

その後、インフラよりの仕事からアプリケーションエンジニアに転身し、Javaを長く触ってきたので、どうしてもJavaScriptのゆるい感じが合わないし楽しいと思ったことなし。楽しくないことは継続しないので、学習をしても長く続かず。

結論としては、HTML、CSS、JavaScriptが私にとっては全く楽しくないのである。

今年になって概要に書いたフロントをやらなきゃという気持ちとProgateなどのオンラインプログラミング学習で学んでからは少し気持ちは変わりましたが。

# 学習計画
何事も誰でも同じだと思いますが、楽しくないことは継続しませんし、楽しいことは継続します。

HTML、CSS、JavaScriptを満遍なく学習していきますが、途中「楽しい」と思ったところは深追いしつつ、しんどくなったら元の道に戻り、荒削りでも良いから動くものを早く作るという本当の目標を忘れないで学習していきたいと思います。

この３要素に関して、こういう風に勉強したら良いのではとかアドバイス宜しくお願い致します。

# 結論
長くなりましたが、

「この物語はあるサーバサイドエンジニアがフロントエンドエンジニアに戦いを挑んだ一人のエンジニアの記録である。 IT業界において全く無名のサーバサイドエンジニアがQiitaに日記を書き始めてからわずか1年にしてフロントエンドを楽しいと思えた奇跡を通じた、その原動力となった愛と信頼を余すところなくドラマ化したものである。  」

スクールウォーズ風で締め。

~~学習記録を随時更新していきます。~~学習した結果をQiitaへアウトプットし、それのリンクを随時更新していきます。

私と同様に今よりも少しHTML、CSS、JavaScriptのことが分かれば良いのに学習する気持ちが起きないという方などの参考になれるように楽しく学習していきます。


因みにQiitaには、こういう日記などを投稿しても良いのでしょうか？

こういうのは、はてなダイアリーに書くべきでしょうか？

こういう勉強を試してみたらとか、こういう本を読んでみたらとか、私と同じサーバサイドエンジニアだけどフロントエンドに興味があるとか色々とご意見、ご感想をお待ちしております。

打たれ弱いのであまりキツイコメントはお控え下さい(笑)といいつつ何でも受けます。
どっちやねんと(笑)



# JavaScriptの学習で参考にした書籍
- [初めてのJavaScript 第2版]("http://www.amazon.co.jp/gp/product/487311425X/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=487311425X&linkCode=as2&tag=maemuki-22")
- [パーフェクトJavaScript](http://www.amazon.co.jp/gp/product/B00P2EG5LC/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B00P2EG5LC&linkCode=as2&tag=maemuki-22)
- <a rel="nofollow" href="http://www.amazon.co.jp/gp/product/487311621X/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=487311621X&linkCode=as2&tag=maemuki-22">開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質</a>
- <a rel="nofollow" href="http://www.amazon.co.jp/gp/product/4774144665/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4774144665&linkCode=as2&tag=maemuki-22">JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで</a>

# 学習記録へのリンク
[とあるJavaエンジニアが驚いたJavaScriptのオブジェクト指向(レベル１)](http://qiita.com/kota2_0/items/ae16b072b66f2a3f5ce5)