JavaScriptは昔からあるプログラミング言語ですが、特に近年ではウェブ技術の盛り上がりにともない、JavaScriptの人気も上昇しています。 JavaScriptを学ぼうとすると、数多くの書籍・記事を見つけることができます。しかしながら、それらの多くはすでに他の言語でプログラミングを学習している人向けであったり、JavaScriptをもうすでに使っている人向けの小さなアドバイスであったりします。よってプログラミング初心者がJavaScriptを学ぼうとすると、様々な困難に直面します。特に、体系的にまとまった初心者向けの文献を探すのは、骨が折れます。 そこで、この連載記事では、いままでプログラミングを学んだことがない人を対象に、JavaScriptによるプログラミングを習得してもらうことを目標にしています。プログラミングの楽しさを、ぜひ体験してください。 連載目次 基礎と文法（この記

現代において、SNSやアプリへのページシェアは必須とも言える機能です。例えばこのブログの記事も、記事の下部に多数のシェアボタンが設置されています。 Web Share APIはそういったページシェアをブラウザ上で実現するAPIです。今までは各サービス独自のシェアボタンを設置していましたが、Web Share APIを使うことで、統一的な手法でシェアができるようになります。 Web Share APIについて Web Share APIはページをシェアするためのAPIで、WICGが仕様を定めています。詳しい仕様は以下のURLになります： https://wicg.github.io/web-share/ 対応ブラウザは現在のところAndroid版Chrome61のみです。 簡単な使い方 Web Share APIは非常に単純なAPIです。以下に最も簡単な例を示します： // ボタンを作ってb

ブロックチェーン の基本的な概念は非常にシンプルです。分散型データベースで、順序付けられたレコードのリストが連続的に増加していきます。しかしシンプルとは言え、ブロックチェーンやそれを使うことで解決しようとしている問題について話をする際に、頭を悩まされることがよくあります。これは、 ビットコイン や イーサリアム といった、一般にもよく知られているブロックチェーンベースのプロジェクトでよく聞かれる話です。「ブロックチェーン」は、 取引 や スマートコントラクト 、または 暗号通貨 といったコンセプトと強い結びつきがあります。 そのため、本来シンプルであるべきブロックチェーンの理解がより困難になってしまっています。抜け目のないソースコードであれば尚更です。 そこで、 NaiveChain という、200行のJavascripitに実装した、非常にシンプルなブロックチェーンを紹介したいと思います

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEで働くエンジニアに色々と話を聞いていく「LINE Engineer Insights」の第3弾です。当コーナーはインタビュアーにLINEで働くエンジニア @tokuhirom を迎え、エンジニア同士でざっくばらんにお話を伺っていくというものです。今回も、LINEのエンジニアは一体どんな人達なのか、その内面に迫っていきたいと思います。 第3弾は、開発1センター UIT室所属の喜多に、最新のフロントエンド開発の裏側やアプローチ手法などについて聞いてきました。あらかじめ説明しておきますと、UIT は User Interface Technology の略で、HTML/CSS/JavaScriptによる LINE のウェブフ

はじめに​ 僕が以前書いたModern JavaScript 概観、そして Electron へは、読んで貰えただろうか？ あれは初学者には全く向いてないエントリだ。 あのエントリは、僕の理解したモダンな JavaScript 全体について概観することを目的としているからね。 あれを読んで、「今の JavaScript ってこんなに大変なのか…」と感じた人は多いだろう。 しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。 と言う訳で、今回はちゃんと初心者向けのエントリを書いた。 少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。 開発環境​ Thinkpad X1 Carbon 2016 年モデルに Windows10 をインストールしてある。 ハードウェアスペックは、こうだ。 CPU i7 66

2017 - 02 - 24 TwitterはScalaを捨ててNode.jsに移ったそうです。 Node.js Scala Tweet 世界で最も大きなトラフィックを捌いているサービスの１つであるTwitterはそのバックエンドをScalaで独自開発したフレームワーク(Finagle)を採用していましたが、ここ数ヶ月の間にこれをNode.js(Express)に置き換えたそうです。 以下はTwitterのエンジニアであるNicolas Gallagherさんのツィートより github.com Today we moved all of Twitter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA. — Nicolas (@necolas) Febr

この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに​ 最近の JavaScript について​ 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。

こんにちは、バックエンドエンジニアのまさくにです。 先日、渋谷で行われた東京Node学園祭2016に参加させていただきました。その熱狂の二日間をお伝えできればと思いますが、まずは素晴らしい体験をさせていただいたことについて、スタッフの方々、ゲストスピーカーの方々、それから参加者の皆様に、はじめにお礼を申し上げます。思うに、ここから先、相当長くなりますので、ここで伝えておかなければ！ 今回は同じバックエンドエンジニア Kazさんと一緒に赴きました。 Kaz LIGの分類上はバックエンドエンジニア。ただ分類関係なく、有用、無用問わずよく知ってるし、よく喋る。弱点はサブカル系。Wikipediaを眺めるのが生きがい。 東京Node学園祭2016とは I Love Node！ 東京Node学園祭2016の二日間を体験してきた僕に、まずは結論を言わせてください。 東京Node学園祭2016とは、No

(※) PDFは重いものもあるので注意 漢字 CJK統合漢字：http://www.unicode.org/charts/PDF/U4E00.pdf CJK統合漢字拡張A：http://www.unicode.org/charts/PDF/U3400.pdf CJK統合漢字拡張B：http://www.unicode.org/charts/PDF/U20000.pdf CJK互換漢字：http://www.unicode.org/charts/PDF/UF900.pdf CJK互換漢字補助：http://www.unicode.org/charts/PDF/U2F800.pdf function isKanji(c){ // c:判別したい文字 var unicode = c.charCodeAt(0); if ( (unicode>=0x4e00 && unicode<=0x9fcf)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には

document.execCommand('copy')ただしこの処理には前提条件があって、コピーされるのは「処理実行時に画面上で選択しているテキスト」に限られます。つまりこのメソッドだけでは、任意の文字列をコピーさせることはできないのです。 そこでこの機能を拡張して、引数で渡した文字列を擬似的に選択状態にしてコピーさせる関数を用意しました。 JavaScript で任意のテキストをクリップボードにコピーする関数この関数を実装する上でのポイントは、裏で文字列を選択するためのコピー用テキストエリアを一時的に作ることです。ここにコピー対象文字列を出力し、JavaScript で選択状態にすれば冒頭のコピーメソッドを実行することができます。 そしてコピーが完了したら、作成したテキストエリアを削除します。プログラム処理においては一瞬の出来事なので、画面上にテキストエリアが表示されるのを目視すること

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

console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ console.log 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.group

React v16リリースと共にMITライセンスへ https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#mit-licensed 16系だけでなく、すぐに移行できない人向けに、15系の主要バージョンもMITライセンスに変更されました。 2017/09/24追記 近日リリース予定のReact v16にて、ライセンスをBSD + PatentsからMITに変更予定とのPOSTがありました。 We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS — React (@reactjs) 2017年9月22日 但しまだGitHubでLICENSE*ファイルの変更やPATENTS

JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に

ブラウザゲームとかを作っているとなかなかテストが難しくどうしたらいいんだろうと調べていたらPhantomJS + Mochaという組み合わせを見つけたので勉強してみました。 PhantomJSとは？ ブラウザです。JavaScriptのAPIを通じて制御できるヘッドレス（画面のない）Webkitブラウザらしいです。 まだ試せてませんがCanvasやSVGにも対応してるっぽい。 インストール http://phantomjs.org/download.htmlよりダウンロードしPATHを通すことで使用できます。 Macでhomebrewが入って入れば以下でOK。 $ brew update && brew install phantomjs PhantomJS準備運動 まずは以下のようなhello.jsを用意します。 ・hello.js var page = require('webpage

**誰かみんなの主張のまとめを作ってくれないですか？** (まあそれこそお前がやれよって話かもしれないので、誰もやってくれなかったら私がしますが。。) 最近、JQueryはもはや不要でReactさえあればOK,みたいな記事をよく見ますね。 論旨としては、どうせトランスパイラ使ってるんだからもっと便利な書き方しようぜ！ってことなんだと思います。(virtual DOMがメインだ！という話もあったけど、じゃあ何でReactなの？というのは聞きたいかな。メジャーだから？) ただちょっと個人的に違和感が拭えないので聞きたいです。 ちなみに私は昔coffeeとbackbone.jsか何かで業務用のページ（SPAではなかったような気がする）を作るお仕事をしたことがありますが、フロントエンドエンジニアというわけではないです。どちらかというとサーバー管理とかのほうがよく知っていると思いますが、Javasc

React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な

プログラミングといえばゲーム制作ですよね（最近はそうでもない？）。かつてはウェブブラウザ上で動くゲームを作ろうとすると苦労しましたが、最近ではHTML5やES6などの発達によって、作るのもだいぶ楽になりました。ゲーム制作用のJSライブラリなども散見されるようになってきて、JSによるゲーム制作のハードルはどんどん低くなってきています。 ですがやっぱりフルスクラッチ（※自分で全部作ること）で作ってみたいですよね？フルスクラッチ、楽しいですからね。楽しさ100倍です。バグの量も100倍ですが。 というわけでJavaScirptで弾幕シューティングゲームをフルスクラッチで作ってみましょう。対象となるブラウザはChrome51以降です。 ファイルの準備 まずはHTMLファイルとJSファイルを用意しましょう。全てJSから制御するので、HTMLファイルはほぼ空で結構です。 <!DOCTYPE html>