質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • JavaScript

    18713questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Javascript: カレンダーに関する繰り返し処理について(休みを設けるプログラム)

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 524

rails_ruby

score 29

前提/実現したいこと

for-ifを使って意図したタイミングと処理を繰り返し処理をしたいです。
具体的にはfor文を使って下記の日程の時のみ繰り返し処理を行えるようにしたい。

  • 2019-01-01
  • 2019-01-08
  • 2019-01-15
  • 2019-01-22
  • 2019-01-29...etc

イメージ

for(let i=i;i<365;i++){
 if(dates / 7){
  処理
  }
}

発生している問題・エラーメッセージ / 試したこと

プログラミング知識が浅いため、どの処理を繰り返し処理させればいいか分からずfor文を回したら2018-01-01の処理がひたすら回されました。

実際のコード
この時はif文を入れていないので2018-01-01の処理が30回実行されました。

for(let i=0;i<=30;i++){
  var m=Array((d2(i).getTime()-d1.getTime())/1000/60/offset+1).fill(null).map(function(x,y){
    return (new Date(d1.getTime()+1000*60*offset*y)).toISOString().substr(0,16);
  });
  [].push.a

該当のソースコード

<input type="date" value="2019-01-01" id="dates"> <!-- 火曜日 -->
<input type="time" value="08:00" id="time_start"> <!-- 変更前: 00:00-->
<input type="time" value="10:00" id="time_finish"><!-- 変更前: 23:30 -->
<script>
const BUSY = [
  '2019-02-12T10:00',
  '2019-02-09T23:30'
];
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#btn').addEventListener('click',function(){
    var offset=30;
    var d0=document.querySelector('#dates').value;
    var t1=document.querySelector('#time_start').value;
    var t2=document.querySelector('#time_finish').value;
    var d1=new Date(d0+" "+t1);d1.setTime(d1.getTime()+1000*60*60*9);
    var d2=new Date(d0+" "+t2);d2.setTime(d2.getTime()+1000*60*60*9);
    var m=Array((d2.getTime()-d1.getTime())/1000/60/offset+1).fill(null).map(function(x,y){
      return (new Date(d1.getTime()+1000*60*offset*y)).toISOString().substr(0,16);
    });
    [].push.apply(BUSY,m);
    console.log(BUSY);
  });
});
</script>

補足情報(FW/ツールのバージョンなど)

以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
以前の質問
リンク先でコードを動かすことができます
JavaScript

追記

文字数の制約上、実際の処理に関わる部分のみを抜粋しています。
(練習で色々な処理を試しているので現在のコードがぐちゃぐちゃで載せるに載せないのも理由の一つです...)

forを使わないときの処理内容
d0,t1,t2の変数において、querySelectorを用いてinputのvalueを取得しています。
取得した、valueを変数d1,d2でdateとtimeを結合?しています。
そしてmではtime_startからtime_finishまでの時間帯を30分おきに配列にしています。
そして、本質問内にはありませんが定数BUSYにpushしています。
console.logで見ると下記のようになります。

コンソール

["2019-01-01T08:00","2019-01-01T08:30","2019-01-01T09:00","2019-01-01T09:30","2019-01-01T10:00"]

for文を使った場合 ← ここを実現したいです。

1週目
["2019-01-01T08:00","2019-01-01T08:30","2019-01-01T09:00","2019-01-01T09:30","2019-01-01T10:00",
2週目
"2019-01-08T08:00","2019-01-08T08:30","2019-01-08T09:00","2019-01-08T09:30","2019-01-08T10:00",
3週目
"2019-01-15T08:00","2019-01-15T08:30","2019-01-15T09:00","2019-01-15T09:30","2019-01-15T10:00",
4週目
"2019-01-22T08:00","2019-01-22T08:30","2019-01-22T09:00","2019-22-01T09:30","2019-01-22T10:00"
5週目
...etc
]

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • rails_ruby

    2019/02/11 23:52

    実行したい処理に関わるコードを全て追記しましたので、追記したコードで試していただけると検証できるかと思います。

    キャンセル

  • kei344

    2019/02/12 00:13

    追記されたコードには例えば「toISOString」が無いので、「実際のコード」とは違うコードのようです。また提示されたコードはHTML上に特定の要素が無いと動かないようなので、関係が有るコードなのかもわかりませんでした。 https://jsfiddle.net/5js2wvhx/ 何度も書き換えてもらって申し訳ないのですが、私には解決できない質問のようです、お騒がせしました、すみません。

    キャンセル

  • rails_ruby

    2019/02/12 00:22

    https://jsfiddle.net/qfkowzb5/13/
    上記のリンクにgoogleのディベロッパーツールで試していただけないでしょうか?
    ボタンを押すと配列が生成されるかと思います。

    キャンセル

回答 4

+3

let
   year   = 2019,
   start  = new Date (year, 0, 1),
   end    = new Date (year, 12, 1),
   week   = 1;
   current = new Date (start),
   rst = [ ];

 current.setDate (7 - current.getDate () + week);

 for (; current < end; current.setDate (current.getDate () + 7)) {
   let d = new Date (current);
   rst.push (d);
   console.log (d, d.getDay ());
 }

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/12 02:49

    ご教示して頂きありがとうございます。
    プログラムについては、大体理解できました。
    しかし、ご教示していただいたコードを既存のコードに入れて実装する方法が分からないためもしよければ下記のリンクもしくは、質問欄にあるコードを用いた形でご教示頂くことは出来ないでしょうか?
    最終的には定数BUSYにpushし、カレンダーに応用していきたいと考えているので差支えがなければよろしくお願いします。
    具体的には、その曜日のtd全てを(ー)としたいと考えています。そのためにinputにtime_stratとtime_finishiがあります。それと現コードではinputに入っている日付だけはその処理が出来ます。

    キャンセル

  • 2019/02/12 03:12

    プログラムをよく見てみなさい。
    あなたが配列に加えなければならないのは、 this.plan です

    this.plan = {
    '09:00:00': [,,,,,,true,,,,,], //1月1日から続く通し番号順
    ...
    }

    キャンセル

  • 2019/02/12 03:41

    申し訳ございません。大変恐縮ですが、私の今の知識レベルではthis.planを配列に加える意図がわかりません。
    BUSYの配列に["2019-02-10T10:00"]のような形でデータが入るとtdがーになるのですが、this.planはtd内の○ーの判定にどのような関係があるのでしょうか?

    キャンセル

  • 2019/02/12 03:59

    縦軸と横軸が反対だからすべてが面倒になっているのに起因する
    BUSY は人間様が理解しやすいように記述しているだけで、そのデータから直接的に表とするには非常に効率が悪い。だから内部では表に変換しやすいように予め変換して保持(this.plan)している。
    つまり2月2日の9時を変えたいのなら、this.plan['09:00:00'][32] = true とする。
    あとは、this.remake () を呼び出す。
    この場合、this は、変数 a なので、this を a に置き換えて行う

    キャンセル

  • 2019/02/12 04:59 編集

    そうだったんですね。色々なアプローチで何とか◯ーの判定をしようと考えていましたがご教示していただいたプログラムはやっぱり私には難しすぎるようです。懇切に説明していただいたても、私にはどのようにthis.planを弄るかが理解できませんでした...
    ずっと、何とかBUSYまでデータを渡せば判定が変えれると思ってやっていましたがthis.planで判定を制御していたとは思っていませんでした。

    キャンセル

  • 2019/02/12 06:20

    もう休みを設けるプログラムを追加したよ。
    あくまでもこのスレの質問の答えではないので、間違わないように。

    キャンセル

  • 2019/02/12 13:11 編集

    あのさ、このスレの質問(タイトル)だけを見て、もしかして自分の解決に繋がるかもしれない?!と思った人が
    このベストアンサーを見て、何これ?何の回答?って思うだろ!
    わざわざ忠告した意味がない。

    キャンセル

  • 2019/02/12 13:33

    申し訳ございませんでした。
    忠告に気づきませんでした。
    すぐにタイトル変更いたします。

    キャンセル

  • 2019/02/12 13:40

    ありがとうございます。
    修正前の質問で答えてくださった人の努力は、無視するのですね(w)

    キャンセル

checkベストアンサー

+2

前の質問からとんできました

任意の年の任意の曜日に対して指定した時間をすべて30分おきに
BUSYに流し込むという条件で

<script>
const BUSY = [
  '2019-02-12T10:00',
  '2019-02-09T23:30'
];
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#btn').addEventListener('click',function(){
    var y=document.querySelector('#year').value;
    var d=new Date(y+"-01-01");
    var w1=d.getDay();
    var w2=parseInt(document.querySelector('#week').value);
    var offset=30;
    var t1=document.querySelector('#time_start').value;
    var t2=document.querySelector('#time_finish').value;
    d.setDate(d.getDate()+(w2-w1+7)%7);
    while(d.getFullYear()==y){
      var d0=y+"-"+("0"+(d.getMonth()+1)).substr(-2)+"-"+("0"+d.getDate()).substr(-2);
      var d1=new Date(d0+" "+t1);d1.setTime(d1.getTime()+1000*60*60*9);
      var d2=new Date(d0+" "+t2);d2.setTime(d2.getTime()+1000*60*60*9);
      var m=Array((d2.getTime()-d1.getTime())/1000/60/offset+1).fill(null).map(function(x,y){
        return (new Date(d1.getTime()+1000*60*offset*y)).toISOString().substr(0,16);
      });
      [].push.apply(BUSY,m);
      d.setDate(d.getDate()+7);
    }
    console.log(BUSY);
  });
});
</script>

<input type="text" value="2019" id="year" size="4" pattern="(19|20)[0-9]{2}"> 
<select name="week" id="week">
<option value="0">sun</option>
<option value="1">mon</option>
<option value="2">tue</option>
<option value="3">wed</option>
<option value="4">thu</option>
<option value="5">fri</option>
<option value="6">sat</option>
</select>
<input type="time" value="08:00" id="time_start"> 
<input type="time" value="10:00" id="time_finish">
<input type="button" value="go" id="btn">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/12 11:47

    ありがとうございます。
    意図した処理を実現する事が出来ました。

    キャンセル

+2

とりあえず 1週間おき [実行結果]
※ 最後に同じ年という条件をいれてないため 2019年が顔をだすw

固定回数毎だとこういう記述になるかと(わざわざ指定回数-1を空回しするなと)「

// your code goes here
var date = new Date("2018-01-01");
print(date);
var step = 7;
for (var i = 0; i< 365; i+=step) {
    date = new Date(+date + (step * 24 * 60 * 60 * 1000));
    print(date);
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/11 23:26

    print ⇒ console.log

    【window.print - Web API | MDN】
    https://developer.mozilla.org/ja/docs/Web/API/Window/print

    キャンセル

  • 2019/02/11 23:29

    ああ ideone の動作のでやってるから変えてないだけであって内容は window.print じゃないw

    キャンセル

  • 2019/02/11 23:31

    https://developer.mozilla.org/ja/docs/Mozilla/Projects/SpiderMonkey

    こっちの記法だったはず

    キャンセル

  • 2019/02/11 23:32

    そういうものが有るんですね、知りませんでした。失礼しました。

    キャンセル

+2

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<style>
#calendar td { text-align: center; font-size: 80%; }
#calendar .sun { background: rgba(255,0,0,.1); color: rgba(255,0,0,1); }
#calendar .sat { background: rgba(0,0,255,.1); color: rgba(0,0,255,1); }
#calendar .button { color: blue; text-decoration: underline; }
#calendar .button:hover { color: red; }
#calendar table, #calendar td { border: 1px gray solid; padding: 4px;}
#calendar table { border-collapse: collapse; border-spacing: 0; }
#calendar tbody tr:nth-of-type(odd) { background: rgba(0,0,0,.05); }
</style>

<body>
<div id="calendar"></div>
<input type="text" class= "text" id="acdn-target" onselect="click_date" readonly>



<script>
{
  const
    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thurs.)', '(Fri.)', '(Sat.)'],
    doc = document,
    DEF_OPTION = { };

  const
    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
    B = (d, n) => d.setDate (d.getDate () + n),
    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 
    E = (e, d) => {
      let
        [a,,b] = A (e, 'label', 'br', 'label'),
        w = d.getDay () ;
      a.textContent = d.getDate ();
      b.textContent = day_jname[w];
      e.classList.add (day_name[w]);
    },
    F = d => {
      let m = d.getMonth (); 
      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
    },
    G = ary => ary.reduce ((a, b) => {
        let
          c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
          d = D (c);
        if (! (d in a)) a[d] = [];
        a[d][F(c)] = true;
        return a;
      }, { })
    ,
    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':');


  //_____________

  class Shedule {
    constructor (date = new Date, range = 7, plan = [], option = DEF_OPTION) {
      this.current = H (date);
      this.date    = H (date);
      this.range   = range;
      this.plan    = G (plan);
      this.table   = document.createElement ('table');
      this.option  = Object.assign ({}, option);

      this.remake ();
    }


    add (day = this.range) {
      let d = H (this.current);
      d.setDate (d.getDate () + day);
      if (+this.date <= +d) {
        this.current = d;
        this.remake ();
      }
    }


    setHoliday (dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),
        current = new Date (start),

        b = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,11, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      current.setDate (7 - current.getDate () + dayNo);

      for (; current < end; current.setDate (current.getDate () + 7)) {
        let idx = F (current);

        for (let c = b; c < e; c = new Date (+s + (+c))) {
          let key = I (c);
          if (! this.plan[key])
            this.plan[key] = [ ];
          this.plan[key][idx] = true;
        }
      }

      this.remake ();
    }


    remake () {
      this.prev_btn = this.next_btn = null;
      let t = this.table;
      [...t.childNodes].forEach (e => e.remove ());

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //__      
      let
        begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        end   = new Date (Date.UTC (1970,0,1,11, 30)),//列の終了時間
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
        o = F (this.current),
        rst = [ ];

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          a = new Array (this.rangi),
          b = I (d),
          c = this.plan[b] || [];

        for (let i = 0; i < this.range; i++)
          a[i] = c[o + i] ? '-' : '◎';

        rst.push ([b, ...a, b]);
      }

     let [tb] = A (t, 'tbody');
     rst.forEach (r => {
       let tr = tb.insertRow (-1);
       r.forEach (c => tr.insertCell (-1).textContent = c)
     });            
    }


    handleEvent (event) {
      let t = event.target;
      if (t === this.prev_btn) this.add (-this.range);
      if (t === this.next_btn) this.add (this.range);

      let cbfunc = this.option.handleEvent;
      if ('function' === typeof cbfunc)
        cbfunc.call (this, event);
    }

  }

  this.Shedule = Shedule;
}

//_____________

const BUSY = ['2019-02-12T10:00'];

function optCallBackFunction (event) {
  const
    getParent = (n, e) => {
      do {if (n === e.tagName) break;} while (e = e.parentNode);
      return e;
    };

  let
    td  = event.target;
    inp = document.querySelector("#acdn-target"),
    tr  = this.table.querySelector('thead tr:nth-of-type(2)'),
    d   = new Date (this.current);

  if ('click' === event.type) {
    if (tr.compareDocumentPosition (td) & 16) {
      td = getParent ('TD', td);
      d.setDate (d.getDate () + td.cellIndex);
      inp.value = [
        d.getFullYear () + '年',
        d.getMonth () + 1 + '月',
        d.getDate () + '日で~す'
      ].join ('');
    }
  }
}


//_____________
let opt = { handleEvent: optCallBackFunction };
let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c;
c.setHoliday (1);

document.querySelector ('#calendar').appendChild (d);
d.addEventListener ('click', c, false);
d.border=1;

</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/17 18:06

    初めまして。
    予約に使えるカレンダーを探していたところ、私がまさにイメージしていたカレンダーを回答していらしたので追加で1つお聞きしたいことがあるのですがよろしいでしょうか?
    @hai_haiさんの回答を参考にコードを編集させていただいたのですが、その過程でエラーが起きてしまいました。
    私なりに考えられる原因を探り、codepenで色々試してみたのですがどうしても解決することができませんでした。
    回答が既に済んでいる質問にさらに質問するのは大変ご恐縮ではございますが、教えていただくことはできないでしょうか?
    下記のURLで私が、試したコードがありますのでご参照頂ける嬉しいです。
    https://codepen.io/nanase21/pen/xMQNmz

    私が、今していることとしては本質問者と大変似ておりますが@hai_haiさんのご教示していただいたコードを参考にランチタイム休憩時間の設定を実装しております。エラー原因としては戻り値のtable dが原因によりカレンダーを表示させることが出来ずにいます。
    もしお時間に余裕があり、お分かりであればご教示頂けると嬉しいです。

    キャンセル

  • 2019/02/17 18:25

    これから見ますね。ちょいとお時間を!

    キャンセル

  • 2019/02/17 21:18

    let を使うときは同じスコープ内では、同じ名前の変数は使うことができません。もしよければ修正したものをアップしたいのですが、新たに質問したほうがよろしいのでは?
    それと、現状では年をまたいだ時におかしくなりますよ

    キャンセル

  • 2019/02/17 22:04

    せっかくの休日にお時間を割いてご教授頂きありがとうございます。
    そうなんですね。私が学習していた教材では変数はletが使われていたため、そのような記述をしてしまいました。そのため、カレンダーが消えてしまったんですね。
    分かりました。それでは新規に質問を立てますのでそちらで回答をして頂けたらと思います。

    キャンセル

  • 2019/02/17 22:32

    @hai_haiさんへ、
    https://teratail.com/questions/174905?modal=q-comp
    上記のリンクにて質問を立てましたのでお時間がある時にご教授いただければ幸いです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    18713questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。