ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
2021 / 2020 / 2019 GitHubで最もホットなライブラリをランキング表示してくれるbestofjs.orgというサイトがあります。 そしてここは毎年、その一年で最もホットだったライブラリを発表しています。 選考基準は『その年増えたスターの数』であり、恣意的要素の入る余地はありません。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.jsです。 以下は2019年のランキング、2019 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2019 4回目のJavaScript ライジングスターにようこそ! 2019年にGitHubで最も注目を集めたプロジェクトを、数字で見てみましょう。 以下のチャートは、2019年の一年間にGitHu
訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された2つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot
こんにちは。倉内です。 WebサイトやWebサービスの開発に欠かせないJavaScriptは、人気も高く習得したいと考えている方も多いのではないでしょうか。エンジニアへの就職活動をしている学生や、未経験からエンジニアになろうという方にとっても、JavaScriptは習得しておきたい言語の1つです。 動的なWebページの作成といったフロントエンドで用いられるのはもちろん、Node.jsに代表されるようにサーバサイドプログラミングでも存在感を増しています。また、jQueryやReact、Vue.jsなどフレームワークも豊富です。 初めて学ぶプログラミング言語としてJavaScriptを選ぶ方も多いと思いますので、今回は基本・基礎を学びたい初心者の方へ向けたコンテンツから、しっかり学びを深めたい中上級者向けのものまで、JavaScriptを学びたいすべての方へ向けて、学習コンテンツと書籍をご紹介
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか? かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
僕は2019年4月から技術ブログを始めているが、2ヶ月目くらいから「はてなブックマークでホッテントリを取るための情報収集」を心がけるようになった。その影響もあって何記事かはてなブックマークでホッテントリ入りすることもできたので、これから技術ブログなどでアウトプットを始める人の役に立てばいいなぁと思ってブログでまとめることにした。技術ブログを書く人でなくても情報収集先として参考になる部分はあると思う。 はじめに GitHub Trending プログラミング言語はPythonとJavaScriptとTypeScriptを重点的に見る プログラミング言語以外にもUnknown languagesをチェックする Advanced searchで直近の日付に絞り込む GitHub Trendingを参考にしたブログ記事 Product Hunt Product Huntを参考にしたブログ記事 Re
フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S
作成:2013/07/22 更新:2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「0」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio"
こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。 目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。 ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい 最初の一歩をどこから踏み出すかの手がかりが欲しい そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。 ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在の
いまどきのWebサイトでよく見かける、タイルやカードを使ったレイアウト。ボタンをクリックするとアニメーションしながらタイルやカードの絞り込みができるコードの紹介です。専用のjQueryプラグインもありますが、CSS3とjQueryでも簡単に作れるようです。 先日、絞り込みと並び替え(フィルタリングとソート)表示によく使われるjQueryプラグイン、MixItUpの記事を書きました。今回は、jQueryとCSSアニメーションを使って、シンプルに絞り込みができるコンポーネントを構築する方法について説明します。 それではさっそく始めましょう! HTMLの設定 最初にHTMLの設定です。次のコードを見てください。 <div class="cta filter"> <a class="all active" data-filter="all" href="#" role="button">Show
なぜ、WEB業界30年目の会社が「音楽エンタメ業界」特化の転職支援・人材育成を行うのか。 ワンゴジュウゴ×SNS×音楽エンタメ業界 「ワンゴジュウゴが、なぜ音楽エンタメ業界に特化した転職支援・人材育成を行っているのか」という質問をよくいただきます。 きっかけは、元大手音楽エンタメ企業に20年ほど勤めていたスタッフが参画したことで... その他ビジネスマーケティングライフハック人材育成・研修・人材紹介雑学・時事ネタ 2024年06月24日 【初めてのGA4導入】GA4の初期設定と簡単な使い方を丁寧に解説します! GA4はすでに導入されていますか?本記事ではクライアントからよくご相談いただくGA4の初期設定について解説しており、最後まで読むとGA4の初期設定だけでなく基本的な内容も理解できるようになります。GA4の導入はしたけど、初期設定が完了してい... Webサービスビジネス 2024年0
HTMLとCSS、そしてJavaScriptで実装された最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークを紹介します。 各コンポーネントは単体でもHTMLとCSSのコピペで利用できるので、既存ページや他のフレームワークにも簡単に使うことができて便利です。 CodyHouse Framework 2.0 CSSベースの軽量フレームワーク アクセシブルで、Webページやスマホアプリのインターフェースを構築するための8Kb軽量フロントエンドフレームワーク。 さまざまなコンポーネント HTMLとCSS、そしてJavaScriptで実装された、87種類のコンポーネント。 実装もカスタマイズも簡単 コピペで利用でき、既存のCSSルールを上書きする必要はありません。 モバイルファースト すべてのコンポーネントは、モバイルファーストで実装されています。 プ
この度、株式会社ICSで「JavaScriptコードレシピ集」という書籍を執筆しました! ICS MEDIAではJavaScriptの最新技術を何度も取り上げてきました。この書籍では、サイトであまり触れていない入門的な内容から、現場のフロントエンドの手法までをほぼ網羅し、逆引き辞典としてまとめた一冊となっています。 2019年1月25日の発売で、Amazonをはじめ、書店や電子版(Kindleなど)で購入できます。好評につき、発売から4日で増刷が決定しました! Amazonでチェックする サポートページを確認する 2017年4月に執筆を開始したのですが、諸般の事情により完成まで二年近くかかってしまいました・・・。その間にJavaScriptの最新仕様はES2016からES2018へと進化しました。進化の早さに驚きつつも、どんどん便利になるJavaScriptの仕様にワクワクさせられました。
目次 プログラミングの変数・メソッドの命名でよく使う英単語 ログイン・認証 許可・権限 ネットワーク ファイル操作 外部入出力 データ入出力 データベース操作 オブジェクト操作 生成・構築 削除・破棄 変更 変換・結合・排除 分割・切り出す(スライス) 登録・設定 検索・置き換え 状態・状態変更 計算 プロセス操作 処理サイクル 確認(1) 確認(2) 比較 その他対で使う単語 コード・ID・引数(変数) 機械学習関連 その他(未分類) データベーステーブルのカラム名の工夫(変数) 変数の頭につける接頭語 プログラミングの変数・メソッドの命名でよく使う英単語 プログラミング時の「メソッド名」「変数名」の命名で使いそうな英単語を「同じ意味でもニュアンスによって使い分けされるもの」あたりを注意してまとめます。 ログイン・認証 単語 意味 log_in/log_out ログインする/ログオフする
元々は社内向けとして書いたものですが、転載許可が出たので Qiita 向けに加筆・修正した文章です。 僕は普段ペチパーバックエンド領域を担当することが多いのですが、フロントエンド領域を含めて社内の技術アップデートを一緒に頑張っていきたい、という思いから書きました。 なんせペチパーバックエンドエンジニアの拙い知識なので一部情報が古かったり間違っているかもしれません。 フロントエンドガチ勢の皆様、間違い等ございましたら温かく指摘して頂ければと思います。 前書き JavaScript は一応書けるけど、将来心配。なんかすごく進化してるって聞くけど、調べてみても訳が分からない。 僕も勉強し始めは同じことを何度も思いました。 そこで、僕の仕事環境を想定し、導入すべきツールを役割ごとに選定してみました。 上から順に読んで、インストールして、使えるようになるとそれなりにモダンなフロントエンドの知識を手に
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く