書評：これからはじめるReact実践入門 - ナカザンドットネット
明日、2023/9/28に発売する「これからはじめるReact実践入門」を献本いただきましたので、簡単に目を通した感想を書こうと思います。 これからはじめるReact実践入門 目次 目次 かなり網羅性が高い 足りない情報があったら プロを目指す人のためのTypeScript入門 Next.jsについて、次に読む本はありますか？ 補足したいところ Create React Appを使わない選択肢もある Recoilさんは開発状況がちょっと心配 React Routerの知識が活きるアプリケーションフレームワークもある まとめ おまけ 2023.9.28 10:36追記 かなり網羅性が高い パラパラと読んでみて感じたのは、かなり手広く、それでいて一定の深みもある本だということです。出版社のサイトにある目次を見てみましょう。 Chapter 1 イントロダクション 1-1 ReactとJavaS
[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound
ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。 Ion.Sound Ion.Soundのデモ Ion.Soundの使い方 Ion.Soundのデモ デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。 デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。 デモ（14/15）のキャプチャ Ion.Soundの使い方 Step 1: 外部ファイル </body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
一定時間後にカーソルを非表示にする
一定時間マウス操作がなかったときに、カーソルを非表示にできるかどうかを試してみました。 サンプルコード まずは一定時間後にカーソルを消すようにしてみます。 CSS html, body { height: 100%; } .cursor-hide { cursor: url(cursor.cur), auto; } JavaScript $(function() { setTimeout(function() { $('body').addClass('cursor-hide'); }, 3000); }); 一定時間後にカーソルを非表示にするデモページ 次に一定時間マウス操作がなかった場合にカーソルを非表示にしてみます。 JavaScript var resizeTimer = null; $(function() { $(window).on('load mousemove', fun
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
2020年にフロントエンド開発者が作りたい9つのプロジェクト - Qiita
こちらの記事は、Simon Holdorf 氏により2020年01月に公開された『 9 Projects to Inspire Front-End Developers in 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 2021年改訂版はこちら！ 「ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）」 続編もどうぞ！「フロントエンド開発者のための刺激的なプロジェクト10選」 最初からはっきりと言ってしまいましょう。プログラミングに関する本を何冊読んでも、ビデオやポッドキャストを何本観たり聞いたりしても、もしあなたがより良い開発者になりたいのであれば、継続的に練習することは欠かせません。 フロントエンドの世界には、React、Angular、Vueなど数多くのフレームワークが存在します。どれも素晴らしいものばかりで、それらがなければ
2019年5月時点 JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ - Qiita
初心者向け解説によくある例です。 これが現時点（2019年5月時点）で非推奨な書き方だと、初心者は気付くことができない。つらい。 【JavaScript初心者のつらいところ】 初心者向け解説（チュートリアル）のvarをconstやletに置き換えなきゃいけない 何も知らずvarで写経すると悪癖がつく 他にも「今は覚えなくていい書き方」がどうやらたくさんある 「歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ」を読むには、そもそも必要とされる前提知識を持ってない 「何が正解かわからない→ググる」と、正しい情報探しに時間が消える 解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？ そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。 【js-primer】 js-primer これからJavaScri
SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
クリックすると音が鳴るボタンの作り方
Google Nowなどに見られるように、音声入力が一般的になってきた昨今。逆に音声出力するコンテンツを活用する機会が、これから増えてくるかもしれません。今回はJavaScriptを利用して、音が鳴るボタンを作成する方法を解説します。
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
1週間でVue.jsをマスターしようと思った時に参考にしたサイト
前置き（とばしてください〜） めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職（まだ2週間前の話） こんな感じです。 フリーランスのときは（今もまだ仕事はちょこちょこ受けてますが） 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成（UXライター的な）、プログラムとはかけ離れた仕事などなどもしていました。 また、ガッツリエンジニア！！という仕事はなかったので、（なぜが割とがっつり常駐していたスタートアップではメンバー半分がエンジニアだった！） 逆に、仕事で新技術学べる機会は殆ど無く… 今の自分が活躍できる領域
GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩
GASでクライアント側にもJavaScriptを使用してWebアプリを作成する方法をシリーズでお伝えしています。今回は、GASでクライアントJavaScriptを使用する超簡単なプログラムについて紹介します。 前回のおさらい まず、前回作成したプロジェクト構成を紹介します。 URLリクエストを受け取ったら、後述するindex.htmlを受け渡すdoGet関数を含むmain.gsです。 function doGet() { var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); htmlOutput .setTitle('GAS+Vue.js') .addMetaTag('viewport', 'width=device-width, initial-scale=1') return htmlOutpu
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
サーバーレスシングルページアプリケーション
Webアプリケーションにまつわる様々なリスクとコストを取り除くサーバーレスアーキテクチャをとり入れれば、強力なWebアプリケーションを素早く構築することができます。本書は、実際に動くアプリケーションを作りながら、サーバーレスアーキテクチャの特徴について学びます。 S3でアプリケーションをすばやくデプロイする方法、CognitoでGoogleやFacebookなどのIDプロバイダと接続しユーザーIDを管理する方法、DynamoDBでブラウザから直接ユーザーデータを読み書きし、API GatewayとAWS Lambdaでカスタマイズしたマイクロサービスを構築する方法などについて豊富なサンプルコードを使って解説します。サーバーレスアプローチのシングルページアプリケーションを設計、コーディング、テストして、再び設計にフィードバックする一連の流れを実践的に学べる本書はエンジニア必携の一冊です。 正
React+Redux未経験者のプロジェクト受入 - Qiita
自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら
中上級者になるためのJavaScript【知識編】 - Qiita
【News】電子書籍化しました！ Gitbook Read Online Download PDF Download EPUB Download MOBI この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜひこの機会にJavaScriptを復習してみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近の Web パフォーマンス改善について知っておきたいコト
HTML to JSX