関連する観点として 関数→アロー、function to arrow、開発ツール を確認し、結果をコピーして別の作業に使えます。
使い方
入力欄へ、名前付き function 宣言を含むコードを貼り付けます。
結果欄で function name(...) { が const name = (...) => { に変わった箇所を確認します。
宣言前呼び出しや this の値が変わる可能性があるため、呼び出し順と使い方を見直します。
必要に応じて末尾セミコロンを足してからコピーします。
入力例・出力例
INPUT
function total(items) {
return items.length;
}
OUTPUT
const total = (items) => {
return items.length;
}
名前付き宣言の開始部分だけを置換することを node -e で検算しました。
よくある利用シーン
小さなユーティリティ関数を const アロー関数のスタイルへ寄せたいとき。
名前付き function 宣言だけを対象にし、匿名コールバックは触らず残したいとき。
hoisting が消えても問題ない範囲を、変換後コードで確認したいとき。
this を使わない関数を、モダンな書き方へ手早く下書きしたいとき。
結果確認のポイント
構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。
関数→アロー、function to arrow、開発ツールの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
本番の秘密情報、APIキー、パスワードは入力しないでください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
関数→アローの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある質問
function 宣言をアロー関数に変換するとき、this バインディングはどう変わりますか？
通常の function は呼び出し時に this が動的に決まりますが、アロー関数は定義時の外側スコープの this を静的に引き継ぎます（レキシカル this）。メソッドとして呼ばれることを前提とした関数（例: オブジェクトリテラルのメソッド）をアロー関数に変換すると this が意図と異なる値になるため注意が必要です。
function 宣言はホイスティングされますが、アロー関数に変換するとホイスティングはどうなりますか？
function 宣言は宣言前に呼び出せますが（ホイスティング）、アロー関数を const/let/var に代入した形式では宣言より前に呼び出すと ReferenceError（const/let の場合）または undefined（var の場合）になります。変換後は関数の使用箇所が定義より後にあるか確認してください。