From Zero to Front-end Hero

今回は、Front-end development についてまとめる。

まずFront-endとはなにか。それは、簡単に言うとユーザーが直接操作する部分のことを示す。

理解しやすいために、2記事に分けまとめる。
この記事は、HTMLやCSSなどのインターフェイスについて(Part1)。
次回の記事は、JavascriptやFrameworksやDesign patternsについて(Part2)。

HTML and CSS basics

front-endはHTMLCSSなしではならない。ほとんどのWebサイトはこれら2つによりできている。

HTMLとは、「ウェブ上の文書を記述するためのマークアップ言語
これを使うことで、文章の中に記述することでさまざまな機能を記述設定することができる。

CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語

これらを勉強するために必要なサイトを紹介する。

Mozilla Developer Network(MDN)により提供されているHTML and CSS tutorialsを読む。これらのサイトは、HTMLとCSSのコンセプトを説明をチャプターごとに説明している。

これらのチュートリアルを終えた後、CodeAcademyより提供されているMake a Websiteコースを行う。これは数時間で終えることが可能である。HTMLとCSSを用いてWebサイトを作るのに良い入門のサイトである。もしもっと学びたいのであれば、CodeAcademyより提供されているBuilding web formsを利用し、サイトの作成とWebのデザインを学ぶことができる。
CSSの練習のために、CSS Dinerを用いる。これはCSSに挑戦するゲームである。

重要なことは、他にもある。それはレイアウトである。 LearnLayoutにより、HTMLとCSSを用いて、どのようにレイアウトを作成するかを学ぶことができる。

CSSTricksのBasics of Google Font APIを用いたGoogle Fontsをどのように使うかを学ぶ。時間があるときに、Donny Truongにより書かれたProfessional Web Typographyを読むべきである。typographyについてすべて学ぶことができる。


Practicing HTML and CSS Basics

HTMLとCSSの基本を身に着けたなら、楽しもう!!!!
このセッションでは、2つのExperiment を行う。

Experiment 1

CodePenを使う。CodePenはファイルを保存せずに、HTMLとCSSを試すことのできるFront-endのplaygroundである。コードを保存するとすぐにアップデートされるLivePreviewがある。

これを使うことで、一石二鳥である。一つ目は、HTMLとCSSを練習できる。二つ目は、基本的な作品を作成することができる。 Dribbbleを使うことでデザインを探すことができる。

Dribbbleにいき、数時間で作成することができる簡単なデザインを探すことができる。始めるにあたって、次の5つがおすすめ:1, 2, 3, 4, and 5 。なぜオススメかというと、携帯用のWebデザインはデスクトップのデザインより、複雑でないからである。

デザインを決めた後、CodePenにコードを作成する。もし上手く行かなければ、 StackOverflowを忘れないように!他にも役に立つことは、 Medium, AirBnB, and Dropbox のようなWebサイトに行くこと、異なるレイアウトやスタイルをどのように使っているかを見るために、inspector toolをつかうことである。それだけでなくpens on CodePenを見ることもよい。いくつかいい物をあげてみる。

様々なデザインを練習し続けることで、改善することが可能である。

いいdesign eyeをもつFront-end開発者はいいデザインを特定し、完全に再現することができる。design eyeをどのように発達させるかについて、今回参考にした記事の作者が書いている。


Experiment 2

最初のExperimentにより、HTMLとCSSを書くことで自信を得ることができただろう。Experiment2では、いくつかのサイトをみて、幾つかの要素をコード化してみよう。

いくつかのサイトは、ソースコードをわからないようにするために、CSSframeworksを使っている、CSSclassnamesをあやふやにしている。そんなわけで、ソースコードを読むことが簡単ないいデザインのするWebサイトを以下に記載する。

  • Dropbox for Business: Try replicating their hero section
  • AirBnB: Try replicating their footer
  • PayPal: Try replicating their navigation bar
  • Invision: Try replicating their signup section at the bottom of the page
  • Stripe: Try replicating their payments section

Experiment2では、すべてのサイトを作成することが目的ではない。

navigation bar やhero sectionのような要素を幾つか選ぶ。

CodePenでこのExperiment2を行うか、それを記憶しておくか。もし後者を選んだ場合、例文としてexample projectをダウンロードするか、scratchからファイルを作成する。 Atom or SublimeのようなEditor を使うのが良い。

ページや要素をクリック、InspectやパネルをクリックするとHTMLが左に、CSSが右に表示される。終えたり、わからなくなったら、HTMLとCSSを比較するためにinspectorを使う。


HTML and CSS Best Practices

これまで、HTMLとCSSの基礎を学んできた。次のステップは、最も良い練習法を学ぶことである。いい方法は、非公式のルールを学ぶことである。

Semantic Markup

最も良い方法の一つは、形式的でなく意味論を書くことである。いいWebSemanticsとは、構造の意味を伝えるために、適切なHTML tagsとCSSclass namesを使うことを意味する。

例えば、h1 tagは大切な見出しのことである。他には、footer tagである。これは、ページの一番下の要素のことである。

更に詳しく知りたいのであれば、A Look Into Proper HTML5 SemanticsWhat Makes For a Semantic Class Nameを読むのが良い。

CSS Naming Conventions

CSSで次に重要な練習方法は、naming conventions(命名規則)である。

OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? の記事より、異なるnaming conventionsについて見ることができる。Mediumのような会社をみると、BEMのようなnaming conventionsを利用している。
Medium’s CSS is actually pretty f***ing good

CSS Reset

ブラウザは、margin(余白)からline-heights(文章の行間の広さ)まである。MeyerWebは有名なresetである。もっと知りたいならこの記事を読むべきである。

Cross Browser Support

CrossBrowserSupportは、最も最新のブラウザである。trainsitionのようなCSSpropertiesは、異なるブラウザで動かすためにvendor prefixesが必要である。CSS Vendor Prefixesを読めばもっと詳しくわかる。Chrome, Firefox, Safariを含む。

CSS Preprocessors and Postprocessors

1990年代にできてから、CSSは長い年月が経っている。UIsystemが複雑になってきてから、ツールを考え出している。

主なCSSpreprocessorsはSass and Lessの2つである。2016年、Sassはより広く使われている。Bootstrap(有名なCSSframework)はLessからSassに変わってきている。Sassを話す際、SCSSも話題に上がる。

Grid Systems and Responsiveness

Grid systemは並行、垂直に要素を貯めるCSSの構造である。

Bootstrap, Skeleton, FoundationなどのGrid frameworkは、レイアウトの縦列を使うマニュアルを提供している。Grid frameworkはとても役に立ち、gridsがどのように動くか理解するのに大切である。Understanding CSS Grid SystemsDon’t Overthink Gridsで、よくまとめられている。

grid systemsの主な目的の一つは、Webサイトにresponsivenessを追加することです。responsivenessとは、ウィンドウの幅に合わせて、Webサイトのサイズを調整することを意味する。CSS media queries, CSS rulesを使うことで、responsivenessを実行できる。

Intro to Media QueriesでMedia queriesについて読むことができる。mobile-first時代に突入したので、An Introduction to Mobile-First Media Queriesをチェックするべきだ。


Practicing HTML and CSS Best Practices

2つのExperimentsのゴールは読みやすいclean codeを書くことと、長い期間の影響を管理することを練習することである。

Experiment 3

ここでは、前のExperimentの一つを選び、あなたのコードをrefactor(外部から見た動作を変えずに、内部構造を整理すること)する。

コードをrefactorすることができることは、front-endの開発者にとって、大切なスキルです。quality codeを作ることは、反復プロセスである。CSS Architectures: Refactor Your CSSを読むことで、コードをrefactorすることを学ぶことができる。

It’s not at all important to get it right the first time. It’s vitally important to get it right the last time.

refactorするときに、幾つかのポイントがある。

・class names が曖昧かどうか。いまから6ヶ月後、class namesnの意味を理解できるか?

・HTMLとCSSはsemanticかどうか。自分のコードを見たときに、構造を理解できるか?

・hex color codeを何度も再利用している?Sass variable

・コードはSafariでもChromeでも動くかどうか。

Skeletonのようなgrid systemを使ってレイアウトを使っているか。

・important flagをよく使っているか。どのようにそれを直すことができるか。

Experiment 4

最後のexperimentは、使うために最も良い練習法を学ぶことだ。

portfolioWebsiteをつくる。front-endで、portfolio siteは最も重要なdegital assetsのうちの一つである。portfolioは、あなたが作った作品を披露するサイトのことである。もっと大事なことは、成果や開発した作品を調べるのに役にたつ記録である。たとえ、1,2作品だろうと、載せるべきである。

ShiftBrain Studio

始めるために、Adham Dannawayの記事My (Simple) Workflow To Design And Develop A Portfolio Websiteを読むべきだ。

もし最初のportfolioの反復が完璧でなくとも、それは大丈夫である。portfolioは多くの反復をする。

Stay current

HTMLやCSSがいつ流行りでなくなるかもしれないが、front-endのデータはそのままにしておくべきである。

The front-end landscape is constantly changing

下の役に立つWebsite,Blog,Forumsをのせる。


Learn by example

最終的に、学ぶのに最もいい方法は例である。より効率的なfront-endにするためにStyleguidesとcode conventionなどがある。

Styleguides

Typography styleguide

Web styleguidesは、Websiteで再利用できるCSSの要素やパターンのコレクションである。

Code Conventions

Code Conventionsはコードを見やすくする、維持するためにデザインされた。CSS Guidelinesのようなリンクは、良いHTMLやCSSを書くためのガイドラインである。Github internal CSS toolkit and guidelinesのような他のリンクは、quality codeの例が載っている。


Wrap up

この記事の最後に、HTMLとCSSの慣れていることだろう。front-endを学ぶのに一番いい方法は、projectやexperimentationを作ることである。front-endの開発者はどこかで始めなければならない。そして、明日ではなく今日始めるべきである。

この記事は、2つのパートに別れている。2つ目は、JavascriptやJavascript libraries/frameworks による作用についてである。


最後に

今回の記事は、はじめに載せたサイトのほぼ日本語訳である。

これで終わります。

Show your support

Clapping shows how much you appreciated Takayuki Horisawa’s story.