post Image
No more war, No more typo!

はじめに

戦争や飢え、貧困など、クリスマスイブの今日でさえ、世界中では悲しい出来事がたくさん起きています。そのうちの一つがtypo, つまり誤植です。

screenshot.png

コードレビューでtypoが見つかるとめちゃくちゃ恥ずかしい :imp:
typoの無い平和な世界を実現したい :angel:
ということで、typoチェックをしてくれるXcode Source Editor Extensionを作りました。

Xcode Source Editor Extension

大雑把にいうと、昔あった”Alcatraz”みたいなやつです。Xcodeが便利になります。
作り方は

などを参考にさせていただきました。

NoMoreTypo

256.png

NoMoreTypoは、XcodeでソースのtypoチェックをしてくれるExtensionです。
命名部分とString部分がチェック可能で、typoが見つかると単語候補とともに該当する行の下に表示されます。
スクリーンショット 2017-12-07 12.24.13.png

typoが見つからなかった場合は、ソースの先頭にこんな感じでコメントアウトがつきます。
スクリーンショット 2017-12-07 12.25.17.png

実装

まず、上のサイトではちょっとわからなかったところを交えつつ実装の話をします。

プロジェクト名

実装ではExtensionのみを作るのではなく、macOSアプリにExtensionを載せるような形になります。なのでApplicationとExtensionで別の名前をつけないといけません。
awesome-xcode-extensionsを参考に、こんな風に命名しました。

Project: NoMoreTypoForXcode
Extension: NoMoreTypo

スクリーンショット 2017-12-07 11.23.39.png

ApplicationをNoMoreTypoにして、ExtensionをNoMoreTypo Extensionなどの命名にしているものもありました。でもNavigationにはExtensionの方の名前で表示されるので、そちらをメインにすることにします。

スクリーンショット 2017-12-07 11.26.15.png

正規表現を用いた文字列の切り出し

まずはじめに、命名部分を取り出します。

(?<=(^|\\s)(let|var|func|class|enum|struct)\\s)[a-zA-Z0-9_]+

この正規表現では、変数名/関数名/クラス名などを取得できます。命名に使えるのは英数字とアンダースコアのみなので、[a-zA-Z0-9_]+でカバーしています。
次に、取り出した命名部分を単語ごとに分けます。

[a-zA-Z][a-z]+

この正規表現では、

  • キャメル記法
    • hogeFuga
    • HogeFuga
  • スネーク記法
    • hoge_fuga

以上2つの記法を単語ごとに切り出すことができます。大文字スネーク記法のようなもの(HOGE_FUGA)は単語ごとに切り出せません。
正規表現はこちらのiOSエンジニアの正規表現入門を参考にさせていただきました。

タイポチェック

NSSpellCheckerという便利なクラスを使ってタイポチェックを行います。なんと単語の候補まで教えてくれます。
iOSにも同じような機能でUITextCheckerというものがあります。スゴイ!

Xcode Source Editor Extensionの配布方法

そのままgithubにあげます。READMEに後述のインストール手順を書いておきましょう。

使い方

  1. NoMoreTypogit clone
  2. ApplicationとExtension両方のSigningを自分のDeveloper IDに変更
    スクリーンショット 2017-12-07 15.40.42.png

  3. Product -> Archive

  4. Export -> Export App
    スクリーンショット 2017-12-08 0.04.26.png

  5. エクスポートしたNoMoreTypoForXcodeをアプリケーションフォルダに移動

  6. NoMoreTypoForXcodeを起動

  7. Enable Extensionをクリック

  8. システム環境設定の機能拡張パネルが開くので、Xcode Source ExtensionのタブでNoMoreTypoにチェックが入っていることを確認

  9. Xcodeを再起動

  10. Editor -> NoMoreTypo

    • Check typo in name -> 命名部分のtypoをチェック
    • Check typo in String -> “”で囲まれた文字列内のtypoをチェック

今後の展望

  • “”の中で\(変数)や\nなどを使っている場合、変数名やエスケープ文字まで取り出してしまうので、正規表現を改善する
  • アプリ名などの造語が引っかかってしまわないように、typo判定しないリストをつける
  • ソースコードに直接書き込むのではなく、もっといい感じにだす
    • 「コンソールに書き込めといいよね」とアドバイスをいただいたので調べてます

まとめ

NoMoreTypoでtypoなき平和なコーディングライフを :tada:
Xcodeにこんな機能があったらなあと思うものはExtensionで意外と作れる :ok_woman:

追記

NoMoreTypoのソースコードでめっちゃtypoしてました。
InNoMoreTypo.png


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。