タグ

関連タグで絞り込む (29)

タグの絞り込みを解除

web開発とjavascriptに関するstealthinuのブックマーク (57)

  • 動かして学ぶ！Vue.js開発入門 | 翔泳社

    【Vue.js（ビュージェイエス）とは】 Vue.jsは、Webアプリ開発用のJavaScriptフレームワークです。 比較的小規模の開発から利用でき、さらにWebアプリ開発で主流になりつつある、 シングルページアプリケーション（SPA）を構築することもできるため、 Web開発で大人気のフレームワークです。 【本書の概要】 Vue.jsの基本機能を押さえたサンプルを元に、Webアプリ開発手法を学ぶことができます。 具体的には、ニーズの高い、データバインディング、イベント、ライブラリの利用、コンポーネントなど 開発の現場でニーズの高いトピックを中心に解説。 さらに現在、主流になりつつあるSPAの作成に役立つポイントも盛り込みます。 【ターゲット】 フロントエンドエンジニア初心者 【著者】 森巧尚（もり・よしなお） この世にパソコンが誕生したばかりの時代からミニゲームを作り続けて30数年。 現

    動かして学ぶ！Vue.js開発入門 | 翔泳社
    stealthinu
    stealthinu 2021/09/07
     Vue.jsの本探しててふと作者の名前見たらなんと！﹁森巧尚﹂さんじゃん！！JR-100ユーザにとっては神様みたいな人。びっくり。内容は入門らしいんだけどそんなの関係なくポチってしまった…  

    ●web開発
    ●javascript
      
    リンク

  • シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita


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

  • すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ


    javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
    すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
    stealthinu
    stealthinu 2018/03/19
    webpack使ってCSSや画像までもJSで一括して扱ってしまうという手法
    リンク

  • 新QiitaでReactをやめてhyperappを採用した背景 - Qiita


    12/1 にQiitaのトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
    新QiitaでReactをやめてhyperappを採用した背景 - Qiita
    stealthinu
    stealthinu 2017/12/28
    これブ米読むと単にWebフレームワークアーキテクチャの問題じゃない、人間が絡むもっと深い問題なんだなってわかって勉強になった。Vueくらいがちょうどよい感があるから流行ってるのかな？
    リンク

  • ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO


    ヘッドレスChromeの自動化ツール﹁Chromeless﹂を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード︵GUIがないモード︶。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ  |  Web  |  Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理
    ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
    stealthinu
    stealthinu 2017/12/25
    今後はphantomjs使う代わりにchromelessを使うようにすればいいのかな？
    リンク

  • CORSリクエストでクレデンシャル(≒クッキー)を必要とする場合の注意点 - Qiita

    クレデンシャルの送信 クロスオリジンのAJAXリクエストでクレデンシャル（クッキーの送信またはBASIC認証）を必要とする場合は、それを許可するオプションをフロント側Javascriptで付けておく必要があります。デフォルトではCORSリクエストでクッキーは送信されませんし、BASIC認証は送れません。 Fetch API の場合 fetch(url, { mode: 'cors', //クロスオリジンリクエストをするのでCORSモードにする credentials: 'include' //クレデンシャルを含める指定 })

    CORSリクエストでクレデンシャル(≒クッキー)を必要とする場合の注意点 - Qiita
    stealthinu
    stealthinu 2017/04/06
    クロスオリジンでアクセスする（CORS）のための.htaccessの設定方法について
    リンク

  • JavaScript ベスト・オブ・ザ・イヤー 2016


    JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
    stealthinu
    stealthinu 2017/01/27
    javascript界隈の2016のトレンド。勉強する前に時代遅れになってしまったものがいくつか…　しかしVue.jsが生き残ったのは意外だった。ReactとAngularに殺されるかと思ってたから。Vue.jsはシンプルでいいよね。
    リンク

  • httpOnlyなCookieとは？ - それマグで！


    Webkitの要素の検証でCookieをいじっていると、見慣れないカラムに気づきました。気になったので調べました。 HTTP というカラムにチェックボックスが入っています。 ブラウザの要素の検証でCookieを見ると、左から name , value, domain , path, expires , size ,http , secure と並んでいます。 (cookie) expires は期限 path/domain はオリジンの指定 secure は HTTPSだけで使われるCookie 、 http は？ secure の逆？？だとすると secure / http の両方のチェックが説明できないし、わざわざカラムにして表示しない。 だとすると、なんなのか？ http のチェックはなにか？ HTTP 通信ヘッダのみで使われるCookieという意味になります。 わかりやすくいえば
    httpOnlyなCookieとは？ - それマグで！
    stealthinu
    stealthinu 2016/11/29
     httponlyがついてるクッキーはjavascriptからは読めないのね。知らんかった。なるほど。  

    ●javascript
    ●security
    ●web開発
      
    リンク

  • jQuery.ajaxの代わりにSuperAgentを使う - Qiita


    脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag
    jQuery.ajaxの代わりにSuperAgentを使う - Qiita
    stealthinu
    stealthinu 2016/08/01
    jQuery.ajaxのかわりにそこだけをやるためのライブラリ。SuperAgent
    リンク

  • JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita


    近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。﹁お膳立て﹂の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる...! 覚える方はともかく、 教える側がツライ。 今回、未来なJavaScriptやCSSの文法で書いても、よしなにとりなしてくれるWebサーバ﹁Felt﹂を作ったので、ご査収ください。 (2016/7/19 関連ツールとの比較を追記しました) GitHub: https://github.com/cognitom/felt npm: https://www.npmjs.com/package/
    JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita
    stealthinu
    stealthinu 2016/07/27
    Web開発でJavascriptなどのトランスパイラ等ツールの動作をひとつにまとめてやってくれるラッパー。ほんとに全部自動で出来るならいいような気がする。
    リンク

  • 春からはじめるモダンJavaScript / ES2015 - Qiita


    春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
    春からはじめるモダンJavaScript / ES2015 - Qiita
    stealthinu
    stealthinu 2016/06/01
    ES2015のおさえておくところとなぜES2015が作られたのかの歴史。これ読んで色々とすっきりまとまった。
    リンク

  • Babelで始める！モダンJavaScript開発

    Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 （実際にはIE9以降から使用することを推奨します） 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同

    Babelで始める！モダンJavaScript開発
    stealthinu
    stealthinu 2016/05/24
    Babelまだ使ったことないので…　しかしBabelの開発始まったの2014/9でこの紹介記事だって2015/10、で2016/5でまだ使ったことないとヤバイ感。Webフロントエンド系の流速が早過ぎる…
    リンク

  • HTTP/1.1 200 OK - Qiita


    ※このお話はたぶんフィクションです。実在の人物や団体とはあんまり関係ありません。 序 planetter.comをバージョンアップすることにした。数年前にリリースしてからずっと放置していたけど、そろそろ手を付けないとやばいと思った。 しかしウェブの世界はドッグイヤーだ。3年も経てば何もかもが変わっている。しばらく開発から遠ざかっていた僕には、最近の技術トレンドなんてさっぱりわからない。 まずは自分自身をアップデートするところから始めよう。 Atom 最初はIDEだ。以前はEclipseを使っていたけど、いまはもうウェブ系言語の進化速度に追いつけていないようだった。ウェブ開発用のIDEならいまはWebStormが人気のようだ。有料だけど、最新の技術に対応しているし、使い勝手もいい。 でも最終的にはAtomを選んだ。IDE(統合開発環境)ではなくエディタなので、これ自体は単機能だけど、不足分は
    HTTP/1.1 200 OK - Qiita
    stealthinu
    stealthinu 2016/05/11
     すっごい長いけどよい。現在ある程度安定性が見込まれる組み合わせがどれか参考になった。時々ちょっと昔話が入るのもよかった。  

    ●web開発
    ●読み物
    ●javascript
      
    リンク

  • あのライブラリは何故誕生したの?のまとめ - Qiita


    はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、﹁技術的な流行り﹂に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか?﹁最近のフロントエンドへの違和感 - nobkzのブログ﹂より 裏を返せば、新しいライブラリの内容、特に﹁どのような問題を解決するためにこのライブラリが生まれたのか﹂という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
    あのライブラリは何故誕生したの?のまとめ - Qiita
    stealthinu
    stealthinu 2016/04/13
    これはすごくわかりやすいまとめだった。Webフロントエンド系をメインでやってないと新しく出てきたツールについて、これなんのためのツールなんだろ？ってよくなる。
    リンク

  • 10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。


    2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 ﹃React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide﹄ という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは ReactAJavaScript library for building user interfaces | React 去年、一気に普及したReact
    10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
    stealthinu
    stealthinu 2016/04/04
    Webフロントエンド系はほんとに流れ早いな。ちょっと前まではAnglarが、とか言ってたのにもうこうなったか。2年後にはまただいぶ変わってるのだろう。もしくは「Web界隈」が主戦場ではなくなってるか。
    リンク

  • TechCrunch | Startup and Technology News

    Boeing’s Starliner spacecraft has successfully delivered two astronauts to the International Space Station, a key milestone in the aerospace giant’s quest to certify the capsule for regular crewed missions.  Starliner…

    TechCrunch | Startup and Technology News
    stealthinu
    stealthinu 2015/06/18
    これいいじゃん。結局JSが標準言語と確率されAltJSがJSを「アセンブラ」として使うようになったからアセンブル後の中間言語を標準化し、他の言語もその中間言語を吐くようにするべってことだよね。
    リンク

  • Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。 - motooLogue


    Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。 2015 3/30 特に関係ないわ〜ってスルーしてたんですが、今月の初旬にGoogleのサービス閉鎖のニュースが配信されておりました。 Bidding farewell to Google Code Beginning today, we have disabled new project creation on Google Code. We will be shutting down the service about 10 months from now on January 25th, 2016. Below, we provide links to migration tools designed to help you move
    Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。 - motooLogue
    stealthinu
    stealthinu 2015/06/15
    これはハマる。ajaxzip3がgoogle code停止のためgithubへ移行とのこと。
    リンク

  • HTML-encoding lost when attribute read from input field

    I’m using JavaScript to pull a value out from a hidden field and display it in a textbox. The value in the hidden field is encoded. For example, <input id='hiddenId' type='hidden' value='chalk &amp; cheese' /> gets pulled into <input type='text' value='chalk &amp; cheese' /> via some jQuery to get the value from the hidden field (it’s at this point that I lose the encoding): $('#hiddenId').attr('v

    HTML-encoding lost when attribute read from input field
    stealthinu
    stealthinu 2015/05/21
    jQuery使ったHTMLエスケープ手法『$('<div/>').html(val).text()』は少し問題があるらしくAngularJSのsanitize.jsのencodeEntitiesメソッドだとUnicodeのことも考慮されてるし良いとのこと。
    リンク

  • ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌


    Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする﹁Clusterize.js﹂ ブラウザ内のDOMに50万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン﹁WATable﹂ テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る﹁Chartinator﹂ HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる﹁HTMLtable Export﹂ レスポンシブに要素を消さずに変形するテーブル
    stealthinu
    stealthinu 2015/05/07
    一気にデータを送っておいてページネーションは全部ブラウザ任せという設計に出来るのか。
    リンク

  • GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin

    jQuery.validationEngine v3.1.0 Looking for official contributors This project has now been going on for more than 7 years, right now I only maintain the project through pull request contributions. However, I would love to have help improving the code quality and maintain an acceptable level of open issues. Summary jQuery validation engine is a Javascript plugin aimed at the validation of form fiel

    GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
    stealthinu
    stealthinu 2015/04/28
    バリデーションを行ってくれるjQueryプラグイン。自分でルール書いたり専用関数呼び出したり出来るなど柔軟性が高い。
    リンク
  • 1 2 3 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.