Moment.js nedir ve nasıl kullanılır?

JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js’tir. Peki Moment.js nedir ve programlama dünyasında ne için kullanılır?

Programlama yaklaşımlarında karşılaşılan sorunlardan biri sıklıkla tarihler ile ilgilidir. Kullanıcı deneyimini artırmak ve bir yazılım ürününü daha iyi seviyelere taşımak için tarihleri doğru bir şekilde formatlamak ve son kullanıcıya gösterebilmek çok önemlidir. Örneğin “Bugün” ibaresini kullanmak, bugünün tarihi “07.02.2024” ise, yani “GG.AA.YYYY” formatındaysa daha doğru bir yaklaşımdır. Çünkü bugünün tarihini “GG.AA.YYYY” olarak göstermek, kullanıcıya bugünün tarihinin ne olduğu sorusuyla gereğinden fazla meşgul olmasına yol açabilir. Bu da yazılım ürünüyle etkileşime giren kullanıcılar için (eğer sayı büyükse) ciddi bir zaman kaybı anlamına gelir.

- ADT Çözümleri -

Advanced Dynamics Teknoloji'de işletmeler için dış kaynaktan hizmet modeliyle Yönetilen Hizmetler çözümleri sunuyoruz.

JavaScript kütüphaneleri, web geliştirmede yaygın veya karmaşık görevler için kullanılabilecek önceden yazılmış kod sağlamak üzere geliştirilmiştir. Geliştiricilerin zamandan tasarruf etmelerine, daha az kod yazmalarına ve tarayıcılar arası uyumluluk sağlamalarına yardımcı olurlar. Popüler JavaScript kütüphanelerine örnek olarak jQuery, React, Lodash, Swiper.js ve Moment.js verilebilir. Peki Moment.js hangi tür senaryolarda kullanılır?

Eğer yaygın sosyal medya uygulamalarından biri olan YouTube’u deneyimlediyseniz, izlediğiniz videonun meta açıklamasında “X saat önce” veya “X hafta önce” şeklinde, izlediğiniz videonun ne zaman yayınlandığını ve üzerinden ne kadar geçtiğini gösteren tarih bilgisine muhakkak göz gezdirmişsinizdir. İşte kullanıcı deneyimini artıran bu türden tarih hesaplamaları, daha önceden yayınlanan kütüphaneler vasıtasıyla kolaylıkla çözülür ve geliştiricilerin zamandan tasarruf etmelerini sağlar.

• JavaScript’te değişkenler ve aralarındaki farklar: var, let & const
• addEventListener ve windows.onload arasındaki fark nedir?
• React nedir ve hangi projelerde kullanılmalıdır?
• React ve React Native arasındaki fark nedir?
• JavaScript ile HTML sayfadaki kelimelere otomatik sınıf nasıl atanır?

Moment.js nedir?

Moment.js, JavaScript’te tarih ve saatleri ayrıştırmaya, doğrulamaya, değiştirmeye ve biçimlendirmeye yönelik bir kütüphanedir. Çoklu yerel ayar desteğini, göreli ve takvim zamanını ve çeşitli biçimleri ve seçenekleri destekler.

Belirli bir tarih formatını, örneğin bir tablonun belirli bir sütunundaki tarih verilerini alarak Moment.JS yardımıyla istediğiniz bir formata dönüştürebilirsiniz. Örneğin, diyelim ki bir projede tablonuzun birinci sütununda GG.AA.YYYY SS:DD formatında tarihler bulunduruyorsunuz ve bu tarihlerin ne kadar eski olduğunu, yani içerisinde bulunduğumuz zamandan ne kadar eski olduğunu hesaplamak ve bir sayfanıza “X dakika önce” veya “X saat önce” şeklinde yazdırarak kullanıcı deneyimini daha iyi bir seviyeye taşımak istiyorsunuz. Böylesi bir sorunu Moment.js ile oldukça basit bir şekilde çözmeniz mümkündür. Moment.js Türkçe’nin yanı sıra çeşitli dilleri de destekler ve bu kütüphanelerinin CDN linklerini kullanarak veya doğrudan npm ile yükleyerek tarihleri biçimlendirebilir ve istediğiniz formata dönüştürebilirsiniz.

Moment.js kullanım senaryoları

Moment.js, JavaScript’te tarih ve saatle ilgili çeşitli görevler için kullanılabilir, örneğin:

• Dizelerden veya sayılardan tarih ve saatleri ayrıştırma ve doğrulama
• Ekleme, çıkarma veya birim ayarlama yoluyla tarih ve saatlerin değiştirilmesi
• Tarihleri ve saatleri farklı yerel ayarlara, biçimlere ve seçeneklere göre biçimlendirme
• Geçerlilik, eşitlik, farklılık veya ilişki kontrolü için tarih ve saat sorgulama
• Eklentiler veya kancalarla (hook) tarih ve saatleri özelleştirme

AngularJS, React, Vue.js, Ember.js, Meteor, Express, Laravel, WordPress ve daha pek çok web uygulamasında ve çerçevelerinde yaygın olarak kullanılmaktadır.

• Not: Bununla birlikte, Moment.js artık aktif olarak geliştirilmeyen veya bakımı yapılmayan eski bir projedir. Değişken, büyük ve modern ağaç sallama algoritmalarıyla uyumsuz olması gibi bazı dezavantajları vardır. Bu nedenle, yeni projelerde Moment.js kullanılması ve bunun yerine Luxon, Day.js, date-fns veya js-Joda gibi diğer alternatiflerin kullanılması önerilmez. JavaScript diline yeni bir tarih ve saat API’si eklemek için Temporal önerisine de göz atabilirsiniz.

Kullanım Örneği 1

Yukarıdaki tabloda, ilk sütunda mevcut olan tarihlerin üzerinden ne kadar süre geçtiğini bulmak için Moment.JS kütüphanesini kullanacağız. Böylece girdiğimiz tarihler, “X gün önce” veya “X ay önce” olarak dönüştürülecek, yani manipüle edilecek.

Öncelikle Moment.js kütüphanesini kullanmak için aşağıdaki iki CDN linkini HTML sayfamın <head> kısmına dahil ediyorum.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/tr.js"></script>

Daha sonra aşağıdaki HTML içeriğini oluşturuyorum.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/tr.js"></script>
    <figure class="wp-block-table demo-data-moment-js-1">
        <table>
            <tbody>
                <tr>
                    <td>26.01.2024 16:55</td>
                    <td>Ürün 1</td>
                    <td>₺100,00</td>
                    <td>150</td>
                </tr>
                <tr>
                    <td>15.01.2024 16:55</td>
                    <td>Ürün 2</td>
                    <td>₺68,00</td>
                    <td>78</td>
                </tr>
                <tr>
                    <td>19.01.2024 16:55</td>
                    <td>Ürün 3</td>
                    <td>₺94,00</td>
                    <td>64</td>
                </tr>
                <tr>
                    <td>21.01.2024 16:55</td>
                    <td>Ürün 4</td>
                    <td>₺37,00</td>
                    <td>97</td>
                </tr>
                <tr>
                    <td>23.01.2024 16:55</td>
                    <td>Ürün 5</td>
                    <td>₺64,00</td>
                    <td>81</td>
                </tr>
            </tbody>
        </table>
    </figure>

Şimdi de tarihlerin üzerinden ne kadar süre geçtiğini hesaplamak için bir fonksiyon yazıyorum. Bu fonksiyon, mevcut HTML sayfamın ilk sütunundaki tarihleri alarak üzerinden ne kadar süre geçtiğini hesaplıyor.

document.addEventListener('DOMContentLoaded', function() {
    // Tablodaki tarih sütununu seçin
    var tarihSutunu = document.querySelectorAll('.demo-data-moment-js-1 tbody tr td:first-child');
    
    // Moment.js'i Türkçe dil desteği ile kullanın
    moment.locale('tr');

    // Her bir tarih için süreyi hesaplayın ve ekranda güncelleyin
    tarihSutunu.forEach(function(td) {
        var tarih = moment(td.textContent, "DD.MM.YYYY HH:mm");
        var suAn = moment();
        var fark = tarih.from(suAn);
        td.textContent = fark; // Tarih sütununu 'ne kadar zaman önce' ile güncelle
    });
});

Böylece nihai HTML dosyam şu kodlardan oluşuyor:

Girdi

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/tr.js"></script>
    <figure class="wp-block-table demo-data-moment-js-1">
        <table>
            <tbody>
                <tr>
                    <td>26.01.2024 16:55</td>
                    <td>Ürün 1</td>
                    <td>₺100,00</td>
                    <td>150</td>
                </tr>
                <tr>
                    <td>15.01.2024 16:55</td>
                    <td>Ürün 2</td>
                    <td>₺68,00</td>
                    <td>78</td>
                </tr>
                <tr>
                    <td>19.01.2024 16:55</td>
                    <td>Ürün 3</td>
                    <td>₺94,00</td>
                    <td>64</td>
                </tr>
                <tr>
                    <td>21.01.2024 16:55</td>
                    <td>Ürün 4</td>
                    <td>₺37,00</td>
                    <td>97</td>
                </tr>
                <tr>
                    <td>23.01.2024 16:55</td>
                    <td>Ürün 5</td>
                    <td>₺64,00</td>
                    <td>81</td>
                </tr>
            </tbody>
        </table>
    </figure>

document.addEventListener('DOMContentLoaded', function() {
    // Tablodaki tarih sütununu seç
    var tarihSutunu = document.querySelectorAll('.demo-data-moment-js-1 tbody tr td:first-child');
    
    // Moment.js'i Türkçe dil desteği ile kullan
    moment.locale('tr');

    // Her bir tarih için süreyi hesapla ve ekran güncelle
    tarihSutunu.forEach(function(td) {
        var tarih = moment(td.textContent, "DD.MM.YYYY HH:mm");
        var suAn = moment();
        var fark = tarih.from(suAn);
        td.textContent = fark; // Tarih sütununu 'ne kadar zaman önce' ile güncelle
    });
});

HTML sayfası yüklendiğinde JavaScript kodu otomatik olarak çalışacaktır. Kod, Moment.js kütüphanesinin sağladığı işlevselliği kullanarak, her bir tarih için “şu andan itibaren ne kadar süre geçtiğini” hesaplayacak ve bu bilgiyi tabloda gösterecektir. Aşağıdaki çıktı (output) ile sonucu görebilirsiniz.

Çıktı

Tabloda tanıklık edilebileceği üzere, artık ilk sütunda yer alan tarihler, Moment.js kütüphanesinin kullanımı ve JavaScript ile yazdığımız fonksiyon sayesinde, verilerin üzerinden ne kadar süre geçtiğini hesapladı.

Daha fazla bilgi için Moment.js kütüphanesinin dökümantasyonunu inceleyebilirsiniz.