メディア表現 VI 2. テキストエディタ
目次
本日の内容
- 【第２回】テキストエディタ 情報を扱う上で基本となるテキストデータの取り扱いについてより実践的な手法について学修する。
テキストエディタとそれに関連しそうなことについて学修していきます。
https://memeplex.app/
何人か投稿してくれましたが、まだの人もTeamsに投稿してくださいね。
タイピング
4年生の話
IT業界に内定決まった4年生から、
で、
高級コースで一分間平均、5.6以上を取れるように入社までにトレーニングしてきてください。
との案内があったようです。
まだまだ、タイピングは必須スキルと言えそうですね。
というわけで、みなさん試してみましょう。
ちなみに、ちょこっとやった感じで、自分6.0です。e-typingだと、250-300に相当するんじゃないか…
タイピング遅い人
両手にタオルをかけて、キーボードを完全に見れない状態にして、位置を体に覚え込ませましょう。
2年生で、地道に練習を続けた結果、常に2桁だった子がe-typingで300取るまでに成長してます。
誰でも、トレーニングすれば速くなります。 遅い人もまだ間に合います。社会人になる前にタイピングを得意になっておきましょう。
テキストエディタの歴史的変遷
エディタ戦争
エディタ戦争 と呼ばれるものがあります。
- emacs
- vi(vim)
のどちらが使いやすいかで、戦争みたいなことが起こってきました。
ドラマにも取り上げられるほどです。
新しいテキストエディタが出てきても、操作系は大体この二つのどちらかを模倣・拡張しています。
キーバインド
様々な違いがありますが、ショートカットでカーソルを移動する方法が異なります。このことをキーバインドと呼びます。
歴史的経緯により、2通りの方法があります。自分は、emacs派の研究室出身のため、emacsしか覚えていないです。
macのほとんどのソフトではemacsキーバインドが有効ですので、これを覚えることで、入力効率が上がります。
特に次を試してみましょう。
移動系
- Ctrl+p 上(previous line)
- Ctrl+n 下(next line)
- Ctrl+f 前(forward)
- Ctrl+b 後(backward)
- Ctrl+a 行頭へ(???)
- Ctrl+e 行末へ(end of line)
削除系
- Ctrl+h 一文字前を削除(?)
- Ctrl+d 一文字後を削除(delete)
- Ctrl+k 行を削除(kill line)
Mac 標準ショートカット
もちろん、Macの初歩的なショートカットは問題ないですよね？
- command + C コピー（複製）する
- command + X カット（切り取り）する
- command + V ペースト（貼り付け）する
- command + Z 操作を取り消す
- command + A 全項目を選択する
- command + S 保存する
- command + T 新しいタブを開く
- command + W ウィンドウ／タブを閉じる
- command + Q アプリケーションを閉じる
- command + tab アプリケーションを切り替える
- command + N 新規作成する、新しいウィンドウを開く
- command + O ファイルを開く
- command + F 検索画面を開く
- command + G 検索中に次の該当項目を検索する
- command + スペースキー Spotlight検索を起動する
- command + P 印刷する
- command + [ (左角かっこ) 戻る
- command + ] (右角かっこ) 進む
- command + 上矢印 ページの一番上までスクロールする
- command + 下矢印 ページの一番上までスクロールする
多種多様なテキストエディタ
テキストエディタは文字を入力するだけのアプリです。
ですが、使い勝手を良くするために様々なものが開発されてきました。
ですが、2022現在では、ほぼVisual Studio Codeが制覇したと言って良いでしょう。
とはいえ、個人的には
- CotEditor(難しいことはできないが、軽量。無料)
と併用している現状です。
また、Rustと呼ばれる言語で開発されたLapce がVSC一強の中で少し注目されています。
VSCode特徴
- 超軽量エディタで、サックサック動く
- 拡張機能がとても豊富
- エディタの中でターミナルを開ける
- 入力候補を自動で表示
- Emmet機能でHTML爆速コーディング
- 便利なショートカットキーが豊富
- デバック機能が標準装備
VSCショートカットチートシート
ショートカットは全部覚えるべきだ、とは言いません。何回も使うことに関して覚えていきましょう。
マルチカーソル
文字入力はカーソルの位置に行なわれますが、VSCにはマルチカーソル、という機能があります。
体験してみましょう。
- Option+Shift(win: Alt+Shift)で、行頭をドラッグしてみましょう。
- カーソルの数が増えましたね。
- 文字を入力すると、カーソルの位置全部に入力ができますね。
検索と置換
全てのテキストエディタに搭載されています。意外と知らない人が多いので、触れておきます。
例えば、「コンピューター」と「コンピュータ」が混在している文章があります。
- 全て「コンピュータ」にするにはどうしますか？
- 全て「コンピューター」にするにはどうしますか？
検索
文章中の検索ワードと同じところに飛びます。
- だいたい、Command + Fで検索ワード入力画面になり、リターンで飛びます。
- 次の単語に飛びたい時には、Command + Gで飛びます。
置換
検索したワードを置き換えるワードに置換します。
- 置換して、次の検索ワードに移動する方法
- 一括で全て置換する方法
の二つに分かれます。
Emmet(旧Zen Coding)
2008年頃に開発されました。
HTML,CSSを入力するの、コード補完があっても大変ではなかったですか？
最低限のHTMLを入力するのは「!」だけで良い、と情報デザイン応用演習Iに教えた気がしますが、これも実はEmmetの機能でした。
- 適当なhtmlファイルを作成(test.htmlなど)
- 「!」を打ってリターン
- bodyタグの中で「div#wrapper>(div.header+div.content+div.footer)」を打ってリターン
- contentクラスのdivの中に「ul>li*4」を打ってリターン
便利ですね。
Google検索
皆さん当たり前のようにググっていると思いますが、本当に有意義に検索できているでしょうか？
1. 必要な情報を言語化できてる？
例えば沖縄県の名護市内に旅行に来ていたとして、できれば東京にもあるようなフランチャイズ店ではなく、地元の人が経営しており地元民が通うようなお店で食事がしたいと考えます。 どう検索しますか？
2. 他の言い方はない？
検索技術を向上させたいとき、「検索技術」だと、うまく引っかかりません。どう検索しましょうか？
3. 検索結果からうまく次なる検索ワードを拾えてる？
ワードプレスに問い合わせフォームを作りたい時のやり方をどうやって調べますか？
4. 次の方法試したことありますか？
- 検索用語に「とは」を付加
- 検索語句を””で囲む(全文一致)
- サイト内検索(site:google.co.jp keyword)
この文章プログラミング以外でも当てはまるかと
プログラミングの作業において、ベテランと初心者の大きな差のひとつは「ググる回数」と言って良いでしょう。
熟練のプログラマーは、わからないことは多種多様な検索テクニックで解決します。
あるいは、よく訪れるサイトやページはブックマークしておき、時短に努めている。わからないことがあっても、自己嫌悪に陥ることもない（わざわざ落ち込んでいる時間などない）。その繰り返しが日常のため、検索力は常に高く、レベルが上がっていきます。
一方でプログラミング初心者はというと「まず調べよう」のフットワークが著しく重いというのが特長。
なぜ動きが鈍いのかというと「調べてもそのページに書いてあることの意味がわからず、再び検索すること繰り返しになるので面倒」という動機が大きい。これを「ダルい」と感じ、結果的に低い検索力のまま横ばいになるー。
「ベテランプログラマーは基礎が完成されているので、調べる内容もある程度わかったうえで調べるけど、初心者は何もかもわからないから大変」ということもあり、面倒な気持ちも確かにわかります。
しかし、何度も調べる・調べるのが面倒というのは、実はベテランエンジニアでも同じなんですよ。
初心者の方は「自分が無知だからなんでも調べているんだ…恥ずかしい…みんなこんなに調べてないだろう…」なんて思わずに「迷わず速攻Google検索」を習慣化できるように自分を方向づけましょう。
そして常に「今回たどりついたページは次回はすぐにアクセスできるようにどうするか」を常に考える。
ブックマークも良し、QiitaやZenn、あるいはtwitter、自分のブログに残しておくも良し、Evernoteに項目ごとに分けておくのも良いでしょう。
常に自分がやりやすい方法を模索したり、他のエンジニアに聞いてみるなどし、スタイルを固めていきましょうね。
https://kisopro.net/blog/programming/google-it/
まとめ
情報デザインにおいて、文字情報は非常に大きな意味を持っていて、それをなるべく簡単に操作できたり、検索できたりする能力がこれからまだまだ求められていきます。
テキストエディタやショートカットを手名付けましょう。
おまけ
ビッグニュースが昨日飛び込んできました。
Webデザインツールである「XD」を開発するAdobeが、対抗ソフトである「Figma」を買収するということです。
比較すると、Figmaが圧倒的に共同編集がしやすいと感じるようです。
Adobeはこれまでも多くの製品を買収してきました。
買収した結果、サービスがどうなるかは少し時間が経たないとわかりませんが、現状ではこのような方向性が打ち出されています。
ツールは常に進化を遂げており、ビジネスの事情によって、ツールをずっと使い続けられるかもわかりません。 時代の流れを感じながら、つかやすいツールを使っていきましょう。