jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
ブラウザ上でLinuxが動く! なんとGUIも! Javascriptで実装されたOR1Kエミュ『jor1k』|ガジェット通信 GetNews
ブラウザ上でLinuxが動く! なんとGUIも! Javascriptで実装されたOR1Kエミュ『jor1k』 いやはや、世の中にはクールで変態なハッカー（褒め言葉）がいるものです。 この『jor1k』というプログラムは、完全にJavascriptで実装されたOR1K（OpenRISC 1000）エミュレーターで、ブラウザ上でLinuxを実行することができてしまいます。 ブラウザ上でLinuxを起動してターミナルでコマンドラインの入出力をするだけであれば、これまでにも「Javascript PC Emulator」というJavascriptで実装されたPCエミュレーターがありました。しかし、『jor1k』のスゴイ所はX Window Systemが起動しGUIもちゃんと操作できることです。たとえば、冒頭の画像は、“お決まり”のxeyesを起動してみたところです。ちらつきはあるものの、目玉が
javascriptイディオム集 - Qiita
はじめに イディオムは、ある目的を達成するために 慣習的に書かれるコード のことです。 他人のコードを見るときに戸惑わないようまとめました。 解説は極力無くしています。気になるものは、 参考 から辿ってみてください。 コメント は、イディオムを使用しない場合の書き方の例です。 タイトルに (嫌) が付いているのは、嫌悪する人が多いので極力ライティングで避けるイディオムです 推奨 、 非推奨 はライティングする際にどれにするかの目安としました。（主観です） 動作環境は、es5以上もしくはes5-shim適用です。
JavaScripthon - Pythonで書いてES6のコードを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今のところ、Webブラウザで適切に動作が保証されているプログラミング言語はJavaScriptしかありません。そのため、Webアプリケーションを開発する上でJavaScriptの習得は必須なのですが、なるべくなら書きたくないという方も多いです。 もしあなたがPythonプログラマーであれば使ってみたいのがJavaScripthonです。PythonコードからECMAScript2016（ES6）へ変換してくれるソフトウェアです。 JavaScripthonの使い方 コード例です。普通にPythonのコードに見えます。 # -*- coding: utf-8 -*- # :Project: metapensiero.pj # :Author: Andrew Schaaf <andre
Queries, Part 1: Common SQL Queries Converted for Firebase
Queries, Part 1: Common SQL Queries Converted for Firebase Update (November 4, 2014): While this post still contains some useful and relevant information, we have released advanced query functionality which solves a lot of the problems this post discusses. You can read more about it in our queries blog post. No WHERE clauses? No JOIN statements? No problem! Coming from a SQL background as I did, i
FirebaseのRulesを理解する - Qiita
らこです。 FirebaseにはRulesというデータのアクセシビリティを管理する仕組みがあるのですが、一見複雑そうに見えるため取っ付きづらいと思ってる人が多いように思われます。 ですが本当は簡単でわかりやすいので、今回はRulesの基本的な部分から解説します。 Rulesを理解すれば、Firebaseを使う上で望ましいデータベース構造が見えてくるので、Firebaseを使ってみようと思う方はまずRulesから理解しましょう。 Firebaseって何？という人はこちらのブログ記事にわかりやすく紹介されています。 Rulesの基礎 FirebaseはMongoのような他のKVSとは違い、すべてのデータを1つのJSONの中に配置します。シンプルなチャットを例にすれば、次のようなデータ構造になります。 { "messages": { "user001": { "user": "laco", "t
とほほのAngularJS入門 - とほほのWWW入門
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンスはMIT License。オープンソース。商用利用可能。 今現在(2015年8月15日)の最新版は 1.4.4。 JavaScriptでクライアントサイドのMVC(Model-View-Controller)モデルを実現します。 これま
Firebaseで作る簡単リアルタイムウェブアプリケーション（前編）
Firebaseは2014年10月にGoogleに買収されたことで一躍有名になったBaaS（Backend as a Service）です。本記事ではちょっとしたリアルタイムウェブアプリケーションを作りながらFirebaseの機能を紹介します。 Firebaseとは Firebaseはデータストレージ、ユーザー管理などアプリケーションのバックエンドとして必要となる機能をサービスを提供することで、アプリケーション開発者がクライアントサイドの開発に集中できるようにしてくれるBaaS（Backend as a Service）の一種です。 2014年10月にGoogleに買収され、Google Cloud Platform（GCP）の一員となりました。この買収によりGCPにはPaaS（Platform as a Service）としてGoogle App Engine、IaaS（Infrastr
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
algebra.js - JavaScriptで数式を解く！ MOONGIFT
数学が苦手な人は数式を組み立てたり、それを解くのが苦手ではないでしょうか。方程式を作って、それを解くのはパズルみたいなものですが、嫌いな人にとっては数字やXなどを見るだけで嫌気がさすはずです。 そんな方に見て欲しいのがalgebra.jsです。なんとJavaScriptを使って方程式を組み立てたり、それを解いてしまうソフトウェアです。 algebra.jsの使い方 algebra.jsでは若干特別な入力を行います。そしてtoString()メソッドで式が文字列で返ってきます。 式は後から追加していくことも可能です。 そしてsolveForで回答を得られます。 変数が複数あっても余裕です。 2次方程式を解く例です。 答えが複数あるなんて場合にも対応しています。 LaTeX向けにビジュアル化された式を表示できます。 algebra.jsの使い方を覚えればかなり難しい数式でも解くことができるので
zoomwall.js·写真コンテンツを並べて楽しむビューワー MOONGIFT
写真は見せ方がとても大事です。単純にタイル状に並べたのでは誰の目を引くこともできません。強弱をつけたり、アニメーションして表示させることで印象づけられるようになります。 今回はそんな写真コンテンツを一覧、拡大表示するzoomwall.jsを紹介します。大量の写真を使った素敵なコンテンツができるはずです。 zoomwall.jsの使い方 zoomwall.jsの初期表示です。写真がぴったり重なって表示されています。 写真をクリックするとズームして表示されます。次の写真、前の写真へはキーボードで切り替えられます。 実際に動かしてみたところです。 写真を隙間なく並べると大量の写真をぶちまけたようなインパクトがあります。スクロールしながら気に入った写真を細かく見て、さらに別な写真にいくと言った具合に多くの写真をまとめて楽しむのにぴったりではないでしょうか。 zoomwall.jsはJavaScri
ttystudio - コンソール操作をアニメーションGIF化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebサービスやGUIアプリケーションにおいてデモを見せる際に動画はとても有効です。どのボタンを押すとどういう動きをするのかが分かるとユーザは利用前に自分のニーズに合っているかすぐに分かります。 ではターミナルのソフトウェアはどうでしょうか。文字を出力すれば良いだけかも知れませんが、ttystudioを使えばコンソール操作さえアニメーションGIFに展開できます。 ttystudioの使い方 ttystudioのインストールはnpmを使って行えます。 $ npm install -g ttystudio 後はttystudioコマンドを実行するだけです。 $ ttystudio output.gif --log そうすると新しいシェルが開くので、自由に操作してCtrl + Qで終了に
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
pdfmake - クライアント/サーバサイド両方に対応したPDFジェネレータ MOONGIFT
Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
マインクラフトで巨大な構造物を「どーん！」と一発作成できるようにする。ついでにJavaScriptプログラミングも学んじゃう - シアトル生活はじめました
MODプラグインを利用できるSpigotマインクラフトサーバーを立てたんだけど、そもそもどういう目的だったのか・・・ 前置き やはり、ブロックをひとつひとつ積んでワールドを作るのは非常に時間がかかるわけです。うちの娘たちなんかは「作ること」そのものが喜びなんで、全然気にせずにコツコツと巨大な建物やオブジェなんかを作ってるけど、大人の私としては「どーん！」とやりたいわけ。そもそも娘たちはそんなことが可能とえ知らない。マイクラ遊びを新しい次元で楽しむにはMODしかないでしょ～、ってことでのSpigotサーバーを導入したわけ。 ワールドの作成用のプラグインだけど、調べたらWorldEdit というのが人気で有名。独自のコマンド体系を使ってマウスでお絵かきするみたいに世界を削ったり作ったり出来るらしい。うん、悪くない。 そして別にScriptCraftというのも見つけた。こちらはWorldEdit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
textareaに行番号を付けられるjQueryプラグイン:phpspot開発日誌
JavaScript難読化読経
