Reactで学ぶ！いまどきのWeb開発FRONTEND CONFERENCE 2017のハンズオン用資料です。 教科書はこちら https://github.com/fand/react-hands-on
Use JSDoc: Index
Getting Started Getting Started with JSDoc 3 A quick-start to documenting JavaScript with JSDoc. Using namepaths with JSDoc 3 A guide to using namepaths with JSDoc 3. Command-line arguments to JSDoc About command-line arguments to JSDoc. Configuring JSDoc with a configuration file How to configure JSDoc using a configuration file. Configuring JSDoc's default template How to configure the output fr
小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
フロントエンドへの複雑化について、一つの視点 - mizchi's blog
これらの件 最近のフロントエンドへの違和感 - nobkzのブログ 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。 前提 去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。 僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。 僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記
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
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
latest log
nginxが403を返す理由は様々です。 まずはこちらをざざっと参照し、気になるポイントがあったら試してみましょう: www.1and1.com 僕は時々はシンボリックリンクを設定して403になってしまい頭を抱えてしまいます。数年に一回ぐらいのペースでやらかすので、毎回ググってるんですよね。 たとえば以下のように、your-project 以下に存在する assets ディレクトリを https://localhost/assets でアクセスできるようにしようとして、シンボリックリンクを設定すると403になったりします。 $ cd your-project $ ln -s assets /usr/local/var/www/assets この場合は nginx.conf に location /assets/ を追加すると良いでしょう。 location /assets/ { root
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
フロントエンドに秩序は戻ったか？
Kyoto.js 12発表スライドです。 https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。
初めてのJavaScript 第3版
ECMAScript 2015（ES2015）の入門書。シンプルな例題を多用しブラウザやnodeコマンドで試しながら新しいJavaScriptを楽しく学びます。従来バージョンを使用中のJavaScriptプログラマーにも、これからJavaScriptを習得したい入門者にも有用な情報が満載です。本書を読めば、letやconstによる宣言とスコープ、関数の基本と高度な使い方、オブジェクトとオブジェクト指向プログラミング、イテレータやジェネレータやプロキシといったES2015の新機能、非同期プログラミング、クライアントサイドのDOMやjQuery、サーバーサイドのNode.jsなど、JavaScriptの最新バージョンを使った開発に関する総括的な知識をバランスよく得られます。日本語版では、ES2016およびES2017の新機能の紹介も加えました。 翻訳者によるサポートページ。 例題をブラウザで実
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください 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がさっぱりわかんねぇ！」 ぐらいの人向け。自分
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
JavaScript初級者のためのコーディングガイド - Qiita
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、**それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、**使用してはいけません。 ==、!= ==と!=を使用してはいけません
最強のフロントエンドの雛形作った (2016/12/31) - Qiita
yarn とりあえず yarn install と yarn start だけで動く npm(yarn) scripts babel/webpack での多段ビルド build:js はChromeでだけで動くビルドを吐く（デバッグを容易にするため） build:js:production はIE11+ ava/nyc/istanbul でテストとカバレッジ postcssでCSSのビルド uglify-js/csswring で圧縮 CircleCI eslint, flow, ava release ブランチに push で gh-pages にデプロイ ## やってないこと React も Angular も jQuery も何も入ってない。あくまでそれ以前にやることをまとめた。 参考になるだろうけど、人によっては使わないツールも多いと思われるので、適当に削ってください。 こういうの
React.jsで起こるXSS (advent calendar 12日目の話) - ooooooo_qの日記
[追記]この記事は情報が古めです。Reactで起こるXSSパターンは他にも存在するので、CTFやbug bountyなどの言葉と一緒に検索してみてください。 この記事は脆弱性"&'<<>\ Advent Calendar 2016の13日目の記事です。 前日の記事はnullです。 この記事を見ている皆さんは仮想DOMに魂を震わせられているでしょうか*1、それともjavascriptに疲れてきた頃でしょうか。私はimagemagick関連を調べるのに疲れてきたところです。 React.jsで起こるXSS ここ数年のwebサービスではReact.jsのような仮想DOMを扱うライブラリを使ってhtmlがレンダリングされていることが多いので、典型的なDOM Based XSSなどは少なくなってきたように感じます*2。React.jsを例にすると、JSXがjsに変換されて仮想DOM経由でDOMを組み
Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと
Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと ベルギーのヘントで行われたAngularのイベント「NG-BE 2016」で、基調講演に登壇したGoogleのAngularチームリードIgor Minar氏は、Angularの次のメジャーバージョンアップが2017年3月に登場する「Angular 4」であることを明らかにしました。 「私たちはAngular 4を2017年3月にリリースする予定だ。本当に本当だよ（I'm being super honest with you guys!）。わけわからんなんて言わないで、大丈夫だって！（Don't freak out. It's going to be good）」（Igor Minar氏） Angular 4はAngular 2と互換性を維持し、そのまま移行できる
最近のフロントエンドの変化とビルドツールについて - mizchi's blog
界隈の雑な会話です。注意点として、フロントエンドガチ勢寄りの方面なので、一般的な感覚とは乖離してる可能性があります。 基本的には http://www.s-arcana.co.jp/blog/2016/12/12/3438 や kikuchi1201.hateblo.jp を念頭に。 動き早いって言われるフロントエンド界隈、この1年何も進んでないからな— 現場の声 (@mizchi) 2016年12月14日 今年のフロントエンドの統括、es2016でしょぼかったので皆es2015+ みたいなノリが抜けなかったのと、redux以外のfluxが脱落したのと、angular2+今年も出なかったねというのと、たぶん eslint の採用が増えてそう(肌感)のと、flowの採用が増えたぐらい— 現場の声 (@mizchi) 2016年12月14日 実際browserify/webpackは先行実装だ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jscolor: JavaScript Color picker with Opacity (alpha channel)