コードレビューで
次のステップに進もう

better-codeはコーディング学習者と経験者をつなぐ、
コードレビューのプラットフォームです。

better-codeはコーディング学習者と経験者をつなぐ、コードレビューのプラットフォームです。

無料ではじめる

もっとコーディングが
うまくなりたい皆さんへ

皆さんは、コードレビューを受けたことがありますか?
書いたコードを他の人に見てもらうことで、より良いコードが書けるようになります。

では、コードレビューではどのように学べるのでしょうか?
実際に見てみましょう!

皆さんは、コードレビューを受けたことがありますか?
書いたコードを他の人に見てもらうことで、より良いコードが書けるようになります。

では、コードレビューではどのように学べるのでしょうか?実際に見てみましょう!

コードレビューをのぞいてみよう!

コードレビューを

のぞいてみよう!

レビューのお題

単価・購入個数・税率をもとに、合計金額を表示するプログラム

単価・購入個数・税率をもとに
合計金額を表示するプログラム

買い物アプリを作っています。
コードレビューお願いします!

function calculate(a, b, c) {
    alert(a * b * (1 + c));
}
calculate(100, 2, 0.08);

了解!順番にコメントしますね。


まず、変数のa, b, cは何を表していますか?
どんな計算かがひと目でわかるように、中身を表す名前にしましょう。

改善したコードを見る
function calculate(unitPrice, count, taxRatio) {
    alert(unitPrice * count * (1 + taxRatio));
}
calculate(100, 2, 0.08);

変数名を修正しました!
a単価なのでunitPriceb購入個数なのでcountc税率なのでtaxRatio
にしました。これでどうですか?

変数名を修正しました!
a単価なのでunitPrice
b購入個数なのでcount
c税率なのでtaxRatio
にしました。これでどうですか?

良くなりました!
変数の役割や、計算の内容が明確になりましたね。
これでプログラムが正しいかどうか、判断しやすくなりました。

コードは読んで理解できることが大切です。不具合が起きにくく、改修も楽になります。

わかりました。適切な名前をつけます!

では、さらにこのコードを改善しましょう!
関数calculateには、合計金額の「計算」と「表示」の2つの役割があります。
ところで、もし後で「表示はせず、特定の場合だけ合計金額から割引」したくなったら
どうしますか?

この関数を使うと表示までされてしまうので、
別にもう一つ関数を作ろうと思います。なぜですか?

そうすると、似たようなコードが増えて、管理が複雑になってしまいますね。

合計金額の計算部分は共通して使えるように、calculateの内容を合計金額の計算だけ
にしてみましょう!

さらに改善したコードを見る
function calculate(unitPrice, count, taxRatio) {
    return unitPrice * count * (1 + taxRatio);
}
alert(calculate(100, 2, 0.8));

関数の役割を「合計金額の計算」だけに修正しました。これでどうですか?
これなら、1割引にしたい部分はcalculate(100, 2, 0.8) * 0.9と書けば、
合計金額の計算処理は1つだけで済みますね。

いいですね!役割を整理したかいがありました。

基本的に、1つの関数には1つの役割だけを持たせましょう。
再利用が可能になるほか、関数の意味がわかりやすくなります。

では最後の仕上げです!
関数の役割が明確になったので、その役割を表す関数名に変えてみましょう。

うーん、今のままでも良さそうですが…
もっと良い名前がありますか?

calculateだと、計算することはわかっても、何の計算かがわかりません。
また、計算結果が表示されるか、戻り値になるかも、名前からは想像できませんね。

例えばgetTotalPriceはどうですか?
こうすると、「合計金額を戻り値として受け取る」ことが明確になります。

どんな挙動か、呼び出し側で具体的にイメージできる名前が良いのですね。

さらに改善したコードを見る
function getTotalPrice(unitPrice, count, taxRatio) {
    return unitPrice * count * (1 + taxRatio);
}
alert(getTotalPrice(100, 2, 0.08));

これで「合計金額を受け取って結果を表示する」という処理が
一目でわかるようになりました。

かなり読みやすくなりました!ありがとうございます!

適切な命名や、関数の役割をシンプルに保つ意識は、良いコードを書けるようになるため
の第一歩です。引き続き、色々な改善方法を学んでいきましょう!

コーディング学習にレビューを
取り入れよう!

コードレビューによって、自分のコードの問題点やその理由、具体的な改善案を学べます。
better-codeは、学習のためのコードレビューを無料で募集できるサービスです。


利用の流れ

ファイルをアップロードして待つだけ。
Gitの知識はいりません。

まずはレビューしてほしいファイルをアップロード

ポートフォリオや練習問題など、ファイルをアップロードします。
公開可能なファイルなら何でもOKです。

経験者からのレビューを待ちます

あなたのコードに興味を持った経験者がレビューします。
レビューをお願いしたい人を検索して、直接依頼することもできます。

納得いくまで質問しましょう

レビューにわからない点があれば、納得いくまで質問しましょう。
修正したファイルをアップロードして、再度見てもらうこともできます。

※コードの公開やレビューは誰でも可能です。システム上、学習者と経験者の区別はありません。

コードレビューを受けた

学習者の声

できなかった点が一つずつ身について、できるようになっていく実感がもてた。

考え方や進め方がわかったので、今度から自分でより良いコードが書けそう。

今の自分に足りない点や、次に学習すべきこと
教えてもらえた。

コードの良し悪しの判断軸を知り、自信のなかった点が問題ないと確信できた。

レビューのやりとりで、
あいまいだった理解が明確になってスッキリした。

自分のコードのどこがなぜイマイチなのかわかり、具体的な改善方法も知れた。

さあ、やってみよう!

さっそく手元のコードで、レビューを依頼してみましょう!
うまく書けていてもそうでなくても、人に見せると発見があるはずです。
少しハードルが高いと感じたら、まずは他の人のコードやレビューをのぞいてみませんか?

better-codeで、一緒に良いコードが書けるようになりましょう!

無料ではじめる

できなかった点が一つずつ身について、できるようになっていく実感がもてた。

考え方や進め方がわかったので、今度から自分でより良いコードが書けそう。

今の自分に足りない点や、次に学習すべきことを教えてもらえた。

コードの良し悪しの判断軸を知り、自信のなかった点が問題ないと確信できた。

レビューのやりとりで、あいまいだった理解が明確になってスッキリした。

自分のコードのどこがなぜイマイチなのかわかり、具体的な改善方法も知れた。

さあ、やってみよう!

さっそく手元のコードで、レビューを依頼してみましょう!
うまく書けていてもそうでなくても、人に見せると発見があるはずです。
少しハードルが高いと感じたら、まずは他の人のコードやレビューをのぞいてみませんか?

better-codeで、一緒に良いコードが書けるようになりましょう!

無料ではじめる

コーディング経験者の方へ

better-codeでコードレビューをしてみませんか?
レビューは学習者の力になるだけでなく、自分自身の思考が整理されたり、
新たな気づきを得られたりと、スキルアップにつながります。
ぜひ、どんなコードがあるのか見に行ってみてください。

※レビューを有料で引き受ける機能も開発予定です。

コードを見に行く

コーディング経験者の方へ

better-codeでコードレビューをしてみませんか?
レビューは学習者の力になるだけでなく、自分自身の思考が整理されたり、
新たな気づきを得られたりと、スキルアップにつながります。
ぜひ、どんなコードがあるのか見に行ってみてください。

※レビューを有料で引き受ける機能も開発予定です。

コードを見に行く