【雑談】エディター何使ってる？カスタムCSSやJavaScriptの編集に便利なエディターやおススメの設定など、ゆる～く雑談

quake2moon

みなさん、カスタムCSSやJavaScriptの編集って、何を使ってますか?

幅広いユーザースキルの中、おススメのエディターや設定、その他など、ゆる～く雑談を交えながら共有できたらと思うんですよね。

------エディターを挙げる際のフォーマット-------------------
【JavaScript】
エディター：〇〇
使用理由、おススメポイントなど

〇〇
〇〇

【カスタムCSS】
エディター：〇〇
使用理由、おススメポイントなど

〇〇
〇〇

quake2moon

【JavaScript】
エディター：JSFiddle（クラウド型、未登録版）
使用理由、おススメポイントなど

コードファイルを生成しない（vivaldiではコードのコピペだけで済む）から
コードを成型したい時にボタンを押してインデント、これが密かに気に入ってる
未登録版だから？煩わしいログインをせず、ブラウザですぐに起動するから

【カスタムCSS】
エディター：メモ帳
使用理由、おススメポイントなど

エクスプローラーで新規作成ですぐに出来る
vivaldiで「ルールのコピー」から、該当ファイルにすぐに貼り付け→上書き
色々とスピーディで手軽だから

quake2moon

そして今、以前使っていた vscode をまた試そうかと思っている。

setting.json は、vscodeのフォルダ内にそのファイルがあって、それを直で開いて設定を書き込むイメージだったが、どうも違うみたいだ？

vscodeを開いて、設定画面とかからいじれるという感じみたいだ？　← 今ココ

そこへ、写真の.jsonコードを貼り付ければいいってことかな？

HongKong3

@quake2moon

vscodeのフォルダ内にそのファイルがあって、～

ポータブル版として実行すればその構成にできます。
ほとんど弄ってないならアンインストールして切り替えるのもアリかもです。

インストーラー版使った場合、Windows恒例のMyDocument以下に散らかす方式＆アンインストールしても設定ファイルとか消えないヤツですね

歯車アイコンから「設定画面」出して右上の「設定(JSON)を開く」ボタンで直接JSONファイル呼び出せるので、ファイルの場所を意識しなくても良い造りにはなってます。

quake2moon

javascriptを始めた頃、一番初めに手を出したのがvscodeでしたね。
正直、javascriptの事も分かってないのに、vscodeもプラグイン入れたり、設定ヶ所がやけに多かったりで、第一印象が良くなかったんですよね…
おまけに、たしかサーバーとのやり取りを擬似的に作るプラグインもあったりで、え、そんなことまでしていいの？
って状態に陥り、vscodeから離れた記憶が…
そして、読み進めていた本のサーバー関連の章も未だ読み進めておらず…

HongKong3

エディター：サクラエディタ

おススメできないポイント

標準の言語対応リソースが貧弱
CSS2とか現行エディタとしては割と致命的なレベル……
Windows伝統の真っ白い窓枠
目の端に白いのあるとダーク系配色が微妙に使いづらいです
標準の入力補完は前方一致検索による単語候補のみ
Windows専用

それでも使用する理由

軽快な動作
自家拡張が容易
所定の場所にテキスト形式のファイル用意すればほぼ完了
(シンタックスハイライト(色分け)だけは面倒)
- 言語の仕様変更等は気付いたその場で加筆・修正・即更新
- ゲームのMOD用独自スクリプトみたいな、どマイナー言語でも対応可能ｗ
- エディタとして欲しい機能はマクロ作れば大体カバーできる
キーワードヘルプ機能
入力補完や単語選択時、キーワードに対応したヘルプをポップアップ表示するヤツですが、自由に編集できるためカンペ辞書と化してます
本体機能をすべて網羅したHTMLヘルプ付属
ネットに依存する機能も無いので(Windowsであれば)常に十全に使える
日本語完全対応、むしろ日本語オンリー

ウチでは各言語用リソース・マクロ・入力補完まで自作して「私による私のための私専用テキストエディタ」と化してますが、人にはまず勧められませんね

※ キーワードヘルプ機能を追記、思った以上に助けられてました…

> @quake2moon
プログラミング関連の本とか読んだこと無いんですが、趣味でやる分には興味あるとこだけ掻い摘んどいて、他は必要になった時や暇潰しとして読む。くらいで良いんじゃないですかね～。

プラグインや拡張も同様に、欲しい機能ややりたい事からやってみる方が楽しめると思います

quake2moon

@HongKong3

興味あるとこだけ掻い摘んどいて、他は必要になった時

本をまだ半分しか読み進めて無かった時。
なんとなく練習でタイピングゲームっぽいヤツ作ってみよ～とか思って。
vscodeで見切りでやり始めたんですよね。

「こういう機能はどうやったら表現できるんだろ～？」
とか思った時、そこで本の先を読んだり、WEB検索したり。
「そうか、DOMか、オブジェクトか」とかねｗ

それで個人的には、ネームレジストくらいは入れてみたいな～？と。
そうすると、サーバー側のファイルに記録していくようになるのかな？
とか考えると、サーバーとのやり取りももう少し知らんといけないかな？
はたしてそれであってるのか分からんけどな？ｗ　←今ココ

ま、そんなわけで、サーバーの章は、読み進めていこうかな～？
って感じです

とりあえず、vscode に、LiveServer とかいうプラグインがあるらしい？
ので、先ずはそれを入れる感じかな？

HongKong3

ネームレジストくらいは入れてみたいな～？
そうすると、サーバー側のファイルに記録していくようになるのかな？

なんか色々すっ飛ばしてるような気がします

localStorageやCookieのようなローカルでデータ読み書きできる仕組みはあるので、そちらで実装してから対象をサーバー上に移す感じじゃないでしょうか。

もしネット上でのゲーム公開まで視野に入れる場合、現行だとCanvas使って各種ライブラリ盛り盛りで作るようなので、むしろその辺の知識なくても作れちゃう気がしますｗ

quake2moon

もしネット上でのゲーム公開まで視野に入れる場合

いや、それは視野には入ってないですｗ
こういう機能付けたいな～？の1つに、ネームレジストがあるだけなんでｗ

で、なぜネームレジストなのか？というと、昔のゲームセンターのゲームは、そこまでがセットでしたから。
そこに憧れ、懐かしみがあるわけです。
ま、あくまで、練習用のプログラムですよ～

ローカルでデータ読み書き

しかし、クローズ状態の昔とは違い、通信を絡めるとそう簡単には行かないか。
先ずはローカルでやる感じにしようかな？

現行だとCanvas

先日、なんかちょうど、書店でCanvasという物がある事を知ったんだよな～そういえば。
そっちも視野にいれて見るか?
出来る事が増えそう

HongKong3

ブラウザ絡みでデータを扱う場合、文字列で扱う事がメインとなると思うので 正規表現 はしっかり扱えるようにしとくと良いですよ。

Canvas は文字通り画像を扱うためのDOM部品なのですが、内部操作はHTMLやJSとはまた別の描画用コマンド使います

昔ながらのDOMで構成された所謂CGIゲームは、今や絶滅危惧種っぽいですねｗ

quake2moon

一日で閲覧数、結構伸びたな…
【Html、CSS、Javascript】
エディター：CodeSandbox　クラウド型です

使用理由、おススメポイントなど

見た目がスタイリッシュでカッコイイ
githubと連携可
ReactやVueなどが初めから使えて、環境構築に手間がかからない
enbedで、埋め込み用やリンク用のURLが簡単に生成できる

デメリット

githubと連携している場合、起動までに時間が掛かる
githubにログイン→CodeSandbox用でリンク生成→通信して→Forkして→Linkして→やっと使える
したがって、Vivaldi用のちょっとしたコード作成には不向き
github通さないなら、CodeSandboxのログインだけで済むかもですが。
でもまあ、個人のプログラム用かな？とは思います。

@HongKong3

正規表現…
なにか、\^とかなにやら使った記憶が…
まあ、まだよく理解していないですね…
そこも使えるようにしておきます…

HongKong3

正規表現

無いとコード量10倍以上なんじゃないかってくらいの有能ツールです。
ほとんどのエディタ・言語で使えるので、学習コストは絶対無駄になりません。

一気に全て覚えるのはまず無理なので、Vivaldiのメモみたいな確認しやすいとこにカンペ用意しとくと良いですよ

vscodeだと正規表現を視覚化する拡張機能もあるようなので、使ってみるのも手かもですね

quake2moon

おや？
CodeSandboxがメチャクチャ重い？
vscodeもしばらくぶりにいじったら、使い方を忘れているのか？動きがなんか変だ？

…そちらは一先ずおいておいて…
ちょっとJSFiddleが今まで未登録だったけど、登録して使って見るか…？

@HongKong3

正規表現

しばらくぶりに、初めて作ったテキストゲームのJSファイルの中身をのぞいてみました

/*得点、スペースをワード数へ加算*/
if (righty.match(/\s/g) != null) {
  wor = wor + (righty.match(/\s/g).length)
}

/*得点、ハイフンをワード数へ加算*/
if (righty.match(/-/g) != null) {
  wor = wor + (righty.match(/-/g).length)
}

/*得点、大文字数*/
if (righty.match(/[A-Z]/g) != null) {
  oom = (righty.match(/[A-Z]/g).length);
} else {
  oom = 0;
}

/*漢字数*/
if (righty.match(/[\u3400-\u9FFF]/g) != null) {
  kan = (righty.match(/[\u3400-\u9FFF]/g).length) * 3;
}

なんかもう、変数名が素人丸出し…:ナゾだ
if文で !null 判定までする必要があったのか？ナゾだ
正解判定が出た後なのに、わざわざスペースやハイフンを検知する必要があったのか？ナゾだ
っていうか、スペース、ハイフン無いときにelseで0を入れなきゃいけない気がしてきたナゾだ
漢字の検知は、この前の UNIコード っぽいのを使ってる？ナゾだ

さて、こんな小話 はさておき(笑)
コピペではありますが、正規表現も必要に応じて使ってたみたいですね～

ただ、正規表現一覧みたいなページを見ると、かなり色々ありますね～

Vivaldiのメモみたいな確認しやすいとこにカンペ

とりあえず、どんな事が出来るのか、さらっと項目だけなんとなくカンペで見て、必要になったら該当ページへ飛ぶ
って感じでしょうかね～？

HongKong3

@quake2moon
そもそも文字種毎にカウントして何しようとしてるのかとか気になる所ですねｗ

正規表現は完成品見るともう完全に呪文なんですが、作る時は徐々に条件付け足してく感じで慣れればサクサク使えますよ
（後で見返すとやっぱり呪文なんですけどｗ）

さっき気付いたんですが vscode のテキスト検索、正規表現の練習用に良いかもです。
リアルタイムでヒット範囲表示してくれるんで、デフォルトでもすごく解りやすいですね

quake2moon

そもそも文字種毎にカウントして何しようとしてるのか

それは、得点に関係してるんですよね…
正解が出た時に、基本的には 「正解ワードの文字数 × 100pts」 なのですが、
（他にも残りタイム点加算とか、ボーナス加算とかありますけども）
アルファベットの大文字小文字、ひらがな漢字など、文字単価が同じだとアンフェアな感じがしましたからね～

ま、厳密な得点システムではなく練習用だったんで、各単価の決め方も適当なんですけどねｗ

完全に呪文

そう思います、だから苦手意識が…

vscode のテキスト検索、正規表現の練習用に良いかも

久々にいじったvscodeが、使い方を忘れてしまったのか？
なんかいう事聞かない風…
なので、もう少し調整したら、使って見ようかな？

今丁度、練習ってことで一つコード（ネームレジストではない、あれはしばらく手を付けない）を組んでみようかと考えているし…

そういえば、CodeSandbox や vscode や github は、それぞれ 連携が出来る んじゃなかったでしたっけ？
その辺りはエディター選びのポイントの一つになるかもですね～

HongKong3

@quake2moon

久々にいじったvscodeが、使い方を忘れてしまったのか？
なんかいう事聞かない風…

コマンドパレット（Ctrl+Shift+P）から「一時プロファイルの作成」試してみるのはどうでしょうか。
ソッチで問題出ないようなら、何か設定や拡張機能が原因って事なんだと思います

もし練習用コード未定でしたら、簡易的なMarkdownパーサー(HTML化)とかどうでしょうか？
完成形のお手本はそこら中転がってますし、HTMLファイル内のtextareaにMarkdown記述してボタン押したら整形して適当なDIVタグに放り込むって感じでテスト環境構築も簡単ですｗ

Github連携・・・、Vim(gVim)では使ってたんですが、連携用にごちゃごちゃファイル増えるわ、鏡越しみたいなもどかしさあるわで「ブラウザからアップが一番楽！」とか思ってます

それなりの規模のプロジェクトやチーム開発なら必要な措置かもですが、ホビーユースじゃ持ち腐れって感じなんですかねぇ…
（エディタ上のターミナルの使い道すら分からないレベルですしｗ）

そのあたり識者の方のご意見いただけますと大変ありがたいです

quake2moon

皆さん、お勧めエディターがありましたら、お気軽に書き込みをお願いします。

@HongKong3

vscodeで作った例のタイピングゲームファイルを久々にvscodeで開いみたんですが、

run codeすると、名前が違う！とか言われて動かない
変更して保存しようと思うと出来ないと言われる
でもhtmlファイルを普通にブラウザで開くと問題なく動く
他に新規ファイルを作ってみても、動作が怪しいっぽい

他にもあるかもしれませんが、ちょっと色々怪しいです。
そんな訳なので、一度、基本的なvscodeの取説 を読んで、基本的な事を色々やってみようと。
その延長で一時プロファイル？というのもやってみようと思います。

もし練習用コード未定でしたら、簡易的なMarkdownパーサー(HTML化)

ご提案、ありがとうございます

とりあえず今手を付け始めたのが、↓コレです。
「任意の4つの数字を四則演算して希望の数字（10とか）になる組み合わせを見つける」

色々難儀しているのですが、別に締め切りがあるわけじゃないので…
ぼちぼちやっていこうと思います
そのあたりがひと段落したら、ご提案頂いた「Markdownパーサー(HTML化)」に手を付けて行こうと思います。

Github連携

自分はGithubの事をよく分かっていません！
単なる コードファイルの置き場所 と思っています

1.vscodeだと、PCにファイルが溜まっていくのか…
2.クライドエディターだったらいいよね！
3.CodeSandboxがオシャレじゃん！
4.なんかGithubとかいう やり手でカッコ良さそうな集団 がいるらしいよ？
5.両者連携できるって！決り！
6.連携の過程を踏むのが面倒くさいわ、コレ　← 今ココ

まあ、宝の持ち腐れなのは間違いないっすｗ

HongKong3

やり手でカッコ良さそうな集団 の 「貯まり場」 でしょうか
プロジェクトに対して 不特定多数の開発者 が参加可能なんですね。

ただ 不特定多数 なので、Aさんが更新したファイルをBさんが別の更新したファイルで上書きしちゃう事態も起こりうるわけです。
そうならないように「既にこういう更新されてるから、いい感じにミックスしてアップし直し！」てな指摘する 鍋奉行 みたいな機能があります。

この鍋奉行が融通効かない感じで苦手なんですよねぇ

vscode程の高機能エディタに 「マクロ機能」 が無い理由わかったような気がします。

デフォルトの入力支援が利き過ぎて、マクロ実行中でも余計なお世話発動してますね・・・
散々バグ探ししてコレですよ

quake2moon

@HongKong3
Vim(gVim) とは、エディターですか？
どんな感じですか？

HongKong3

@quake2moon
いくつかプラグイン（拡張）作って遊んだ程度のニワカの所感になりますが・・・

エディター：Vim

お勧めポイント

CUIベースで動作が軽い
長い歴史と熱烈な支持層による豊富なプラグインやコミュニティ
指が完全にキーを覚えれば、視線移動並みの速度でカーソル操作可能
ターミナル機能搭載…というかエディタ機能を超強化したターミナル？

注意点

CUIベースなのでGUIアプリに慣れきってると抵抗あるかも
キー・コマンドが分からないと本当に何もできない
反面、操作に慣れるとドコでも何でも Vim同様のキー操作をしたくなる
(ブラウザやエディタの拡張として結構な確率でVim風キー操作のがあります)

世界に名立たる変態エディタ(褒め言葉)です。

操作が独特で「テキストエディタ」というより「テキストデータ編集ソフト」と言った方がしっくり来るような気がしますね。
感覚的にもExcel等の表計算ソフトの方が近いかも？

正当系譜の「gVim」と若干モダン寄り(?)に派生した「NeoVim」というのがあるようです。

数ヶ月空くようなホビーユースだと、キーとか忘れまくって本気で何もできませんでしたｗ

【雑談】エディター何使ってる？カスタムCSSやJavaScriptの編集に便利なエディターやおススメの設定など、ゆる～く雑談

エディター：サクラエディタ

おススメ できない ポイント

それでも使用する理由

エディター：Vim

お勧めポイント

注意点

おススメできないポイント