フロントエンド技術を学ぼう 序章

2020年7月20日月曜日

Front-end Developer Handbook

t f B! P L


itpro.nikkeibp.co.jp

IT Pro2017/02/02の記事に以下の言葉を見つけました。

 システム開発に携わる技術者は、プログラムを書かなくてもよい――。矛盾の極致のようなこの不思議な“常識”は長い間、日本の大手ユーザー企業のIT部門や、SIerと呼ばれる大手IT企業の間でまかり通ってきた。

このブログを始めた理由も、この記事が警笛を鳴している部分と近いです。私の職務は開発ではないけれど、それはプログラムが書けなくて良い理由にはならない。ITエンジニアとして社会に出ている以上、ITを切り口とした問題解決方法を備えた人間でいたいと考えています。

今、組織として、チームとして、仕事を回しインフラを運用する方法を会社で学んでいます。

  • 個人の力量に左右されない仕組みづくり。
  • 人的ミスを防ぐ為の機械的なフロー
  • 安全性を求めた保守的な選択

これは人が集まった組織でなければ培うことの出来ない重要な経験です。

では仮に今組織から離れてしまった場合、私個人の能力でどれ程社会と繋がっていられるのか?

言い換えるならば、与えられたものを守る方法に対し、新しい価値を提供できる方法を身につける。という意志の表明でもあります。

以上が個人でも培うことのできる技術としてフロントエンド周りの学習を選ぶ事となった経緯です。なぜフロントエンド周りかというと、最低でもパソコン1台あれば実際に動かすことができる。という理由から選択しました。


Front-end Developer Handbook 2017

ここにCody Lindleyの書いたGitBook、Front-end Developer Handbook 2017という電子書籍があります。Cody LindleyはJavaScript系のO'Reilly本を何冊も執筆された、フロントエンドエンジニアです。

この本は、フロントエンドエンジニアリングに関わる各技術の解説が簡潔に1冊の本にまとまっています。フロントエンド技術を学び始めるにはうってつけの1冊だと思いませんか?


イントロダクション

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2017.

このガイドブックは誰でもフロントエンド開発の技術習得が学べる為のもので、どの様に学び、どの様なツールが使われているかの大枠を簡単に纏めてあります。

と、あります。

また、本ガイドブックはフロントエンドについて3つのパートに分けて説明されていることが記してあります。

  • パート1. フロントエンドの概要
  • パート2. フロントエンド開発の学習
  • パート3. フロントエンド開発ツール

フロントエンド開発者とはなにか?

英語版Wikipediaが引用を用いて説明されています。要約すると、

HTML/CSS/JavaScriptを主に使用し、Webブラウザやデバイスによって異なる挙動を制しながらWebサイト/Webアプリケーションを作成する者

ということになります。

また、フロントエンド開発者が主に使用する言語はHTML/CSS/JavaScriptですが、これらによって作られたものが動く環境には、以下が挙げられます。

  • Webブラウザ
  • ヘッドレスブラウザ
  • Web views
  • Web技術に依るネイティブアプリケーション

つまり、プロジェクトによってテストする環境が変わってくるのですね。


フロントエンド開発の動き in 2016

これからフロントエンドについて学び始める身なので、ここは飛ばします。


2017年のフロントエンド開発予想

ここもこれから学び始める身なので、飛ばそうと思ったのですが、以下の1行。

JavaScript will settle, and hopefully, CSS will erupt and everyone will cry fatigue until it settles.

JavaScriptが落ち着いて、CSSが爆発する。

というところ。

去年JavaScriptを学ぼうとして、開発スタイルの多さに辟易としていたので、この展望が正しければ嬉しいですね。
CSSは、、どうなるんだろう。。私はまだ素のCSSしか書いた経験がないので想像もつきません。


どの様に学んでいくか

このFront-end Developer Handbook 2017を教科書として、フロントエンド技術を身に着けていくために以下の3パートを翻訳し、学んだことを追記してオリジナルの資料集を作ろうと考えています。

  • パート1. フロントエンドの概要
  • パート2. フロントエンド開発の学習
  • パート3. フロントエンド開発ツール

本書は3パート合わせて全部で94項目あります。

最初はパート毎に3回の記事でまとめようと思っていたのですが、項目数が多いので1項目1記事にしていくことにします。

2017/3/15 追記

全94項の翻訳作業が完了しました。
以降は各項目に対して、自分で学び、経験したことを踏まえてリライトしていきます。

QooQ