【フロントエンド編①】業務未経験の早大生がエンジニアとしてインターンで採用されてから約１ヶ月半で学んだことの総まとめ

こんにちは、現役理系早大生のハシモです。いやはや、永遠のように感じられた夏休みもいよいよ終盤戦に差し掛かってきました。

８月の頭から始めたエンジニアのインターンもなんとか継続できて、毎日力不足を感じることの繰り返しですが、それと同時に自分のスキルがぐんぐん伸びている手応えも感じ取ることができています。

html&cssはプログラミングの基礎ということで、業務ではほとんどずっとフロントエンドを触っていました。フロントエンドに関しては、１ヶ月前とは別人じゃないかってぐらい成長しました。

どんどん自分の知識が増えていく喜びは、かなり大きいものがありますね。

そういうわけで、僕の今までの経験と先輩たちから吸収した知識の中で、フロントエンド初心者にぜひ知ってほしいなって思ったことがたくさんあるので、その中でも本当に重要なことを凝縮して伝えます！

あまりにも長くなったので、いくつかに分割しました。ぜひ読んでみてください！

【フロントエンド編②】業務未経験の早大生がインターンで採用されてから約１ヶ月半で学んだことの総まとめ

【エンジニアスキル編】業務未経験の早大生がエンジニアとしてインターンで採用されてから約１ヶ月半で学んだことの総まとめ

BEM

皆さんは、htmlのクラス名を決めるときにはなにか法則がありますか？例えば、containerの下のクラスには、contentが来て、その次には、elementというクラスが来る、的な。

まあ初心者の皆さんにはそういう事を考えている余裕なんてないんじゃないでしょうか。とりあえず行き当たりばったりで、クラス名が重複しないように、思いついたまんま上からどんどんクラス名を決めていく。少なくとも僕はそうでした！！！笑

でもそれだと、いつか破綻するときが来るんですよね。小規模で単発のサイトだったらいいんですけど、規模が大きくなったり、サイトの保守を任されたりすると、コードが肥大してくる。気づいたら同じクラス名がついていたりして、大変なことになるわけです。

そういう問題を解決するために、cssの設計思想というのができました！BEMはそのうちのひとつです。

ほかにも、OOCSS、 SMACSSっていう、まあ意味わからん大文字アルファベットの設計方法があります。

BEMについて、最初はその奇妙なクラス名に驚いていましたが、今では、BEMくっそ便利すぎワロタwwwwww

って感じで、BEMがなかったら、どうやってフロントエンドがかけるんだろうかと。

BEMというのは、Block, Element, Modifierのことで、ブロック、要素、修飾、の3つのことです。

簡単に説明すると、下のようなクラス設計をすること。

<div class=”blockA”>

  <p class=”blockA__element></p>

  <p class=”blockA__element–bold”></p>

</div>

みたいな感じです。block__element–modifierという形式で、クラス名を決めていくということです。最初は、名前が長くてかったるいなぁと感じるんですが、なれていくうちに、クラスの命名がめちゃめちゃ楽だし、もうどれがどのクラスだか迷わない！！とかんげきできます。

詳しくはググってもらえばいいんだけど、初心者はまずBEMという存在自体知らないんですよね。ってか、フロントエンドで知っていることと言ったら、HTMLとCSS、SCSSぐらいなくて、拡張言語のことなんて聞いたこともないはず。現に俺は、インターンになるまで、haml, slimなんて知らなかった。

命名規則はめちゃくちゃ重要

個人と会社での最も違うところと言ってもいいでしょう。それは、サイト運営の規模です！個人の場合は、作ると言ってもせいぜい両手の指で数えるぐらいしかウェブサイトは持ってないでしょう。

だがしかし、企業は違います。複数のプロジェクトを同時に運営、進行するし、各プロジェクトの規模もかなり大きい。ページ数で言うと、10ページ、20ページはざらにある。

で、それが一つのrailsアプリケーションの中で管理されるわけです。ここで非常に便利でも有り、また同時に悩みの種となるのが、Railsの仕様で（というかジェムの仕様？）、すべてのcssファイルが同時に読み込まれることです。

つまり、クラス名がかぶってしまったら、どちらかのスタイルが採用されるか、優先度のバトルになるわけです。これが、cssを記述しているのに、上手く効いてくれないという原因になります。

だからこそ！！

BEMを使ってクラス設計をして、入れ子構造にすることで、各CSSファイルの独立性を保ちましょうということなんですね！！

Middlemanはおすすめ

プログラミングをする上で、便利なツールというのが死ぬほどたくさんあります。例えばここで紹介するのが、Middleman(ミドルマン）というものです。

Middleman

rails開発者御用達の、サイトビルドツール（というかジェムかな？）。これを使うと、html, cssの拡張言語である、haml, slim, scss, sassなんかでフロントエンドを書くことができて、誇張なしで、効率が倍増します。いや、マジで。

JavaScriptにも、CoffeeScriptっていう拡張言語があって、これを使うとめちゃめちゃ楽、らしいです。まだ使ったことないからわからないけど。

あとは、作ったサイトは、Firebaseとか、Herokuとか、Githubとかでデプロイできるんで、サーバー管理などの煩わしい作業も０です！原理を知ることは大事だけど、らくするところはしないとね。人生があっという間に終わっちゃいますからね笑。

命名規則はめちゃくちゃ重要

個人と会社での最も違うところと言ってもいいでしょう。それは、サイト運営の規模です！個人の場合は、作ると言ってもせいぜい両手の指で数えるぐらいしかウェブサイトは持ってないでしょう。

だがしかし、企業は違います。複数のプロジェクトを同時に運営、進行するし、各プロジェクトの規模もかなり大きい。ページ数で言うと、10ページ、20ページはざらにある。

で、それが一つのrailsアプリケーションの中で管理されるわけです。ここで非常に便利でも有り、また同時に悩みの種となるのが、Railsの仕様で（というかジェムの仕様？）、すべてのcssファイルが同時に読み込まれることです。

つまり、クラス名がかぶってしまったら、どちらかのスタイルが採用されるか、優先度のバトルになるわけです。これが、cssを記述しているのに、上手く効いてくれないという原因になるわけです。

だからこそ！！

BEMを使ってクラス設計をして、入れ子構造にすることで、各CSSファイルの独立性を保ちましょうということなんですね！！

IEはクソ

IEはクソ、この界隈にいる人なら、常識として知っていること。IEはクソ。この言葉を僕がはじめに見たのは、

｛情弱からぬけだし情報強者になるために必要なこと｝、って感じのタイトルの記事を読んでいたときです。IE,Safariはポンコツブラウザだから、とっととChromeとかFirefoxを入れろと。

それ以来、僕はSafariを開かなくなりました。結論としては、Chrome便利すぎて、もうほかのブラウザは使えないわ状態。

なんか、気づいたら3000文字超えていて、まだまだ書きたいことが死ぬほどたくさんあるので、この記事をフロントエンド編①として、一旦終わることにしました！

続きはこちら

【フロントエンド編②】業務未経験の早大生がインターンで採用されてから約１ヶ月半で学んだことの総まとめ

【エンジニアスキル編】業務未経験の早大生がエンジニアとしてインターンで採用されてから約１ヶ月半で学んだことの総まとめ