たこさんちゃんねる(別枠)

WEBとかそんな感じとかでどうでしょうか。

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

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

■ 目次

基本ベース

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

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

エディター

Sublime Text3

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

恋に落ちるエディター「Sublime Text3」。
恋に落ちるエディター「Sublime Text3」。

Sublime Text公式サイト

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

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

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

Prettier公式サイト

Prettier
Prettier

デザインツール

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

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

Gitクライアント

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

fork

いい感じのGitクライアント「fork」
いい感じのGitクライアント「fork」

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

fork公式サイト

FTPクライアント

Yummy FTP Pro

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

Yummy FTP Pro
Yummy FTP Pro

Yummy FTP Pro公式サイト

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

コミュニケーション

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

スニペット管理

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

Notionでのスニペット管理
Notionでのスニペット管理

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

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

Alfred

Alfred

  • Running with Crayons Ltd
  • 仕事効率化
  • 無料

Alfredのスニペット管理
Alfredのスニペット管理

Webサービス系

確認・チェック

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

Can I useでStickyがIE11で使えないことを確認した図
Can I useでStickyがIE11で使えないことを確認した図

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

caniuse

CSS生成ツール

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

OneClickCSS
OneClickCSS

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

OneClickCSS

CSS三角形作成ツール

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

CSS三角形作成ツール
CSS三角形作成ツール

CSS三角形作成ツール

テーブル作成ツール

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

Table Tag Generator
Table Tag Generator

Table Tag Generator

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

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

CSS Gradient
CSS Gradient

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

画像圧縮

TinyPNG

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

TinyPNG
TinyPNG

TinyPNG

5MB超えたとき

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

Compressor.io
Compressor.io

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とか。

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