JavaScript初心者が強くなれた瞬間
現在の常駐先に来て、JavaScriptを書かせていただく機会がとてもありました。
そこで、私が「JavaScript初心者」から「少しは分かる経験者」になった(と信じたい)と思うので
理解が深まったきっかけとなるエピソードを振り返りたいと思います。
常駐先と業務内容
- 業態:某大手WEBメディア
- 使用技術:HTML,CSS,jQuery(1系)。動的ページはバックエンドエンジニアがJSPで生成。
- 業務内容:ページを0から作成ということはあまりやらない。既存ページをoverrideするような形でJavaScriptをゴリゴリ書いて、 ABテストのためにUIやデザインを改造することが多い。
JavaScriptの理解度
常駐開始前
- フロントエンジニア歴半年(エンジニアになるまでは営業職)
- HTML,CSSはなんとなくであるが自分でも書けた。
- JavaScriptはコピペをもとにしてしか書けないコピペエンジニア (コピペした内容もなんとなくしかわからない)
常駐開始後1年
- フロントエンジニア歴1年半年
- 他のエンジニアが書いたコードをレビューできるレベル
- コピペはするが、内容も理解できるし自分で考えて0から書くこともできるようになった
なぜ強くなれたのか。
既存ソースを触らず、JavaScriptでぺージの見た目を変える必要があったから。
通常のWEB制作では既存ソースを触れることが多いのではないでしょうか？
要件がカセットの新デザイン化であれば、HTML,CSSで基本完結し、もしも動的要素の追加があればPHPなどのバックエンド言語を使うなど。
ただ、僕の常駐先では、既存ソースをを一切触らずに様々な要件をJavaScript一本で実装する必要がありました。
上記の様なカセットの新デザイン化であれば
- 対象となる要素の取得
- CSSを当てるためにクラスの追加。
- CSSファイルの追加読み込み
- レイアウト変更があれば、DOMの改造
- 追加となる動的要素があれば「同ページのどこかから拾ってくる」「拾えなければajaxでAPIからデータをとってくる」
などの実装を既存ソースをを一切触らず、追加したJavaScriptソースだけで行う必要がありました。
なので、自然と様々な処理を書く機会ができ、
そうすると「JavaScriptでできること」から逆算し、「ここはこういう風にすればできるのではないか。」
といった思考が身につきました。
それが強くなれた一因かなと思います。
レガシーだったから。
僕の常駐先ではreactやvueといったモダンな環境ではなく。
JavaScriptはどんなに複雑な要件でもjQueryの1系で書き切っていました。
内容はあまりは言えませんが、要件的にググって全部のコードが出てくる様な単純なものはなく
複雑な要件のものが多かったです。
ReactやVueでは意識せずにかける事も
jqueryだと、JavaScriptできることを理解できていないと
書けないです。
もしも、僕がいきなりReactやVueを使う常駐をしていたら
JavaScriptの基本的な部分は理解できていなかった気がします。
その中で理解が深まった瞬間
処理の実行順序を意識してかけるようになった時
JavaScriptの実行順序は基本的に「上から順番」ですが、例外あります。
それが
* document.ready
* window.load
* 非同期処理
です。
常駐開始直後の僕は上記の概念を全く理解していませんでした。
通常の静的なサイト制作にあたっては、
１人のフロントエンジニアがJavaScriptを書き切ることが多いのでは
ないでしょうか。
僕も常駐開始前までは、基本自分だけで完結するような制作して来なかったので、
「上から順番」という原則だけしか理解していなくてもなんとかなったのではないかと思います。
ただ常駐を開始してからは「既存js処理にさらに自分の処理を追加して書く」ということが当然となり、
jsの実行順序を意識しないと、意図通りの挙動にならないということがよくありました。
既存JavaScript処理と共存していくためには 既存JavaScript処理がどのタイミングでなにをしているのか。を正しく理解しましょうということです。
どのように使えば良いかは以下の記事が参考になります。
処理を区切って関数化する。returnをうまく使う。高階関数を使う。
常駐前までに書いていたjsはどちらかというとググれば出てくる「スライダー処理」「文字きり」などがメインでした。
しかし常駐先ではどちらかというと「JavaScriptの基本」を組み合わせて要件を実装する。ということ必要でした。
「JavaScriptの基本」というのは
* 文字列や、属性値をDOM要素から取得する
* 配列の中身を捜査、加工したもの配列を生成する
* 真偽値によって処理を分岐させる
など、です。
これらを組み合わせて、処理を書いていく時に大切なことは
処理を区切って関数化する。
returnをうまく使う。
高階関数を使う。
です。
例えば以下のような処理です。(わかりづらかったらすみませんmm)
returnされた値や高階関数を使っています。
関数caliculateは引数にとったisInitがtrueなら、
引数にとったコールバック関数resultに引数numの値を引き渡し実行させます。
jsをかける人からしたら当然の概念かもしれませんが、
僕はこれらを使えるようになってから、かなりできることの幅が広がったし、
わかりやすくかける様になったと思います。
なので、初学者の方に、ぜひ理解しておいていただきたい部分です。
高階関数についてはこちらが参考になります。https://qiita.com/may88seiji/items/8f7e42353b6904af5e9a
const pass = 'GO'
const baseNum = 20
// 引数が'GO'ならtrueを返す
const validatePass = (pass) => {
return pass === 'GO'
}
// 2倍する
const double = (num) => {
return num * 2
}
// 3倍にして出力
const result = (num) => {
console.log('result is ' + num * 3 )
}
// 条件が真ならコールバックを実行
const caliculate = (isInit, num,callBack) => {
if (isInit) {
callBack(num)
}
}
caliculate(validatePass(pass), double(baseNum),result) // result is 120
まとめ
上記の概念を理解した瞬間が自分のJavaScriptへの理解が深まったな。と感じる瞬間でした。
JavaScriptがゴリゴリかける方には当然の概念かもしれませんが、
駆け出しエンジニアの方の参考になればと思います。