【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

【駆け出しエンジニアへ】未経験でもこれは覚えて入社しろ10のJS

Web転職する

先日下記ツイートをしました。

 

こちらのツイートが大きく反響をいただきましたので、このツイート【未経験でもこれは覚えて入社しろ10のJS】の補足と解説を書いていきます。

 

未経験や駆け出しのエンジニア、コーダーの方にとって有益になるように書いていきますので、宜しければ読み進めください。

 

と、その前に昨今のjQuery批判についてですが、これから勉強するという方や勉強中の方は迷わず勉強を続けていいと思います。

 

 

ちなみに昨今jQueryを否定する声もありますが思い悩む必要はありません。
Vueに向いてる仕様も、jQueryの方が向いてる仕様も存在します。
静的なサイトはjQueryの方が効率的に作れます。
バニラJS(素のJS)を使いたい人は使えば良いと思いますが、jQueryの方が工数はかからないというのは一致してるかと

 

 

その多くはJSフレームワークやバニラJS(ライブラリやフレームワークを使わない素のJS)と比較したものなのですが、そもそも用途も違うしする必要はないかもですが併用も可能です。

 

jQuery批判はおおよそ以下のような意見です。

JSフレーム派の意見

  • JSフレームの方がDOMの取得が複雑化しない
  • jQueryはださい、古い

バニラJS派の意見

  • バニラJSの方が処理スピードが早い
  • jQueryはださい、古い

 

ですが、上記意見に対しては、

 

  • 仕様に合わせて取捨選択すればOK
  • 工数や運用性を考慮するとjQuery
  • jQueryはいまだ現役で使われる最もサイトで普及してるJSのライブラリ

 

ということが言えますので、jQuery批判は無視してかまいません。

 

では早速一つ目から補足していきます。

①’use strict’;は必須

 

①’use strict’;は必須

エラーチェックが厳格になります。
あまり詳しくないですが、高速化にも一因するとか。

ファイルの冒頭に書いて全体に影響するようにするようにします。

 

‘use strict’;は必須ですよという話ですね。

ここはあまり深く考えず書いちゃって大丈夫です。

下記はあくまで1例ですが無名関数で全体を括って冒頭に’use strict’;を書くパターンです。

JSの書き始め方は何パターンかありますが今回は省略します。

 

See the Pen
rNBxmYb
by funclur (@funclur)
on CodePen.

 

②Webサイトの機能一覧

②Webサイトの機能一覧

サイトで使用する主な汎用的な機能は以下です。

・アイコンの自動付与
・スムーススクロール
・トグル
・高さ揃え(flexでできるものはflexで)
・スマホメニュー
・カレントナビ
・モーダルウィンドウ
・カルーセル

逆に言うと上記が作れれば大概の静的サイトはいけます。

 

物事の理解を深める時は大枠から理解してから詳細を理解するといいです。

そのためJSではどんな機能があるのか、どんなことができるのかをまず理解しましょう。

動的なサービスサイトだと話は別ですが、静的なWebサイトのJS機能はだいたい決まっていてツイートであげた8機能です。

 

・アイコンの自動付与
・スムーススクロール
・トグル
・高さ揃え(flexでできるものはflexで)
・スマホメニュー
・カレントナビ
・モーダルウィンドウ
・カルーセル

 

他にも細かい機能があったりサイト固有の機能はあったりするのですが、上記8つの機能を理解して実装できるようになればJSについては(少なくとも静的サイトは)ほとんど理解できてると言えます。

 

その為まずはこういう汎用的な機能を作れるようになるのを目標とすると良いです。

 

③表記ルール

③表記ルール

JSも表記ルールは必ず決めること

;はつけなくてもいいのですが、つける派がまだ多いと思うので必ずつけましょう

・セミコロン有無
・関数、if、for、コロンのスペース有無
・インデントをtabにしるかスペースにするか
・+や-の演算子の前後のスペース有無

 

これらのルールはある程度決めた方がいいです。

ちなみにどっちにすればいいの?という方は多い方にしておけば問題ないです。

つまり

  • セミコロン有が多数
  • 関数、if、for、コロンのスペース有が多数
  • インデントはtab(そこまで差はなし)
  • +や-の演算子の前後のスペース有が多数

という感じです。こういうところは初心者の頃から重要になってきますので注意しましょう。

 

また、linter(構文チェック)やprettier(自動整形)もあるので興味のある方は調べてみてください。

 

④==は絶対に使わないこと

④==は絶対に使わないこと。

意図しない挙動になる可能性があるため==、!=は使わず、===、!==を使うこと。

左辺が右辺以上である(>=)や<=が覚えずらかったのですが、右が=と覚えるといいです。

 

==は型を無視して評価するため0という数字と0という文字列を同じものとしてしまいます。

後々エラーのもとになったり、意図していない挙動になるため==とはせず===を使うようにします。あとは書いている通りですね。

 

⑤変数に$をつける場合

⑤変数に$をつける場合

要素をjQueryオブジェクトにして変数に入れる場合わかりやすように$をつけます。

例 const $div = $(‘div’);

それ以外は$をつけない。
例 const val = 123;

 

例えば$(this)もjQueryオブジェクトなので$thisや$selfという名前をつけた変数にいれるといいです。

$をつければ一目でjQueryオブジェクトとわかるのでコードの見通しがよくなります。

⑥2回以上出てくるDOMは変数にせよ

⑥2回以上出てくるDOMは変数にせよ

$(‘div’).css(‘color’,’red’)
$(‘div’).html(‘JQuery’);

const $div = $(‘div’);$div.css(‘color’,’red’)$div.html(‘JQuery’);

機能を実装すると予想以上に変数化することが多いと思います。

変数化しないと裏側でどうなってるかというと、また一から要素を探していることになります。

変数化するとキャッシュ化されていることになるので、処理も早くなりますしこちらもコードの見通しが良くなります。

⑦メソッドチェーンを使うことで高速化

⑦メソッドチェーンを使うことで高速化

$(‘div’).css(‘color’,’red’)
$(‘div’).html(‘JQuery’);

$div.css(‘color’,’red’).html(‘JQuery’)

 

メソッドチェーンはその名の通りメソッドでつなぐことができます。

そうすることで先ほどと同じようにDOMを取得する時間が省けるため、メソッドチェーンは推奨です。

 

⑧日本語で書くとわかりやすいかも?

⑧日本語で書くとわかりやすいかも?

実際の案件でやる人はいないと思いますが、変数や関数、メソッドは日本語もOKです。
こう書いた方が動作や役割はわかりやすいかも

const 人 = {
挨拶: ‘おはよう’,
喋る: function () {
console.log(this.挨拶)
}
}
人.喋る() // おはよう

これも知られてないというか、知らなくてもいいのですが、変数や関数、メソッドは日本語でも書けます。

 

自分の場合、JSを書く際にまず日本語で何をどうしたいのか考えたり文字にしたりします。

そのため、初心者のうちは日本語でロジックを整理するっていうことも大事かなと思います。

 

⑨JSでよく使う英語

⑨JSでよく使う英語

isOpen 開いてる状態
isClose 閉じてる状態
add 加える
remove 消す
current 現在地
init 初期

まだまだあるとは思うのですが、何個か挙げてみました。

あとは

  • active 活発
  • disabled 非活性

なども利用します。

 

⑩三項演算子

⑩三項演算子
三項演算子は自分で書けなくても問題ないが、他者のJSを読み解く必要があるので読めるようにする

AとDは何がコンソールとして表示されるでしょう?
const B = false;
const C = 1;
const A = B || C;

console.log(A)

const E = true;
const F = 1;
const D = E && F;

console.log(D)

See the Pen
dybGVgp
by funclur (@funclur)
on CodePen.

クイズにしてみました。

正解を言うと

 

どちらも1です。

const A = B || C;

これはBがもしtrueだったらBがAに入ってBがfalseだったらCが入るということです。

上記ではBがfalseなのでCがAにはいります。Aが1なのでCは1ですね。

 

const D = E && F;

これはEがもしtrueだったらFがDに入ってEがfalseだったらそのままEが入るということです。

上記ではBがtrueなのでFがDにはいります。Fが1なのでDは1ですね。

 

もしわからなくなっても上記codepenのようにconsole.log()で出してしまえば正解はわかりますのでconsole.logで確認することを癖つけましょう。

 

以上、【未経験でもこれは覚えて入社しろ10】のJSの解説でした。

 

JSは一個本を買って網羅的に学んだ方が身につきやすいです。

お勧めの本も下記にツイートしましたので気になるかたは参考にしていただければと思います。

初心者おすすめのJSの本として
自分の時代はドーナツ本が有名でしたが、新しめの方がいいと思います。
例えば、下記はわかりやすいと人気の本ですね😌

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) | リブロワークス, 及川卓也 |本 | 通販 | Amazon
Amazonでリブロワークス, 及川卓也のスラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)。アマゾンならポイント還元本が多数。リブロワークス, 及川卓也作品ほか、お急ぎ便対象商品は当日お届けも可能。またスラスラ読める JavaScript ふりがなプログラミング (ふりが
【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する 未経験でもこれは覚えて入社しろ10のTIPS
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました