【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ

2018.11.06

| Web・ガジェット

個人的に2018年はこうだったなぁっていうまとめです。一応業務で日頃使っているサービスやアプリを紹介していきます。フロントエンドエンジニアというか制作会社なのでどちらかというとコーダーとかに近いかもしれません。あなたの役に立つかどうかも知れません。

基本ベース

  • MacBook Pro (Retina, 15-inch, Mid 2015)
  • 2.5GHz Intel Core i7
  • メモリ16GB
  • macOS Mojave

MacBookPro(2018)をお迎えしました。

ソフト・アプリケーション系

エディター

Sublime Text3

社会人になってからこれをずっと使っているのでなんだかんだ5年ぐらいの付き合いになるでしょうか。License Keyのメールが2014年2月なので、そこから有料ユーザーですね。

Sublime Text

しかしながら最近CSSのbackground-imageなどのURLでパスを補完してくれなくなって、すごくストレスになっています。こま🍎。

新しいエディター候補としてPhpStormに行こうかどうしようか検討中なのですが、いまさらショートカットが変わるのがめんどくさい(初期設定を含む)。めんどくさい…VSCodeも慣れなくて何度も挑戦していますが、いつも断念しています。

CSS、JSのLinterは「Prettier」を使用しています。Sublime Textで保存時に実行しているので、ババーっと適当に書いてきれいに揃えてもらう式記述法。

Prettier

デザインツール

ここはデザインチームとの仲良くするお話なのですが。基本は<b>Sketch</b>と<b>Adobe Photoshop</b>です。Photoshop重たいから嫌だといい続けていますがなかなかSketch移行が進みません。

最近は個人的勉強でfigmaを使い始めました。SketchとAdobe XDとのいいとこ取りみたいな風潮です。ブラウザでも作業ができます。

Figma

Gitクライアント

Sourcetree

有名どころですね。日本語ですし。ただちょっとUIがやぼったいので、、、

fork

いまはforkを使っています。英語ですがそんなに困ることもないです。軽くて扱いやすいです。

fork公式サイト

FTPクライアント

Yummy FTP Pro

こちらもなんだかんだずっと使っています。軽いし、上げ下げも早いし。不満はそこまでないです。ちょっとディレクト移動の時にラグがあるぐらいですかね…。

Yummy FTP Pro

いまはForkLiftに移行しようか考えています。ブックマークの管理が少しめんどくさい雰囲気が漂っている。接続先も数が多いので、アップロード・ダウンロードの速度も大事ですが接続先の管理のしやすさも大変重要になってきます。

Transmit 5に変えました

【Mac】FTPソフト(アプリ)はTransmit 5がおすすめかも

コミュニケーション

slackとskype。slackに移行したい。したいよおおお!!

スニペット管理

HTML、CSS、JSにまたぐものや、長めのソースコードはNotionにまとめておいてあります。あんまり使わなかったりするんですがだからこそいざというときに忘れてるし探すのめんどくさいので、書いてまとめてあります。たまに書いてあることを忘れて調べてます。

ノートアプリ「Notion」の使い方やいいところ

短いものやよく使うものは、Alfredのスニペット機能を使用します。

Alfred – Running with Crayons Ltd

Webサービス系

確認・チェック

カテゴリーがよくわかんなかったけど、このCSS・HTMLタグってあのブラウザー対応しているかな?どうかなー?っていうのを調べる時に使います。

IE11は早く滅んでほしいです。

caniuse

CSS生成ツール

コーディング時はバーっとHTMLを書いてから、下のCSSジェネレーターでCSSのクラスを生成しています。基本的にBEMなので問題ないですが、BEMだとクラス名が長くなったりこんがらがったりするので、直接タグ指定する場合も稀によくあります。

これすごく便利です。作者さんありがとうございます。めちゃめちゃ役立ち丸です。

OneClickCSS

CSS三角形作成ツール

Width,Heightをいれて、作りたい向きを選択すれば生成されます。三角を使うときはFontAwesomeかこれですね。便🍎。

CSS三角形作成ツール

テーブル作成ツール

こことここをくっつけて、、、ここは2列、、、みたいなのをそのまま組んでいくのはめんどくさいのです。そして大体間違えます。てへぺろ。ということで便利ツールの登場です。

Table Tag Generator

グラデーション作成ツール

最近よく使われますね。グラデーション。フォトショとかだと詳細まで出てこないし、角度とか、何色も使われているとめんどくさいし、ここは60%、ここは20%みたいなものもめんどくさいのです。

ということで便利ツールです。ありがてぇ。ありがてぇ…(泣)

画像圧縮

TinyPNG

いろいろ使った結果TinyPNGが一番早くで楽ですね。ディレクトリ指定ができないのでディレクトリで切っている場合すごくめんどくさいですが。

TinyPNG

<b>5MB超えたとき</b>

TinyPNGは5MBまでですが、Compressor.ioは10MBまで大丈夫です。圧縮率もいいですし、きれいなのでおすすめです。ただ一個ずつしかできないのでTinyPNG漏れの時に使います。

Compressor.io

Font系

一時期Noto Sans JPばっかりだったんですけど、最近は游ゴシックを使っています。基準フォントだし、Webフォントはやっぱりラグが発生するので速度改善にも繋がりますね。

そんでもってWebフォント使う場合は、下記2つですね。

Google Fonts

Font Awesome Icons

Font Awesomeは5が出てますが、未だに4.7を使用しています。5のとき、SPで表示されないとか不具合が相次いだのでまだ移行できていません。

速度改善

大体の場合、GTmetrixとGoogleさまのPageSpeed Insightsを併用しますが、PageSpeed Insightsだけでもいいかなーって。

PageSpeed Insights

その他

ファビコン作成するとき

様々なファビコンを一括生成

EMにするとき

PXtoEM.com

Finish!!

こういう記事こそQiitaとかnoteに書くべきなのでしょうか。
最近で言えばQrunchとか。

なんかそっちじゃなくてこっちおすすめだよーとかあれば教えてほしいです。

【Mac】FTPソフト(アプリ)はTransmit 5がおすすめかも
【Mac】FTPソフト(アプリ)はTransmit 5がおすすめかも
アプリやWebサービスのサブスクを見直してまとめて整理整頓する

Comment

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。