Androidしか出来なくて辛いのでHTMLの初歩からWebフロントエンド技術に入門し直した

最近ずっとJavaScriptをやってた。

JavaScriptをやってる理由は色々ある。
僕は仕事ではずっとJavaとAndroidで、他の言語やプラットフォームは入門的な事は色々やって来たが、ちゃんと出来ると言えるものが他にないので単純にもっといろんな事が出来るようになりたい。
JavaScriptが出来ればWebでちょっとしたサイトやサービスを作ったりしやすくなるし、ElectronやReactNativeなどWebの技術を他の分野で使用する流れがあるので色々と便利そうだ。
はてブやQiitaでよく読むフロントエンド関連の記事をもっと楽しめるようになりたいというのもある。

あと、Androidの世界でも日々いろいろな思想や技術が入ってきていて、そういうものに触れた時にAndroidだけやっていてはもっと広い視点で技術の動向を追っている人にはキャッチアップの速度でも理解度でも敵わないなと感じる事がある。
もちろん何にでも手を出して器用貧乏になるのもよくないのだろうけど、僕もそろそろもう少しAndroid以外の世界も知った方がいい気がしたのだ。

まずはHTMLとCSSの初歩から

JavaScript以前に、そもそも僕はHTMLとCSSすらなんとなく見よう見まねで書ける程度にしか理解していない。
非エンジニアのイラストレーターなどが自サイトをオシャレなレイアウトで構築しているのを見るだけで悔しくなるほどHTMLにコンプレックスを抱えている。
一応専門学校時代にテキストサイト全盛時代のようなシブいHTML入門を教わったが、文字の色を変えたりtableを組み立てたりは出来てもヘッダーやサイドメニューのような複雑なレイアウトが一体どういう仕組みで組み立てられているのかが全く検討も付かない。

そこで、Amazonで適当に評判が良さそうなHTML5の入門書を買って入門し直す事にした。

最初に買ったのはHTML5&CSS3レッスンブックという本。

HTML5&CSS3レッスンブック

まずはこの本を写経しながら読んだ。ちょっと初歩過ぎる気もしたが基礎を疎かにするとハマるので簡単そうなところから始めた。
結果的にこの本はめちゃくちゃ良本で、HTMLを全く知らない人でも分かるようによくある個人サイト風レイアウトの構築手順を分かりやすく解説している。
内容はとても簡潔ながら洗練されていて、写経しながらでも数時間で読み終わるボリュームながら、HTMLをCSSをきれいに分離した(多分)実践的な知識が身につくようになっている。

というかこの本を一冊読んだら「Viewを横に並べる方法」さえ理解すればヘッダーもサイドメニューも特別難しいレイアウトじゃない事が分かって今までのコンプレックスは一体なんだったんだみたいな気持ちになった。
ところでこの本ではfloatを使ってViewを並べているが、最近ではflexboxというもっと簡単な仕組みがあるそうですね。ぐぬぬ…。

HTMLとCSS応用

続けて同じシリーズのHTML5&CSS3デザインブックという本を買った。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

こちらは上記のレッスンブックが理解出来たくらいの人を対象に、もう少し凝ったブログ風レイアウトや会社のフロントページ風レイアウトなどの構築手順をレスポンシブデザインの解説も交えながら紹介している。
CSSのコード量が増えて写経が大変だったけど実家に帰ってダラダラしながら3日くらいで読了した。

これでなんとなく簡単なWebページくらいなら自前で構築出来るようになった気がしたので、Materializeというテンプレートライブラリでぐちゃぐちゃと書いてたプロフィールサイトを全て自前のHTMLとCSSで書きなおした。

kirimin.me

Webアプリ入門

ようやくこれでJavaScriptを勉強する準備が整ったわけだけど、JavaScriptの技術は入り組んでいて技術書も非エンジニア向けのものからガチ勢向けのものまで、更に古い情報も混じっていたりするので何をベースに学習するのか結構迷った。

そもそも僕にはJavaScriptをWebサイト制作にどう組み込んでいくのかもよく分かっていない。
そこで、まずはあまりライブラリや周辺技術に依存せず、JavaScriptをガッツリ使ったWebアプリの基礎を覚えようと思い、シングルページWebアプリケーションという本を選んだ。

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

この本はAngularJSのようなフレームワークを使用せず、昔ながらのJavaScriptとjQueryだけを使って、頑張ってオブジェクトにスコープを閉じ込めオブジェクト指向でのMVCのようなものを作りanchorで状態を切り替えるSPA(チャット機能)を作りこんでいくという内容だ。
オライリーなのであまり初心者向けの内容ではないが、ちゃんと読み進める上で必要なJavaScriptでのスコープやクロージャの解説も最初に書かれているし、分かりにくい部分はしつこいくらいに何度も説明しているので意外にハードルが低い本だった。
ただ、かなり堅実な実装で、しかも途中からは本来の趣向とはあまり関係のないチャット機能を頑張って作りこんで行くのでコード量がめちゃくちゃ多く、とにかく写経がしんどかった。(というか途中からは配布されているサンプルをコピペした)
なかなか読むのに骨が折れたが大変なだけあって一冊でJavaScriptでのWebアプリ作成方法がかなりイメージ出来るようになったので良かった。

jQuery

シングルページWebアプリケーションではDOM操作を全てjQueryで行っていて、読んでいて意味の分からない部分があったのでjQueryの入門書を買おうかと思ったんだけど、どうも非エンジニア向けっぽいのが多くて良さそうな本が見つからなかった。
Webでも回りくどい解説サイトばかりで困ったが、こちらのサイトが非常に簡潔に必要な事だけが書かれていて有り難かった。

jQuery 開発者向けメモ

JavaScript復習

シングルページWebアプリケーションはJavaScriptの入門書ではないので、あまり細かいJavaScriptの説明などは書いていない。
実は手元に4年くらい前に買って投げ出したパーフェクトJavaScriptという本があるので、再読した。

パーフェクトJavaScript (PERFECT SERIES 4)

この本は少し古いけどJavaScriptの言語仕様についてかなり細かく書かれており、読めば読むほどJavaScriptが嫌いになってくる素敵な本だ。
JavaScriptがなんとなく書けるけどもっと理解を深めたいという僕みたいなパターンでは非常に良い本だったが、初めてJavaScriptに触れる人は読むとJavaScriptが苦手になってしまうかもしれない。

練習オセロ作り(node, npm, browserify)

なんとなくWebアプリの作り方が分かったのでとりあえず何か練習で作ってみようと思い、オセロゲームを作り始めた。

ついでに現在主流のnpmとbrowserifyを使ってみようと思って色々と調べ始めた。
この辺りは書籍にはあまりまとまっていないようなので主にQiitaなどの記事を参考にした。
browserifyでビルドするようにしたらシングルページWebアプリケーションで覚えたやり方では通用しない事が分かったので、更に色々と調べながらファイルを全てモジュール化して読み込むように書き換えた。

春からはじめるモダンJavaScript / ES2015 - Qiita

npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section4 ～Gulpで処理を自動化しよう～ - Qiita

watchifyでファイルの監視を行う - to-R

世間ではjQueryを捨てて行く流れのようなので、いきなりReact.jsやvue.jsなどのフレームワークを使おうか迷ったけど、今回は練習だし、jQueryの事が分かっていないとjQueryを捨てられないのでjQueryベースで開発する事にした。
同じ理由でES2015も今回は使わなかった。

オセロ自体は特に詰まる事もなくサクッと実装出来たけど、何も考えないで書いたら思いっきりViewとModelが結合してcssのクラス名でロジックを判定するようなシブい設計になってしまった。
MVCっぽく書き直そうかとも思ったけど、わざわざ書かなくても書き方は明らかで単純作業になってしまうし、そんな事をするよりはES2015とフレームワークを使って書き直した方がマシだと思ったのでやめた。

オセロ(完成)

というわけで完成したジェークエリーオセロがこちらになります。
ルールとか適当だけど一応AIも実装して遊べるようになっているので遊んでみてください。スマホでもできるよ。

http://kirimin.me/game/osero/

コードもあります。

kirimin.me/game/osero at master · kirimin/kirimin.me · GitHub

あとがき

まだ入門しただけだけど一応JavaScriptで簡単なものなら作れる感じになってよかった。(小並感)
次はReact.jsやりたいしもっとJavaScriptに深入りしたいけど、サーバーサイドも出来るようになりたいしiOSもやりたいので悩ましい。
落ち着いて1つずつ覚えていこう。