このページの本文へ

フロントエンド開発の現場で役立つJavaScriptの知恵10選

2017年01月25日 18時06分更新

Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

どんどん複雑化するJavaScript開発。KADOKAWAが運営するオンラインメディア「WPJ」から、チームで仕事をするときの「ちょっとしたお作法」や、デバッグを効率化する方法など、JavaScriptのコードを書くときに役立つ10本の記事をお届けします。

【1】 いまさら聞けない、ES2015で変わったJavaScriptの変数宣言の違い

01.png

JavaScriptの変数の使い方と、ECMAScript 2015(ES6)で変わった点をコンパクトにおさらい。

【2】 フロントエンドエンジニアなら知っておきたい、JavaScriptのログ収集方法まとめ

02.png

サーバーサイドに比べて見落とされがちな、フロントエンドのエラーログ収集。JavaScriptのログ収集、確認に役立つ手法、ツール、ライブラリーを総まとめ。

【3】 JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう

03.png

人によって異なるJavaScriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発が捗るそうですよ。

【4】 JSのソースコードが変えられない!困ったときにモンキーパッチで逃げ切る方法

04.png

他人が作ったJavaScriptのプログラムを部分的に、でも元のコードを修正せずに対応するしかない…。そんなときにモンキーパッチ。やらなきゃいけないときの対処方法を実例で。

【5】 また同じコード書いてるの? JSを再利用しやすくするリファクタリングのコツ

05.png

「前にも似たようなコード書いたのに」「コピぺしたら動かなかった」……再利用しやすいコードを書くためのリファクタリングのちょっとしたコツとは?

【6】 セミコロンは省略?人気スタイルガイドに学ぶJavaScriptのコーディング規則

06.png

インデントにタブとスペースのどちらを使うのがいい? JavaScriptにセミコロンは付けるべき? JavaScript Standard Styleを使えばそんな論争にけりがつくかもしれません。

【7】 JavaScriptのコードをファクトリ関数でシンプルに保つ方法

07.png

関数やオブジェクトの習得なくして、JavaScriptプログラマーとして成功はできません。また、関数やオブジェクトは、コンポジションと呼ばれる強力なオブジェクトパラダイムを開始するために必要な土台となります。

【8】 1年後に読み直しても発狂しないJavaScriptを書く15の方法

08.png

「そのコメントわかりづらいんだよ!」なんて上司や同僚に叱られちゃった人へ。コメントがなくてもわかりやすいJavaScriptを書くテクニックです。コメントを書かなくていい、ということではないので、あしからず。

【9】 JavaScriptオブジェクトの作成パターン ES6時代のベストプラクティス

09.png

JavaScriptオブジェクトの作成は難しいテーマです。作成方法が非常に多いため、どの方法を使えば良いか分かりにくいのです。オブジェクトのさまざまな作成方法などを紹介します。

【10】 JavaScriptエンジニアなら知ってるよね? エラー処理のいい書き方、悪い書き方

10.png

JavaScriptのエラー処理、ちゃんと書いていますか? エラーを無視せず、どこに問題があるのか、きちんと確認できるコードの書き方をデモで紹介。

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く