ReactがわからないというよりJavaScriptがわからなかったのです - Qiita
はじめに Reactはユーザインタフェース構築のためのJavaScriptライブラリです。次のような利点があるため、HTML、CSS、 jQuery を学習し、Web制作者目指しているような方もReactにも興味を持つと良いと思いました。JavaScriptをある程度学習していれば、Reactはそんなに難しくないからです。 コンポーネントベース ブロックを組み立てるようにユーザインタフェースを構築できる 見通しがよく、苦痛が少ない 一度学習すれば応用が効く サーバー上でもレンダーできる モバイルアプリケーションの中でも動く(React Native) Reactを二ヶ月くらい学習し、真似してコードが多少書けるようになった時、私はそのコードにどうにも腑に落ちませんでした🥺。その頃の私はReact以前にJavaScriptがよくわかっていなかったのです。そんな少し前の自分に説明するつもりで書
Reactの身内向けチュートリアル（その１） - Qiita
Vue.全盛の中、社内メンバー向けのReactの簡単なチュートリアル。 本チュートリアルのゴール トップナビゲーションやログイン機能を持った普通のWebページをReactのSPAとして作る方法を知る。 下記のようなサイトを作ります。 内部メンバー的なゴールとしてはFirebaseを利用してバックロジックを作ったり独自ドメインHostingをできるようなることを目指す。 シリーズ その１：create-react-appの簡単な使い方とファイル構成（この記事） その２：簡単なページの作成（共通パーツ化含む）とreact-routernによるルーティング その３：簡易認証機能（ログイン・ログアウト）の追加 その１の概要 ReactでSPAを作成する際の雛形作成ツールであるcraete-react-appのインストールと使い方の習得 雛形の構造や意味の理解。簡単な編集。 前提 node.jsがイ
まだ手動でやってない？UIテストを爆速で自動化できるNightwatch.jsが便利すぎ
Webアプリのクオリティアップに役立つのが、フロントエンドのテスト。実装したはずの機能がある条件で動かなかったり、期待どおりに操作できなかったりするとガッカリですね。Nightwatch.jsならテストがだいぶ捗りそうです。 少し前に、Eric Elliottが「JavaScript Testing: Unit vs Functional vs Integration Tests」でJavaScriptのテストについて比較しました。 本記事では、JavaScriptの機能テストについてもう少し掘り下げます。Nightwatch.jsライブラリーを詳しく探りながら、機能テストを実施してみましょう。 解説する前に、機能テストとはなにか、なぜ重要なのか説明します。おおまかに言うと、機能テストとはユーザーの観点から予測されるとおりにアプリケーションが動作しているか確認するためのプロセスです。 ユニ
JavaScriptと #!
Node.jsのアプリケーションでは以下のようなコードで始まるJavaScriptを見ることがあります。 この最初の行はshebang (hashbang)と呼ばれるものですが、なぜこれが含まれるJavaScriptコードが動作するのでしょうか。調べたところ、以下のような真相のようです。 元々JavaScriptには #! をコメントとみなす仕組みはなかった。[1] Node.jsの最初期にshebangサポートが入った。 (2009年のコミット) 2017年から2018年にかけて、shebangサポートがECMAScriptに提案された。 2017-11-28 TC39: "Interpreter Directive" がStage1 proposalになった (議事録, コミット) 2018-03-21 TC39: "Interpreter Directive" が "Hashbang
babel と webpack について
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
JavaScriptが辿った変遷
はじめに CommonJS、ES6、Node.js、Webpack、Browserify...etc JSの勉強してると、登場する単語が多すぎて、どうも全体像つかめません。 そして勉強していくにつれて、「これ前提知らないと分からないでしょ...」といったことが多数出てきたので、その前提を色々とまとめてみることにしました。 (わかりやすさ優先で書いています。もし不備等ございましたらコメント頂けると幸いです。) 第一部: JavaScriptの概要 JavaScriptの誕生 JavaScriptの誕生は1995年、Netscape社が、当時最も流行していたWebブラウザ、Netscape Navigatorに搭載したのが始まりです。 その後、Windowsで有名なMicrosoft社が、JavaScript のパクリ と互換性のある、JScriptなるものを開発し、今も残るInternet
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
【javascript】jQuery-UI-dialogに独自ボタンを付ける方法 - Qiita
jQuery-UIのダイアログに独自のボタン（buttonsオプションでない）をつけて自由自在にイベントを呼びたい場合 保存して閉じるボタンとキャンセルして閉じるボタンの動きを分けたい場合 その他自在に呼び出す前にコールバック関数を渡したい場合 だいぶソースきたないですが こう。 $("<div><button onclick='parent.$(\".ui-dialog-content\").trigger(\"save\");'>ほぞん</a></div>").dialog({ close:function(){ alert("クローズなう") } ,buttons:{ "保存": function() { $(this).trigger("save"); } ,"閉じる":function(){ $(this).trigger("abortme"); } } }) .on("save
【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 非同期処理を"ちゃんと"理解して使いたい 『非同期処理なんとなくの理解で書いている...』 『動いてるし、ヨシ！』 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」 例です。 実際に手を動かしながら非同期処理の理解を深める 本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする 冒頭のコードがリファクタリングできるようになる 実際
![【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4bf449aecedd4337da846b0aadc121a2a1f5652e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTM4MCZ0eHQ2ND00NENRU21GMllWTmpjbWx3ZE9PQWtlYWNyT2FYcGVhY3F1YVlqdU9BZ1ZzZ1lYTjVibU1nTFNCaGQyRnBkQ0JkNDRHVjQ0S1Q0NEdNNXEyNzVMMlQ0NEduNTVtNjZLYUw0NEdWNDRLTUxpNHUmdHh0LWNvbG9yPSUyMzMzMyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NCZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249Y2VudGVyJTJDbWlkZGxlJnM9MDQxOGFmOThjYjQ3NmY0NTJjNzNkMWUyZThmNmQxOWU%26mark-align%3Dcenter%252Cmiddle%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTUwMCZ0eHQ2ND1RR2x0Y0d4ZmN3JnR4dC1jb2xvcj0lMjMzMzMmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NDUmdHh0LWFsaWduPXJpZ2h0JTJDYm90dG9tJnM9NTYzMWFlYzJkN2M0MWMwYTI1MDRiZWZhOTk2OTliNGU%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Db39e38892a91f7de69ef1909da2cf5f1)
ES modules: A cartoon deep-dive – Mozilla Hacks - the Web developer blog
ES modules bring an official, standardized module system to JavaScript. It took a while to get here, though — nearly 10 years of standardization work. But the wait is almost over. With the release of Firefox 60 in May (currently in beta), all major browsers will support ES modules, and the Node modules working group is currently working on adding ES module support to Node.js. And ES module integra
String.prototype.replaceAll · V8
Show navigation If you’ve ever dealt with strings in JavaScript, chances are you came across the String#replace method. String.prototype.replace(searchValue, replacement) returns a string with some matches replaced, based on the parameters you specify: 'abc'.replace('b', '_'); // → 'a_c' '🍏🍋🍊🍓'.replace('🍏', '🥭'); // → '🥭🍋🍊🍓'A common use case is replacing all instances of a given substrin
JavaScriptだけでExcel風のスプレッドシートを開発できる「jExcel」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。
JavaScriptで文字列のバイト数(≠文字数)を求める方法 - エンジニアブログ - スカイアーク
JavaScriptでは"あいうえお".lengthとすると、文字数(この場合は5)が返ります。そうではなくて、文字列のバイトコードサイズを取得したい場合について。 <script type="text/javascript"> var a = 'ABC123あいう';// in 15 bytes UTF-8 var tbl = [ 0, 1, 1, 1, 2, 3, 2, 3, 4, 3 ]; var len = 0; for (i = 0; i < a.length; i++) len += tbl [encodeURIComponent(a.charAt(i)).length]; alert(len); </script> UTF-8 限定です。UTF-8 では，0x00～0x7f 以上の文字コードは必ず複数個の %XX で表されるので、テーブル参照する必要はないハズですが，念のため
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
JSDocで型チェックする - Qiita
JavaScriptでも静的な型が求められるようになりTypeScriptやFlowが使われるようになってきました。 しかし、それらが無かったころのJavaScriptのコードやトランスパイラを使わずに開発している人はいてると思います。 この記事はコードの変更なしでJSDocのみで型検査をする方法を紹介します。 TL;DR JSDocの型定義で型チェックをする TypeScriptのallowJsとcheckJsを使う 必要に応じてd.tsをインストールする JSDocの型定義 TypeScriptやFlowが登場するより前からJSDocは存在します。JavadocやPHPDocのJavaScript版のようなものです。 そのJSDocは型定義が書けるようになっています。 エディタによってはJSDocの型定義で型のチェックを行ってくれることもあります。 JSDocについては@use JSD
HTML内のJavaScriptで browserify で require を行ったモジュールを使う - Qiita
まずはじめに ブラウザ側で require を使いたい場合にbrowserify を使っていると思います。 このbrowserifyのサンプル、よくみかけるのですが、HTMLを含まずJavaScript内だけで話が終わるサンプルも多く、また、gruntやgulpと組み合わせて使う、みたいなサンプルも多く、タイトルどおりのシンプルな使い方をしたいときにやり方がわからず、かなり調べるはめになってしまいました。 もっとシンプルに browserify だけの動きについて理解したいなと思い、自分のため、また、同じ疑問をもつ人のために、まとめておきます。 たどりにたどってたどり着いたのは、Qiitaではなく、stack overflow 日本語版でした。 browserify - browserifyでまとめたモジュールをHTMLのインラインスクリプトから実行したい - スタック・オーバーフロー あ
Why is `(0,obj.prop)()` not a method call?
This blog post explores references, a mechanism used by the ECMAScript language specification to explain the difference between the following two expressions: obj.prop() (0, obj.prop)() Method calls versus function calls # Consider the following object: var obj = { getThis: function () { "use strict"; return this; }, }; If you call obj.getThis, you have a method call (this points to the object in
IEでPromiseを利用する - Qiita
Promiseとは Promiseは非同期処理を綺麗に書けるAPIです。 従来は複数の非同期処理を繋げるとコールバック地獄に陥ってしまいがちでしたが、Promiseを利用することで可読性の高いコードを実装することが出来るかと思います。 Promiseについては他の記事が沢山ありますので割愛します。 詳細を学ばれたい方は、@azu氏の Promiseの本 が解りやすいのでおすすめです。 各ブラウザの対応状況 各ブラウザの対応状況はこちらで確認できます。 主要なブラウザは対応しているため問題ありませんが、残念ながらIEは未対応です。 IEでPromiseを動作させる IEなどのブラウザでPromiseに対応させる方法はいくつか有りますが、polyfillを読み込む方法が楽かと思います。 polyfillも複数ありますが、個人的には es6-promise がおすすめです。 browserify
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sql.js
What is typeof “unknown”? - Robert's talk