Category: front-end

フォントのグリフ

字体とほぼ同義語だが、記述記号やスペースを含める
文字と記号を含めたものをグリフセットと呼ぶ
ビットパターンやアウトラインなども指す

Excelでも別フォントにフォールバックされる

いきなりグリフと言われても、celticsのグリフィンしか思いつかんわ

Voltでフロントを構築する

Github: https://github.com/themesberg/volt-bootstrap-5-dashboard

Fileをvagrantにダウンロードし、Quick Startに沿って構築していきます。
$ tree
97 directories, 2216 files
// npmでgulpをインストールします
$ npm install gulp-cli -g
$ npm install
// node_modulesがインストールされました
$ ls
LICENSE.md README.md gulpfile.js html&css node_modules package-lock.json package.json src

// サーバ起動
$ gulp
http://192.168.33.10:3000/index.html
// ポートが3000番になっている事に留意

コマンドラインでhtml&cssのフォルダに移動するには、&の前にバックスラッシュをつける
$ cd html\&css

これからdashboard中心に編集していきます。

BEMとは

BEMとは
– フロントエンドの設計方法
– Block、Element、Modifier
– 厳格なclass名の命名ルール
https://en.bem.info/methodology/

背景
– スタイルの優先順位の指定が難しい
– !importantの多用
– パーツを別の場所に流用すると表示が崩れる
– 制作者本人しかわからないclass名

制作ボリュームが膨大になった時、全体像を誰も理解できないってのはよくありますね。
特に、長いサービスだと、前任者が全員退職して、知っている人がいないとか。

BEMではパーツをBlockと呼ぶ
Blockはid属性ではなく、classを使う
※idは1ページ1回、classは重複利用可能
Blockは入れ子にしない

ElementはBlockの構成要素
Elementのclass名はblockの構成要素名を入れる

.search
.search__input
.search__button


Modiferは既存のBlockやElementと似た物を作りたいとき

<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
 
<ul class="list  list_type_check">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>

BEMでは、block, element, modiferで一貫したセパレーター(_)を使う

modife: Block_key_value
単語はハイフン(-)もしくはキャメルケースなど

で、BEMはどれ位使われているかというと、50%くらい
50%といえば、かなりの割合ですなー

フロントエンドのアーキテクチャを考える

フロントエンドをどうするか？というと抽象的なので、言い方を変えると、どの技術を採用するか？
時代の潮流に合わせるのは鉄板か？

フレームワーク
– 第一候補 Vue.js
– 第二候補　React, Typescript
– 補欠 Angular, coffee

CSS周り
– Sass + Gulp

ライブラリー
– jQuery

命名規則
– BEM

コードフォーマッタ
– Prettier

構文チェック
– ESLint

グラフィック
– Fabric.js, three.js

その他
– Babel, Webpack
– コーディングガイドライン作成、コンポーネント一覧作成

こんなところか。
最低限、GAFAは見ておこう。

Google

- Experience with and passion for user-interface design.
- Knowledge of web libraries and frameworks such as AngularJS, Polymer, Closure or Backbone.
- Demonstrated sense of web design and attuned to the fundamentals of user experience, including accessibility.

Apple

-Experience with MongoDB and Node.JS
-Data visualization with D3.js or other framework
-Proficient understanding of client-side scripting and Javascript frameworks, including React, Typescript, Bootstrap, NPM

Facebook

- 3+ years of JavaScript experience, including concepts like asynchronous programming, closures, types, and ES6. Experience with React is a bonus
- Aware of but not reliant on object oriented frameworks (Prototype JS, MooTools, Dojo, etc.)

Amazon

- Strong knowledge of web technologies including: HTML5/CSS3/JavaScript, XML, JSON, React/Angular, web and server programming
- Passion to design and develop intuitive user interfaces

うーん、どこもUIへのpassionって書いてるなーww
node.js, react/angular、ES6は入れておいた方が良さそう。

ヤフー

React + Redux
TypeScript
Redux-thunk
Redux-first-router
Storybook
Jest
styled-jsx(Sassを書けるようにプラグイン入れてる)
Node.js

メルカリ

TypeScript, React.js, Next.js, Redux etc
Circle CI, GitHub, Slack, JIRA, Crowi, Spinnaker

Reduxも必須だな。
頭蒸発しそうだ。。