Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js】この前のお休みに、気になっていた単語をどっぷり調べてみたよ🌟

その結果、色々知ることができ、益々Web・コンピューター・プログラミングの世界が奥深い事を知りました。そして…どうやら僕のブログの「挙動の不具合」は、不適切なコード(js)が原因だという事もはっきり分かりましたw(ノ")`ω´(ヾ))ウーンッᵎ💦

今日はその出来事と、それに付随する「JavaScriptの不適箇所検出ツール」も紹介したいと思います。

 

 

 それらを知った発端は、以前からちょくちょく耳にして気になっていた単語を検索してみたからでした。

npm*1PostCSS*2など、色々気になった単語を芋づる式で調べ試している内に、BabelES Lint が、非常に便利でハイクオリティーなソフトウェア・パッケージだという事を知りました。初心者の僕でもわかるくらいのハイクオリティーさでした✨(*ö*)

しかも、どちらもオープンソース✨⊂⌒~⊃。Д。)⊃✨ 一体全体、世界のプログラミング事情はどうなっているのでしょうか。「ソフトウェアは基本オープンソース」という事をちらほら耳にする事があったのですが、それにしてもこの太っ腹具合とハイクオリティー具合には、驚きを隠せません。そしてなんだかとてもワクワクします✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪ JavaScript Love✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪♪💕

 

不適切箇所 検出ツール

ES Lint

http://eslint.org

f:id:DDramonQ:20161212020804j:image 

 

Lintとは、コンピューター関連の文脈で使う場合、「不適切なコードを検出する事*3」を意味します。ES Lint は、JavaScriptの不適切な箇所を見つけ、修正の仕方を教えてくれるソフトウェア・パッケージです。

 

 

マルチプラットフォーム対応のjsコードに変換してくれるツール

Bable

 https://babeljs.io

 

f:id:DDramonQ:20161212020758j:plain

 

 

 - 最新のJavaScript( ES6 ) で記述したものを、クロスブラウザ対応のjsコードに変換してくれるパッケージ。トランスパイラー(Transpiler)とも呼ぶ。*4

 具体例

[1,2,3].map(n => n + 1);

ES6 で新しく記述可能になった「 arrow*5 functhon 」をBabel にかけると

[1,2,3].map(function(n) {
  return n + 1;
});

僕たちが普段よく目にするのはこちらの記述方法です。  最新のJavaScriptで書いたコードを、現行ブラウザの殆どが対応しているES5 の function(){} の形に変換してくれる。

 

 

 

 

ちなみに、ES Lint を知ったのは Sitepoint さんのまとめ記事でした。

A Comparison of JavaScript Linting Tools --- Sitepoint

https://www.sitepoint.com/comparison-javascript-linting-tools/

 f:id:DDramonQ:20161212020810j:image

ありがとうございました😊🌟

 

 

 

ES Lint 試してみた🌟

オンラインでもES Lint を実行する事ができます。そして、このブログで使用している js を、実際にlinting してみました。

ESLint Demo - ESLint - Pluggable JavaScript linter

 

 【↓オンラインdemo↓】

f:id:DDramonQ:20161219175251p:plain

 

⁽⁽(ી₍₍⁽⁽(ી( ˆoˆ )ʃ)₎₎⁾⁾ʃ)₎₎←←

 

ES Lint は「どこが・何が」良くないかを明示してくれます。(図下赤部分)

また、「直し方」を具体例と共に分かりやすく解説してある「解説ページ」へのリンクまで付いています。(no-nudef)

「不適切箇所」がわかるだけでなく、「直し方」まで教えて頂けるとは、もうこれは五体投地ものですね_〇⊇✨✨♪

 

【↓ 解説ページ(no-undef)

 

f:id:DDramonQ:20161219180022p:plain

 

 demoページの一番下には、「何を検出するか」の「オプション」も付いてます。

よく分からないと思いますので、最初はそのままとりあえず使ってみるのもいいかと思います。僕もそうでしたが、使っているうちに、だんだん何と無くですが分かって来るかと思います🌟

 

 

結構あるなぁ…💦」と思いながら、順番にひとつずつ解説を読みこなしていった結果、何とか「 Lint free!( 手直し不要) 」までたどり着く事が出来ました🌟

 f:id:DDramonQ:20161212020821j:image

 

 

 これは本当にかなり勉強になりました🌟 素敵なサービスをありがとうございます(* ˊ˘ˋ)*_ _))

 

 

 

[補足1] 「ソフトウェア」 と 「ソフトウェア・パッケージ 」の違い

「ソフトウェア」、ではなく後ろに「パッケージ」と付いているのは、それが「小梱包物( パッケージ )」だからです。小さな違いですがこれがけっこう違います。「ソフトウェア」と「ソフトウェア・パッケージ」は語彙的にあまり大差がないように感じますが(ちょっと前の私w) 、 Web Developmentに興味のある人や、Linux系のOSに興味がある人は、違いを明確に知っておくと、その後の学習がスムーズにいくかと思います。

ソフトウェアとは、完成品であり、それ独自で自立しています。インストールから使用まで、それ一つで完結しています。

一方、ソフトウェア・パッケージとは、ある機能を備えている点は同じですが、規模が小さく、またそれ独自では自立していないソースコードファイル群です。それだけでは、PCにインストールする事は出来ません。また、そのプログラムを実行する際にも、他のプログラムを外部から利用しなければなりません。

インストールするにはパッケージ・マネージャーと呼ばれるソフトウェアが必要になります。

 

その利点として、

  • - 使い回しが効きやすい(reusable)
    • パッケージ間の共通のコードを、重複インストールしなくて済む。また、パッケージ間でのコードの衝突がなくなる
    • 効率的(消費容量・Developerの作業手間)

 

僕もこれ以上詳しくはまだあまり知りません。すみません(๑˃꒳˂๑)💦 ですがもう少しだけ知っている範囲で言いますと、パッケージにする理由として、ちょっとした有用なコードを皆で共有しやすかったり、パッケージが沢山ある場合に、パッケージ・マネージャーがあると更新やPCの容量削減とう色々と、メリットも多いようです。

現在Web Development では「reusable」といって、タスクの効率化・共有化を促進する流れが主流のようです。んん、恐らく合ってると思います。。多分。( ¯∀¯٥)💦w

 

 

[補足2] Web Development 系のパッケージ・マネージャー

最近少しずつ分かってきました。

といっても僕もまだ🔰なので、リンクを置いておくだけですが|*´-`)✨w そのうちガッツリ解説できるようになるぜ~ε==└(└  ⸝⸝⸝›ω‹)┘スィー ✨✨♪

 

11 Dependency Management Tools for Web Developers --- Hongkiat.com

http://www.hongkiat.com/blog/manage-dependencies-tools-webdev/

f:id:DDramonQ:20161219001039p:plain

 

後、Hongkiat.com さん↑でも1, 2位に入っていましたが、僕も知っていたパッケージ・マネージャーを載せておきます。多分一度くらいは耳にした事があるかも🌟

 

npm

https://www.npmjs.com

f:id:DDramonQ:20161219001406p:plain

 

Bower

https://bower.io

 

f:id:DDramonQ:20161219001507p:plain

 

 

 

npmは以前から検索でちょくちょくヒットした事があり「デザインが美麗なサイトだな~」「解説が分かりやすいな~」と思っていたサイトでもありました。色々と洗練されている印象があり、一度は訪ブログの価値ありのサイト様です✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑)

 

 

*1:パッケージ・マネージャー。「パッケージ」「パッケージ・マネージャー」について、詳しくは  

https://www.debian.org/doc/manuals/aptitude/pr01s02.ja.html

http://qiita.com/chihiro/items/e522f9be6115a7fc197d

等をご参照下さい(•ᵕᴗᵕ•)⁾⁾🌟

*2: CSS変換パッケージ。CSSファイルをPostCSSにかけると、vender prefix( -webkit-, -moz-... )などを自動で補完したCSSを出力てくれる。JavaScript製。詳しくはHP → http://postcss.org  

*3:構文エラーや文字エラーを発見してくれる。デバッガとどう違うのかまだよく分かりません。すみません(๑˃꒳˂๑)💦

*4:translate + compiler の造語。こちらも詳しくは → https://en.m.wikipedia.org/wiki/Source-to-source_compiler。丸投げですみません💦 僕も現在進行形なもので…😅💦w

*5:矢印

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️