6日目 役に立った書籍 編「まとまった学習に本は強い」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 6日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。6日目の今日は、役に立った書籍 編です。

まとまった学習に本は強い

刻一刻とバージョンアップしていくウェブ開発の周辺環境においては、情報が執筆時に固定されてしまう紙もしくは電子書籍は、不利な部分があります。しかしそれでも、まとまった学習が必要な場合に、つまり初学者にとってはやはり書籍は強いなと思います。フロントエンドの開発をまとめて学習する、サーバーサイドプログラミングを始める、こういうときに書籍が役立ちます。ある程度基礎をつけた後は、公式のドキュメントや各種記事をおっていけばいいということになります。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

山田 祥寛
固定リンク: http://amzn.asia/hwCkllD

まだ自分が英語の記事を読む実力がなかったときに、一番読んでいたのはこの本です。原理的な部分がわかるので、理解が深まります。やっとどの項目を読んでも、だいたい知っているな、というところまできました。

最新バージョンは、ES2015 に対応し、promise,  async, map といった新しいメソッドの解説が追加されました。

オライリー関係の JavaScript の本よりも簡単だと思うので、とりあえず書けるけど、新しい記法がわからない、非同期処理とか言われてもよくわからない、というレベル感の方にオススメです。

Clean Coder プロフェッショナルプログラマへの道

Robert C. Martin
固定リンク: http://amzn.asia/2uhJs1I

リーダブルコード、情熱プログラマーといった、特定の言語に限らないエンジニアとしてのソフトスキルについての本です。

この手の本として一番近いのは情熱プログラマーだと思うのですが、私の個人的な趣味として、こちらのロバートさんの人柄に惹かれます。

過去に書いた自分の記事からの引用ですが、以下のような点が役に経ちました。コードの柔軟性に関する議論です。

  1. 常に細かいコードへの変更を加えることで、「柔軟性」を与えることができる。
  2. そして変更を加えるためには、コードを理解している、もしくはしなくてはいけないから、それも結果的に、コードを確実に動かすことにつながる。
  3. 例えば、JSならグローバルに配置されているファンクションやヴァリアブルを、クラスに書き換える。もしくは、純粋関数で書き直してみる。
  4. 他にも、別の機能が追加された時にも、そのコンポーネントが機能するのか、試してみる。もしうまくいかないとすれば、柔軟性が低いコードになっているので、変更する。
  5. 一般的には、洗練された、もしくはベストプラクティスに基づいたコードを書く、という方針がよく取られるのではないかと思う。しかし、そうではなくて、常にコードを動かせるような柔軟性のあるコードを書く、もしくはそのために実際にコードを変更する、という発想は、私にとっては新たな視点であり、また実務的なアドバイスであった。動くコードをかききって終わり、ではなく、それを常に動かしていく。

雑記 Clean Coder 等

このコードを変化させることによって柔軟性を担保するという考え方は、単にコードにとどまらず、自分のスキルアップ、キャリアについても適応できるのではないかと思っています。つまり、何か単一の領域、例えばフロントだとかバックエンドだとか IoT だとか、にこだわることなく、むしろエンジニアリングという視点で柔軟に、領域を横断して、同じことを実行してみることが有効なのではないかなと思います。

例えば、SPA は基本的に React のようなフロントで動くコードを元に構築されていますが、これはもちろんサーバーサイドでレンダリングさせることもできますし、同じようなことをネイティブでやることもできます。結局のところ、データを展開してユーザーに見える形にする、という意味では、フロントもサーバーサイドもネイティブも同じです。

ここでどれが最適解なのか、ということを考えずに (もちろん最適解をみつけるのがエンジニアの仕事ではあるのはもちろんですが、仕事とは関係なしに) 柔軟に様々な場所で同じアプリケーションを動かしてみる、というのが成長につながるのではないかなと思います。

形を変えられる、ということ自体がある種の技術的な修行になります。

Node.js超入門

掌田津耶乃
固定リンク: http://amzn.asia/8xCxI9t

この本は、フロントエンドから仕事を初めて、バックエンドも勉強したいという人に(つまり自分です)オススメの本です。

そもそもなんでバックエンドが必要なのか、ということからかなり詳しく説明してくれています。その上、プログラミングをしたことがある人であれば知っているようなことに関してはそこまでページが割かれていないので、自分のような実力感の人に丁度良いと思います。(反対に完全にプログラミングをやったことのない方は、もっと初学者向けのコンテンツの方が望ましいかもしれない)

また、この本は2017年後半にでいていますので、市場の Node.js のどの本よりも情報が新しいというのもポイントです。バージョンの違いによって生じるエラーは、初学者はなかなか一人でクリアーできないものです。新しければ新しいほどいいです。

JavaScript関数型プログラミング 複雑性を抑える発想と実践法を学ぶ impress top gearシリーズ

LuisAtencio
固定リンク: http://amzn.asia/7YmhS4L

プログラミングを勉強するときにたどる道筋は次のようなものだと思います。

  1. 変数に値を代入してみる。
  2. 条件分岐を if などを使って行う。
  3. 関数を使って、処理を抽象化する。
  4. オブジェクト指向プログラミングで、関数と変数をカプセル化する。
  5. 各種フレームワーク、ライブラリを活用する。

つまりプログラミングのパラダイムを、順番におっていくことになるわけですが、その次に今出て生きているのが関数型プログラミングです。もちろんパラダイムといっても、ある手法が完全になくなって新しい手法が支配する、というようなことにはプログラミングの世界ではなっていないので、関数型プログラミングも既存の手法と並存していくことになると思います。

具体的には、例えばオブジェクト指向プログラミングとの並存という意味では、値を格納する装置としてのオブジェクトは今後も有効だとされています。さらにメソッドに関しても、例えばライブラリが提供する関数のように、あるオブジェクトに紐づく形でメソッドが提供されるというのも有効だろうと。

問題なのは、インスタンスが持つ自分自身の値を変更してしまうメソッドです。JavaScript でいえば、this で自分自身のプロパティを参照するメソッドです。これはメソッドに副作用をもたらすので、問題です。

純粋な関数型だけでプログラミングすることはできないので、副作用を起こす部分と、おこさない部分を明確に切り分けることが重要だと提唱しています。副作用が起きることがわかっている部分を、別に切り離して、そこだけチェックすると。

OOP がオワコンだ、なんて言い出す人がいますが、常にパラダイムは並行して運用されるのであって、何かが出てきたら何かがなくなるなんていうことはないですよね。(相対性理論が出てきたって、依然として古典力学は、投げたボールがどこに落ちるかを予測するために使われています。)

JavaScript Interview Questions You’ll Most Likely Be Asked (Job Interview Questions Book 25) (English Edition)

Vibrant Publishers
固定リンク: http://amzn.asia/9NEa0Ys

ジョブインタビュー、つまり就職活動時の面接で問われる質問の回答例文集です。

せっかく現代社会に生まれたので、2年以内にシリコンバレーで仕事をしようと思って、買いました。

JS 内でページを遷移させるにはどうしますか?またその履歴をどう処理しますか?とか、JavaScript の特徴は?JAVA との違いは?といった、なかなか役に立つ質問が多く、簡潔に英語で答えられるようになるためには有効な一冊です。ただ、2017年に出たにしては、情報が古い部分もあります。ちょっとこれはやり方として古すぎるのでは…という部分は適宜調べてバージョンアップしましょう。

巷の噂では、きっちり実務経験があって、モダンな開発をキャッチアップして、英語ができれば、シリコンバーで働くのも割とできるらしい、とのことなので、チャレンジしていきたいとおもいます。

まずはこの一冊から 意味がわかる線形代数 (BERET SCIENCE)

石井俊全
固定リンク: http://amzn.asia/2kCAIWO

最近機械学習もちまちま勉強しているのですが、その際にどうしても数学の知識が必要になります。だいたい理工系の大学一年生がやるような内容のようですが、私は史学が専門なので、線形代数といわれても、小説家の大岡昇平が趣味でやっていたな、という知識しかなく、なんら計算処理できず、困っておりました。

そこでこの一冊です。結構わかりやすいです。ただ扱っている内容が内容なので、誰でもすごいわかる、ということはないかなと思います。根性入れて読めば、まあわかる、というレベル感の本です。

これなら分かる最適化数学―基礎原理から計算手法まで

金谷 健一
固定リンク: http://amzn.asia/gdu24e7

機械学習においては、線形代数の知識の他にも、いわゆる微分積分の知識が必要になってきます。なぜなら機械学習というのは平たく言えば、ある統計データを近似するに最適な関数を特定する = 最適化 をコンピューターの力技で実現する手法だからです。結局でてくる概念はほとんど数学処理なので、このあたりの知識がないと、いまいちピンとこない。ということでこの一冊です。

他にもオススメの本があった気がするのですが、思い出せないのでまた今度!

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 6日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。6日目の今日は、役に立った書籍 編です。

 

雑記 Clean Coder 等

Clean Coder

おもしろい本だった。一章だけ読んだが、フリーランスのエンジニアとして必要な行動規範が書かれており参考になる。

  1. 責任をとる⇨コードを確実に動かす
  2. そのためには、不明瞭なところを一切なくす
  3. そのためには、常にコードに細かい変更を加えること、が一つの策。
  4. もう一つは、テストを書くこと。全てに。テスト駆動開発 Test Drive Development TDD。
  5. 常に細かいコードへの変更を加えることで、「柔軟性」を与えることができる。そして変更を加えるためには、コードを理解している、もしくはしなくてはいけないから、それも結果的に、コードを確実に動かすことにつながる。
  6. 例えば、JSならグローバルに配置されているファンクションやヴァリアブルを、クラスに書き換える。もしくは、純粋関数で書き直してみる。他にも、別の機能が追加された時にも、そのコンポーネントが機能するのか、試してみる。もしうまくいかないとすれば、柔軟性が低いコードになっているので、変更する。

特にコードを書く段階では、「柔軟性」というキーワードが参考になると思った。一般的には、洗練された、もしくはベストプラクティスに基づいたコードを書く、という方針がよく取られるのではないかと思う。しかし、そうではなくて、常にコードを動かせるような柔軟性のあるコードを書く、もしくはそのために実際にコードを変更する、という発想は、私にとっては新たな視点であり、また実務的なアドバイスであった。動くコードをかききって終わり、ではなく、それを常に動かしていく。⇨個人的な具体的な課題:キーボードのアプリをReactに置き換える。

話題は冒頭の「プロフェッショナルとして責任をとる」という部分に戻るが、このテーマを具体的に自分のスキルについて鑑みた場合、Gitのより深い理解と、npmスクリプトやGulpといったタスクランナーによる処理への深い理解が、今すぐに必要だと感じた。

Gitはエンジニアの成果物に直接的に関わるシステムだし、自分の作業だけではなく、プロジェクト全体に影響を与える。コードを書く仕事の最終アプトップトは常にGitを経由してなされる。それゆえ、完全な理解が必要だ。昨日もGitの復習をしていた。継続してマスターしていく。

タスクランナーについては、webpack、npm スクリプト、Gulp 等々あるが(webpack、npmスクリプトはタスクランナーではないけれど、事実上Gulp等に変わってJSのトランスコンパイルやモジュールの管理、Sass等のプリプロセスを担当する役割を担っているという意味において。) これらを通して、最終的な成果物がつくりだされる以上、Git同様に重要だ。

Gitもタスクランナーも、実務で使う範囲ではそこまで難しくなく、ほぼ同じ作業の繰りかえしであるため問題なく使えるが、プロフェッショナルとしての責任を持てる理解が今の自分にあるかというと、ない。急務である。

(Deep Work) => Flow – A proven Path to Satisfaction

さらに話は変わって昨日読んだ、おもしろい記事。

https://www.robinwieruch.de/lessons-learned-deep-work-flow/

5日目 IoT 編「IoT をやるとウェブの根幹の知識がついていい」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 5日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。5日目の今日は、IoT 編です。

  1. raspberry pi 3 に nodebrew を入れて node のバージョンを管理する。node-redも入れる。 2017年5月1日
  2. Node-REDの基本的なノード:MQTT,JSON,Websocket,TCP等 2017年4月29日
  3. 最初のフローを作る。Node-REDレクチャー2 2017年4月23日
  4. Node-RED イントロダクション 2017年4月23日

5/5 養老の滝ハッカソン

https://media.dmm-make.com/item/4181/

これに向けてラズベリーパイを買い、node をインストールして、Node-RED を仕込んで、Grove を秋葉原で買って…というのを 1ft-seabass さんご指導のもと、色々準備していったのですが、いつも通り HTML, CSS, JS を書くフロントをやったので、全くセンサー触らず。IoT デビューできず。

IoT をやるにあたって、ルーターの仕組みや、根本的なネットワークの知識、通信プロトコルの知識がつきました。ウェブだけでどうしても完結するサービスをメインにやっているので、その外側の知識があやふやだったのですが、IoT を通して知見が広がりました。

やっぱり実世界の値、気温や速度や位置情報を、簡単に取れて、それがウェブに反映するというのは面白いですね。

その後、結局 Grove センサーは放置しっぱなしで申し訳ないのですが、また時間を見つけてやっていきたいと思っています!とはいえ、仕事でやらないとなかなかまとまった時間ができないのが難しいところ。IoT とウェブを組み合わせる小規模な仕事、とか見つければなと思います。

明日はリアクト編です!

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 5日目です

https://adventar.org/calendars/2747

 

4日目 WebStorm 編「WebStorm は全部盛りなので楽」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 4日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。4日目の今日は、WebStorm 編です。

通算 10 記事、WebStorm について書きました。

  1. webstorm 差分チェック(diff)のショートカット 2017年12月1日
  2. webstorm standard js成形 2017年10月16日
  3. Webstorm reformat codeの設定 2017年6月7日
  4. WebStorm の設定を複数の端末で共有する 2017年4月8日
  5. WebStorm Bitbucket 2017年3月26日
  6. Webstorm EAP 版が Vue.js をサポートしたので使ってみました 2017年3月16日
  7. WebStormでコードをチェックする 2017年1月19日
  8. WebStormのエディターの色を変える 2017年1月19日
  9. WebStormのKeymapを他のパソコンに移行させる 2017年1月13日
  10. WebStormのショートカットキー 2016年11月19日

元々は Atom を使っていたのですが、沖さんが JetBrains 製品を使われていたので、私も便乗して WebStorm にしました。自分の周りの強いウェブ開発者は、WebStorm (もしくはその上位バージョンにあたる IntelliJ IDEA) か VSCode を使っています。

VSCode はやはり軽いです。また無料なので、今からウェブ開発を始める人には VSCode をおススメさせていただいています。非力なパソコンでもサクサク動きます。

WebStorm は全部盛りで、プラグインの追加や設定をせずとも、最初から必要なものが揃っています。また Version Control を WebStorm ないでできるのが便利です。

Version Control

差分をいつもエディターないで簡単に見れて、今見ているファイルをエディターで開く、なんてことが簡単にできるのが連携しているポイントだと思います。SourceTree のほうが高機能な部分もありますが、(例えばファイル全体ではなくて、特定の行だけをコミットに取り出すなど) いつものエディターでコミットできて、差分をチェックできて、連携しているからこそ実現できる一発で差分が生じている行に移動ができる、というのはかなり快適です。

npm script の実行

package.json に書かれた npm スクリプトを実行するための機能があります。これをつかえば、毎回 npm start とか npm run build とか打たなくていいので楽です。

あと地味にいいのは、例えば package.json が開発ディレクトリの直下にない場合、プロジェクトを開くたびに、毎回 cd fornt とかって移動してから npm コマンドを叩くことになるわけですが、WebStorm ならそれも必要ないです。package.json のある場所を指定してあげれば、この機能でそのままアクセス可能です。

また、プロジェクトを開いた時に絶対実行するスクリプトを登録しておけば、自動的に実行してくれます。地味に楽です。

他にも次の記事が参考になります。

ウェブ制作にはWebStormがお勧め! 使いこなせば操作が爆速になる機能のまとめ

http://ceblog.mediba.jp/post/143350750932/webstorm%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E5%BF%AB%E9%81%A9web%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1

常に使っている機能

  • cmd + shift + O → ファイル検索
  • cmd + 数字でタブを切り替える。1 プロジェクト、4 run、9 バージョンコントロール
  • esc → エディターウィンドウに戻る
  • alt + F12 ターミナルを開く
  • cmd + b → JS の変数、関数、CSS のクラスの宣言元に移動する。宣言の場所でもう一度ショートカットキーを実行することで、使用している変数・関数へジャンプする。
  • cmd + K → コミット
  • cmd + shift + K → プッシュ
  • cmd + T → アップデートプロジェクト
  • cmd + i (に自分で設定)→Select in Project View(今見ているファイルを左側のプロジェクトタブで開く)

知っているはショートカットを忘れてしまっていつも使えていない機能

  • Option+F7 → 変数・関数の使用箇所を一覧表示
  • Command+Option+O → 変数名・関数名・クラス名を検索
  • Command+Shift+Delete → 最後に編集した行に移動
  • Command+Shift+V → 文字列をコピーした履歴からペーストする
  • alt + 上下 → 単語単位で選択範囲を広げる
  • Shift+F6 → リネーム

今後使いたい機能

REST Client

今は Google 拡張の Restlet Client を使っていて、これもいいのですが、WebStorm 内にあるのであればこれを使っていきたいなと。

Debug を WebStorm から

https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html

Chrome でいつもはデバッグしていたのですが、なんと WebStorm 内でデバッグ可能。現在レンダリングされている HTML も見れる。もちろん Node で立てたサーバー内でも実行可能。使えたら便利そうです。

比較系

WebStorm/PhpStormが備える差分抽出(Diff)機能まとめ

  • ローカル履歴と現在のファイルを比較する。
  • ブランチごとの比較。

  • Deployment(Automatic Upload)
  • Directoies ディレクトリの役割を決める。ルートパスなど。
  • JavaScript Libraies 外部のJavaScriptライブラリを読み込んでコード補完を行えるようにする機能。

今後もガンガンウェブストームの機能を覚えて、自動化できることは自動化していきたいと思います。

VSCode 使っている人をみていて軽そうで羨ましいというのはありますが、むしろ最速のパソコンを買えばいい。毎年最速のパソコンが買えるように稼ぎたいと思います。

一人アドベントカレンダーはまだまだ続きます。

3日目 フレームワーク・ライブラリ「前半 Velocity.js 後半 React」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 3日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。3日目の今日は、フレームワーク編です。

前半 Velocity.js 後半 React

両方ライブラリですが。2017年の前半は jQuery + Velocity.js でした。アニメーションや UI の作成。そして 7月からは React 。

来年は Three.js のような WebGL を使ったアニメーションと、D3.js などのチャートを作るライブラリを使いたいなと思います。

あとは React VR もちょっとやってみました。飛び道具的にしか使えない気もしますが、自分のウェブサイトでインパクトを与えるにはいいなと。

Redux

Redux 自体は非常に小さく、シンプルなアプリケーションですが、Redux Way にのっとって state を変更するために、モダンな JS の概念を得ることができました。主に fucntional programming,  pure function, immutable といった概念と、map, filter, reduce のようなメソッドです。

Redux の作者自ら解説するこの動画がかなりわかりやすいです。

https://egghead.io/courses/getting-started-with-redux

Redux はいらないという意見もありますが、Redux を通じて得ることができる state の設計と更新の手法に価値がまずあると思うので、経験が浅い人ほど取り組む価値があると思います。設計に関する方針を持った人があえて自由度を高めるために Redux を使わないという選択はあると思います。

まとめ

あんまり書くことありませんでした!しばらくはひたすら React やる感じです。

 

2日目「公式ドキュメントを翻訳していたらコードを書けるようになった」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 2日目です

https://adventar.org/calendars/2747

アドベントカレンダーに乗り遅れ、参加できそうなものがなかったので行われる、孤独な一人アドベントカレンダー。2日目の今日は、翻訳編です。

ライブラリの公式ドキュメントを翻訳していたら、コードを書けるようになった

記事一覧

2017年の2月に最初の公式ドキュメント翻訳シリーズを開始しました。(Velocity.js のドキュメントを勝手に日本語にする 2017年2月20日) その後継続して続けてきました。

ざっくりいって 20本、翻訳記事を書きました。

  • vue.js 3本
  • npm 1本
  • CodePen 1本
  • ScrollMagic 1本
  • node-red 3本
  • React 関係 5本
  • native app 関係 3本
  • フロントエンド最新情報 2本

その結果、圧倒的成長することができ、コードを書けるようになりました。一般的にいって学習に有効方法として、手を動かすことが強調されますし、当然必要なのですが、それに加えて私の場合は、この翻訳活動が大きく貢献してくれました。

一字一句翻訳することで、単に読むよりも、正確に対象を理解する必要が発生し、コードを書くのとはまた違った理解が深まります。

また、優れたライブラリー/フレームワークのドキュメントは、それ自体が優れたウェブ開発の解説書となっており、単にそのライブラリの使い方以上の知識を吸収することができました。特に今年は React を通して functional programming, reactive programming といった自分にとっては新しいプログラミングのパラダイムを知れたことが大きな出来事でした。(参考: Programming Paradigms)

さらにいうまでもないことですが、公式ドキュメントの情報は正確で、最速です。ドキュメントに間違えはありませんし(もしあれば指摘して OSS に協力できるチャンスだと思います)、バージョンアップに伴う変更についても一番早く知ることができます。他の誰かが書いたブログ記事は、どれだけ精度が高くてもいつかはアウトデートな情報になります。正確な情報を最速で手に入れることができる、というのが公式ドキュメントを翻訳する利点です。

なぜ翻訳を始めたか

なぜ公式ドキュメント等の翻訳を始めたかというと、第一に、もともと翻訳が趣味だったからです。別の言語から、別の言語へと移し替えるという行為は、興味がない人にとっては何が面白いのかさっぱりわからないとは思うのですが、多分それは、なんであんなに必死になってバーベキューをアメリカ人がやっているのか、日本人にはピンとこないのと同じで、趣味というのはそういうものだと思います。とにかく翻訳するという行為自体が好きだったというのが大きな理由です。

もう一つの理由はとても実務的なもので、質問をした際に師匠から送られてくる返信が、基本的に英語の公式ドキュメントだったからです。そしてそれが全然読めず、業務に支障があり、なんとか読めるようにする必要がありました。ドキュメントは、英語としては読めるのですが、ウェブに関する専門用語をそもそも知らないし、知っていたとしても日本語と英語が対応していなかったために、最初は意味がほとんどわかりませんでした。要素 = element, 属性 = attribute, 引数 = argument といった日本語と英語の対応が全然とれていなかったので、element と漠然と言われてもピンとこないために読めなかったのです。

結局のところ翻訳は、英語の知識よりも、対象についての知識が必要になります。プログラミングについて理解していないと、英語がいくらわかっても、うまく翻訳できません。日本語で話されているのに、プログラマー以外にとっては我々の話がちんぷんかんぷんなのと同じです。そういったプログミラミングに関する総合的な知識をドキュメント翻訳を通してつけることができました。

翻訳記事を振り返る

  1. Swift 4 / iOS11 で iOS App の開発入門 2017年11月28日
  2. Google Chrome の 開発者ツールの使い方 2017年11月21日
  3. Kotlin のチュートリアルを部分的に日本語にしつつ進める 2017年11月19日
  4. React Native ドキュメントの日本語訳 2017年11月8日
  5. React v16.0 メジャーバージョンアップ 2017年10月3日
  6. CSS Transition と Keyframe Animation 違いと優位性 2017年8月28日
  7. 日本語訳: Presentational and Container Components 2017年8月22日
  8. 翻訳 私たちのチームが使っているフロントエンド開発システム Our entire team of engineers use this front end development guide 2017年7月28日
  9. Redux 公式ドキュメント 日本語に一部翻訳 2017年7月19日
  10. React チュートリアル 日本語翻訳 2017年7月14日
  11. Node-REDの基本的なノード:MQTT,JSON,Websocket,TCP等 2017年4月29日
  12. 最初のフローを作る。Node-REDレクチャー2 2017年4月23日
  13. Node-RED イントロダクション 2017年4月23日
  14. ScrollMagic のドキュメントを翻訳する 2017年3月27日
  15. npm とは何か / Package と module の違い 2017年3月4日
  16. Intro to Vue.js: Vue-cli and Lifecycle Hooks 日本語へ翻訳 2017年2月28日
  17. Intro to Vue.js: Components, Props, and Slots 2017年2月25日
  18. Velocity.js のドキュメントを勝手に日本語にする 2017年2月20日

記念すべき一記事目

Velocity.js のドキュメントを勝手に日本語にする 2017年2月20日

jQuery とだいたい同じだからと言われたものの、なんか違う。動かない。必死になって翻訳したことを思い出します。この翻訳を通じて DOM とそれを操作するための JavaScript 全般の理解が一気に深まりました。

結局のところただのテキストである HTML ソースをブラウザが解釈して、Document Obeject を作る。この下には、全ての HTML Element がツリー上に連なっており、それに JavaScript から Object のようにアクセスできる。その標準化された仕組みが Document Object Model である。なんとなくしかわかっていなかった jQuery がやっていたことは、つまり、Document Object 以下のツリーにアクセスして Element を取得して、それに紐づいている property を変更することで、スタイルやテキストや属性を変えているだけなんですね。

ということが、今はわかるのですが…この翻訳を始めたとこにはわかっておらず、翻訳を通して少しずつ理解が深まりました。本当にやってよかったなと思います。

実力的に追いついていなかったが何かを掴んだ Vue.js の翻訳

Intro to Vue.js: Components, Props, and Slots 2017年2月25日

今年のかなり早い段階で Vue.js のドキュメントと関連記事の翻訳を始めていることに自分でも驚きました。明らかに実力不足です。しかし、これを通して、jQuery の次のフェーズへの JavaScript への道が広がりました。

jQuery がおこなっていることは、平たく言えば Document Object の操作だけなわけです。(Window オブジェクトとかもありますが) しかし、Vue や React がやっていることは、ブラウザの中だけれど、DO 操作の手前の空間でのやり取りです。最終的には React が DO を操作するわけですが、我々が書いていることは DO の操作についてではなくて、React へのお願いの部分なわけです。そしてそのお願いの部分は、jQeury や 生の JavaScript へのお願いよりもかなり入り組んでいると言っていいと思うのですが、しかしかなり気が利いていて、自分で生の JavaScript で書いたらかなり面倒なことをやってくれています。

React において書いている JavaScript は我々とブラウザの間にたって仕事をしてくれる React へのお願いである。というのは、一つ自分の JS のキャリアとしては大きなパラダイムシフトでした。(もちろん jQuey だって Velocity だって、他のフレームワークだってそうなのですが、言いたいことはわかってもらえると思います。規模感や扱う条件が入り組んでいます。)

話を Vue に戻すと、Vue のドキュメントや他の記事は、React がわかっている前提で書かれているように思いました。言葉が抽象的で、今読んでもピンときません。対して React のドキュメントや資料はかなり基礎的なところから説明が始めまります。結果的には、React をメインでやっていくことになるのですが、しかしよくわからないと思いながら色々調べる過程で、次のフロントエンド開発者としてのフェーズに進めたので、Vue の翻訳は前のめりにやってよかったと思います。

JavaScript Ecosystem の中核「NPM」の公式ドキュメントの翻訳

npm とは何か / Package と module の違い 2017年3月4日

この記事は私のブログで二番目に検索されている記事です。なかなかこれを対象に選んだのは運が良かったなと思います。というのも現在のフロントエンド開発の中心にあるのは NPM だからです。npm install もしくは yarn と叩かない日は現代のフロントエンド開発においてはないと言っても過言ではないですよね。NPM を通して、JavaScript のエコシステムがどのようになっているのかを知る、入り口に立つことができました。

これによって開発の起点となる package.json のことがよくわかりましたし、当時使っていた Gulp や bwoserify や Sass トランスコンパイラのこともよくわかりました。package.json に書かれていた長い JSON はそういうことだったのかと。

NPM を対象に選んだのは本当に運が良かったと思います。

React 公式チュートリアルの翻訳を夏に始める

Redux 公式ドキュメント 日本語に一部翻訳 2017年7月19日

4ヶ月ほど空いてついに React の翻訳を始めます。(この間は CSS/HTML/JavaScript への理解を業務を通して深めていた時期です。この時期の最後の頃に、やっとなんとか書けるようになったと思います。) そしてその一週間後に厚かましくも React 勉強会でメンターをさせていただきました。

React 公式チュートリアルの翻訳は勉強になることが本当に多く、map や filter や reduce といった iterate 処理のメソッド等々、ES2015 の今まで使っていなかった部分をかなり深めることができました。Redux を通じて知った Pure Function という考え方も、自分のプログラミング全体にいい影響を与えてくれました。

そしてもちろん React 自体の理解が現在の仕事につながっているので、ドキュメントを必死に翻訳して良かったなとおもいます。

最新のフロントエンド開発の記事を翻訳する

  1. CSS Transition と Keyframe Animation 違いと優位性 2017年8月28日
  2. 日本語訳: Presentational and Container Components 2017年8月22日
  3. 翻訳 私たちのチームが使っているフロントエンド開発システム Our entire team of engineers use this front end development guide 2017年7月28日

React の翻訳を始めたくらいから、英語の記事をそのまま読める力がついてきました。その結果、英語で検索すれば面白い記事がたくさんあるのがわかったので、細々フロントエンド系の記事を翻訳し始めます。

特に「翻訳 私たちのチームが使っているフロントエンド開発システム」を読んで、必要な技術の見通しが立ったのは大きかったです。色々なツールがあるわけですが、まずはこれを一つの指針とすることができたので、迷いはなくなりました。

ネイティブアプリ系の翻訳

  1. Swift 4 / iOS11 で iOS App の開発入門 2017年11月28日
  2. Kotlin のチュートリアルを部分的に日本語にしつつ進める 2017年11月19日
  3. React Native ドキュメントの日本語訳 2017年11月8日

11月はネイティブアプリの開発を始めます。やはり今のユーザー体験は、ウェブからネイティブに移っているので、ネイティブも視野に入れていく必要があると思ったからです。また、ネイティブアプリ、特に React Native などはまだできる人がいないので、市場価値が上がると思ったからです。

翻訳はあくまで自分の勉強なので、すること自体に大きな価値があるのですが、それでも既に素晴らしい日本語資料がある領域よりも、まだ日本語の資料がない領域で行った方が、自分のエンジニアとしての市場価値が上がります。結局のところ、ニーズはあるができる人がいない、そういった技術を身につけるの一番市場価値を上げることができます。

React Native のドキュメントは、結局のところネイティブアプリの開発を知っている前提の部分がまだあります。なので、Kotlin / Swift も始めました。ネイティブというウェブ以外の開発を知ることで、ウェブ開発のほうにもいいフィードバックが得られました。

まとめ

20本の翻訳記事を書いた2017年。一本目を書いた2017年2月17日の時点ではDOMの理解すら怪しかった。しかし、翻訳を通してウェブ開発全体の知識をつけることができ、次の仕事へのステップとすることができた。

今後は、日本語資料が少なく、しかし需要のあるネイティブアプリ関係の翻訳に力を入れ、エンジニアとしての市場価値を高める。

同時にサーバサイド(Node.js, MongoDB)、インフラ(docker, AWS)等、ウェブエンジニアとして必須となる知識についても取り組んでいく。

 

webstorm 差分チェック(diff)のショートカット

https://www.jetbrains.com/help/webstorm/2017.2/differences-viewer.html?utm_medium=help_link&utm_source=from_product&utm_campaign=WS&utm_content=2017.2

  • cmd+alt+左右 差分ファイルを移動
  • F7(戻るはspace+F7) 変更箇所の移動
  • cmd + 下 下のソースの該当箇所に移動
  • cmd+o 変更ファイル一覧リストに移動

1日目「弟子修行編」 2017年圧倒的成長振り返り一人アドベントカレンダー

この記事は ” 2017年圧倒的成長振り返り一人アドベントカレンダー ” の 1日目です

https://adventar.org/calendars/2747

アドベントカレンダーってなんやねん、みんな騒いでるけど。と思っていたのですが、これのことなんですね。クリスマスまでに毎日何かお楽しみがあるという。

気づいた時には時既に遅く、大体のアドベントカレンダー企画の枠は埋まっていたので、「一人アドベントカレンダー」を実施いたします。

題して「2017年圧倒的成長振り返りアドベントカレンダー」です。

圧倒的成長の2017年を振り返る

このブログを2016年11月8日に始めてから、通算 137本の記事を書きました。そのうちの107本が 2017年に書いたものです。メモ書き程度のものが半分くらいはありますが、3日に一回は書いていることになるので、アウトプットのペースを守れたので、よかったなと思います。

記事一覧はこちらから

続けた結果、現在では月3000ビューのサイトに成長しました。右肩上がりの圧倒的成長です。React, npm, webpack, browserify で検索してこられる方が多いです。

ブログを振り返ると、自分の成長の軌跡がみえる

コンスタントにブログを書いているので、記事を読み返すと、自分の圧倒的成長の歴史がよくわかります。同時に、ブログの序盤の素人感がすごいな、というのもよくわかります。

以下の記事は 2016年11月17日に書かれたものですが、float がどうなっているのかよくわからない…という当時の苦悩が伝わってきます。float がわからないって今となっては信じられませんが、一年前はわかっていなかった!ということがこの記事からわかります。

float: leftするとどうなるか

次の記事は2017年11月18日と最近に書いたものですが、勝手にドキュメントを日本語にするというシリーズの最新版で、React-Native の公式ドキュメントを翻訳しています。float がわからなかった人が、よくぞ一年でネイティブアプリ関連のドキュメントを読めるまできたなと、驚きます。

React Native ドキュメントの日本語訳

沖さんに弟子入り

2016年6月10日に沖さん の弟子にさせていただき、各種ランディングページのマークアップを担当させていただいたのち、2017月9月より一身上の都合により独立?し、今は React でフロントの開発をしています。

沖さんに弟子入りしたときには、HTML/CSS/JS のスキルは業務レベルとしてはほぼゼロで、前述の通り「float したら高さがゼロになって、崩れる。なんでやねん!」というレベルだったわけですが、ここから親身に面倒を見ていただき、なんとか HTML/CSS は自信を持って書ける…はず!というところまで育てていただきました。

ウェブエンジニアとしてなんとか仕事にできるようになったこと、2017年の圧倒的成長は、ひとえに沖さんのおかげです。ありがとうございます!

沖さんのもとでできるようになったこと

  • HTML/CSS
  • レスポンシブに対応したマークアップ
  • CSS 設計 (BEM 等)
  • Git
  • Gulp 等のタスクマネージャー
  • 各種 HTML テンプレートエンジンの使用
  • 外部サービスを使用した各種ブラウザ、スマホでのチェック
  • Velocity 等のライブラリを使ったアニメーション
  • Photoshop, Illustrator を使ったデザインの確認・画像の書き出し
  • WebStorm

調べればなんとか一人でウェブサイトは作れるぞ、というところまで育てていただきました。ありがとうございます!

最初に任せていただいたプロジェクトは、 CoffeeScript + Velocity + Sass + Haml + Grunt  という開発環境だったと思うのですが、そもそも当時は Git の操作も怪しかったためまず開発環境をクローンするところでつまづく、そして package.json がなんのためにあるのかわからないし npm も多すぎてどれが何しているのかわからない、grunt ってなんなんだ…Git でコミットしようとすると真っ赤なエラーが出る…見たことのない拡張子のファイルがたくさんあり、そもそもどこにコーディングすればいいのかわからない…自分が知ってる CSS JS と記法が違いすぎる…という絶望的な状況でした。今思い出すと、よくやらせていただいたなと。

とにかく必死に一個一個教えていただき、なんとか一応はできるようになったのは、本当に弟子修行の最後の方だったと思います。ご面倒ばかりかけて本当に申し訳ないという気持ちです。

沖さんの元で修行させていただいたおかげで、一気にモダンなフロントエンド開発環境を知ることができ、また綺麗に整理されたコードというのはどういうものなのか、ということを体験することができました。その後他の現場で他の方が書かれたソースをみると、10年近くエンジニアをされている方でもあまり構造化されていないコードで、やはり経験年数を積むこと以上に、高いレベルで書かれたソースを見れる機会というのが、上達においては非常に重要だったんだと感じています。

弟子編まとめ

あまり戦力になれず、ご面倒ばかりおかけしてしまった弟子期間。なんとかウェブ開発ができるようになりました。面倒をみていただいた沖さん、ありがとうございました!次はなんとか戦力になれたらいいなと思っています!そしていつかは追いつきたい!という思いです。今後ともよろしくお願いします。

さて明日の「2017年圧倒的成長振り返り一人アドベントカレンダー」は「翻訳編」です!

Swift 4 / iOS11 で iOS App の開発入門

この本がとにかくわかりやすいです。有料の本もあるので無料公開部分の作業が終わったら、買ってみようかなと思ってます。

https://www.appcoda.com/learnswift/hello-world-explained.html

開発環境の整備

  • 開発には Xcode という Apple 公式提供の IDE を使う
  • 言語は Swift
  • 基本的には Mac ユーザーしか iOS 開発はできない

上記の本に従って App Store から Xcode をダウンロード・インストールし、新規プロジェクトを立ち上げてください。

Swift の言語としての特徴

生粋の JavaScripter の私から見ると、かなり違いのある Swift 。とはいえこれが普通のプログラミング言語の一般的な形のようです。

主に JavaScript と異なるのは、型の扱いです。常に型を明示する必要がないのは JavaScript と同じではあるのですが、前もって型がおかしいことがわかっている場合や、値が含まれない場合が考えられるのに、値がある前提でコードが書かれており、値がない場合に止まってしまうような場合には、コンパイル前に、エラーでお知らせしてくれます。

また、コンパイルが必要な点も JavaScript とは異なります。JavaScript は scripting language という性質で、これはコンパイルを必要とせず、runtime engine がその場で interpret  します。(とはいえ今や JavaScript は多様で、トランスコンパイルさせるものもあるし、コンパイルさせるものもある。また反対に C+ でもコンパイルせずに、script language として処理する仕組みもある。ので、言語そのもののというよりは、環境においてその性質が決まる。) しかし Swift はコンパイルするタイプの言語で、その際に型をチェックしている。このようにコードを走らせる前に型をチェックするタイプを静的型付け言語というとのこと。

Xcode 内の操作

  • storyboard の中の viewController は UI の作成を担当
  • ViewController.swift が UI と Class のコネクションを担当
  • 例えば、UI 上のボタンをクリックした時にテキストを表示する機能を作る場合には、storyboard でボタンを作成配置して、ViewController.swift 上でメソッドを作って、ボタンと連携させるコードを書く

UI と メソッドのコネクション

  • storyboard の右側のパネルの -> がイベントへの接続リスト。ここで Touch up inside イベントとメソッドが連携されている。
  • method の @IBA は interface builder へ action を export している。
  • Storyboard の Identity Inspector の custum class の部分で、.swift と連携するクラスが指定されている。

class ViewController: UIViewController

これは swift の class の extend と書きかた。UIViewController は iOS を構成するブロックのうち、もっとも基本的なもの。これを継承して ViewController をつくっている。

override は UIViewController の default function をに上書きするためのもの

もともと UIViewController がもっている function に上書きして使用するため、override と指定している。

Compile と package

  • compile はコンパイル。これは Xcode が勝手にやってくれる。
  • package はソースコード以外の、例えば画像とか音声ファイルを、アプリケーションにまとめる作業。

AutoLayout

align to で修正。