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

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

https://adventar.org/calendars/2747

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

Contents

1 ライブラリの公式ドキュメントを翻訳していたら、コードを書けるようになった
2 なぜ翻訳を始めたか
3 翻訳記事を振り返る
4 まとめ

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

記事一覧

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 と漠然と言われてもピンとこないために読めなかったのです。

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

翻訳記事を振り返る

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

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

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

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

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

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

まとめ

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

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

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