いまさら聞けないReact、Virtual DOM、JSX超入門
Reactとは――その3つの特徴 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）です。 Reactには、次のような特徴があります。 シンプル Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できます。 叙述的 コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになります。そのため、効率的にレンダリングさせることができます。 コンポーネントベース 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができます。コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすく
私たちはなぜ SPA で開発するのか / Why you choose SPA
2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
JavaScriptのエキサイティングな新機能7選 - Qiita
以下はMostafa Gaafarによる記事、7 New Exciting JavaScript Features You Need to Knowの日本語訳です。 7 New Exciting JavaScript Features You Need to Know JavaScript ( ECMA Script ) は進化する言語であり、たくさんのproposalやアイデアが出番を待ち受けています。 TC39 (Technical Committee 39) という委員会がJavaScript標準と新機能の定義を担当しています。 そして今年は彼らの活動が活発になっています。 以下は、現在ステージ3にある提案の一部の紹介です。 ステージ3は完成する直前の段階です。 これはつまり、この機能がブラウザやその他のJavaScriptエンジンにすぐに実装されることを表しています。 実際、以下の
Angular 2/4が狭量で遅すぎる理由 | POSTD
(注：2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackやフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactやVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
WebストラテジーゲームでJavaScriptが学べる「Empire of Code」の遊び方を大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、基本的なプログラミングに慣れてきて、「次に何しようかな…？」と考えている人に最適なWebサービスをご紹介しようと思います！ ブラウザから遊べる「ストラテジーゲーム（戦略ゲーム）」なのですが、自軍の兵士たちを自分でプログラミングすることで、自由自在に操作することができるという異色のサービスになっています！ 【 Empire of Code 】 プログラミング初心者向けではないのですが、PythonかJavaScriptの基本的な文法を把握している人であれば誰でも楽しめますよ！ ■「Empire of Code」の始め方！ それでは、実際に試しながら、どのようなサービスなのかを詳しく見ていきましょう！ まず最初に、サイトへアクセスして「START NEW GAME（ゲーム開始）」ボタンをクリックします。 すると、コミカルな漫画でストーリーが
JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ MOONGIFT
ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。 そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。 NEditorJSの使い方 NEditorJSのメイン画面です。 ノードはマウスで接続できます。 実際に操作しているところです。 NEditorJSでは、まずアウトプット側の黒丸をクリックして、その後インプット側の黒丸をクリックします。自動的に線が伸びていくので分かりやすいでしょう。ノードはマウスでドラッグ&ドロップできます。 ユーザ向けにビジュアルプログラミング環境やデータ処理環境を提供する際に使えそうです。NEditorJSはHTML5/JavaScript製のオープンソース・ソフト
JavaScript の難しさとは何か - mizchi's blog
JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと
Seleniumアレルギーのための処方箋 - Qiita
何年も前、SeleniumやWebDriverの話で盛り上がった記憶があります。ただ、その当時はまだRailsなどバックエンド中心の文脈でした。今、フロントエンドに軸足が移る中、ブラウザテストの状況はどうなったのでしょう? 不思議なことに、フロントエンド界隈でそれほど話題に上がって来ないですよね (私の周りだけ?)。結構大事なのに。実は皆さん、「Seleniumアレルギー」なんじゃないですか? 公式サイトに漂う ゼロ年代感(下図)。Javaへの躊躇、「めんどくさい」と聞かされ続けた過去、無意識に避けてしまうのがSeleniumです。 ただ、フロントエンドの文脈でこそ、ブラウザテストは重要度を増しています。そこで「Selenium触りたくない病」の筆者が、 四苦八苦した背景 と、2016年だからこそ 見えてきた落とし所 を書いてみたいと思います。 註: 思ったより長文になってしまいました。先
JavaScriptユーザのための関数型プログラミング(前編) | POSTD
私が関数型プログラミングについて度々耳にするようになったのは、数カ月前からです。でも当時は、それが何なのか見当もつかず、単なるバズワードだと思っていました。皆さんの中にも、そのような方は多いでしょう。それ以来、私は関数型プログラミングについて深く学び、この言葉を日々聞いてはいるものの内容を理解していない初心者の方のために、分かりやすく説明しようと思い立ちました。 関数型プログラミング言語の話になると、「 Haskell と Lisp は どちらが優れているのか 」という 議論 が 白熱する 傾向にあります。HaskellとLispはどちらも関数型言語ですが、実際には大きな違いがあって、それぞれに長所と短所があります。その具体的な内容については、この記事を読み終える頃には深く理解していただけると思います。この2つの言語には、それぞれから派生した言語があります。その中で恐らく皆さんが耳にしたこ
Kajero - JavaScriptがその場で実行できるドキュメントシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownを使うようになって、逆にその物足りなさを感じるのではないでしょうか。色が使えなかったり、装飾も限られたものしか使えません。その制限がちょうど良いのかも知れませんが、もっと高度なドキュメントにしたいという要望もあります。 しかしプログラマーであるならば制限されているそのものを使い続けるのではなく、自分で拡張だってできるはずです。今回はインタラクティブなドキュメントを実現するKajeroを紹介します。 Kajeroの使い方 こちらがドキュメントのページです。通常のMarkdown記法が使えます。 こちらが特殊な部分。コードが書いてあります。 右上の再生ボタンをクリックするとJavaScriptが実行されて結果が表示されます。 複数ある場合、変数が共有されます。 実行時間
FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】
FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】 林 優一 Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。先月行われたGoogle IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。 今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。 Firebaseのリアルタイムデータベース Firebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。 APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入する
2016年JSハイブリッドアプリの動向をまとめてみた - Qiita
(元記事はこちら)。 概要 ハイブリッドアプリで採用するフレームワーク・アーキテクチャの選定をするため、調べたことをまとめます。 ハイブリッドアプリとは? ハイブリッドアプリとは、ネイティブコード以外を使って作られたアプリです。今回は、JavaScriptを使用したハイブリッドアプリを想定しています。 ハイブリッドアプリは、基本的にWebViewというネイティブコンポーネントを使って、Webの技術をネイティブに組み込むような設計をしていました。それを可能にする代表的なものがCordovaで、名前は聞いたことがあるかもしれません。Cordovaを利用してでてきたのが、Ionicなどのフレームワークでした。 しかし最近になって、React Nativeを始めとして、ネイティブコンポーネントをJavaScriptで呼び出すというアプローチをとるものがでてきました。 NativeScriptに関し
Javaサンドボックスの中でJavaScriptを動かす - Qiita
Javaのサンドボックスの中でJavaScript(Nashorn)を動かす。やってることはJSR223に対応しているスクリプト言語ならなんでも行けるはずである。 package example.misc; import javax.script.ScriptEngine; import javax.script.ScriptEngineManager; import java.io.FilePermission; import java.security.AccessControlContext; import java.security.AccessControlException; import java.security.AccessController; import java.security.AllPermission; import java.security.CodeSo
春からはじめるモダンJavaScript / ES2015 - Qiita
春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
今すぐ電子書籍(技術書)を書き始める方法と文章の自動チェック
電子書籍開発環境 Markdownで書く電子書籍開発環境というスライドで、GitBookとMarkdownで技術書(電子書籍)を書く話を紹介しました。 文章はtextlintで、コードはESLintとテストでチェックして、サンプルコードに対してテストを書けるプロジェクト構造について書かれています。 どのように表記揺れなどやコードの間違いを防ぎながら、書籍を開発していくかについて書いているので詳しくは上記のスライドを見て下さい。(スライドの下へスクロールすると文章版が載ってます) スターターキット 上記の設定をすぐに使えるようにスターターキット的なものを作りました。 azu/gitbook-starter-kit 実際にこのgitbook-starter-kitを電子書籍とした時の表示は以下で見ることができます。 GitBook Starter Kit - GitBook インストール 利用
SVGで綺麗なグラフを描くライブラリ×10選
HTML5でグラフを描く方法は幾つかあります。一つはCanvasを使った方法です。これは高度なグラフィックスが描ける一方、JavaScriptなどからインタラクティブに扱うのは複雑になっています。 そこで今回はSVGを使ったグラフライブラリを紹介します。SVGはXMLベースで軽量、かつJavaScriptとの親和性も高いものが多くなっています。 morris.js morris.jsは主に折れ線、棒、曲線、ドーナッツグラフをサポートしています。データをJSONで渡すだけで使えるので学習コストが低いのがメリットです。ライセンスは簡易BSD Licenseとなっています。 Chartist – Simple responsive charts Chartistはレスポンシブであることをメリットとしています。曲線、棒、円、ドーナッツグラフをサポートしています。ブラウザはIE9以降を対象としていま
JS-XLSX - JavaScriptでExcelファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebフォームでCSVファイルをアップロードしてください、というのはよくある機能です。しかしCSV自体解析するのが大変だったり、ユーザが作成するのも一手間かかるのであまり効率的とは言えません。 そこで、ユーザにはExcelファイルをそのままアップロードしてもらいましょう。その際使うのはJS-XLSX、JavaScriptによるExcelファイルパーサーです。 JS-XLSXの使い方 JS-XLSXのデモです。ドロップしたExcelファイルを解析して、CSVにしています。 さらにJSONにもできます。 JS-XLSXを使えば、Webブラウザ上でExcelファイル（ODSも可）を解析してAjaxでJSONだけを送ると言ったこともできます。これならシステムで扱うのも簡単そうです。さらにJ
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
