未経験からエンジニアに転職して一ヶ月で学んだ事 #JavaScript

エンジニアに転職し１ヶ月が経ちました。
自身の整理も兼ねて学んだ事を記載します。Qiita初投稿

入社前のスペック

HTML / CSS / JavaScript 初心者向けチュートリアルがなんとなくできる程度

入社してまもなく、先輩から
「まずはこのWEBサイトのコピーを作ってみよう！CSSはSCSSをコンパイルして、JSはクラス構文で書いてみてね」
という課題と共にwebpackの設定が書かれたsampleファイルを頂きました。
webpack？SCSS？クラス？？

１ヶ月で学んだ亊

① webpack
┗導入と動かし方
② CSS
┗SCSSで書く
┗flexbox以外の書き方を知る
③ JavaScript（JQuery）
┗クラス構文で書く
┗DOMの取得回数を減らす

1. webpack

ううぇぶぱっく？

1-1. webpackとは

複数のモジュールを１つにまとめたファイルを出力するモジュールハンドラ。
JS以外のリソース（スタイルシートや画像など）もバンドルできる。

先輩から頂いたsampleファイルは以下のような構造↓

sample
┗config
　 ┗webpack.config.js //既に設定が記載されている
┗dev
┗src
  ┗html
  ┗js
  ┗scss
┗package.json //既に設定が記載されている

既に設定を記載頂いている!! が動かし方が解らないので調査

1-2. インストール

webpack、の前にyarnインストールが必要
Macにhomebrewとxcodeをいれ、yarnをインストール
※yarn：JSのパッケージマネージャ

$ brew update
$ brew install yarn

yarnがインストールされたらyarn installコマンドを叩き、package.jsonにリスト化されているもの全てをインストール（webpack含む）

$ yarn install

無事node_modules内にインストールされました。

1-3. 動かす

yarn run + XXXコマンドで実行
※XXXの部分はpackage json内「yarn script」で設定が可能
今回は「dev」にwatchとdevelopmentモードが割り当てられていたため下記コマンド

$yarn run dev

ブラウザでhttp://localhost:3000/を開くと無事動きました。上書きした瞬間に反映もされる。webpack凄い!!

2. CSS

2-1. SCSSで書く

SCSSはCSSのメタ言語であるSASSの、記法のひとつ。
関数など様々な記述ができるようになる。また、ブラウザで動かすにはCSSへのコンパイルが必要。

・ネスト化

div {
  margin: auto;
  p {
     font-size: 16px;
    span {
      color: red;
    }
  }
}

・変数、演算、関数の使用

@function calc( $width ) {
   @return : $width / 3;
}
.box{
    width: 300px;
  .box-item{
     width: calc(300px); //100px 
  }
}

・@mixinの活用
コードの再利用に便利な機能。@mixinで定義し、@includeで呼び出します。

@mixin box( $color ){
   width: 50px;
   height: 50px;
   background: $color;
}
box-white: {
   @include: box(#fff);
}
box-black: {
   @include: box(#000);
}

その他、@import（外部SCSS取り込み）や@extend（スタイルの継承）など多数あり、
全て使い切れてはおりませんがレスポンシブが作りやすいです。SCSS凄い!!

2-2. flexbox以外で書く

今までレイアウトはflexboxを愛用していました。flexbox以外ではできない。。
という事で色々なプロパティを使いこなせるよう調査しました。

・横並び
flexboxだと

ul{
   display: flex;
  li{
  }
}

floatで

ul{
   overflow: hidden; //高さが保たれるらしい
  li{
     float: left;
  }
}

inline-blockで

ul{
  li{
     display: inline-block;
  }
}

様々なプロパティを使いこなせると表現の幅が広がりそうです!!　

3. JavaScript（JQuery）

3-1. class構文で書く

functionしか書いた事がありません。classとは？というところから。
classは色々な関数をひとまとめにする事ができ、また使いまわすことができる機能の。大きくはコンストラクタとメソッドに分かれる。
コンストラクタ：主に初期設定。クラスに1つか定義できない。
メソッド：関数。function内に書いていたものを書く。


class Main{
  //コンストラクタ
  constructor( name, age ){
       this.name = name;
       this.age = age;
  }
  //メソッド
  dog(){
      console.log( this.name + ' is ' + this.age + ' years-old.' );
  }
}

const main = new Main('Pochi', 5 );
main.dog();

3-2. class構文でthisを学ぶ

thisに関して曖昧でしたが、class構文でイベントハンドラがうまく作動しなかったので改めて少し調べました。


class Main{
    //コンストラクタ
    constructor(){
       this.value = 30;
    }
    //メソッド
    init(){
       $('#button').on('click', this.valueFunc);
    }
    valueFunc(){
       console.log(this.value);  //出力されない
    }
}

const main = new Main();
$(window).load(function() {
  main.init();
});

上記だとconsole.logでthis.valueが出力されません
これはイベント実行時thisの参照元がMainクラスではなくh1のDOMオブジェクトになってしまうため。コールバック関数にbind(this)を使う。
※bindは関数内で参照するthisを指定オブジェクトで束縛できる関数


$('#button').on('click', this.valueFunc).bind(this);　//出力：10

3-2. DOM操作の回数を減らす

DOMの操作を行う処理はなるべく少なく実行できるようするとパフォーマンスの向上に繋がるとの事。
・jQueryオブジェクトを変数にキャッシュする


var $hoge = $('.hoge');
for(let i=0; i<5; i++){
  $hoge.eq(i).css({left : i * 50});
}

１ヶ月の振り返り

何か理解できて嬉しくなったり、先輩が話す内容が理解できなくて私やばい、、と絶望したり
毎日プログラミングの新しい発見ばかりです。
時間を割いて教えて下さる周りの方々に感謝し、いち早く戦力になれるよう精進していきます。
あとはできない部分をどんどんさらけだす事が大切だなと実感しました。自分からいく事が大事!!

3ヵ月目までの目標

・業務で実案件に入る
・定期的にアウトプットする
┗記事投稿する
┗LTに挑戦する
記事を書く事で再度調べたり沢山の学びがありました。
LTも事前準備やLT後のフィードバックなど大きな学びがあると思います。LT挑戦したい!!

参照：

SCSS
SCSSについて勉強した
 これからはcssはSassで書こう。

JavaScript
JavaScript・jQueryの改修・高速化のためのメモ
 クラス