未経験からエンジニアに転職して一ヶ月で学んだ事
未経験からエンジニアに転職して一ヶ月で学んだ事:
エンジニアに転職し1ヶ月が経ちました。
自身の整理も兼ねて学んだ事を記載します。Qiita初投稿
HTML / CSS / JavaScript 初心者向けチュートリアルがなんとなくできる程度
入社してまもなく、先輩から
「まずはこのWEBサイトのコピーを作ってみよう!CSSはSCSSをコンパイルして、JSはクラス構文で書いてみてね」
という課題と共にwebpackの設定が書かれたsampleファイルを頂きました。
webpack?SCSS?クラス??
① webpack
┗導入と動かし方
② CSS
┗SCSSで書く
┗flexbox以外の書き方を知る
③ JavaScript(JQuery)
┗クラス構文で書く
┗DOMの取得回数を減らす
ううぇぶぱっく?
複数のモジュールを1つにまとめたファイルを出力するモジュールハンドラ。
JS以外のリソース(スタイルシートや画像など)もバンドルできる。
先輩から頂いたsampleファイルは以下のような構造↓
既に設定を記載頂いている!! が動かし方が解らないので調査
webpack、の前にyarnインストールが必要
Macにhomebrewとxcodeをいれ、yarnをインストール
※yarn:JSのパッケージマネージャ
yarnがインストールされたらyarn installコマンドを叩き、package.jsonにリスト化されているもの全てをインストール(webpack含む)
無事node_modules内にインストールされました。
yarn run + XXXコマンドで実行
※XXXの部分はpackage json内「yarn script」で設定が可能
今回は「dev」にwatchとdevelopmentモードが割り当てられていたため下記コマンド
ブラウザでhttp://localhost:3000/を開くと無事動きました。上書きした瞬間に反映もされる。webpack凄い!!
SCSSはCSSのメタ言語であるSASSの、記法のひとつ。
関数など様々な記述ができるようになる。また、ブラウザで動かすにはCSSへのコンパイルが必要。
・ネスト化
・変数、演算、関数の使用
・@mixinの活用
コードの再利用に便利な機能。@mixinで定義し、@includeで呼び出します。
その他、@import(外部SCSS取り込み)や@extend(スタイルの継承)など多数あり、
全て使い切れてはおりませんがレスポンシブが作りやすいです。SCSS凄い!!
今までレイアウトはflexboxを愛用していました。flexbox以外ではできない。。
という事で色々なプロパティを使いこなせるよう調査しました。
・横並び
flexboxだと
floatで
inline-blockで
様々なプロパティを使いこなせると表現の幅が広がりそうです!!
functionしか書いた事がありません。classとは?というところから。
classは色々な関数をひとまとめにする事ができ、また使いまわすことができる機能の。大きくはコンストラクタとメソッドに分かれる。
コンストラクタ:主に初期設定。クラスに1つか定義できない。
メソッド:関数。function内に書いていたものを書く。
thisに関して曖昧でしたが、class構文でイベントハンドラがうまく作動しなかったので改めて少し調べました。
上記だとconsole.logでthis.valueが出力されません
これはイベント実行時thisの参照元がMainクラスではなくh1のDOMオブジェクトになってしまうため。コールバック関数にbind(this)を使う。
※bindは関数内で参照するthisを指定オブジェクトで束縛できる関数
DOMの操作を行う処理はなるべく少なく実行できるようするとパフォーマンスの向上に繋がるとの事。
・jQueryオブジェクトを変数にキャッシュする
何か理解できて嬉しくなったり、先輩が話す内容が理解できなくて私やばい、、と絶望したり
毎日プログラミングの新しい発見ばかりです。
時間を割いて教えて下さる周りの方々に感謝し、いち早く戦力になれるよう精進していきます。
あとはできない部分をどんどんさらけだす事が大切だなと実感しました。自分からいく事が大事!!
・業務で実案件に入る
・定期的にアウトプットする
┗記事投稿する
┗LTに挑戦する
記事を書く事で再度調べたり沢山の学びがありました。
LTも事前準備やLT後のフィードバックなど大きな学びがあると思います。LT挑戦したい!!
webpack
最新版で学ぶwebpack 4入門 – JavaScriptのモジュールバンドラ
webpack 4 入門
SCSS
SCSSについて勉強した
これからはcssはSassで書こう。
JavaScript
JavaScript・jQueryの改修・高速化のためのメモ
クラス
エンジニアに転職し1ヶ月が経ちました。
自身の整理も兼ねて学んだ事を記載します。Qiita初投稿
入社前のスペック
HTML / CSS / JavaScript 初心者向けチュートリアルがなんとなくできる程度入社してまもなく、先輩から
「まずはこのWEBサイトのコピーを作ってみよう!CSSはSCSSをコンパイルして、JSはクラス構文で書いてみてね」
という課題と共にwebpackの設定が書かれたsampleファイルを頂きました。
webpack?SCSS?クラス??
1ヶ月で学んだ亊
① webpack┗導入と動かし方
② CSS
┗SCSSで書く
┗flexbox以外の書き方を知る
③ JavaScript(JQuery)
┗クラス構文で書く
┗DOMの取得回数を減らす
1. webpack
ううぇぶぱっく?
1-1. webpackとは
複数のモジュールを1つにまとめたファイルを出力するモジュールハンドラ。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 install
1-3. 動かす
yarn run + XXXコマンドで実行※XXXの部分はpackage json内「yarn script」で設定が可能
今回は「dev」にwatchとdevelopmentモードが割り当てられていたため下記コマンド
$yarn run dev
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で定義し、@includeで呼び出します。
@mixin box( $color ){ width: 50px; height: 50px; background: $color; } box-white: { @include: box(#fff); } box-black: { @include: box(#000); }
全て使い切れてはおりませんがレスポンシブが作りやすいです。SCSS凄い!!
2-2. flexbox以外で書く
今までレイアウトはflexboxを愛用していました。flexbox以外ではできない。。という事で色々なプロパティを使いこなせるよう調査しました。
・横並び
flexboxだと
ul{ display: flex; li{ } }
ul{ overflow: hidden; //高さが保たれるらしい li{ float: left; } }
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(); });
これはイベント実行時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}); }
1ヶ月の振り返り
何か理解できて嬉しくなったり、先輩が話す内容が理解できなくて私やばい、、と絶望したり毎日プログラミングの新しい発見ばかりです。
時間を割いて教えて下さる周りの方々に感謝し、いち早く戦力になれるよう精進していきます。
あとはできない部分をどんどんさらけだす事が大切だなと実感しました。自分からいく事が大事!!
3ヵ月目までの目標
・業務で実案件に入る・定期的にアウトプットする
┗記事投稿する
┗LTに挑戦する
記事を書く事で再度調べたり沢山の学びがありました。
LTも事前準備やLT後のフィードバックなど大きな学びがあると思います。LT挑戦したい!!
参照:
webpack最新版で学ぶwebpack 4入門 – JavaScriptのモジュールバンドラ
webpack 4 入門
SCSS
SCSSについて勉強した
これからはcssはSassで書こう。
JavaScript
JavaScript・jQueryの改修・高速化のためのメモ
クラス
コメント
コメントを投稿