初学者としてJavaScriptを学ぶ | さにあらず
はじめに 僕が以前書いたModern JavaScript 概観、そして Electron へは、読んで貰えただろうか？ あれは初学者には全く向いてないエントリだ。 あのエントリは、僕の理解したモダンな JavaScript 全体について概観することを目的としているからね。 あれを読んで、「今の JavaScript ってこんなに大変なのか…」と感じた人は多いだろう。 しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。 と言う訳で、今回はちゃんと初心者向けのエントリを書いた。 少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。 開発環境 Thinkpad X1 Carbon 2016 年モデルに Windows10 をインストールしてある。 ハードウェアスペックは、こうだ。 CPU i7 66
JSなんてもう怖くない！JavaScript/ES2015速習ガイド - Qiita
はじめに 非フロントエンジニアの方々にとって、JavaScriptは独特でとっつきにくい言語だと思います。最近Reactが流行っていますが、JavaScriptが分からなくて手を出せない人も結構いるのではないでしょうか。 この記事では、普段JavaScriptをあまり触らない人を対象に、モダンなライブラリ等をさわるのに必要なJavaScriptの設計・思想・文法を解説します。関数オブジェクトや関数スコープ、thisに関しては知っておかないとES2015でも確実に躓くので、あえて比重を高くして説明しています。 ※厳密ではない箇所があるかもしれませんが、ご容赦ください。 JavaScriptとは 歴史 1995年にNetscape社により開発され、当時流行していたJavaの商標を使って「JavaScript」と名付けられました。文法は比較的似ていますが、JavaとJavaScriptはインドと
2017年度版 細かすぎて伝わらないJavaScriptの速度の話 - Qiita
概要 コードを書いていると誰もが気になってくる「どっちのほうがパフォーマンスに優れているの？」で、眠れない日々を過ごす人達のために、比較結果をまとめてみました。 実行環境 OS: macOS Sierra 10.12.5 Chrome: 58.0.3029.110 (64-bit) Safari: 10.1.1 計測方法 10 回実行した結果の平均値です。 比較 シングルクオート VS ダブルクオート コード start = () => { const retryCount = 1000000; const startTime = new Date(); for (let i = 0; i < retryCount; i = i + 1) { /* ダブルクオート const text = "abcde" + "fghij" + "klmno" + "pqrst" + "uvwxy" +
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
【週末まとめ読み】JavaScriptのデバッグってどうしてる？ ほか
今週公開した記事の中から、この週末に読んでおきたい注目記事をまとめて紹介。今週は、JSのデバッグにNodeのデバッガーのススメ、人工知能APIまとめ、アイコンのA/Bテスト成功事例など、話題の記事を中心に8本をセレクト。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみては？ 【今週の一番人気】 JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 【乗り遅れるな】 素人だってパーソナルアシスタントを作れる！人工知能APIまとめ【2017年版】 AIプログラミングの専門知識がないけど、アップルのSiriやアマゾンのAlexaのようなパーソナルアシスタントを作りたい開発者へ。手軽に試せ
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
pnpm - npmの高速化と容量削減を実現
npmは優れたパッケージ管理システムですが、使っていると速度が遅くてストレスを感じることがあります。その挙げ句にエラーが出たら目も当てられません。それを解決するためにyarnも作られていますが、まだ機能的に十分でないこともあります。 そこで使ってみたいのがpnpmです。高速かつディスクスペースを低減してくれるnpmです。 pnpmの使い方 標準のnpmでインストールした場合。 pnpmを使った場合。3MBくらい小さくなっています。 pnpmでは複数のモジュールを平行してビルドする方式をとっており、高速化を実現しています。依存関係をフラット化することで余計なものをインストールせず、ディスク容量をセーブしています。 pnpm/pnpm: Fast, disk space efficient npm installs
200行のコードへのブロックチェーンの実装 | プログラミング | POSTD
ブロックチェーン の基本的な概念は非常にシンプルです。分散型データベースで、順序付けられたレコードのリストが連続的に増加していきます。しかしシンプルとは言え、ブロックチェーンやそれを使うことで解決しようとしている問題について話をする際に、頭を悩まされることがよくあります。これは、 ビットコイン や イーサリアム といった、一般にもよく知られているブロックチェーンベースのプロジェクトでよく聞かれる話です。「ブロックチェーン」は、 取引 や スマートコントラクト 、または 暗号通貨 といったコンセプトと強い結びつきがあります。 そのため、本来シンプルであるべきブロックチェーンの理解がより困難になってしまっています。抜け目のないソースコードであれば尚更です。 そこで、 NaiveChain という、200行のJavascripitに実装した、非常にシンプルなブロックチェーンを紹介したいと思います
Google App Scriptをモダンな開発っぽくする環境を作ってみた(ES6, browserify, eslint, mocha) - nagashigaki
お前は今更何を言ってるんだ？というテーマですが整理するために。 Google App Script(以下GAS)とはjavascriptでGoogle App(今ではG suite？)の豊富な機能を堪能でき、ある程度の作業を自動化することができます。しかも無料で！指定時間に勝手にスクリプトを起動することもできちゃいます。 例えば、複数のcsvをDriveにアップしてボタンをポチっとするだけで目的のデータが揃い、そのデータをメールで飛ばしたりできるのは非常にありがたいです。 導入する環境 環境を整える npmとgitの初期化 babel gulpまわり browserify テストツール eslint ファイル構成 gulpfileの作成 お疲れさまでした 開発する 雑談 導入する環境 このGASの機能をもっと使いこなしたい。具体的には npmで管理 es6 gulp browserifyで
power-assertの使い方 Node.js編
Power Assertとはassert(a === b); のような単純なアサーションでも、 Assert失敗時(テストが通らなかった時)に分かりやすい情報を表示できるようにする機能の事を言います。 JasmineやChaiが持つshouldやexpect等言った豊富なアサーションを覚える必要なく、 シンプルにassert()を使うだけでも十分な失敗時の情報が得られるため、沢山のアサーションを使い分けしなくていいというメリットがあります。 この記事ではPower AssertのJavaScript実装であるtwada/power-assertの使い方について紹介します。 記事を読む前に このNode.js編とブラウザ編で分けるぐらい長い記事となってるので、 お忙しい方は5分ぐらいで分かるpower-assertというスライドもあるので、そちらを読んでざっくり把握してみるのもいいでしょう。
知ってるようで意外と知らない、JavaScriptの参照のしくみ
結論を言えば、JavaScriptにはポインターがなく、参照の方式は私たちが知っているほかの主要なプログラミング言語とは異なります。JavaScriptでは、ある変数が別の変数を参照すること（参照渡し）には対応していません。そしてオブジェクトや配列のような複合型のものだけが「参照渡し」を使います。 この記事では以下の用語を使用します。 スカラー（基本型）：1つの値もしくはデータ型（整数、論理値、文字列など） 複合型：複数の値から成るもの（配列、オブジェクトなど） プリミティブ：ほかの場所の値を参照しているだけのもの（参照型）と区別するため、実際に値を保有しているものをプリミティブとする JavaScriptのスカラーはプリミティブですが、Rubyなどほかの言語では参照型のスカラーになっています。JavaScriptではプリミティブなスカラーはイミュータブル（immutable）ですが、複合
JavaScriptで継承を使わないプログラミングスタイル - JavaScript勉強会
JavaScriptでは「継承による差分プログラミング」はモダンではない、という意見がありました。 なるほど、「継承による差分プログラミング」を使わないスタイルもあるんですね？（参考になります） JavaScriptのオブジェクト指向プログラミング OOPのアンチパターン SOLID原則 オブジェクト指向の基本機能 データ構造としてのオブジェクト デメリット メリット PACアーキテクチャー マイクロサービス指向アーキテクチャー JavaScriptのオブジェクト指向プログラミング jsstudy.hatenablog.com オブジェクト指向って便利なの？ - JavaScript勉強会 うへええええ継承による差分プログラミングとか現代に言わないでくれよ。しかも「JSはプロトタイプベースのOOP」を初めとして間違いが多いぞ 2017/03/27 09:42 b.hatena.ne.jp
今時のフロントエンド開発2017 (1. 愚痴編) - Qiita
良いものを書きたいので指摘などは大歓迎です。 その際はコメントや編集リクエストをいただければ修正します。 大きな変更が加わるときは通知すると思います。 はじめに これまでのフロントエンドの開発には多くの問題や面倒ごとを抱えています。 その解決手段としてよくビルドツールやaltJSといったワードを目にしますが，これらがどういった目的で利用されているのかについて触れながら進めていきます。 主にパッケージ管理やビルドツールを初めて見る人向けになっているので全編通すとそれなりに長いです。 動かすまでが長めになっていますが理解してしまえば本当に必要な手順はさほど多くありません。 実際に開発を始めるために必要な準備はせいぜい1~2つのファイルを記述してコマンドを数回叩く程度なので，過度な抵抗感を持たずに読んでいただけたらなと思います。 登場するツールや技術は多くの問題を解決してくれますが，これらは飽く
JavaScriptはプロトタイプベースのオブジェクト指向プログラミング言語ではない！？ - JavaScript勉強会
先日のブログ記事に、たくさんのブックマークをいただきました。 どうもありがとうございます★★★ jsstudy.hatenablog.com ブックマークのコメントで、こんな意見がありました。 オブジェクト指向って便利なの？ - JavaScript勉強会 うへええええ継承による差分プログラミングとか現代に言わないでくれよ。しかも「JSはプロトタイプベースのOOP」を初めとして間違いが多いぞ 2017/03/27 09:42 なるほど、そういう見方もあるんですね？（参考になります） (1) 継承による差分プログラミングは、現代では廃れた古い手法？ (2) JavaScriptはプロトタイプベースのオブジェクト指向プログラミング言語ではない？ 実際のところ、どうなんでしょうか？ 知識は知識として、正確に理解しておきたいです。 勉強がてら、調べてみましょう。 とりあえず、(2)のプロトタイプベ
import-js で JavaScript の import を自動入力する - Qiita
import-js で JavaScript の import を自動入力する React 等、新しい ES 環境で import を多用する開発を行ってると、クラスや関数を使う度、import に毎回追加、というのが面倒じゃないですか？私はめっちゃ面倒くさかったです。 そんなとき、import-js を使うと、足りない import 文を入力してくれて大変便利です。 https://github.com/Galooshi/import-js fix import で足りない import 文を勝手にプロジェクトのルートや node_modules から探していい感じに入れてくれます。また同じ名前のモジュールが複数ある場合、ダイアログを出してくれます。 また JSX や flow にも対応しているため、<ComponentName /> みたいな JSX タグも import 文に追加して
わずか1行のJavaScriptでWebサイトにリアルタイムコラボレーション機能を実現できる「TogetherJS」を使ってみた！ -
どうも、まさとらん（@0310lan）です。 今回は、Webサイトやアプリなどへ複数人によるリアルタイムコラボレーション機能を、驚くほど簡単に実現してくれるJavaScriptライブラリのご紹介です！ このライブラリ自体は、数年前から存在しているので知っている方も多いと思いますが、まだ「知らないよ…」という方は、ぜひこの機会にトライしてみてください。 いまだに、ちょっとした「コラボ機能」を実装したい時に重宝する唯一のライブラリになっています！ 【 TogetherJS 】 ■「TogetherJS」の始め方！ それでは、実際にサンプルを作りながら「TogetherJS」がどのようなライブラリなのかを見ていきましょう！ まず最初に、「TogetherJS」を利用するのに必要となる本体ファイル「together.js」をGitHubからダウンロードするか「git clone」で取得します。 も
JavaScript開発はこれ1つでOK！超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開！ - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
JavaScriptでmacOSを自動操作できるJXA - JavaScript勉強会
JavaScriptに、ちょっと便利な用途がありました！ Macには、操作を自動化できるAppleScriptという道具が用意されています。 このAppleScriptの代わりに、JavaScriptも使えるようになっていました。 JavaScript for Automation (JXA)とは？ qiita.com AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。 そもそも、AppleScriptって何？ AppleScript - Wikipedia AppleScript（アップルスクリプト）は、アップルが開発したClassic Mac OS/macOS用のオブジェクト指向のスクリプト言語。 AppleScriptはMac OSのスクリプティング機構Open Scripting A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Domain error