Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways React is a popular and robust JavaScript library used for creating fast, interactive user interfaces for web applications. It is declarative, component-based, and allows for efficient updates and

先日、reduxのメンテナであるMark EriksonさんがBlogged Answers: Redux — Not Dead Yet! という記事を書いていて「はーなんだろうなー」と流し読みしていた。 そんな折、React 16.3 がリリースされ、Context APIが刷新されたのを見て、「あ、これは確かに向き合い方ちょっと変わるかも」というのを思ったのでまとめてみる。 Redux — Not Dead Yet!を要約する元記事をざっくり要約してみるとこんな感じ Reduxはどこにも行かないよ。メンテしていくし、役割もあるよContext APIによってReduxを置き換えられるパターンはありえるよ。ただその場合、最初からReduxいらなかった可能性あるよGraphQLがReduxを置き換えることはあるかも。でもReduxのほうがハマるパターンもあるよ最近Dan Abramovさん

new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D

※PhantomJSの開発は終了し、リポジトリはアーカイブ化されました。本記事は参考程度にご覧ください。 https://jser.info/2018/06/11/phantomjs-ended/ PhantomJSとは WebKitベースのヘッドレスブラウザ。WebKitとは主にWebブラウザーで用いられているレンダリングエンジンのこと。PhantomJSはWebKitにbuilt-inされているJavaScriptCore (Safariとかもこれを使っている) というJavaScriptエンジンを採用している。スクレイピングやスクリーンキャプチャなどにも活用可能。 ヘッドレスブラウザ：ヘッドレス・ブラウザとは、Webコンテンツを画面上に描くグラフィック・ユーザ・インタフェース（GUI）を省略したブラウザ 要はコマンド（プログラム）でブラウザを実行できる環境のこと。 プログラムで動きを

とりあえず動けばいい、の精神でコードを書ける個人開発とは違い、仕事やオープンソースプロジェクトにおけるコーディングでは、「他人が読むコード」を意識して書く必要があります。 他人が読むのですから、もちろんわかりやすいコードでなくてはなりません。でも、「わかりやすい」とは何でしょう。どうしたら実現できるのでしょう。 この記事では、他人が読む可能性があるコードを書くときに気をつけていた方がいい事項について、いくつか紹介します。 まえがき 私が社会人になって数ヶ月が経ちました。会社では自分でコードを書くのはもちろん、他人の書いたコードをいじるという、今まであまり経験していない作業をすることもあります。 そしてその中で使われている言語にはJavaScriptも含まれます。JavaScriptは平易な言語であり、クライアントサイドでもサーバサイドでも採用できるので、様々な場面で使用されています。 さす

チャート/グラフ作成のJavaScriptライブラリおすすめ5選 以下の観点でオススメの5つとして絞り込みをしました。 GithubのStar数が多い 有名企業が携わっている たくさんの人に利用されている 無料かつ商用利用可 個人的にオススメのものから紹介していきます。 １：Chart.js 概要 Chart.jsはシンプルでデザイン性が高くレスポンシブなチャート/グラフを作成可能とするJavaScriptライブラリです。 Chart.jsではHTML5のCanvas要素にチャート/グラフが動的に作成されます。 グラフのデータ描画にはデフォルトで簡単なアニメーションがついているので、見た目がオシャレになります。 基本的な8つの種類のグラフ/チャートを作成することができるので、Chart.jsさえあればほとんどのケースで事足りるはずです。 描けるグラフ/チャートの種類は以下の8つです。 線グ

webpackの入門記事をICS MEDIAで書いているのですが、連載の全部を最新版のwebpack 4に更新しました。webpack 3から4へのアップデートで、webpack-cliが必要になったことと、mode引数で開発用/本番用に切り替えられるようになったことがポイントです。 導入編 最新版で学ぶwebpack入門 – ICS MEDIA ECMAScript 2015+編 webpack + BabelでES2017環境の構築 – ICS MEDIA webpack + TypeScriptの環境構築 – ICS MEDIA BabelやTypeScriptのゼロコンフィグのビルド環境構築 – Qiita スタイルシート編 スタイルシート(CSSやSass)を取り込む方法- ICS MEDIA Bootstrapをバンドルする方法 – ICS MEDIA その他 Gulpで始める

jQuery MobileとjQuery UI、停滞を打破するため開発体制を刷新。以前より簡単にコントリビュート可能に HTMLやJavaScriptなどのWeb標準技術でモバイルアプリケーション開発を可能にするJavaScriptライブラリ「jQuery Mobile」は、2014年9月に公開されたjQuery Mobile 1.4.4を最後に、3年ものあいだアップデートが止まっています。 また、Webアプリケーションにメニューやボタン、タブ、スライダーといったさまざまなユーザーインターフェイスを提供するウィジェットライブラリ「jQuery UI」も、2016年9月を最後に1年以上アップデートが止まっています。 こうした停滞を打破するために、jQuery MobileとjQuery UIの開発体制が刷新されたことが、2017年12月21日付けでjQuery Mobileのブログに投稿され

SubscribeExpand your knowledge of the JavaScript ecosystem with a yearly subscription to ui.dev

The Lost Art of the MakefileJesse Hallett · Feb 28, 2018 Make · Makefiles · Tools I work on a lot of Javascript projects. The fashion in Javascript is to use build tools like Gulp or Webpack that are written and configured in Javascript. I want to talk about the merits of Make (specifically GNU Make). Make is a general-purpose build tool that has been improved upon and refined continuously since i

Transcript XFCQBDL�W�ʹ͍ͭͯ� 'PSFGSPOU�+BWB4DSJQU���ٸ੒௕தͷαʔϏεͷٕज़ୡʂ None XFCQBDL�͕ϦϦʔε͞Ε·ͨ͠ IUUQT���HJUIVC�DPN�XFCQBDL�XFCQBDL�SFMFBTFT ओͳมߋ఺ wઃఆϑΝΠϧ͕ͳͯ͘΋ಈ࡞͢ΔΑ͏ʹͳͬͨ� wQSPEVDUJPO�NPEFͱEFWFMPQNFOU�NPEF͕
 ௥Ճ͞Εͨ� w$PNNPOT$IVOL1MVHJO͕࡟আ͞Εͨ� wϏϧυεϐʔυ͕͔ͳΓ޲্͞Εͨ� wϝδϟʔϦϦʔεʹίʔυωʔϜ͕ͭ͘Α͏ʹͳͬͨ
 ʢXFCQBDL�W�ͷίʔυωʔϜ͸-FHBUPʣ ओͳมߋ఺ wઃఆϑΝΠϧ͕ͳͯ͘΋ಈ࡞͢ΔΑ͏ʹͳͬͨ� wQSPEVDUJPO�NPEFͱEFWFMPQNFOU�NPEF͕
 ௥Ճ͞Εͨ� w$PNNPOT$IVOL1MVHJO͕࡟

Transcript தେن໛։ൃΛ
 3FBDUͰߦ͏ݱ৔͔Β఻͍͑ͨ͜ͱ 3FBDU�KT�NFFUVQ���� None ٕज़తͳ࿩͸͋·Γͳ͍Ͱ͢ தେن໛ͳ։ൃΛߦ͏্Ͱ
 ۤ࿑ͨ͜͠ͱվળͨ͜͠ͱΛ࿩͠·͢ ݱ৔ͷటष͍࿩Ͱ͢
 Έͳ͞Μ͕ࠓޙ։ൃΛߦ͏ࡍʹ
 ࢀߟʹͳΕ͹ͱࢥ͍·͢ ݱࡏߦͳ͍ͬͯΔ։ൃʹ͍ͭͯ ݱࡏߦͳ͍ͬͯΔ։ൃʹ͍ͭͯ � w� ϑϩϯτΤϯυͷ։ൃऀɿ։ൃ౰ॳ͸�ਓ 
 ���������ݱࡏ͸�ʙ�ਓ΄ͲͱϕτφϜ։ൃڌ఺ʹ਺ਓ� � w� ։ൃ͍ͯ͠Δ΋ͷɿ؅ཧը໘� � w� ։ൃ೥਺ɿ໿�೥൒� � w� ࢖༻ٕज़ɿ3FBDU� �3FEVY FO[ZNF FUDʜ� ςετ͸ॻ͔ͳ͍ͱޙʑࣗ෼Λۤ͠ΊΔ ςετ͕ͳͥඞཁͳͷ͔ � w� Կϲ݄΋લʹ։ൃͨ͠΋ͷΛमਖ਼ͨ͠ͱ͖ɺ
 ��������खಈͰࢼݧ͢Δͷਏ͍ɻ
 
 
 � w� ։

ポイントはtrue。 location.reload();は現在のページを読み込み直すJavaScript。 trueの値を指定すると、ブラウザのキャッシュを使わずにサーバーからデータを取得してくれるようになる。 詳細はwindow.location - Web API インターフェイス | MDN辺りを参照。 「一度だけ」実行する docCookies.setItem("temp", "true"); //適当なcookieの書き込みを行い、 if("true" == docCookies.getItem("temp")){ //正常に利用できる環境であれば実行 if("true" != docCookies.getItem("refresh")){ //初回訪問時は実行される docCookies.setItem("refresh", "true"); //2回目以降は、cookieに

Photo by Chase N. こんにちは。谷口です。 JavaScript初心者の皆さんは、これからどうやって勉強を進めていこうと考えていますか？ プログラミング初心者の人が勉強を始めるとなると 独学でどう勉強したらいいのか分からない 経験者向けの解説を読んでも難しい といった悩みもあるかと思います。 そんな中、最近はゲーム感覚で楽しくJavaScriptを学べるサイトやサービスがかなり増えてきました。勉強するのは大変だけど、ゲームやクイズを通して遊び感覚で学べたら続けやすいですよね。 そこで今回は「初心者だけどJavaScriptを楽しく勉強したい！」という方のために、ゲーム感覚で楽しくJavaScriptを学べるサイトを紹介していきます。 最近は、こういった遊び感覚でプログラミングについて学べるサイトやサービスがかなり増えてきましたので、以前より学習のハードルはかなり下がっている

JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。 今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応しています。 jQuery-Tableditの使い方 jQuery-Tableditで表示したところです。右側に編集、削除のアイコンがあります。 クリックするとテキストボックスになって編集可能になりました。 編集完了すると赤くなります。これで編集した行がわかりやすくなります。 さらにダブルクリックしたセルだけを編集状態にすることもできます。 行全体ではなく、指定したセル

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2