BtoBデジタルマーケティングやWeb制作の情報と、イントリックスの日常風景をお伝えします。

新卒・そうでない方にも…知っておくと幸せになれる!
便利機能・ツールのすすめ

ゆるふわ
ゆるやか広報班 編集部
新生活をスタートした皆さん。そして、「そんな便利な機能、みんないつから知ってたの!?」という方にも。 ほんの少しフロントエンドエンジニア目線で今から使える便利機能・ツールをご紹介します。

気づけば早いもので4月も半ば。皆様いかがお過ごしでしょうか?
イントリックスではこの春、新卒メンバーが3名入社しました!(ようこそー!)

きっと初めは慣れないことの連続で、余裕がなくなることもあるでしょう。
そんな時こそ大切なポイントのひとつが
「余力を自分で作り出す」
になってくるのかなと最近よく思います。

例えば、操作1つをとってみても、便利な方法を知っていると知らないとでは、
費やす時間が大きく違ってきますよね。

余力って何?その余力ってどう作り出すの!?と思った方、、、

まずは今からご紹介する、便利機能・ツールを知ることから始めてみてください!
「余力」があれば、その分違う視点にも考えを向けることができるかもしれません。

つまり、作業効率化が余力算出への第一歩なのです!
それでは早速…

1. ショートカットをマスターする!

データのコピー/貼り付けをするとき、右クリックでメニューを表示して「コピー」を選択していませんか?

実はそんな「コピー」にもショートカットが割り当てられていて、
覚えておくと作業効率がびっくりするほど改善されます。

というわけで、これだけは何が何でも覚えていたほうがいい推しのショートカットをご紹介します。

※覚え方は、大体何かの頭文字だったりしますが、一部不明だったり諸説あったりするのでそれはもうノリで覚えるしかありません!
※Macは「Ctrl」 を 「Cmd」に置き換えてください。
ショートカットキー 機能 覚え方
Ctrl + C コピー copyの「C」
Ctrl + V 貼り付け Paste O[v]er の V?
Ctrl + X 切り取り クロスしている様がはさみに似ている気がするっ!
Ctrl + Z 1つ前に戻る 戻りたいぃーーぬぬぬ(念力)ーーZZZーー…「Z」!

↑…さてここで、いったんキーボードを見てみてください。
実はこの4つ、隣同士なのです。人差し指のステップがスムーズにできますね。

Ctrl + S 保存 saveの「S」
Ctrl + A 全選択 allの「A」
Ctrl + F 検索 ブラウザ上でもエクセル上でもテキストエディタ上でも、最小限の検索はこれを覚えておくとよい!

<その他おすすめ:>

  • Ctrl + W :ブラウザのタブを閉じる。知ってると爽快な気持ちになれます。
  • URLをCtrl 押しながら左クリック :別タブで表示(弊社中井ちゃん推し★)
    ぜひこのURLで試してみてください!→ イントリックスのメンバー紹介
  • URLをShift 押しながら左クリック :別ウィンドウで表示(弊社中井ちゃん推し★)
    ぜひこのURLで試してみてください!→ イントリックスのサービスを見る
  • Shift押しながら貼り付け(Ctrl + V):プレーンな状態のテキストを貼り付けできる。
  • F2:リネーム。エクセル上ではセルの中身を選択できる。
  • F7:全角カタカナに変換。
  • F5:リロード。
  • Ctrl + F5 :F5でもだめな強いキャッシュには、スーパーリロード!(Chrome、IE、FireFox)

2. 矩形選択をマスターする!

「矩形選択」、ご存じでしょうか?
テキストは横だけではなく、縦にだって選択できるのです!どういうことかというと…

A. 例えば文頭に「・」を入れたいとき、、、一行ずつ選択してちまちま「・」いれなくても一瞬で終了!

図:矩形選択について

B. 文中に入れることもできます!「:」の後に半角スペースを入れてみると…ほら一瞬。

図:矩形選択について2

この機能は残念ながらWindows 付属の「メモ帳」では使えません。
「メモ帳」以外のテキストエディタが必要です。
この機会にぜひどれか1つイントールしてみてはいかがでしょうか?

いくつか代表的なテキストエディタと操作方法をご案内します。
対象箇所にカーソルをあてた状態で、下記の操作をしてみてください。

テキストエディタ 操作方法

エディタ 操作方法
秀丸・サクラエディタ altを押しながら、左クリックのままドラッグで範囲を選択。
SublimeText (Windows)Shift押しながら、右クリックのままドラッグで範囲を選択。
(Mac OS X)altを押しながら、左クリックのままドラッグで範囲を選択。
テキストエディット(Mac) optionを押しながら、左クリックのままドラッグで範囲を選択。

<その他おすすめ:>

「SublimeText」はCtrl + Dで同じ文字を複数選択できます。

何か資料を作る時でも、まずはテキストエディタで一度書き起こすと、
このような素晴らしい機能を活用しながら効率よく作業を進めることができるのでおすすめです!

3. 検索/置換をマスターする!

「置換」…始めて耳にした方もいらっしゃるでしょうか?
その名の通り、何かを何かに置き換えることです。置換を駆使できる大人はかっこいいです。

各テキストエディタでは、検索・置換時にオプションの設定ができ「正規表現」なんかも使えます。
また、開いている1ファイルだけなく、フォルダ間の検索もできます。
より角度の高い検索・置換ができるようになるので、ぜひ調べてみてください!

※置換する際は、まずテスト的に検索してみてください。想定通りだったらそのまま置換作業に移っても大丈夫ですが、必ずバックアップを取っておくことをおすすめします。
※Macは「Ctrl」 を 「Cmd」に置き換えてください。

テキストエディタ 操作方法

エディタ 操作方法
秀丸 検索: メニューバー「検索(S)」> 「grepの実行」
置換:  メニューバー「検索(S)」> 「grepして置換」
サクラエディタ 検索: Ctrl + F メニューバー「検索(S)」> 「検索」
置換: Ctrl + R メニューバー「検索(S)」> 「置換」
SublimeText 検索: Ctrl + F
置換: Ctrl + H (mac:Cmd + opt + F)

4. 差分をマスターする!

ここでいう「差分」とは、2つのファイルを比較して違いをみることを指します。(よく「diff」ともいいます。)
ほとんどのテキストエディタにある機能ですが、今回は「WinMerge」というツールをご紹介します。

WinMerge

前述の「2. 矩形選択をマスターする!」での作業の差分をとってみました。
左が作業前、右が作業後。追記した「・」「半角スペース」がピンク色になっていて、視覚的に違いが分かりますね!

図:差分抽出ツールについて

※3つ以上のファイル、さらにはフォルダ間を比較することもできます!

(番外編)ここも押さえたい! バックアップ・履歴を残す!

「3. 置換をマスターする!」でも触れましたが、バックアップをとる、加えて「履歴を残す」ことは非常に大事です。

例えば、自分のPCなどのローカルな環境にしか資料がない場合…

次の日何かのアクシデント(ハードディスクが壊れてしまったとかいくつも考えられますね…ぞっとします…)で他のメンバーに代理をお願いすることになったら…
それが緊急を要する案件だったら…??

…てんやわんやな惨状が想像できると思います。

他にも、口頭や電話口でのやり取りをその場限りにして、
メールやプロジェクト管理ツールなどに残さなかった場合どうなるでしょう。

あれ結局どうなったんだっけ?
何が課題なんだっけ?
のように
周りの人にとって、進捗具合・検討事項も伝わりにくい状況を生み出してしまいます。

このような状況を生まないためにも、
常に「自分以外の人にも引き継げる状態にする、たとえそれが今すぐであっても!」
を意識しておくことがポイントになり、トラブルの予防になります。

フロントエンドチームでは、ソースコードを バージョン管理ツール(Git、Subversion)を使って管理しています。
バージョン管理ツールを使うことで、
作業履歴やそれに対するコメントを残すことができたり、
同時にデータのバックアップもとることができます。
他にも便利な機能がたくさんあるのでおすすめですが、
敷居が高いという方には手動でのバックアップ(自分のPCへデータを残す)でもよいかと思います。
(手動管理の例:ファイル・フォルダの後ろに「_old170331」を付ける、など)

さいごに

ここで紹介したのはごくごく一部です。
気になった単語があればぜひ自分で調べてみて、「調べるクセづけ」のきっかけにしてみてください!

この作業しんどいなぁー、もっと効率的に進められないかなー、と思ったタイミングこそ
次へのステップアップにつながるかもしれません。

きっと乗り越えることができるより良い方法があるのだと常に模索しながら
(そして周りをどんどん巻き込みながら!)
新生活を楽しんでください!