Javascriptを１行で書く - QiitaHelp us understand the problem. What is going on with this article?
【連載記事】JavaScriptでプログラミングを学ぶ その1：基礎と文法
JavaScriptは昔からあるプログラミング言語ですが、特に近年ではウェブ技術の盛り上がりにともない、JavaScriptの人気も上昇しています。 JavaScriptを学ぼうとすると、数多くの書籍・記事を見つけることができます。しかしながら、それらの多くはすでに他の言語でプログラミングを学習している人向けであったり、JavaScriptをもうすでに使っている人向けの小さなアドバイスであったりします。よってプログラミング初心者がJavaScriptを学ぼうとすると、様々な困難に直面します。特に、体系的にまとまった初心者向けの文献を探すのは、骨が折れます。 そこで、この連載記事では、いままでプログラミングを学んだことがない人を対象に、JavaScriptによるプログラミングを習得してもらうことを目標にしています。プログラミングの楽しさを、ぜひ体験してください。 連載目次 基礎と文法（この記
Node.jsのES Modulesサポートの現状確認と備え - teppeis blog
追記: 2019/04/24 本日リリースされたNode v12でESM周りの仕様が大幅に変更されました。 この記事の内容は既に古くなっているため、最新の情報は以下の公式ブログを参考にしてください。 Announcing a new — experimental-modules – Node.js Foundation – Medium 追記終了 この話を今日のNode学園で話すので、ご興味あればどうぞ。 nodejs.connpass.com （今日いくつか加筆修正しました） ECMAScript 2015で待望のES Modules（ESM）の仕様が策定されたものの実装がなかなか進まない、という話を1年前に発表した。 その後、ブラウザでのES Modules仕様が策定完了し、フラグ付きながら全主要モダンブラウザで初期実装が揃った (caniuse)。（dynamitterさん、kijt
ブルゾンちえみ判別器をブラウザ上に実装する - Qiita
皆さん、Yahoo!検索大賞 2017はご覧になりましか？ このアワードで大賞に輝くと、「今年の顔」の名誉を手に入れることができるんです。 そんな栄えある今年の大賞は、ブルゾンちえみとのこと。 他にも、俳優部門は高橋一生、女優部門は吉岡里帆、といった具合に各分野毎に受賞者がいます。 ところで、僕はあまりテレビを観ないので、誰が誰やらわかりません。 このままだと安心して2018年を迎えることができないので、画像を読み込んでそれが誰なのか判定するアプリが必要です。 一目見れば区別つきそうなものですが、僕の濁った目で直接見るよりも、機械に判定させた方がよいに決まっていますので、作ってみました。 実際の動きはこちらから確認できます。 今回はブルゾンちえみも含め、Yahoo!検索大賞の受賞者から以下の5人をピックアップし、判別できるようにしています。 ブルゾンちえみ(お笑い部門) 高橋一生(俳優部門
フロントエンド実装中に使えるモックサーバを爆速で準備する - Qiita
で完了 なければ nodeのバージョンをnで管理する などを読みつつnodeとnpmをインストールしてください 準備するもの コンソール db.json ブラウザ（動作確認用） やること db.json ファイルを作成する bashの touch コマンドやWindowsなら右クリックからなどでお好きなようにファイルを作ってください db.json にリソースを登録する ここでモックサーバから返して欲しいデータリストを列挙します 最上位の階層の key がエンドポイントになります { "users": [ {"id": 1, "name": "hoge"}, {"id": 2, "name": "fuga"} ], "tweets": [ {"id": 1, "contents": "あー眠い", "user-id": 1}, {"id": 2, "contents": "ファビュラス！"
「アイソモーフィックJavaScript」を読んだ - massa142's blog
アイソモーフィックJavaScript 作者: Jason Strimpel,Maxime Najim,牧野聡出版社/メーカー: オライリージャパン発売日: 2017/07/04メディア: 単行本（ソフトカバー）この商品を含むブログを見る アイソモーフィックJavaScript(Isomorphic JavaScript)とは、クライアントとサーバで同じJSコードを共有して実行できるようにしようという概念。*1 この本ではリクエスト/レスポンスの古典的なWebアプリケーションから始まって、AJAX・SPAそしてIsomorphicとWebアプリケーションアーキテクチャの歴史を追って説明してくれている。それも単に歴史を辿るのではなく、当時なにが問題とされて、それをどう解決しようとしたかという背景がわかりやすく解説されているのが特に良かった。 ただ最後の方でReactやAngularJS、An
【WebAssembly初心者必読】バイナリコードを使って「 WebAssembly 」の基礎を徹底解説してみた！ | 株式会社ヌーラボ(Nulab inc.)
【WebAssembly初心者必読】バイナリコードを使って「 WebAssembly 」の基礎を徹底解説してみた！ WebAssembly はウェブ上での利用に適した軽量でポータブルなデータフォーマットです。ゲームなどの実行速度が求められる分野で使えるように、JavaScript よりも読み込み速度や実行速度を早くすることを念頭に設計されています。それを実現するために、WebAssembly では機械語のようなバイナリコードをブラウザ上で使うようにしています。 JavaScript の生みの親であるブレンダン・アイクが 2015 年 6 月に WebAssemblyを発表してから 2 年が経ち、多くのブラウザで使えるような状況が整いつつあります。 そこで、この記事では WebAssembly のバイナリコードを使ったサンプルのコードを通して、WebAssembly を簡単に紹介したいと思い
LINE BLOGアプリ開発で contenteditable と戦った話
こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTML と JavaScript の話になります。 LINE BLOG はこういったサービスです。 LINE BLOG - 芸能人・有名人ブログ LINE BLOGエディタはWebブラウザの上で動作しています。開発は iOS/Android 共通のソースコードで、 i
Svelte ナメてたけど結構スゴい - Qiita
Front-end Developer Handbook 2017 でも言及されていたりと少しずつ注目を集めている印象の Svelte ですが、「はいはいまた JS の流行り物 FW でしょ」とか「No Framework って Serverless みたいなバズワードになるんでしょ〜」などと正直ナメてたんですが、ナメっぱなしではいけない、とガイドを一通りさらったところ「なるほどこれは新しい勢力だな」と思い至ったので同じくナメてる人向けにスゴいところを紹介します。一応断っておきますが、さすがに商用環境に投入できるかというとまだ全然出来る気がしないので、今すぐあなたの xxx を置き換えるものではないです。 Svelte のルック&フィール Svelte は Riot.js のコンポーネントや Vue.js のコンポーネントのように html ファイルにテンプレートとロジックを書いていくのが
Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
JavaScriptで写真を撮りたい（・８・） - Qiita
ブラウザで写真が撮れたらなぁという場面に出くわしたので、APIを確認したところ、navigator.getUserMedia()は非推奨で、今度からはnavigator.mediaDevices.getUserMedia()を使うようにとのこと 音声、画像をキャプチャするMedia Capture and Streams APIでスナップショットを撮ってみました。 ソースコード ガワの準備 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MediaDevices.getUserMedia()</title> </head> <body> <button onclick="startVideo()">ビデオ開始！</button> <button onclick="stopVideo()">ビデオ終了！</button>
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
Lodashのファイルサイズを削減する方法 | 綺麗に死ぬITエンジニア
JavaScriptにおける便利な関数の詰め合わせであるライブラリ「Lodash」。JavaScript（Node.js）での開発をしている人の多くは利用したことがあるでしょう。 今回はそのLodashを使う上で、ライブラリを導入後のファイルサイズを削減する方法を紹介します。 なお、今回当記事で紹介するにあたり、検証にモジュールバンドラーツール「webpack」を利用します。ですが、webpackを利用しない場合においても同様の方法でファイルサイズは削減できます。 ユースケースLodashに限らず、比較的高機能なJavaScriptライブラリは、場合によっては性能面や容量（ファイルサイズ）の面で、1機能特化のミニマルなものに比べ劣ることがあります。 例えば、そのライブラリの全ての機能のうち1つの機能しか使わなかったとしても、全ての機能分のファイルサイズを消費し、全ての機能を読み込んでしまい
React基礎 · GitBook
React基礎 レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」 おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Stream API入門 - Qiita
Nodeのアドベントカレンダー、既に終わった枠が空いていて、この際書きたいネタがあったんで参加しました。宜しくお願いします。 アドベントカレンダーの時期だけ出没する弱い日曜Haskellerです。普段の実務ではNode.jsにお世話になってます。宜しくお願いします。 さて、みなさんStream API使ってますか？Node.jsといったら非同期ですよね、やっぱり。しかしながら、JavaScriptでも他の言語でも、非同期処理自体は注目されているものの、まだexperimentalという感じで様々なAPIが考案されては消えていき、また元々そういう文化が根強くなかったところから来た人たちにとって、こういう文化はちょっと立ち入りづらいところもあるかもしれませんね。 今日は、主にそういう人たちに向けて、まず非同期の色々なAPIの紹介、そしてその中でのストリームのメリット、そして実際のStream
Vue.js 2016年まとめ & 今後
Vue.js 2016年まとめ & 今後この記事は、Vue.js Advent Calendar 2016の25日目最後の記事です。 フロントエンド界隈の技術、ここ最近何も進歩していないと言われてますが、Vue.js では今年2016年はいろいろとあり激動でした。 そんな Vue.js 界隈における出来事を Vue.js コアチームメンバ & Vue.js 日本ユーザーグループの orgnaizer の立場でまとめつつ、最後に Vue.js の今後について少し話して、Vue.js Advent Calendar の最後を締めくくりたいと思います。 2.0 リリース！一番の大きな出来事といったら、やはり、Vue.js 2.0 のリリースでしょう！ Behold! Vue 2.0 is officially out! https://t.co/OVgGo4epCO 2016年9月30日今年の4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Universal JavaScript
Reactで学ぶ！いまどきのWeb開発
VulcanJS