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
4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita
スペシャルサンクス @sega_yuu @frodo821 とある休日 娘（4歳）「ねえパパ」 ワイ「なんや、娘ちゃん？」 娘「非同期って何？」 ワイ「ひ、非道鬼！？」 娘「そうそう、非同期処理とかいうやつ」 ワイ「非道鬼を処理やて・・・！？」 非道鬼「ヴォ〜〜〜！！！」 娘「！？」 娘「・・・現れたわね、非道鬼」 娘「処理してあげる」 ワイ「娘ちゃん、まだ4歳なのに、もう厨二病か・・・？」 よめ太郎「おい」 よめ太郎「お前まさか、非同期も知らんのか・・・？」 ワイ「いやいや、まさかまさか」 ワイ「流石に知っとるわ」 ワイ「それはそれは・・・極悪非道な・・・鬼のことや・・・」 よめ太郎「お前が非道鬼に喰われてしまえ」 非同期処理とは よめ太郎「ええか、娘ちゃん」 よめ太郎「まず、同期って言葉は」 よめ太郎「タイミングが合うって意味や」 娘「じゃあ、非同期っていうのはタイミングが合わないって
Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita
こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 Node.jsをうまく活用できている企業は、どのような方法でベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポートチームに、同社の実施を紹介してもらいました。 Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業は、どのような方法でNode.jsのベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポート
【Vue.js入門】の執筆者が語る！ Vue.jsで押さえておきたい５つのポイント - FLEXY（フレキシー）
※本記事は2019年11月に公開された内容です。 JavaScript用のフレームワークの中でも高い採用率を誇るVue.js。そのVue.jsをこれから学び始める方は、学び方を教えてほしい、有識者の話を聞きたいと考えたことはありませんか。本記事では、「Vue.js入門 基礎から実践アプリケーション開発まで」の著者である手島拓也氏にVue.jsを学ぶ前に知っておきたいポイントを語っていただきます。Vue.jsの勉強方法や手島氏の経験を知ることができるので、ぜひご覧ください。 学ぶ前にまずはどんな案件があるか知りたい方は、FLEXYで取り扱っているVue.js案件をご覧ください。 私のエンジニア史とVue.jsに出会うまで 先日、慶應義塾大学矢上賞（起業支援）授与式で招待講演をする機会がありました。その際にも強烈に感じたのですが、Vue.jsと私のエンジニア史を切り離して語ることはできません。
JavaScript つい忘れてしまう配列のソート方法 - Qiita
var a = [5,3,9,1,10] a.sort(function(a,b){ if( a < b ) return -1; if( a > b ) return 1; return 0; }); 結果:1,3,5,9,10 var a = [5,3,9,1,10] a.sort(function(a,b){ if( a > b ) return -1; if( a < b ) return 1; return 0; }); 結果:10,9,5,3,1 //フルーツの名前と価格。価格でソートする var fruits = [ {name:"apple",price:100}, {name:"orange",price:98}, {name:"banana",price:50}, {name:"melon",price:500}, {name:"mango",price:398} ]
JavaScript中級編！？カスタムイベントを使おう | Hypertext Candy
この記事では、JavaScript のカスタムイベントについて紹介します。 タイトルに「中級編！？」とありますが、文法自体は全然むずかしくないです。ただ、入門書などではあまり触れられていないようです。 イベント自体がとても JavaScript らしい機能ですし、カスタムイベントは覚えておくとここぞというときにプログラムの表現の幅は広がるので、チェックして損はありません。 イベントとは イベントは基本的に HTML 要素から発行されます。一番馴染みのあるイベントは「クリック」でしょう。 const buttonElem = document.querySelector('.button'); buttonElem.addEventListener('click', function(event) { // 第一引数はイベントに関する情報が詰まったオブジェクト // たとえばevent.ta
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加 JavaScriptのPromiseについて学ぶ書籍であるJavaScript Promiseの本 v2をリリースしました。 Promise本 1.0.0をリリースしたのは2014年6月ですが、そこから少しづつアップデートしていました。 JavaScript Promiseの本を書きました | Web Scratch ES6がリリースされたのでPromiseについて学びましょう | Web Scratch 今回のメジャーアップデートとなる2.0.0では、サンプルコードのコードベースをES2015前提のものへと変更しています。 1.x系からの主な変更点としては次のものがあります。 ES6をES2015に表記を変更 コードベースをES5からES2015+(ES2015以降ベース
jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
【JavaScript】スクロールに連動して要素を自由自在に表示させる［AOS］の使い方
ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト［AOS（Animate On Scroll Library）］の使い方を紹介します。 まずは試しに実装してみたサンプルをご覧ください。 DEMO : https://on-ze.com/demo/js-aos/ 要素を表示させる際の動きは「Fade」「Flip」「Zoom」の３種類が用意されています。 ここにタイミングや速度、上下左右の動きや回転の向きを指定できるので、実際にはかなり多くのカスタマイズが可能です。 jQuery不要で動くのも嬉しいですね。 配布されているJSファイルとCSSファイルの２つを読み込み、特定の要素に『data-aos』属性を指定するだけで動きます。 各ファイルのダウンロードは以下より。 AOS : http://michalsnik.github.io/aos/ AOS（Animate
体感速度をぐぐっと改善！Medium風プログレッシブ画像ローダーの実装テク
このサイト、表示が遅いな…とユーザーに思われないためによく使われる、画像の遅延読み込み。見栄えがよく、シンプルで使いやすい実装方法を紹介。 ページをスクロールして要素がビュー内に入ると、ぼやけた低解像度の画像がフル解像度の画像に置換される「プログレッシブ画像」をFacebookやMediumで見たことがあることでしょう。 プレビュー画像は幅20pxほどと小さく、高圧縮のJPEG画像です。ファイルサイズは300バイト未満なのであっという間に表示され、読み込みが速い印象を与えます。実際の画像（フル解像度）は必要に応じて読み込まれます。 プログレッシブ画像はすばらしいテクニックですが、いまのところ出回っているソリューションは複雑なものです。幸いなことに、ちょっとしたHTML5、CSS3、JavaScriptで以下のようなコードを作成できます。 わずか463バイトのCSSと1007バイト（圧縮後）
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
[連載] javascriptで作るシューティングゲーム的な何か(1) - Qiita
さあ、はじめよう はじめに 本稿は掲題の通り javascript を用いて[ シューティングゲーム的な何か ]を作ろうという試みについて解説するテキストの第一回です。 想定する読者 割と暇である プログラミングに興味がある ゲーム作りに興味がある javascriptの基本をマスターしたけど特に作るものがない javascriptを使った動きのある処理を実装してみたい canvas でなんか作ってみたい 本連載の狙い 本連載はどちらかというと初心者向けです。 このページに検索からやってきた「ゲーム作りてえええええ」と日に三十回くらい叫んでいる小中学生諸君は、まずjavascriptの基本をお勉強してから本連載を読みましょう。 また、最終的に出来上がる[ シューティングゲーム的な何か ]は、そんなに大層なものではありません。シューティングゲームがどのような感じで作られていくのか、その過程を
![[連載] javascriptで作るシューティングゲーム的な何か(1) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/926739957f23198e43a750bee71d9260fdb9d5ca/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJTIwamF2YXNjcmlwdCVFMyU4MSVBNyVFNCVCRCU5QyVFMyU4MiU4QiVFMyU4MiVCNyVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyU4NiVFMyU4MiVBMyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MiVCMiVFMyU4MyVCQyVFMyU4MyVBMCVFNyU5QSU4NCVFMyU4MSVBQSVFNCVCRCU5NSVFMyU4MSU4QiUyODElMjkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU0MDQ1MWQyMjI2NzRlNzlkNzM1ZDBlOGI3ZWRmYzNl%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG94YXMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhZjJmN2EwYWU0MmZiNDhmZGIyZjE0NjdjZDI4YmJk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2a97b455a662002321b61ef6bdcd3e80)
パブリックCDNからのロードに対して、フォールバックを行う - Qiita
何かと便利な、パブリックCDN CDNはコンテンツ・デリバリー・ネットワークの略で、配信を高速化することに特化したネットワークのことをいいます。 むろん、アクセスの多いサイトを運営している場合、商用のCDNを契約することがあるかもしれませんが、そうでなくても便利な場面があります。Google（Google Hosted Libraries）やMicrosoft（Microsoft Ajax Content Delivery Network）、MaxCDN（BootstrapCDN）などのCDN提供側の事業者が、オープンソースプロジェクトをホスティングさせていて、誰でも自由に利用可能となっているのです。これらを使うことで、 CDN経由で高速な配信を、そのライブラリについて受けられる テスト程度に書き進める場合にも、ライブラリのファイルを用意せずに始められる 同じファイルを他のサイトでも使って
【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近では「脱jQuery」や「Vanilla.js」という言葉が流行っていますがjQueryをはじめに覚えた僕としてはなかなかハードルが高いイメージでした。 jQueryを切り捨てるメリットとしては「ファイルサイズ」や「表示速度」があると思います。そこまで大きな差は感じないかもしれませんが少しでもクオリティを上げるためであれば切り替えてみてもいいかもしれません。 今回は脱jQueryする際によく使う書き方をjQueryとNativeを見比べながら解説していきたいと思います。 Table of contents要素の取得イベントの操作クラスの操作属性の操作スタイルの操作ループ処理Vanilla.jsのプラグイン最後に要素の取得IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。 ID//
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://1loc.dev/
4歳娘「パパ、懐かしいJavaScript書いてるね！」 - Qiita
営業時間外を表示するjavascript