LoginSignup
154
92

More than 5 years have passed since last update.

@baraninngilyou

新卒1年目の私が配属1ヶ月で学んだこと

Last updated at Posted at 2018-07-20

新記事投稿しました！！！

フロントエンドエンジニアとして新卒入社し、6月に今の部署に配属されて1ヶ月が経ちました。せっかくなので、1ヶ月で学んだことをまとめておきます。:point_up:

自己紹介

いっけなーい:baby:！遅刻遅刻！
私、みっつー。23歳！どこにでもいる至って普通の女の子！:high_heel:
HTML・CSSは書けると思ってたけど、いざ入社したらわかんないこと多すぎてもう大変:sob:！
一体私、これからどうなっちゃうの〜:sob::sob:！？！？！？

（やってみたかった。笑）

フロントエンドエンジニアとして入社しました。新卒1年目。
大学時代はWeb制作会社でインターンをしており、コーディングのタイムアタックを中心とした業務をしてました。（締め切りが2時間後とかよくよくあった）
今よりも綺麗で読みやすく、正しいコードを書けるように日々奮闘中。

入社してから

最初の2ヶ月間は人事研修で、エンジニアだけでなく他の職種もごちゃまぜになってマナー研修やコーディング研修、グループワークとかをやりました。
ロジカルシンキング研修では、やってすぐの時は「これは使えるぞ」と思ったけど次の週には忘れてました…（無念）
もう一回、イチから勉強したい…！！！

どっきどきの部署配属！

配属されてからは、「過去の実案件で組まれたPSDのデザインデータを頂き実際にコーディングする」という課題を中心にコーディングのスキルチェック・スキル向上を目指してただひたすらにマークアップしました。

新しく学んだこと

勉強したことをまとめて書いておきます。（読みづらくてごめんなさい）

MAMPでローカル環境を作る

MAMPで新しいプロジェクトを作成する場合は、package.jsonに入っているものをインストールする。対象のファイルに移動してからnpm installでインストールが行われる。（package.jsonは既に用意されているものを使用）

C:¥xampp¥conf¥apache¥extra¥httpd-vhosts.conf
のファイルの中に以下の記述をしていく。


Listen ****
<VirtualHost *:****>
  ServerName localhost
  DocumentRoot "/Applications/MAMP/htdocs/****/dist"
  <Directory "/Applications/MAMP/htdocs/****/dist">
  Options Indexes MultiViews ExecCGI Includes FollowSymLinks
  AllowOverride All
  Order allow,deny
  Allow from all
  AddType text/html .shtml .html .htm
  AddType application/x-httpd-php .php .html .htm
  AddOutputFilter INCLUDES .shtml .html .htm
  </Directory>
</VirtualHost>

****で書かれている部分は、任意のものに変えること。（重複はNG）
ディレクトリーはエディタ（Atomを使用）にファイルをドラッグすることで入力することもできる。

MAMPサーバを起動し、ブラウザでlocalhost:****と入力（上記で設定した数値を入力）することでローカル環境でwebサイトが確認できる。また、設定時にMAMPサーバをすでに起動している場合は再起動することで設定が反映される。

複数プロジェクトを管理する際には、htdocsのフォルダ内に作業フォルダやdistを置くフォルダを作り、上記vhostの設定をすれば良い。

Pugでhtmlをかく

  • インデントに苦戦するの巻

今までは生HTMLを一からせっせと書いていたため、Pugと触れ合うのは初めての経験。
見よう見まねでPugの記法を見ながらコーディングしていくと、比較的スムーズにHTMLが完成。

自分やればできるのでは！？と思った矢先のコードレビューにて「インデントの数が揃っていなかったり、文字の後ろに余計なインデントが入っている部分がある」との指摘。

よく見てみると、余計なインデントが入っているせいでブラウザの表示も微妙に空白が入っている…エディタの設定を変えずにそのままやってしまったことが敗因でした。

Pugのインデントは1つということを学びました…！
エディタのインデント設定やPugのPackageを入れ、環境を整えて無事インデント調整に成功。
無事、問題は解決したのでした。

Sassでcssをかく

Sassは入れ子が使えるということで、私は親要素に全ての子要素を含めてSassを書いていました。
そのため、いざその点をモジュールとして抜き出したくなった時に親要素ごと持ってこないと同じスタイルが適用されない問題がでてきた。

入れ子ができるからといって安易に入れ子にするべきではないことを学びました。

パーツを切り出した時に、コピペするだけで同じスタイルを表現できるようCSSの書き方にも工夫が必要だと感じた。

CSSとHTMLの書き方について学ぶ

  • flexboxの使い方（float禁止令）

要素を横並びに2つ並べたい時に、今までは

index.html
<ul>
 <li>item1</li>
 <li>item1</li>
</ul>
style.css
ul {
  overflow: hidden;
  width: 100%;
}

li {
  float:left;
  width: 50%;
}

と記述していました。floatへの絶対的安心感！

ところが、現場ではfloatではなくflexboxを使うことが多い
ということでfloat禁止令が出され、flexboxの使い方を学ぶことになりました:imp:

  • flexboxを使おう

flexboxは親要素にdisplay: flex;をかけると、親要素はフレックスコンテナー、子要素がフレックスアイテムになるというもの。
実際に上記のHTMLをflexboxを使って記述すると以下のようになる。

index.html
<ul>
 <li>item1</li>
 <li>item1</li>
</ul>
style.css
ul{
  display:flex;
  justify-content: center;
  align-items: center;
}

li{
  width:50%;
}

このように記述をすると、たとえフレックスコンテナーの中の要素（この場合はli）の高さが異なっていたとしても、高さを揃えながら横に並べることができる。（とっても便利…！！！）

また、justify-contentはコンテナーボックスを基準として、コンテナーアイテムを横向きにどう並べるかを指定できる。そして、align-itemsはコンテナーボックスを基準として、コンテナーアイテムを縦向きにどう並べるかを指定できる。ここでflex-direction: column; (要素を横ではなく縦に並べる)を記述している場合は、縦と横が入れ替わるためjustify-contentは縦向きの位置、align-itemsは横向きの位置と指定するものが反対になるため注意する。

  • 定義リスト使いすぎ問題

タグの意味をあまり考えずに、ただデザイン通りコーディングをしていた私は、無意識のうちにdlタグを使う癖がついてしまっていることに気づく。

<dl>
  <dt>見出し見出し見出し</dt>
  <dd>テキストテキストテキスト<dd>
</dl>

定義リストの使い方も、<dt>を続けて2回書いたり、<dt>に画像入れちゃったりしてちょっと間違ってた。

便利な定義リストですが、見出しになる部分（<dt>に当たる部分）も特になく、「それリストでいいのでは？」ってものまで定義リストで書いてしまっていた。ここで、タグの意味への理解が足りないと気づきました。

　補足(7/23)

momdoさんよりコメントをいただきました。

古いHTML仕様では定義リストと呼ばれていましたが、MDNによれば、HTML の

要素は、説明リストを表します。とされます。また、 
<dt>見出し見出し見出し</dt>

とありますが、<dt>要素は見出しを表しません。
さらに、先に挙げたMDNでも説明されているように、<dt>が2回以上続くことはあり得ますし、<dt>に画像を置くこともおかしいとは言い切れないでしょう。

とのことで、見出しではなく説明したい用語を定義するために使うようです。

jQueryの使い方を覚える

  • JavaScriptとjQueryって違うの？jQueryってよく聞くけどなんなの？

JavaScriptを少ない記述で書けるのがjQuery
JavaScriptのライブラリ
＝ 使用頻度の高い機能や効果などのプログラムを再利用できる形にまとめたもの

jQueryでできることはJavaScriptだけでも実現できる

Gitのコマンドを黒い画面で打てるようになる

  • Gitのコマンド一覧

git add —all
でステージする

git commit -m ‘commit message’
でコミットする

git push origin ブランチ名
でプッシュする

git clone URL
でクローンする（初回のみ）

git pull
でプルする

ターミナルのコマンドもちょっと覚えた

cd ディレクトリパス
で該当ディレクトリへ移動。cdのみだとカレントディレクトリに移動する。

ls
で今いるディレクトリの下のフォルダ一覧を表示

tree
で今いるディレクトリ下のtree階層を表示してくれる

私のこれから

  • HTMLの仕様をがっつり勉強する、正しいマークアップをしっかり勉強する

  • コードチェックをしっかりやる

  • View port のひとつひとつが何なのか知る

  • モジュールとレイアウトがそれぞれ何なのかについて勉強する

  • 人のコードを読み解けるようになる、そのプロパティをなぜ使っているのかを聞く

    • 意味のないコードは書かない

  • 構造化マークアップについて学ぶ（HTMLにデータを埋め込む、JSON）

  • この機会にMarkdown記法を覚えたい

おわりです。ありがとうございました。

新記事投稿しました！！！

154
92
2

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
154
92