この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
はじめに この記事はGoodpatch Advent Calendar2日目の記事です。 今日は12/18ですが、2日目の記事を書く人が色々あって急遽書けなくなってしまったので、僕が代打で書く事にしました。 今回はGoodpatchのエンジニアが隔週で行なっている社内勉強会(その名もテクみ勉強会)で発表した内容ですが、「群れ」について書きたいと思います。 そもそも「群れ」とは一体何なのか 「群れ」についてWikipediaには以下のように書かれています。 群れは集団と言う数で淘汰(自然選択)の圧力に対抗しようとした生存戦略の一つ(個体ではすぐに天敵に食べられてしまうが、集まることで天敵を寄せ付けないなど)であると考えられる一方、群れで行動することで、生殖の面でも有利に働くと考えられている。 集団的自衛権然り渋谷のハロウィン然り、群れを成す事で他を圧倒し、自らが生き残るための生存戦略なのです
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と, Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した!Reactは何とか理解できたが,Reduxがさっぱりわかんねぇ!」 ぐらいの人向け。自分
Made by Magnus Wolffelt and contributors Version 1.6.5 Source code on GitHub Run tests
こんにちは、Reactに戯れ中の@yoheiMuneです。 仕事で担当しているアプリケーションについて、一部React化した際に、古い端末たちでも動く対応をしたので、それをブログに残しておきたいと思います(これは絶対に今後も参照しそうな気がします、個人的に)。 目次 今回対応した古い端末たち Reactはモダンな環境で動くように実装されているので、何も対応しないと以下のような古い端末で起動すらしないという状況でした。 iOS6やiOS7のSafari Android4.0の標準ブラウザー HTCなど一部の古めの端末 これらでも動くようにするために、いろいろと試行錯誤した結果、最終的には動くようになりました。後述の3つでした。 ES5のポリフィル導入 まずはこんな感じのエラーが出ました。 TypeError: Result of expression 'Object.freeze' [und
どうも、まさとらん(@0310lan)です。 今回は、JavaScriptによる簡単なゲーム作りに挑戦するため、「チェス」をテーマにした開発チュートリアル記事となっています。 「なんだか難しそう…」と思うかもしれませんが、簡単な手順で実現できるJavaScriptライブラリを活用するので誰でも最後まで楽しめると思います。 また、後半には「CPU対戦」機能も組み込んでいくので、チェスやゲーム開発にご興味ある方は、ぜひトライしてみてください! ■必要なファイルを準備しよう! まずは、チェスの骨組みを簡単に構築する方法として「chessboard.js」というJavaScriptライブラリを使ってみましょう。 【 chessboard.js 】 「chessboard.js」を使うと、チェスで遊ぶための「駒」や「ボード」を簡単にWeb上へ描画することが可能で、駒を動かす際のアニメーションやマウス
written by DEFGHI1977. 本文書はasm.jsについてその使い方についてまとめたものです. 通常asm.jsスクリプトは手で記述することを前提としていませんが, 簡単な記法を憶えるだけで処理速度の向上が見込めるのはやはり魅力的です. 昨今はasm.jsをサポートする環境がひと通り揃いましたから, その使い方くらい知っておきたいところです. が, その一方でどのように記述出来るのかについての資料に未だ乏しいのが実情です. そこで, asm.jsスクリプトのサンプルコードを実際に書いてみて, どのようなコードがコンパイルエラーとならないのかについて調べてみました. コードは全て実際に動作しているものですから, 開発ツールを開き, コンソール上に正常にコンパイル出来た旨のメッセージが表示されていることを確認してください. 実は資料に乏しくて取っ付き難いだけで, さほど難しい代
とても久々に(というかわりと初めてまともに)HTML5 な Web アプリを作った気がするので、作ったものとやって捗ったことをまとめておく。 つくったもの 理研の仁科加速器研究センターさんの展示コンテンツ。 陽子・中性子の数を組み合わせて原子核を探してみよう、というもの。 まずはこちらをどうぞ: 原子核を見つけよう! – 仁科加速器研究センター コーディングスタイル こちらを参照しながら生JSで書いてみた。 Google流 JavaScript におけるクラス定義の実現方法 AltJSは長くメンテするプロダクトではない+重厚長大にはならないと判断しスルー。 ライブラリ Three.js three.js - Javascript 3D library JSで3Dを手軽に扱うためのライブラリ。Processingの3Dと似たかんじで書ける。 ただ重力(引力)が特定"方向"のみにしかかけられず
Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu
TestCafeという自動テストフレームワーク(いわゆるE2Eテストフレームワークジャンルとしておきます)を試してみました。 TestCafeの特徴としては、Seleniumを使っていないこと、設定ファイルなしで利用できる点です。 Seleniumを使ったテストフレームワークとしては、Protractor、testium、WebdriverIOなどがあります。 (Seleniumを使わない他のテストフレームワークだとNightmareなど) Seleniumを使わずにどうやって自動的にブラウザを操作するかというと、中継サーバーを起動してそこにテストコードなどを追加して動かすことができるSelenium RC(1)方式に近いものだと思います。 同名のウェブサービス/クライアントアプリも出していて、こちらはSelenium IDEのようにGUIで操作して記録したものを再生などができます。 なぜ
cors_killer.js 0�Yw�U `�Nw�U // responseURLに対応していないライブラリを使っているときにクロスドメイン通信を無理やり止める // https://github.com/jquery/jquery/pull/1615 // responseURL // https://bugzilla.mozilla.org/show_bug.cgi?id=998076 // https://bugs.chromium.org/p/chromium/issues/detail?id=377583 // https://bugs.webkit.org/show_bug.cgi?id=136938 new function(){ var base = location.origin; var orig = XMLHttpRequest.prototype; ["resp
公開しました(過去系) github.com Demo FaithJS Screenshot 作ろうと思ったきっかけ コンピュータの仕組みについて知りたいなら NES エミュ作るのが手っ取り早いと、 優秀な人が強い事を言ってて、僕もコンピュータの仕組みについて知りたかったので、 実装しようと思いました。 まず読んだ本 コンピュータシステムの理論と実装 ―モダンなコンピュータの作り方 CPUやメモリの仕組みを大まかに知ることができる 30日でできる! OS自作入門 OSの仕組みやアセンブラの基本がわかる 自作エミュレータで学ぶx86アーキテクチャ コンピュータが動く仕組みを徹底理解! こちらもアセンブラに慣れるために読んだ たのしいバイナリの歩き方 バイナリに慣れるために読んだ コンピュータの仕組みについて何も知識がなかったので、上記の本を読んで勉強しました 参考にしたサイト NES on
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア(スペイン)の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 北米を中心に全世界でJavaScriptへの対応熱止まらない。 今回も知る人ぞ知るオープンソースの文字認識エンジン「Tesseract-OCR」が、JavaScriptに移植され話題になっている。 以下は「tesseract.jp」のデモ画像。ウェブ上で画
こんにちは。プレイドの藤川(@atsushiss15)です。 プレイドには学生時代よりインターンとして参加しており、今年の4月に新卒社員として正式に入社しました。現在に至るまで弊社の提供するKARTEの機能開発を担当しています。 今回はVue.jsを利用したコンポーネント指向のUI開発において、私たちが実際に遭遇した問題とその解決策として導入したStoreパターンについてご紹介したいと思います。 Vue.jsというフレームワークが題材にはなりますが、Storeパターンの考え方自体は他のフレームワークを使った開発にも転用できると思うので、ぜひ読んでみていただければと思います。 目次 Vue.jsとは? アプリケーションの大規模化に伴って生じた問題 解決策としてのStoreパターン サンプルコード他 Storeパターンに移行した感想 最後に Vue.jsとは? Vue.jsを一言で表現するなら
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは? 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
まえがき JavaScript、書いてますか? JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。 愛と憎しみが紙一重とはこのことですね。 ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。 今回は黒魔術まと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く