新卒エンジニアの布石

##イントロダクション
初めまして、本配属されて約一ヶ月目、ホラー映画好きの新卒フロントエンドエンジニアです。:whale:

同じく新卒でフロントエンドエンジニアをやっている方にも向けて、今回記事を投稿しました。
唐突ですが、まずは自分がこの一ヶ月で**どんなことを学んだかの紹介**をしたいと思います。

そして同じ新卒のエンジニアという境遇の方に向けて、まず**何から勉強していけば**いいか
どの程度の**レベル感**が求められるのか、イメージし辛いと感じている方がいるかもしれません。

そういった方のために、参考になりそうなリンクも今回紹介したいと思います。

ぜひ、お役に立ててください。よろしくお願いします。:sparkles:

##この記事の目的
* 同じ新卒のエンジニアの方に向けて情報を発信する。(どんなことをやっているのか掴んでもらう)
* 今までの学習の振り返りをする。(学んだことを自身に定着させる)

##まずはとにかく、勉強は必須
これは先輩方に質問した結果、よく返ってきた答えとなりますが
最初の一年間は特に伸び代を増やすために重要な期間となるようです。
エンジニアという職業になった以上、必然的なことではありますが
**自習は必須** という結論です。
後述しますが、**オススメの本**に関しても紹介します。

##ツール
####**Visual Studio Code**
マイクロソフトが提供する無料のエディタです。
以前まではAtomを使用していましたが、安定性やサポートの面を考えて、今回乗り換えました。

* [ダウンロード](https://code.visualstudio.com/)

**ちょっと面白い拡張機能**

* [Powermode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)
* 
コードを打つときにエフェクトが出るようになる拡張機能です。
ちょっとしたストレス解消や、ユーモアを求める方はぜひ導入をオススメいたします。



##新しい知識
####**ターミナルの操作**
ターミナルとはMac OS上で動作するCUIです。
Windowsで言う所の、コマンドプロンプトのようなものです。

`cd [パス]`
半角スペースを開けてから、パスの部分に指定したディレクトリへ移動します。
またドットを二つ入れて`cd ..`と入力すると一個上の階層に移動し、`cd ~/`と入力することで
ホームディレクトリに移動します。

`ls`
カレントディレクトリに存在するファイルやフォルダを一覧で表示させます。
また`ls -la`と半角スペースを入れて入力すると、隠しファイルも含めて表示できるため
不要ファイル等が混じっているか否かを判断するのに重宝します。

`open .`
半角スペースを開けてドットを入力すると、カレントディレクトリをフォルダで表示できます。
また`open ~/`でホームディレクトリをフォルダで表示できます。

`mkdir [ディレクトリ名]`
カレントディレクトリに指定した名前のフォルダを作ることができます。

`touch [ファイル名]`
カレントディレクトリに指定した名前のファイルを作ることができます。
`index.html`や`style.css`などを手っ取り早く作るときに、非常に便利です。

**便利なやつ**
`find . -name '.DS_Store' -type f -ls -delete`
Macユーザーにオススメのコマンドですが、実行するとカレントディレクトリ以下に存在する`.DS_Store`を
見つけ出して削除してくれます。`.DS_Store`の部分を変更すれば、わざわざ階層を辿って行かずとも
指定したファイルを削除できるため、手間もかかりません。

####**ローカルファイルをGitHubに上げる**
自分で作ったコードを共有したり、他の人に閲覧してもらうためにGitHubを使わない手はありません。
ここではGitHubにローカルファイルをアップロードする手順について、明記しています。

まずGitHubのアカウントを作っておいてください。その後新規リポジトリを作る必要があるため
GitHubのトップページに飛び、`New repository`というボタンをクリックします。
https://github.com/

`Repository name`のところに、好きなリポジトリの名前を入力してください。
**Public**と**Private**の2種類を選択できるチェックマークがあるかと思いますが、
**Private**のリポジトリは有料のため、今回は**Public**を選択します。

`Create repository`をクリックすれば、リポジトリの作成は完了です。URLをコピーしておいてください。

次にターミナルで、GitHubに上げたいローカルファイルが存在するディレクトリまで移動します。

```shell-session

// アップロードしたいファイルがあるディレクトリまで移動したら実行する。
$ git init

// ディレクトリの中にあるファイルをコミットする。
$ git add .
$ git commit -m "ここにコメントを書く"

// 先ほどのリポジトリのURLをコピペして、リモートブランチとして設定する。
$ git remote add origin [ここにURL]

// ファイルをGitHubにアップロードする。
$ git push -u origin master
```

これでGitHubへのアップロードが完了します。

####**Gulpの操作**
**Node.js**をベースにした自動ツールである**Gulp**を使うことによって、
`Pug`, `Sass`, を、`htmlファイル`, `cssファイル`にコンパイルすることができるようになります。
また`gulp-imagemin`を実行することでjpgファイルの圧縮や、`BrowserSync`の実行で
Webページを自動でリロードできるようになります。

```javascript
// ここでインストールしたパッケージをrequireする。
const gulp = require('gulp');
const sass = require('gulp-sass');
const imagemin = require('gulp-imagemin');
const pug = require('gulp-pug');
const browserSync = require('browser-sync');
```

使い方としては、主に利用したいパッケージを`npm install`コマンドにてインストールします。
ここでrequireをし忘れてエラーを吐いてしまうことがちょくちょくあったため、確認するべきポイントです。

**Sassのコンパイル**

```javascript
gulp.task('sass', function() {
  return gulp
     // 変換したいscssファイルが存在するディレクトリパス
    .src('./*.scss')
    .pipe(sass({
//出力した際のコードのスタイルを指定している。compressedと指定すれば、コードが圧縮され軽量化できる。
        outputStyle: 'expanded'
      })
    )
     // 出力先のパス
    .pipe(gulp.dest('./css'));
});
```

**Pugのコンパイル**

```javascript
gulp.task('pug', function() {
  return gulp
     // 変換したいpugファイルが存在するディレクトリパス
    .src('./*.pug')
    .pipe(
      pug({
        //prettyをtrueにすることで、htmlに変換した際インデントを維持できる。
        pretty: true;
      })
    )
     // 出力先のパス
    .pipe(gulp.dest('./'));
});
```

**画像圧縮**

```javascript
gulp.task('imagemin', function() {
  gulp
     // 圧縮したい画像が存在するディレクトリパス
    .src('./*')
    .pipe(imagemin())
     // 出力先のパス
    .pipe(gulp.dest('./'));
});
```

**ブラウザの自動リロード**

```javascript
gulp.task('server', function() {
  browserSync.init({
    server: './'
  });

  // scssファイル, pugファイル, htmlファイル, cssファイルへの変更を監視。
  gulp.watch('./*.scss', ['sass']);
  gulp.watch('./*.pug', ['pug']);
  gulp.watch('./*.html', ['serverReload']);
  gulp.watch('./*.css', ['serverReload']);
});

gulp.task('serverReload', function() {
   // ブラウザをリロードする。
  browserSync.reload();
});
```

####**Pugの記法**
Pugは閉じタグ不要で、インデントしたものが子要素となります。

```html

// HTML記法
<p>あいうえお</p>
```

Pugでは以下のように書ける。

```pug
//Pug記法 (HTMLにコンパイルすると、自動で閉じタグと入れ子が付与されます)
p あいうえお
```

またPugで改行したい場合は、「バーティカルバー」を用いてインデントすることで
改行することができます。

```pug
p あいうえお
 br
 | かきくけこ
```

こう書くことで、

```html
// HTML記法
<p>あいうえお<br>かきくけこ</p>
```

と同等の出力結果となります。

####**Sassの記法**
SassはCSSの書き方をそのままに、より直接的に記述することができます。

```scss

// CSS記法
p {
   color : #f00 ;
}
p span {
   font-weight : bold ;
}
```

これをsassで書く場合は

```scss
// Sass記法
p {
   color : #f00 ;
   
   span {
      font-weight : bold ;
   }
}
```

このように記述することができます。

そしてsassの機能として、計算式を導入できるメリットがあります。

```scss
width : 10px * 100 ; //CSS出力結果　→ width : 1000px ;
height : 10px + 10 ; //CSS出力結果　→ height : 20px ;
margin-top : 40px - 10 ; //CSS出力結果　→ margin-top : 30px ;
```

####**JavaScript**
オブジェクト指向のプログラミング言語であるJavaScriptでは、主に変数を定義し
DOMを操作することができます。本来静的なHTMLやCSSをリアルタイムで変更することができるため
カルーセル等、動きのあるWebサイトを作るのにも非常に有用なものです。

`var`
`let`
`const`
変数を宣言する際には、この三つを使用します。しかし`var`を使うことは現在推奨されないようです。
`var`で同じ変数名で変数を定義した際、代入されている値を上書きしてしまう可能性があるためです。
一方で`let`は再定義不可能なキーワードで、再定義しようとすると**(SyntaxError)**を返します。
`const`は再定義も再代入も不可能なキーワードで、これら二つを禁止することにより予期しない値の書き換えや
バグの発生を防止することも期待できます。

`document.getElementById('ID名')`
**getElementByIdメソッド**は、( )内に指定されたid属性をもつ要素を取得します。
id名は文字列で指定する必要性があるため、シングルクォートで囲みます。

`console.log()`
**console.log()メソッド**は、( )内に指定された引数をデバッガーに表示することができるメソッドです。
変数の値などを表示させることによって、想定しない値が入っているかどうかチェックすることもできるため
エラー発生時の原因特定にも役立ちます。

```javascript
const value = 1 ;

console.log(value) ; //出力結果　→　1
```

`appendChild()`
**appendChild()メソッド**は、引数に追加したい要素を指定することによって
親要素の末尾に要素を追加することができます。

```javascript
let test = document.createElement("li");

let test2 = document.getElementById("test-div");

test2.appendChild(test);
```

こちらを出力すると 

```html
<div id="test-div">
 <li></li>  //親要素の末尾に追加される。
</div>
```

このように使用できます。

`innerHTML`
**innerHTMLメソッド**は、HTML内の要素を変更することができます。

例えばこのようなHTMLコードがあった場合、

```html
<p id="text">おはようございます。</p>
```

innerHTMLを使うことで↓

```javascript
document.getElementById("text").innerHTML = "お疲れ様でした";
```

出力結果は「お疲れ様でした」となります。
最初に記述していた「おはようございます」を「お疲れ様でした」に書き換えたということです。
上記のように直接書いた要素をそのままhtml上に反映する処理ができるため、動的なWebサイトを作るのに役立ちます。


##どこまで勉強すれば良いか
エンジニア職として、勉強のゴールは有限ではないため、なかなかゴール設定が難しく感じることがあるかもしれません。
そこで他の方の記事で参考になった箇所を引用いたします。

>##目の前の仕事が最優先
まず、仕事がうまいこと回せないと、色々と辛いですし、周りにも迷惑がかかります。
なので、最優先すべきは、仕事に関わる技術の勉強です。
個人的には、ともかく手を動かしつつ、家や通勤時間では技術本を読むと良いと思います。

勿論、環境によって必要とされる勉強量や質に相違はあると思いますが、指標みたいなものを設定して
自分が手をつけるべき範囲を明確化しておくのも一つの方法かもしれません。

**引用元：[新卒の子にどこまで勉強すれば良いですかね？と聞かれた件](https://qiita.com/daijinload/items/0ee132950087da9366df)**

##どんな本を読めばいいか
自分の場合、JavaScriptがゼロベースであったため、入門中の入門レベルの参考書を購入しました。
JavaScriptの基本的な概念の部分から説明されているため、非常に**オススメの一冊**だと思います。
先輩曰く、本への投資は積極的におこなっていくべきだそうです。

* **[確かな力が身につく JavaScript「超」入門](https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4797383585)**


またどんな本を読んでみようか探しているという方向けに、
新卒のエンジニアに向けた本をまとめているサイトなども、参考にすると良いと思います。

* **[新卒ソフトウェアエンジニアのための技術書100冊](https://techlife.cookpad.com/entry/2015/03/31/093000)**

##最後に
**これから学んでいくこと**

* 命名ルールの復習<br> 参考文献 "[CSSのクラス名を決めるときに使うリストをつくりました](https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470)"



* タグの使い方の復習<br>(SEO的に相応しいものになっているか否か)


* JavaScript (**Promise**による非同期処理)
* [webpack](https://webpack.js.org/)<br>参考文献 "[webpack 4 入門](https://qiita.com/soarflat/items/28bf799f7e0335b68186)"


以上です、拙い文章ですが、ここまで読んでいただきありがとうございました。:whale2: