[B! javascript] bobnikuのブックマーク

【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks

︻改訂版発売中！︼︻完全案件特化︼JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks ︻お知らせ︼内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？・案件が取れない・未経験だけど転職を考えている・フリーランスで実績を積みたいそんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。フリーランスで7年間エンジニアをしてきた僕が思う﹁Web制作領域においてJavaScriptで何ができれば良いか﹂をまとめました。そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際

bobniku 2022/10/06

javascript

リンク

Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】

bobniku 2022/04/21

javascript

リンク

JavaScriptを遊び尽くす究極のWebサービス・ツールを厳選して大公開！ - paiza times

どうも、まさとらん︵@0310lan︶です！今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！ ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム︻yare.io︼世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制

bobniku 2022/01/28

javascript

リンク

プログラミング初心者も学べるJavaScript講座が無料に | Ledge.ai

サインインした状態で「いいね」を押すと、マイページの「いいね履歴」に一覧として保存されていくので、再度読みたくなった時や、あとでじっくり読みたいときに便利です。

bobniku 2022/01/08

リンク

JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ - paiza times

どうも、まさとらん︵@0310lan︶です！今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前にこれからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。︻ The Modern JavaScript Tutorial ︼これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや

bobniku 2021/10/14

ありがたい

リンク

トレンドウェブサイトから学べ！　JavaScriptで作る本格スクロール演出 - ICS MEDIA

「かっこいいウェブサイト」とはどのようなものでしょう？　ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。『ポーラ2029年ビジョン』本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな

bobniku 2021/04/27

リンク

2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる

2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。個人的なリンク集ですが、﹁これも読むと良いよ﹂というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri

bobniku 2021/03/22

リンク

Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利

Visual Studio Code︵以下、VS Code︶が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 FavoriteVSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

bobniku 2021/03/04

javascript

リンク

JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ

JavaScript QuestionsのLydia Hallie氏の﹁JavaScript Visualized﹂シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting︵巻き上げ︶など、GIFアニメを使用して詳しく解説しています。シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting︵巻き上げ︶の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの

bobniku 2020/12/15

リンク

JavaScriptの非同期処理を理解するその2 〜Promise編〜 | さくらのナレッジ

こんにちは！小田島です。前回の﹁コールバック編﹂を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に﹁シリーズで理解が深まる﹂というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。今回の目的今回説明するのはPromiseです。これはFutureパターン︵Promiseパターン︶というデザインパターンの一種で、ECMAScript

bobniku 2020/10/01

リンク

JavaScript学習ロードマップ - Qiita

JavaScript苦手・・という状況からJavaScript好きになれるロードマップ︵多分︶全編ほぼ動画なので、とっても見やすい。挫折しづらい。全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニアしまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかんby弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri

bobniku 2020/09/03

リンク

2019年5月時点　JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ - Qiita

初心者向け解説によくある例です。これが現時点︵2019年5月時点︶で非推奨な書き方だと、初心者は気付くことができない。つらい。︻JavaScript初心者のつらいところ︼初心者向け解説︵チュートリアル︶のvarをconstやletに置き換えなきゃいけない何も知らずvarで写経すると悪癖がつく他にも﹁今は覚えなくていい書き方﹂がどうやらたくさんある﹁歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ﹂を読むには、そもそも必要とされる前提知識を持ってない﹁何が正解かわからない→ググる﹂と、正しい情報探しに時間が消える解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。︻js-primer︼ js-primer これからJavaScri

bobniku 2020/07/03

javascript

リンク

JavaScriptライブラリを読むときのコツ

少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。これから JavaScript/TypeScript で書かれたライブラリを読んでみようと思っている方の助けになれば嬉しいです。﹁私はこういう道具を使ったり、こういう工夫をしています﹂みたいな感じの内容ですので、もし﹁もっといい読み方があるよ﹂みたいなのがありましたらIssueなどで教えていただきたいです。︵※ライブラリを読むにあたって、ブラウザの話と NodeJS の話があるのですが、似てる点がほとんどなのでごった煮します。︶エントリポイントを探すライブラリを読むにあたってそのライブラリが持つ module がどう協調して全体が作られるのかその関数は正確にはどういう挙動をするのかなどを考えると、ユーザーから渡された入力や呼び出しが

bobniku 2020/06/18

リンク

スナック「jQuery」 - Qiita

……あら、いらっしゃい。若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。何飲む？　……水割り？　わかったわ。じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――﹃jQuery﹄がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？　……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0

bobniku 2020/05/07

リンク

JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？

この3つの原則は書籍の構成にも現れています。第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。第一部: 基本文法第一部: 基本文法はJavaScriptの基本的な文法について扱っています。プログラミングの入門書で文法については避けること

bobniku 2020/04/27

javascript

リンク

JavaScript練習問題集(ECMAScript2015,2016,2017,2018,2019,2020,other Library)

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

bobniku 2020/04/25

javascript

リンク

JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説

JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループイベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。説明の前に、まずイベントループとは何でしょうか？なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30

bobniku 2019/12/25

javascript

リンク

2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita

以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。もちろんVueとAngularにも多くのフォロアーがついています。さらにはSvelte、Next

bobniku 2019/11/13

リンク

JavaScriptの配列操作に役立つ13のヒントとトリック - Qiita

以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか