diff --git a/static/js/mypage.js b/static/js/mypage.js
index c0f81fe1..31410992 100644
--- a/static/js/mypage.js
+++ b/static/js/mypage.js
@@ -1,4 +1,3 @@
-/* 各レベルのクリア率を取得 */
 function getPercentageOfClear(user_id) {
     for (let i = 19; i >= 1; i--) {
         const selector = 'div#slv-'+i+' a span.bar';
@@ -22,108 +21,3 @@ function getPercentageOfClear(user_id) {
         }
     );
 }
-
-/* クリア状況を取得 */
-function getClearStatus(music_id, user_id) {
-    const selector = 'tr#music-'+music_id;
-    $.ajax({
-        url: SERVER_URL+'api/get_clear_status/'+music_id+'/',
-        type: 'GET',
-        data: {
-            user_id: user_id
-        }
-    })
-    .then(
-        function(response) {
-            $(selector).addClass(response.clear_status);
-            $(selector+' script').remove();
-        },
-        function(err) {
-            console.log(err);
-        }
-    );
-}
-
-/* BAD数を取得 */
-function getBadCount(music_id, user_id) {
-    const selector = 'tr#music-'+music_id+' .bad_count';
-    $.ajax({
-        url: SERVER_URL+'api/get_bad_count/'+music_id+'/',
-        type: 'GET',
-        data: {
-            user_id: user_id
-        }
-    })
-    .then(
-        function(response) {
-            let bad_count = '-';
-            if (response.bad_count != null) {
-                bad_count = response.bad_count;
-            }
-            // BAD数を描画
-            $(selector).text(bad_count);
-        },
-        function(err) {
-            console.log(err);
-        }
-    );
-}
-
-/* メダルを取得 */
-function getMedal(music_id, user_id) {
-    const selector = 'tr#music-'+music_id+' .medal';
-    $.ajax({
-        url: SERVER_URL+'api/get_medal/'+music_id+'/',
-        type: 'GET',
-        data: {
-            user_id: user_id
-        }
-    })
-    .then(
-        function(response) {
-            if (response.medal && response.medal !== 12) {
-                // 未プレイ以外ならメダルを描画
-                const medal = response.medal;
-                console.log(`${STATIC_URL}img/medal/${medal}.png`)
-                $(selector+' .loading').remove();
-                $(selector+' img').attr('src', `${STATIC_URL}img/medal/${medal}.png`);
-                $(selector+' img').attr('width', '18');
-                $(selector+' img').attr('height', '18');
-                $(selector+' script').remove();
-            } else {
-                $(selector).text('-');
-            }
-        },
-        function(err) {
-            console.log(err);
-        }
-    );
-}
-
-/* 最新の更新日時を取得 */
-function getLatestUpdatedAt(music_id, user_id) {
-    const selector = 'tr#music-'+music_id+' .updated_at';
-    $.ajax({
-        url: SERVER_URL+'api/get_latest_updated_at/'+music_id+'/',
-        type: 'GET',
-        data: {
-            user_id: user_id
-        }
-    })
-    .then(
-        function(response) {
-            let updated_at = '-';
-            if (response.is_active) {
-                // ゼロパディング
-                response.day = ("0" + response.day).slice(-2);
-                response.minute = ("0" + response.minute).slice(-2);
-                updated_at = response.year+'/'+response.month+'/'+response.day+' '+response.hour+':'+response.minute;
-            }
-            // 更新日時を描画
-            $(selector).text(updated_at);
-        },
-        function(err) {
-            console.log(err);
-        }
-    );
-}
diff --git a/users/templates/users/mypage.html b/users/templates/users/mypage.html
index 0f486f7a..34a5e459 100644
--- a/users/templates/users/mypage.html
+++ b/users/templates/users/mypage.html
@@ -77,24 +77,28 @@ <h2 class="updated-recently page-header">
             <th>更新日時</th>
         </thead>
         <tbody>
-            {% for recent in recent_medal %}
-            <tr id="music-{{ recent.music.id }}">
-                <script>$(function() { getClearStatus({{ recent.music.id }}, {{ selected_user.id }}); });</script>
-                <td class="level">{{ recent.music.level }} ({{ recent.music.sran_level }})</td>
-                <td class="title"><a href="{% url 'main:ranking_detail' recent.music.id %}">{{ recent.music.title }} ({{ recent.music.difficulty }})</a></td>
-                <td class="bpm">{{ recent.music.bpm|default:'-' }}</td>
-                <td class="medal">
-                    <img>
-                    <script>$(function() { getMedal({{ recent.music.id }}, {{ selected_user.id }}); });</script>
-                </td>
-                <td class="bad_count">
-                    <script>$(function() { getBadCount({{ recent.music.id }}, {{ selected_user.id }}); });</script>
-                </td>
-                <td class="updated_at">
-                    {{ recent.updated_at|date:"Y/n/d G:i"|default:'-'}}
-                </td>
-            </tr>
-            {% endfor %}
+        {% for data in recent_data %}
+        <tr id="music-{{ data.music_id }}" class="{{ data.clear_status }}">
+            <td class="level">{{ data.level }} ({{ data.sran_level }})</td>
+            <td class="title"><a href="{% url 'main:ranking_detail' data.music_id %}">{{ data.title }} ({{ data.difficulty }})</a></td>
+            <td class="bpm">{{ data.bpm|default:'-' }}</td>
+            <td class="medal">
+                {% if data.medal and data.medal != 12 %}
+                <img src="{% static '' %}img/medal/{{ data.medal }}.png" width="18" height="18">
+                {% else %}
+                -
+                {% endif %}
+            </td>
+            <td class="bad_count">
+                {% if data.bad_count == 0 %}
+                0
+                {% else %}
+                {{ data.bad_count|default:'-' }}
+                {% endif %}
+            </td>
+            <td class="updated_at">{{ data.updated_at|date:"Y/n/d G:i"|default:'-' }}</td>
+        </tr>
+        {% endfor %}
         </tbody>
     </table>
 {% else %}
diff --git a/users/views/mypage.py b/users/views/mypage.py
index 66ea674a..ce4b2120 100644
--- a/users/views/mypage.py
+++ b/users/views/mypage.py
@@ -1,7 +1,7 @@
 from django.http import HttpRequest
 from django.shortcuts import get_object_or_404, render
 
-from main.models import Medal, Sran_Level
+from main.models import Bad_Count, Extra_Option, Medal, Sran_Level
 
 from users.models import CustomUser
 
@@ -13,11 +13,36 @@ def mypage(request: HttpRequest, username: str):
 
     s_lv_range = range(Sran_Level.MAX, Sran_Level.MIN - 1, -1)
 
-    recent_medal = Medal.objects.filter(user=selected_user).order_by('-updated_at')[:20]
+    recent_medal = Medal.objects.filter(user=selected_user).order_by('-updated_at').select_related('music',
+                                                                                                   'music__level',
+                                                                                                   'music__sran_level',
+                                                                                                   'music__difficulty')[
+        :20]
+
+    recent_data = []
+    for medal in recent_medal:
+        music = medal.music
+        bad_count = Bad_Count.objects.filter(user=selected_user, music=music).first()
+        extra_option = Extra_Option.objects.filter(user=selected_user, music=music, hard=True).first()
+
+        clear_status = medal.get_clear_status(bad_count=bad_count, extra_option=extra_option).value
+
+        recent_data.append({
+            'music_id': music.id,
+            'level': music.level.level,
+            'sran_level': music.sran_level.level,
+            'title': music.title,
+            'difficulty': music.difficulty.difficulty_short(),
+            'bpm': music.bpm,
+            'medal': medal.medal,
+            'bad_count': bad_count.bad_count if bad_count else None,
+            'updated_at': medal.updated_at,
+            'clear_status': clear_status,
+        })
 
     context = {
         'selected_user': selected_user,
         's_lv_range': s_lv_range,
-        'recent_medal': recent_medal
+        'recent_data': recent_data
     }
     return render(request, 'users/mypage.html', context)