Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ks-ohwada

新卒エンジニアの布石

Last updated at Posted at 2018-08-02

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

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

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

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

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

##この記事の目的

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

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

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

ちょっと面白い拡張機能

コードを打つときにエフェクトが出るようになる拡張機能です。
ちょっとしたストレス解消や、ユーモアを求める方はぜひ導入をオススメいたします。

##新しい知識
####ターミナルの操作
ターミナルとは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に上げたいローカルファイルが存在するディレクトリまで移動します。


// アップロードしたいファイルがあるディレクトリまで移動したら実行する。
$ 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ページを自動でリロードできるようになります。

// ここでインストールしたパッケージを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のコンパイル

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

Pugのコンパイル

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

画像圧縮

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

ブラウザの自動リロード

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記法
<p>あいうえお</p>

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

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

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

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

こう書くことで、

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

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

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


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

これをsassで書く場合は

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

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

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

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

const value = 1 ;

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

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

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

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

test2.appendChild(test);

こちらを出力すると

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

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

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

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

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

innerHTMLを使うことで↓

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

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

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

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

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

引用元：新卒の子にどこまで勉強すれば良いですかね？と聞かれた件

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

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

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

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

16
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?