(たぶん…)役立つWebツール
- fujimotoyasuhiro
- Markup Engineer
お久しぶりです。
ようやく入社してから1年が経とうとしている新米コーダーの藤本です。
多分、弊社で今年最後のブログになるはずです。
前回 VSCodeのプラグインを紹介したわけですが…
今日は “VSCodeのプラグインを紹介 ~part2~”
ではなく…
タイトルの通り、役立つWEBツールを紹介しようと思います。
早速いきます…
CSS Gradient – Generator, Maker, and Background
こちらは最近グラデーションのデザインが来た時にはよく使っているWebツールになります。
使い方も簡単で、
・開始地点の色を設定して、終了地点の色を設定してあげるだけです。
・入力したら下のCSS欄にCSSが記載されていますので貼り付けるだけになります。
(どうですか〜簡単ですよね！？)
ささっと行っちゃいますね
次に紹介するのは、文字の間違いや差分チェックをするときによく使用するWebツールになります。
これも使い方がすごく簡単です。
・文字の間違いや差分をチェックしたいテキストを貼り付ける
・比較するボタンを押せば、差分が表示されます。
ここでさらに便利なのが、どこが違うのか、段落や色を分けて表示してくれる点ですね。
コーダーだけでなくて、他のドキュメントなどのデータも使用されている方もいらっしゃるのではないでしょうか？(間違い探しが苦手な人は是非！！)
はい、お次！！
ラッコさんが可愛らしいサイトですね！！
これは何かというと、なんでもツールです…笑
ユーザー登録や有料会員もなく誰でも使えるなんでもツールです。
僕が何に使用しているかと言うと…
・OGP確認
・IPアドレス確認
・Whois検索
だけです…サイトにある機能を全て使用することは一生ないかも…(宝の持ち腐れ…違うか…)
色々な機能があるので是非見てみてくださいね。
はい、おすぎ(おつぎ〜)とピ〜コ〜
ダミーデータを持ってくるのが面倒くさかったり、このサイズの画像がない！！と言うときにちゃちゃっとダミーデータを用意したいときありますよね。
その時に、このサイトで
・欲しい画像のサイズを入力
・画像を生成ボタンを押すだけ
はい、これも簡単です。(ここまで全て簡単…)
URL形式で読み込むのもよし、画像として保存するもよし、CSSで少しいじることも可能です！！
はい、最後〜
Babel · The compiler for next generation JavaScript
最後は、BABELと言うやつですね…
最近、JavaScriptを勉強で触っているのですが、ES5(JavaScriptのバージョンみたいなもの)からアロー関数やら、テンプレートリテラルなどを使って書いています。
これがコードを簡潔に、見やすく、記述量が減るので使っていました。(もっというと色々できるのです。はい。)
「じゃあ、それ使っていればいいジャン」と考える人もいると思うジャン？
Webブラウザというのがありまして、IE(インターネットエクスプローラー)など、ES5に対応していないんですよね…
つまりどういうことかというと、
学んだことを試そうと思って、調子に乗って、アロー関数やテンプレートリテラルとか諸々使ってなんか書いてると…
僕：「これで動け〜」
Google Chrome：「この書き方いいね！」
Fire Fox：「おお、リファレンス通りに書けてるね」
Edge：「いいとおもいます」
Safari：「CSSとか、読みにくくて崩れてるところあるけど、JSはいい感じじゃないですか？」
IE：「こいつ何書いてんの？訳わからんから、もういいや」
となる訳です。
で、コーダーとしては、非常に非常にこのまま行きたいのですが…
IE：「僕だけ。置いていくんかい！！」
と言う、一部の声のために
IE対応しなければならない時があるんですこれが…(ピエン…) IEはちなみに、CSSも効かないものもあるんです…safariもね(ピエン超えてパオン…)
なので、
BaBelと言うツールを使って変換しています。(ちなみに、これは、Webツールだけじゃなくて、GulpやWebPack、最近勉強しようとしているViteなどでも使っています。この辺りは、またブログでも書くかも？)
つまり、Babelと言うのが、アロー関数などをIEでも読めるように変換していくれているんですね。
IE：「え、僕だけ時代遅れ？」
僕：「…」
はい、かなり、話がそれましたが…
とりあえず、こんなツールがありますよーでした。
よく皆さんが使っていて知っているものが多いと思います。
番外編
上は、インターネットの回線速度を計測するやつです。
まぁ、使うことは少ないと思いますが…(意味深)
最近、見つけた、本っっっっっっっっっっっとにすごいWEBサイトを紹介します。
これ制作期間どれくらいなんだろう？どんな技術使ってるんだろ…
ね、すごいでしょう！！笑
このサイト作った人は「佐藤ねじ」さんと言う人で他にも面白いサイトがあるので見に行ってみてください。
皆さんは今年はどんな年でしたか？
来年は、いい年にしたいですね。
では、また(｢ﾟДﾟ)｢ｶﾞｳｶﾞｳ