周辺知識(バージョン, webpack, babel, eslint)

2018-07-01

JavaScriptを利用する上で知っておきたい周辺知識について取り上げます。各周辺知識ごとに関連リンクも載せていますので参考にしてください。

バージョン｜ECMAScriptの歴史

2015年6月に公開された ECMAScript 2015 で多くの機能が追加されました。
参考書などは、バージョンに注意して読むことをお勧めします。

参考リンク

npm, yarn

パッケージ管理ツールです。

参考リンク

yarnについては下記ページで取り上げています。
パッケージマネージャー「Yarn」の使い方

Webpack

複数のモジュールを1つのファイル( バンドル )にまとめてくれます。つまり、JS、CSS、画像などを一つのファイルにまとめることができます。

ローダー(バンドル生成前に個別ファイルごとに作用) や プラグイン(バンドル生成後に作用) を利用して、下記のような追加操作も設定することが可能です。

ES2015以降のコードをES5のコードに変換
TypeScriptをJavaScriptに変換

参考リンク

Babel

Node.js製のトランスパイラです。ブラウザがまだサポートしていない新しいESの機能を、ブラウザがサポートしている形式に変換してくれます。

参考リンク

https://babeljs.io/

https://babeljs.io/repl でどのように変換されるのか確認することができます。

ESLint

静的構文チェックツールです。

参考リンク

コーディング規約

JavaScript Standard Style

(英語) https://github.com/standard/standard
(英語) https://standardjs.com/#standardjs–the-rules
(日本語) https://www.webprofessional.jp/why-use-javascript-style-guide/

セミコロンは書かないというのが他のスタイルガイドと比較して、特徴的かと思います。

Airbnb JavaScript Style Guide

(英語) https://github.com/airbnb/javascript
(日本語) http://mitsuruog.github.io/javascript-style-guide/

MDN JavaScript Style Guide

(日本語) https://developer.mozilla.org/ja/docs/JavaScript_style_guide

Google JavaScript Style Guide

(日本語) http://cou929.nu/data/google_javascript_style_guide/

ドキュメンテーションコメント

ルールに沿ってコメントを書くことで、ソースの可読性が高まります。
例を示します。

/**
 * コンストラクタの説明
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}
 
/**
 * メソッドの説明
 * @returns {string}
 */
Book.prototype.getTitle = function() {
}

JSDoc( http://usejsdoc.org/ )を利用すると、コメントから自動でAPI仕様書を生成することができます。

AltJS｜TypeScript

JavaScriptが持つ問題点を解決するために作られた JavaScriptの代替言語 です。

AltJSはいくつか存在しますが、Microsoftが開発した TypeScript が特に有名です。
TypeScriptはJavaScriptの スーパーセット でJavaScriptの構文をそのまま活用できます。

上位互換ともいいます。JavaScriptの機能をすべて含んだ上で、より機能が拡張されているものがTypeScriptです。

TypeScript では 静的型付け もできるので、大規模開発などで活躍します。

参考

https://www.typescriptlang.org/index.html

https://www.typescriptlang.org/play/index.html でどのように変換されるのか確認することができます。

参考になるサイト

JavaScriptを利用する際、mozillaのリファレンスサイトが参考になります。
JavaScript関連の情報が豊富です。

JavaScript関連
- https://developer.mozilla.org/ja/docs/Web/JavaScript
DOM関連[ブラウザオブジェクトなど]
- https://developer.mozilla.org/ja/docs/DOM
Web API インターフェイス
- https://developer.mozilla.org/ja/docs/Web/API

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。一方「レバテックキャリア」などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

「転職ドラフト」は、企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

「レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。