JavaScriptで現在から数日～数週間前の日時を取得するには？
まず、JavaScriptで日時を扱うには？
js側で用意している組み込み関数のDateオブジェクトを使用します。
使用方法は
var 変数名 = new Date();
で、Dateオブジェクトを生成します。
今回、次のような日時を使ったグラフを作っていきます。
ステップ１
グラフを簡単に作成するjsのライブラリとしてchart.jsを使っていきます。
リンクをクリックしたら、下の画面に飛ぶので、Get Startedをクリック
ステップ３
今回使うファイルは、Chart.js-master→distフォルダ→Chart.min.jsのみを使います
Chart.min.jsを任意の場所に移動して置いてください。
上記ような操作が面倒な方はCDNも公開されているのでそちらを使っても大丈夫です
https://cdnjs.com/libraries/Chart.js
まず、HTMLファイルの雛型を用意して、グラフを描画するためのcanvasタグを書きつつ、chart.jsを読み込んでおきます
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width:600px;height: 450px;margin: 0 auto;"> <canvas id="canvas" height="450" width="600"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script> <script> </script> </body> </html>
ステップ４
次に、scriptタグの中にchart.jsを使用するためのコードを書いてあげます
chart.jsの解説はしませんが、興味がある方は調べてみてください
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script> <script> var config = { type: 'line', data: { labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], datasets: [{ label: "ページビュー数", fill: false, backgroundColor: "#3A7AC9", borderWidth: 2, borderColor: "rgba(2,63,138,0.8)", pointBorderColor: "#fff", pointBackgroundColor: "rgba(2,63,138,0.8)", pointBorderWidth: 2, pointHoverRadius: 5, pointHoverBackgroundColor: "#1D5191", pointHoverBorderColor: "#fff", pointHoverBorderWidth: 2, tension: 0, data: [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58] }, { label: "セッション", fill: false, backgroundColor: "#DB514E", borderWidth: 2, borderColor: "rgba(201,60,58,0.8)", pointBorderColor: "#fff", pointBackgroundColor: "rgba(201,60,58,0.8)", pointBorderWidth: 2, pointHoverRadius: 5, pointHoverBackgroundColor: "#9A1B19", pointHoverBorderColor: "#fff", pointHoverBorderWidth: 2, tension: 0, data: [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51] }] }, options: { responsive: true, scales: { xAxes: [{ display: true, stacked: false, gridLines: { display: false } }], yAxes: [{ display: true, ticks: { reverse: false, callback: function(value){ return value; } } }] } } }; // ▼上記のグラフを描画するための記述 window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx, config); }; </script> </body> </html>
上記のコードを書いてあげてブラウザで見てみると、グラフが出来上がっていると思います
ステップ５
赤枠で囲ってる部分を現在の月と日時に書き換えてあげたいと思います
var config = { の上にscriptを記述していきます
２つDateオブジェクトを生成してあげます
空の配列を用意して、for文で今日の日付から１週間前の経過日数を出して、配列に挿入しています。
<script> var date = new Date(); var before = new Date(); var week = []; for(var i = 0;i < 7;i++) { week.unshift(date.getDate() - i); } var config = { </script>
ステップ６
出力結果が下記になります。今日が21日なので、１週間分がしっかりと取れてますね
ただ、これだと問題があります。今回は月をまたいでいないので、問題が無いように見えますが、例えば、6/1の前日の日付を取ろうとした場合に本来であれば、5/31にならなければならないのに、5/0になります。試してみましょう
for文で回す値を大きくしてあげます。
<script> var date = new Date(); var before = new Date(); var week = []; for(var i = 0;i < 25;i++) { week.unshift(date.getDate() - i); } var config = { </script>
ステップ７
そうすると意図した結果にならないのが分かると思います。これを避けるためには、setDate()メソッドを使用します。
簡単に説明すると、指定した値が1から31の範囲外の場合は、Dateオブジェクトの日付の情報の更新を試みます。例えば0が値として指定された場合、前月の最終日に設定されます。
<script> var date = new Date(); var before = new Date(); var week = []; for(var i = 0;i < 25;i++) { before.setDate(date.getDate() - i); week.unshift(before.getDate()); } var config = { </script>
ステップ８
先月の日時がしっかりとれてますね。
そしたら、配列に月も挿入してあげつつ、chart.jsのlabelsの中身をweekに変更してあげれば完成です
getMonth()に+1している理由はgetMonthメソッドでは1月が0、2月が1といった具合に、1つ下にずれた数字が取得されるからです
※for文の値も直しておきます
<script> var date = new Date(); var before = new Date(); var week = []; for(var i = 0;i < 7;i++) { before.setDate(date.getDate() - i); week.unshift(before.getMonth() + 1 + '月' + before.getDate() + '日'); } var config = { type: 'line', data: { labels : week, </script>
英語のみ横幅(width)をはみ出る挙動
HTMLの「div」タグなどでボックスを作り、classやidを用いてcssのwidthプロパティを使用して横幅を指定したとしても、英語は枠におさまらない場合があります。
※今回の場合はoverflow:hiddenをかけているので、文字が途切れている
結論から言ってしまえば、
を使用すれば英語であっても折り返し可能です。
大手のサービスであってもこういった対策していないところもあるので注意が必要です。日本であっても英単語を羅列する場合はあるので（IT業界では多い）、多様なパターンでデバックするようにしましょう。
テキストエディタ「ATOM」を日本語化
atomは初期状態では、デフォルトで英語になっています。
このままでは使いづらいユーザーがいると思うので、日本語化できるようにします。
とは言っても、やることは至って単純です。
①atomを起動して、上部のメニューバーからHelpを選択し、Welcome Guideをクリック
②Install a Packegeをクリックします
③２の操作を行うとスライドして、Open Installerというボタンがあるので、そちらをクリック
④左カラムのテキスト入力欄に「japanese」と入れて、Packagesを押すと、少し時間が経った後に、パッケージが一覧が出てきます
⑤「japanese-menu」を探して、Installボタンを押せば完了です！
※ダウンロード数は違うのですが、顔写真と名前は一緒なのでそこにだけ注意
Mac の起動時にフォルダアイコンに「？」マークが点滅表示される
Mac の起動時に、画面にフォルダアイコンの上に「？」マークが点滅して表示される場合、Mac のシステムソフトウェアが見つからないという意味です
自分の場合はOSのアップデートを行った時になりました。
その時は、下記のサイトを参考に修復してローカルに置いていたデータは全てお亡くなりになりましたが、必要なデータはcloud上にバックアップを取っていたので、必要最低限のデータだけは守られました。
Appleサポート記事を参考にはしたのですが、自分の場合は、「ディスクユーティリティのウインドウの左側から、起動ディスク (通常は「Macintosh HD」という名前)を選択」の部分で起動ディスクすら選択できずに内部のSSDのしか選択できない状態でした。この時点で修復・復旧は諦めて、OSを再インストールして初期化することに決めました。
ウインドウの左側からSSDを選択し、「フォーマット」ポップアップメニューから「Mac OS 拡張 (ジャーナリング)」を選択します。ディスクの名前を入力して「消去」をクリックします。そうすると、SSDにネストされた形で入力したディスクの名前が表示されるはずです。
そうしたら、ディスクユーティリティの画面を閉じて、OSの再インストールをクリックします。次に、指示された通りに行っていくと、最後にディスクの選択が出てくるはずです。そこで上記で設定したディスクの名前を選択して再インストールしてあげれば復旧完了です。（ローカルにあるデータは全てなくなりますが・・・）
webブラウザはそもそもどうやって出来ているのか？
werブラウザは大きく分けて７つの主要コンポーネントによって構成されています。
②ブラウザエンジン
③レンダリングエンジン
④ネットワーキング
⑤UIバックエンド
⑥JavaSvriptインタプリタ
⑦データストレージ
この中でフロントエンドエンジニアの開発で理解が必要とされるのが、③と⑥です。
レンダリングエンジンの役割って何？
簡単に言うと、HTMLのファイル等をブラウザ上に表示することが役割です。難しい言い方をすれば、ブラウザウィンドウにリクエストしたコンテンツを表示すること。
レンダリングエンジンが内部でどういったことが行われているかというと、まずリクエストされたHTML文章を解析（パース）し、タグを「コンテンツツリー」というツリー内のDOM（Document Object Model）ノード（要素）に変換します。
次にCSSデータを解析し、HTMLがどのように表示されるべきか（レイアウト部分）を確定する為に※レンダーツリーを生成します。
※要素（h1、p等）が持つ、色やサイズなどの見た目に関する部分の情報を保有
最後に上記で行ったコトをブラウザに描画します。
レンダリングエンジンはこのプロセスを段階的に処理して、処理が終わったものから順次表示します。webページが読み込み状態なのに画像や文章が表示されるのはこういった仕組みになっているからです。
