マークアップエンジニアになった初日はPCのセットアップ

エンジニアという職種のなかでもマークアップエンジニアは比較的、未経験からでも入りやすく、ウェブデザイナーもマークアップぐらいはやる人もいるくらい入りやすい職種です。グラウンドでもフロントエンドエンジニアになるにはまずマークアップがきちんと出来るようになることが条件になっています。
そんなマークアップエンジニアが初日にやるのがPCセットアップ!
途中で黒い画面がでてくるが気にせずいきましょう

作成が必要なアカウント

  1. Gmail
  2. Apple ID
  3. Adobe ID
  4. Dropbox
  5. Githab
  6. Github
  7. XSERVER

GUIインストール

  1. GIT
  2. Fork
  3. Sourcetree
  4. Slack
  5. Xcode
  6. Sublimetext
  7. Atom
  8. Gyazo
  9. Mapture
  10. Cyberduck
  11. VirtualBox
  12. Adobe Photoshop
  13. Adobe Illustrator
  14. Adobe XD
  15. CompareMerge
  16. Sketch
  17. Color Note
  18. Office 365

GIT

共同作業をするためのツール。マストでインストールしておくもの
使い方は https://www.sejuku.net/blog/72524 ここら辺を見ておく
何度もやって体で覚えよう。

https://git-scm.com/

Slack

コミュニケーションツール、メールよりスラックでやりとりが増えてきた
プロジェクト管理はgoogle spreadsheetとbacklogを慣れておいた方がいい

FORK

GITクライアント Soucetree より軽量に動く
MacもWinも両方あるしコンフリクトマージがやりやすい

https://git-fork.com/images/logo.png

Soucetree

前はこれを使っててbitbucketを使う物はこっちで作業したりすることもある

https://www.sourcetreeapp.com/

Sublime Text

テキストエディタ

https://www.sublimetext.com/

ATOM

コードエディタも2つ以上入れておく

https://atom.io/

Gyazo

スクショを送る際に便利

https://gyazo.com/captures

Mapture

ピクセルパーフェクトのレイアウトを再現する際にレイアウト画像を重ねて調整
時間がかかるのでパーフェクトは目指さなくてもいいがマージンは合わせるようにしよう

https://anatoo.jp/mapture/

Cyberduck

FTPソフト、AWSへのUPもこれでいけるので便利
入れたらまず、非表示ファイルの表示設定をしておこう

https://cyberduck.io/index.html

CompareMerge Lite

ファイル比較用 windowsはWinMergeという神ソフトを使用する

https://apps.apple.com/jp/app/comparemerge-lite/id1459748650?mt=12

VirtualBox

仮想環境を作るのに使う、主にIEのデバック用に使用するのであわせて
modern.IEも(Win10 IE11 )用意
https://qiita.com/studio15/items/26bfb665aa024c5a5568
(ダウンロードに時間がかかるので早めに)

https://www.virtualbox.org/

Adobe

Photoshop, Illustrator,XD

https://www.adobe.com/jp/creativecloud.html

Sketch

デザイン用App

https://www.sketch.com/

Color Note

カラーコードを吸い取るアプリ

https://apps.apple.com/jp/app/color-note/id1099028591?mt=12

ターミナルでインストールするもの

  1. Homebrew
  2. Nodebrew
  3. Yarn
  4. Gulp

Homebrew

macOS用パッケージマネージャー
$brew install 〇〇 とかでインストールできたりする

https://brew.sh/index_ja

Nodebrew

NodeのバージョンはNodebrewで管理。デフォルトを10に設定しておいて案件によっては6とか12とかに変更するためにインストールだけでもしておくように
https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498

windowsの場合は Nodist を入れておくように。どちらもnodeのバージョン管理よう
https://qiita.com/Futo23/items/0825aa96088c5ff0906b

yarn

JavaScriptのパッケージマネージャ
npmと使い方もほぼ一緒なのでどちらでもいいがインストールが速いので最近はこっちを使用している

https://yarnpkg.com/lang/ja/

gulp

まだまだ現役

https://github.com/gulpjs/gulp

後から追加要件で崩れる、IEハックはやりたくてやっているわけではない、共通化の概念がわからない、でもきちんと組めると気持ちいい

その他の BLOG