ざっくり入門TypeScript - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
JavaScript超基礎講座！フォームの扱いを学ぶ | Hypertext Candy
本記事では、JavaScript 初心者の方向けに、ブラウザにおける JavaScript 開発の基礎について書いていきます。 最近は React や Vue.js などのフレームワークがスタンダードになって、「生の」JavaScript を扱うことは少なくなっているかもしれません。しかし、フレームワークの裏側で動く仕組みは当然同じです。技術トレンドが移り変わっても対応できる「基礎知識」を身につける、一助になれば幸いです。 少なくとも、HTML / CSS と、JavaScript の文法知識を前提としています。 フロントエンド、つまりブラウザを実行環境とする JavaScript を扱います。Node.js などのサーバサイドの話題は含みません。 入力値の取得と更新 この記事ではフォームの扱いについて学びます。まずは、いろいろな入力欄の値を取得したり、更新する方法を紹介します。 ちなみに
Magnific Popup: Responsive jQuery Lightbox Plugin
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). Important note: This jQuery plugin is deprecated, only critical or security bug fixes will be released in future. Use native <dialog> element if you need a basic dialog/modal/popup, or my PhotoSwipe library if you need an advanced image
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
JavaScriptでreplaceを使って文字列を置換する方法【初心者向け】現役エンジニアが解説
replaceとは replace関数は、文字列に含まれる特定の文字列を、別の文字列に置換します。 作りたいプログラムによっては、文字列に含まれる特定の文字列を、別の文字列に置換したい場合があります。 文字列に含まれる特定の文字列を、別の文字列に置換したい時にreplace関数を使います。 また、正規表現という置換ルールを使用することで、いろんなパターンの置換を行うことができます。 replaceの書き方 基本的なプログラムは以下の通りです。 対象となる文字列の後ろに「.」ピリオドを付けて記載します。 文字列.replace(パターン, 置換文字[, flag]) ※flagは通常使用しないので省略します。 [PR] フロントエンドで副業する学習方法を動画で公開中 replaceで置換処理を行う この記事では、replaceで置換処理を行う方法について解説します。 まずは、簡単な関数を用意
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
とほほのJavaScript入門 - とほほのWWW入門
とほほのJavaScript入門 (JavaScriptリファレンス) [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう JavaScript の書き方 <scr
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
JavaScript の第一歩 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
脱jQuery .size() と 諸注意 | q-Az
本日で25日間の 脱jQuery Tips 企画も終了です。最後は .size() のネイティブ書き換えといくつかの諸注意です。 詳しくは 脱jQuery その1 をご覧ください。 $(".menu").size()書き換え JavaScriptdocument.getElementsByClassName("menu").length.size() は要素の個数を取得するメソッドです。これは結構有名なので知ってる方も多いと思うのですが、.size() = .length となります。 $(".menu").length と .length は jQuery でも使うことが出来ます。.size() 自体内部的には .length を使っており、 全く同じものと考えてもらって構いません。 以上で jQuery の命令についての書き換えは終了です。続いて諸注意。 ネイティブは存在しないとエラー
jQueryを使わずに滑らかに動くトップに戻るボタン | q-Az
よく色々なサイトで実装されているトップに戻るボタンをピュアな JavaScript のみで実装してみます。 jQuery を使えば数行で実装できますが、リニアな動きであればネイティブな JavaScript でもそんなに大変ではありません。 アニメーションの原理JavaScript でアニメーションをさせます。少し古い記事になりますが以下の記事が大変参考になります。 参考：これでできる！ クロスブラウザJavaScript入門 第17回 アニメーションの基礎 ものすごく簡単に言うと「パラパラ漫画の要領でアニメーションさせる」です。jQuery の fadeIn などのアニメーションも基本これと同じパラパラ漫画実装です。 トップに戻るボタンの場合は、単位時間ごとに数ピクセル上にスクロールさせる動きを連続でさせれば OK ということになります。 ネイティブ JS でトップに戻るボタンHTML<
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
jQuery | q-Az
脱jQuery .fadeIn() .fadeOut() .slideUp() .slideDown()2015-12-19
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
arguments.callee - JavaScript | MDN
callee は arguments オブジェクトのプロパティです。これは、現在実行中の関数を、その関数本体の内部で参照するために使用することができます。これは、名前のない関数式（「無名関数」とも呼ばれる）の中など、関数名が不明な場合に便利です。 警告: ECMAScript 第 5 版では、 arguments.callee() を厳格モードで使用することを禁止しています。関数式に名前を付けるか、関数が自分自身を呼び出すような関数宣言を行うことで、 arguments.callee() の使用を避けることができます。
初心者脱却！JavaScriptおすすめ学習本中級、上級厳選5冊 | 侍エンジニアブログ
こんにちは！侍ブログ編集部（@samuraijuku）です。プログラミング学習者にとって、「今の自分に合ったレベルの学習書籍」を探し出すのって意外と面倒で、難しかったりしますよね。 すでにある程度使いこなせるけど実務の上でもう一歩ステップしたいというのに、本当に基礎的な説明で知りたいことが説明されてなくて役に立たないなんてこともあります。 そこで今回は、「JavaScript」の学習本を「中級者」「上級者」でレベル分けし、それぞれのレベルに応じたオススメ書籍をご紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt 2 - The Intuitive Vue Framework ドキュメント
