[npm-scripts] sass/scssの自動コンパイルとbrowser-sync の環境を久々に作ってみた [画像あり]Sassタスクランナーnpm-scriptsbrower-sync 以前はglupを使っていましたが、最近はnpm-scriptsが主流ですよね。 最近たまたまHTMLを作成することがあったのでついでに記事にしてみました ということで、今回はnpm-scriptsを使ってSass/Scssのコンパイルとブラウザ同期をいう 超基本的だけど、使えるタスクランナーを構築しました。 最終的に実行するとこんな感じになります。 htmlやcssが変更保存されると、自動でSass/Scssのコンパイルをして且つブラウザのリロードが走ります。 ちょっと画像では伝わりづらいですが、保存した時にブラウザが 自動でリロードがかかる瞬間はワクワクしますよね。 node と npm はあら

by Christopher Michel カルチャーメディア「WIRED」の創設に携わった編集者のケビン・ケリー氏が2022年4月28日に70歳を迎え、自身が考える「若い頃に知っておけばよかった知恵」をブログに記しました。 The Technium: 103 Bits of Advice I Wish I Had Known https://kk.org/thetechnium/103-bits-of-advice-i-wish-i-had-known/ ケリー氏は68歳の誕生日に「若い人への68のアドバイス」を、69歳の誕生日には「さらに99のアドバイス」を公開していて、今回はさらに件数が増加しています。なお、「上にあるほど重要」などの区別はないようですが、以下、ケリー氏が挙げた順のまま5つごとに区切りを入れて並べています。 ・約99％の確率で、今こそがそのタイミングです ・あなたほど

オブジェクトの配列の重複を除く オブジェクトの配列の重複を除くには、配列から指定した条件で値を抽出する「filter」と、 条件に一致する配列の位置を取得できる「findIndex」を使用します。 'use strict'; const arr = [ { name: 'kusano', age: 20 }, { name: 'sasaki', age: 25 }, { name: 'sasaki', age: 25 }, { name: 'tanaka', age: 30 }, { name: 'takagi', age: 30 }, { name: 'kusano', age: 20 }, { name: 'kusano', age: 20 } ] const result = arr.filter(function (x, i, array) { return array.findI

JavaScript 2 Advent Calendar 2019 の19日目の記事です。 (19/12/23 10:41追記) Promise.allについて最後に追記しました。 対象 async/awaitがなんだかはある程度知ってる人 async/awaitをなんとなくで使ってる人 そもそもasync/awaitって？ async/awaitは、Promiseによる非同期処理をより簡潔に効率よく記述できる手法。 普通にPromiseを使うとネストが深くて辛くなるのを救ってくれる。 「async/await　Promise」で検索すれば比較についてはたくさん出るので今回は書かない。 便利だから全部async/awaitにしちゃおう！ って思うんですけど、実は罠があって。 ちゃんと気をつけないと非効率な感じになっちゃうよっていうのが今回のお話。 ただ、コードを並べて説明してもよくわからな

今回は【Intersection Observer API 】を使用して、スクロールアニメーションを実装してみたいと思います。 【Intersection Observer API 】ってなに？ Intersection Observer APIのIntersectionObserverインターフェースは、ターゲット要素と祖先要素またはトップレベルのドキュメントのビューポートとの交差における変更を非同期で監視する方法を提供します。祖先要素またはビューポートはルートと呼ばれます。 https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserverようするに【Intersection Observer API 】を使うと要素やビューポートとの【交差】を監視してくれるということですね。 この仕組みを利用することで、要素が画面内に入

はじめに プログラミングの勉強を進めていくとオブジェクト指向の話が出てきます。 なんとなく分かったつもりでいても、オブジェクト指向言語を使えばいいというものではなく、その考え方をちゃんと理解しながら使っていかなければ身につきません。 ここでは例として生活の中で分かりやすい対象としてテレビと新聞を見る動作をjavascriptで表現してみました。またそのソースコードに少しずつオブジェクト指向を取り込んで発展していくように書いています。 皆さんもなにか身の回りのものをスクリプト化して挑戦してみてください。 オブジェクト指向とは ソフトウェアの設計や開発において、操作手順よりも操作対象に重点を置く考え方をオブジェクト指向といいます。すでに存在するオブジェクト（データと手続き）については、利用に際してその内部構造や動作原理の詳細を知る必要はなく、外部から指示を送れば機能するため、特に大規模なソフト

ES6でいいのでは？ ES6のclass等は、本来あった文法のシンタックスシュガー。なので、ES6の便利な書き方じゃないJavaScriptを押さえて、JS使えます!!って言えるようになりたい。 この記事では、オブジェクト・関数・スコープチェーン(クロージャー)について記載します。 JavaScriptのオブジェクト 一般的なプログラミング言語で使われるすべてのモノを表す文脈で使用される場合と、Objectオブジェクトのインスタンス(生成元のオブジェクトのプロパティを継承したオブジェクト)として使われる場合がある。 前者はいいとして、後者は以下のようになる。 var obj = { name: 'objectName', getObj: function() { console.log(this.name); } } console.log(obj.name); // objectName

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

初心者の方向けに作成手順や説明等していきます 実践で役立つjs実装サンプル。 として初心者の方に向けて各所適宜解説等 はさみつつ不定期で少しずづ連載(予定)で 更新していこうと思います。 多分対象としては、 html/css/jsの基本は理解してwebページが作れる。 javascriptもjqueryとかのプラグイン利用してある程度のコンテンツや機能は作れる。 自分でも多少は書けてエラーとかもみれますよ、という方向けになると思います。 とりあえずサクッと入れて動く便利なプラグイン探してるんだけど。 って方だと本記事とは方向性が違うかもしれません。 本連載に関して 本連載では、初心者向けに各所の解説をしていますが、 一歩踏み込んだ実践的な内容にはなっていると思います。 ※フロントエンド(HTML/CSS/JavaScript)の基礎知識は必須になります。 【拡大機能付きスライダー】java

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

本レポートでは、NFT（Non-Fungible Token）の2021年8月の動向を把握することを目的とします。NFTは3月に取引金額のピークを迎え、その後は低調でしたが6月後半から取引量の増大し、そのまま8月の大きな取引金額に繋がりました。この強いトレンドは、まさに NFT Summnerと呼ぶにふさわしいでしょう。 NFTアートの売り上げは底を打ちしました。キーワード検索も同様に底を打ち上向きです。同様にOpenSeaも7月は右肩上がりとなっています。OpenSeaの取引量はAmazonの10分の1のレベルに達しており既存のビジネスとの比較されるレベルにまで成長しています。

jQueryでcsvを読み込んでセレクトボックスにappend(例えば県選択→市区町村選択とか) 2015/2/23 2016/1/25 JS/jQuery, UI/UX xmlをajaxで読み込んで表示するというのはよくあると思うのですが、サーバーサイドではcsvを読み込んでいるケースが多いと思います。 そのためクライアントサイドでも外部データを読み込みたい場合はcsvデータを共有して使いたいという要望がありました。 今回はcsvをjQueryで読み込んでみたいと思います。まずはDEMOサンプルページからどうぞ DEMO 普通はhtmlでパースする際はtable等で書き出す事が多いと思いますが、今回はselectに.append()してみたいと思います。 今回のデモの仕様としては、 1.都道府県を選択 2.選択した都道府県のCSVを読み込み、その市区町村がoptionとしてappendさ

まず、、このブログ「LABO」をリニューアルしました…!そこで今回紹介するのはLABOのTOPページのようなスライドです。記事3枚でスライドさせ、画面を小さくしていくと見切れていき、スマホの時は1枚でスライドするような仕様です。 基本的なSwiper.jsの導入は省き、一つだけサイズを変える上でポイントとなった設定やcssのとこだけまとめたいと思います。 <div class="pick_wrapper"> <div class="swiper-container"> <div class="swiper-wrapper"> <article class="swiper-slide post"> 記事の中身のhtml(省略) </article> <article class="swiper-slide post"> 記事の中身のhtml(省略) </article> <article c

オンラインコースでも動画でもプログラミングを学べるこの時代、敢えて「本」を読むことは、エンジニアにとって大事なのか？について。 という記事。敢えて「本」という意味なんてあるの？というのが筆者の疑問だったという内容の記事を読んだ。「プログラミングの本を読んでみたところ、自分の考え方が間違っていることに気付きました。」だそうです。その記事要約と感想。 本は良質な 「教育」 2020年のStack Overflow Developer Surveyでは、回答者のほぼ85%が正式な教育はある程度重要だと感じています。 上がそのDeveloper Survey。数値で見ても明らかな通り「教育」は重要だと多くの開発者が考えている。勉強が大事なことは否定しようがないが、なぜ「本」か。 メンターと話をした。彼はスタートアップの現役ソフトウェアエンジニアで、彼は学位を持っていて、アルゴリズムを使った分析的思

CSS3 のみで円周上を周回運動(circular motion)するアニメーション 円の大きさを決めたら、コンテンツの大きさが半径で決まり、 円周上の位置などが% 指定で相対的に決まるようなものを作ってみました。 衛星のような周回運動 codepen.io 回転するが、180[deg] 回ると逆さになりコンテンツが見づらいと思うので、 以下にコンテンツ固定の周回運動をつくってみました。 コンテンツ固定の周回運動 コンテンツ固定で円周上4点が周るものを作ってみる。 transition:translate(), rotate() を組み合わせる場合 各コンテンツを原点に配置に配置し、 translate を使って各円周上に配置させるのでわかりやすい。 しかし、translate させる位置がそれぞれとなるので、 @keyframes がコンテンツごとに必要になってしまう。。 codepen

前書き 円を描くように要素を動かす方法を掲載しています。 目次 JavaScriptで動かす（平面） CSSで動かす（平面） SVGで動かす（平面） Canvasで動かす（平面） Canvasで動かす（立体） 参考 JavaScriptで動かす（平面） 下記の方法で動かしています。 CSSで要素を中央に寄せる 三角関数を使って要素の座標を決める 要素のstyle属性を変更する 一定時間毎に繰り返す 円座標を親要素の大きさに合わせて調整しているので、親要素が正方形であれば真円、長方形であれば楕円を描くように動きます。 また、Intersection Observer APIを使って、見えている時だけ動くようにしています。 <div class="wrap js-wrap"> <div class="item item-01 js-item" data-opt="0.3, 0, 0.25">

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 npm に初めて触れるときは、package.json がどういう役割をもっているのか、パッケージをインポートするとはどういうことなのかなど分からないことだらけであり、筆者も少しずつ調べては試すことを繰り返した記憶がある。これから Node.js を学ぼうという人にはこのような部分でつまづいてほしくないため、この記事では npm を使う上で必要な概念的知識を説明する。この記事を読めばスムーズに Node.js の学習が始められると思われる。 NPM とは NPM と名のつくものは実は 2 つあり、ひとつはオンライン上のパッケージレ

開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で