Zenn
💪

Typing.ioをやろう

2021/11/11に公開
タイピング
typing
idea

一般的なタイピングソフトでは
いくら練習しても日本語の入力速度が上がるだけで
コマンドを打ち込む速度、ソースコードを書く速度には全く貢献してくれない。

まぁ、我々はITエンジニアである前に日本人のビジネスマンであるので
日本語の文章をタイピングして意思疎通する必要があるので一定の効果は得られるが……

なのでプログラマを志望している、もしくは現役のプログラマで
コマンドやソースコードに貢献させたければtyping.ioをやるのがオススメ
とりあえずログインして無料で公開されている16コースを全てクリアするとWPMが5程度増える。
※typing.ioに於けるWPMは5文字を1ワードとした時の1分あたりの入力数
※WPM5増えるというのは筆者の体感

なんでタイピング練習なの？

タイピング速度の練習は脳と指を結びつける練習なので
一度速度を上げれば大きく遅くなる事はなく、
一生そのままなのでコスパが良い。

またタイピングしている最中は
タイピング対象の文字列に集中するので思考が止まってしまう。

タイピング速度が遅くてもIDEやエディタの設定を作り込んだり、
ターミナルのエイリアスやスクリプトを増やしくていくことで対応出来るけど、
それをする上でもやはりタイピング速度は速い方が有利。

優先順位

これを読んでいる人は現在も何かの課題を抱えていたり、
別のものを勉強したいと考えているかもしれない。
それを蔑ろにしてまで時間割いてタイピング速度を先に上げるべきなのかい？って問題

タイピング速度の練習は1時間以上ぶっ続けでやるのは辛いので、
どうせ1〜2時間もすれば音を上げてしまう。
なので毎日コツコツと1時間弱程度の時間を使って、その後に課題や学習に時間を使えば良いと思っている。

それに今気になっている・勉強しているその技術は
REPLやターミナルで試せばもっと早く理解が進む可能性もある。

その時にタイピングが遅いと思考も止まる。
次第にREPLやターミナルで試す事が億劫になり、
ただ書籍や記事を読むだけとか、時間を掛けて大仰なスクリプトを作ったりするといった
非効率的な手段に走りがちになってしまう。

そういう辛さを感じているならtyping.ioで暫くプレイしてWPMを調べてみよう
アベレージWPM40未満なら、WPM40超えるまで集中的にトレーニングした方が後々有利かもね？
WPM40はドットインストールの動画のお兄さんが解説しながらシュババと入力するのと同じくらいの速度
あの速度が出るとREPLで試す事が本当に楽しくなるし万能感得られるよ。超オススメ

私はWPM30から50に増やしてターミナル操作が楽になったことで暫くおやすみしてたけど
最近Vimを使っているのでもっとタイピング速度が欲しいと感じて再開した、目指せWPM80！

指のストレッチ

プログラマは大文字入力、各種記号を多く入力する
なので他の職種と比べて圧倒的な量Shiftキーを押す事になる
状況に応じて左右の小指を酷使することになる

またキーボードの右側に有用な記号が集中しており
右手の小指や薬指を巧みに動かしてサクサク入力していく必要があるが
意識に指が追いつかず速度が出ない

これは楽器の演奏に解決の為のノウハウがある
小指や薬指が動かないから演奏に使いませんという事は許されない
なので指を速く動かす為のストレッチやトレーニングが豊富に存在する

特に中指・薬指・小指の分離に関わるストレッチはとても有効
キーボードを触る前に下記の動画のストレッチをするだけでも雲泥の差になる

ギタリストのための、中指と薬指の分離をよくするストレッチ - YouTube

ユーザースタイルシートの適用

デフォルトのtyping.ioのタイピング画面のUIは一見良さそうに見えるが、
ハードにやり込むと下記のようなダメな所が見えてくる

  • 白背景が地味にキツい
  • マウスカーソル邪魔
  • 文字が小さい
  • コードの自動折り返しがない
    1行が画面の幅を超える時はマウスを使って画面を横にスクロールしなければならない

この辺の作りはユーザースタイルシートを使うことで解決できる。
私はユーザースタイルシート適用の為、Chromeでアプリを入れて導入した。

Stylus - Chome ウェブストア

修正内容は下記

  • 入力中画面の背景を黒基調(ターミナル風)に変更
  • 入力を開始するとマウスカーソルが消えるように変更
  • 文字を巨大化
  • コードの自動折り返しを追加
  • Enterキーの可視化
  • 邪魔な< previousとskip >のリンクを右へ移動、フォントサイズも縮小化
  • Typoをした際の挙動を変更
    カーソルを黄色に変更
    Backspaceで消す必要のあるキー数分、右側に赤背景の文字を追加

適用先: 次で始まるURL, https://typing.io/lesson/

.lesson {
    background: #222;
    color: #FFF;
}
.code {
    margin: 0 0 0 4%;
    width: 92%;
    white-space: pre-wrap;
    font-size: 18px;
    cursor: none;
}
.code .c {
    color: #888 !important;
}
.code .initial,
.code .revert,
.code .collateral {
    color: #EEE;
}
.code span.char-active {
    background-color: #27841B;
    outline: 1px solid #27841B;
}
.paused .code span.char-active {
    background-color: #AA640D;
    outline: 1px solid #AA640D;
}
.code span.return {
    visibility: visible;
}
.code span.return:before {
    background-color: initial !important;
    color: #666 !important;
}
.repeating  {
    left: auto;
    right: 0;
    bottom: 40px;
    padding: 0;
    font-size: 14px;
}

/* typo */
.lesson-wide-mode .code {
    margin: 0 0 0 4%;
    width: 92%;
    display: block;
}
.code span.incorrect {
    background-color: #992;
    outline: 1px solid #992;
}
.code span.collateral {
    background-color: #E63D3D;
}
.code span.incorrect + span.char-active,
.code span.collateral + span.char-active {
    background-color: #E63D3D;
    outline: 1px solid #E63D3D;
}
.code span.char-active:after {
    display: none; 
}

/* typed */
pre .p,
pre .pln {
    color: #EEE;
}
pre .t,
pre .typ {
    color: #7F0;
}
pre .k,
pre .kwd {
    color: #4DF;
}
pre .l,
pre .lit {
    color: #F0C;
}
pre .d,
pre .dec,
pre .v,
pre .var {
    color: #C0F;
}
pre .P,
pre .o,
pre .C,
pre .pun,
pre .opn,
pre .clo {
    color: #CCC;
}

/* finished */
.lesson.paused .code {
    cursor: auto;
}
.transition .code span {
    color: #CCC;
}
.finished .code span.wasincorrect {
    color: #FF4b4b !important;
}
.finished .code span.wascollateral {
    color: #FFC406;
}

キーバインドの変更

JIS配列のキーボードを使っている場合
アンダースコアの入力はShift + \になる。
スネークケースのアンダースコアの入力の為に毎回Shiftキーを押すのは非常に手間。

MacbookのJIS配列の場合、
右下のキーはShiftキーの状態に関わらず_になる。

Linuxの場合

# 現在の設定の確認
$ xmodmap -pke | grep " 97"
keycode  97 = backslash underscore backslash underscore

# 設定変更
$ echo "keycode 97 = underscore underscore underscore underscore" > ~/.Xmodmap
$ xmodmap .Xmodmap

$ xmodmap -pke | grep " 97"
keycode  97 = underscore underscore underscore underscore

参考記事: Ubuntuでアンダースコアとバックスラッシュを入れ替える - x**3な人生

Windowsの場合

MicroSoftが出しているPowerToysを利用する。

Key Remapから「¥」を「Shift + ¥」に交換する
※¥記号はWindowsキーボードではShiftの横、Backspaceの横の2種類あり、
種類ボタンを押した後に「選択したキーボードのキーを押してください」で
「Shift横¥」を入力しても「Backspace横¥」が入力された事になる超残念設計なので、
そこから3項目下にある¥を選択する必要がある。

Discussion