入社初日はPCのセットアップをしようー | NEWS ニュース | グラウンド GROUND Inc.

入社初日はPCのセットアップをしようー

01/08/2020

BLOG

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

作成が必要なアカウント

Gmail
Apple ID
Adobe ID
Dropbox
GitLab
Github
XSERVER

GUIインストール

GIT
Fork
Docker
Slack
Xcode(Macのみ)
Sublimetext

Atom
Gyazo
Mapture（WindowsはRapture）
Cyberduck
VirtualBox
Adobe Photoshop
Adobe Illustrator
Adobe XD
CompareMerge(WindowはWinMerge)
Sketch
Color Note
Office 365

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

Homebrew
Nodebrew(WindowsはNodist)
Yarn
Gulp

Chromeの機能拡張

Dimensions
そのた...

GIT

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

https://git-scm.com/

windowsのみ一番下を選択する！

FORK

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

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

Slack

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

Docker

WPをローカル環境に構築する場合につかったりする

https://www.docker.com/products/docker-desktop

Sublime Text

テキストエディタ

https://www.sublimetext.com/

ATOM

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

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/

Office 365

https://www.office.com/?omkt=ja-jp

Color Note

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

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

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

ウェブ制作で入れておくべきChromeの機能拡張

Dimensions

マージンの確認につかったりする

chromeウェブストア

Pushbullet

URLを他の端末におくるときにつかう

chromeウェブストア

HTMLエラーチェッカー

HTMLの開始・終了タグの過不足などを検出する拡張機能

chromeウェブストア

Tag Assistant (by Google)

GoogleTAGを検証につかう、いろいろあるけどこれがつかいやすい

chromeウェブストア

Debugger for Adobe Analytics

Debugger for Adobe Analyticsあまり出番はないので、案件でひつようになったらいれる

chromeウェブストア

Alt & Meta viewer

むかしからつかっているけどそのままALTとかMetaとか確認するときにつかう

chromeウェブストア

Web Developer

Web Developer いろいろあるけど、キャッシュ削除とJSを切った状態にするときによくつかう

chromeウェブストア

Quick source viewer

圧縮されたHTMLを確認するときにつかう

chromeウェブストア

Lighthouse

サイトスピードの検証に使用する

chromeウェブストア