【保存版】言語別Youtubeおすすめチャンネル
💡新記事の紹介 言語学習から一歩先に進んだ記事書きました →【保存版】個人開発の進め方 -全５ステップ- 良ければ見てみて下さい！ はじめに 0からプログラミングが学べるおすすめのチャンネルまとめてみました。 IDEのショートカットやリファクタリングも学べます。 コメントを頂いたので、記事にしようと思いました。 → 新卒, Webサービスを作ってみた話 ---絶対に手を動かしながら、やってください！--- 動画を進めては止めて進めては止めて、です。 ３倍以上時間はかかりますが、、 ディアルディスプレイ推奨です。 Android Java Android Instagram Clone App インスタグラム似のアプリを作ります。 １動画は短いのですが、１００本の超超大作です。 中盤くらいから勝手に手が動くようになります。 動画と同じくらいのスピードでコーディングできるようになるので、ある
フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ポートフォリオサイト作りました Naoki Kishi's Portfolio Site Topページ Skillページ 今までPythonやCばかり書いていてフロントエンドの技術を学んだことがなかったので、勉強を兼ねてポートフォリオサイトを作成しました。 レスポンシブ対応やSPA対応など初めてのことばかりでしたが、なんとか1週間で完成まで持っていくことができました。 この記事では完成までの道のりを時系列に沿って書いていきたいと思います。 動機 今回ポートフォリオの作ろうと思ったのは、エンジニアとして学生バイトやインターンに行きたいなと
PWA入門！JavaScriptで簡単に高速化＆オフライン対応のWebサイト制作チュートリアル！ -
どうも、まさとらん（@0310lan）です！ 今回は、基本的な機能を持った簡易的なPWA（Progressive Web Apps）対応サイトをフレームワークなどを使わず素のJavaScriptで作ってみたいと思います。 主に、スマホのホーム画面からアプリのように起動したり、サービスワーカーを使ってオフライン対応や表示の高速化などを試していきましょう。 誰でも今すぐ実践できる内容なので、PWAに興味がある方はぜひ参考にしてみてください！ ■開発環境について 早速プログラミングを始めたいところなのですが、その前に1つ注意点があります。 オフライン対応やキャッシュによる高速化を実現するには「サービスワーカー」を利用するのですが、これにはSSL対応のサーバー環境が必要になります。 すでに環境が整っている方は問題ありませんが、そうでない方やサーバーを用意するのが面倒だという方はオンラインコードエデ
2017年、新規にJavaScriptを書くならどんな設計をするか｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
この記事はJavaScript Advent Calendar 2016の記事です。 今回は、2017年、新規にJavaScriptを書くならどんな設計をするか、というテーマで書いてみようと思います。2017年といっても、しばらくはこんな感じのアーキテクチャでやってきましたので、どんな構成でJavaScriptを設計してきたかという方が正しいかもしれません。基本的にはSPAをベースとしています。 また、最新のイケてる技術バリバリ使ってやるぜ、というよりは、堅牢で、はやりが変わってもメンテができるということを意識してみました。 DOMのレンダリング Virtual DOMを代表とした、DOMのレンダリングを行うライブラリをなにか採用します。特に理由がなければReactでいいと思います。Virtual DOMではありませんが、AngularでもDOM管理においてはさほど違いはありません。この2
俺のReduxがフレームワークなわけがない - Qiita
今回は、いかにReduxがフレームワークではなくライブラリであるか、 というのを感じてもらう内容になっています。 Reduxは大変？ 皆さんReduxに興味はありますか？ Reduxの記事を読んでみたり、実際に試したことがある人は 「たくさん覚えるものがある」 「結構難しい」 「React使わないといけないし使い方が限定される」 そんな印象を受けたんじゃないでしょうか。 私は仕事でReact+Reduxを使っているんですが、なかなか難しいなぁと感じています。 ES2015、React、Webpack、Babel、そのほかのReduxをサポートする様々なライブラリ・・・ 多くのものが合わさった結果、「Reduxは大変だ」という印象を抱くに至りました。 Reduxはすごく小さい 余計なものが多くあるせいで複雑に感じるRedux。 ですが、Reduxだけでコードを書くと、こんな風になります。 b
React,Angularに挫折した人たちへ - Qiita
概要 フロントエンド(CSSテク,DOMの概念など)にそこまで明るくない人向けに JSだけでWeb画面が作れるようにフレームワーク(mofron)を作成しました。 React,Angular的な話は出てきません。 経緯 jQueryプラグインしんどい 親切な誰かが作ってくれた様々なjQueryプラグインをありがたく活用しています。 CSSなどを知らなくても優れたデザインと機能を持ったUI部品を構築できて非常に助かっています。 ただ、セレクタ(id名やらclass名やら)がとても面倒くさいです。。 HTML側で定義したid名などをJS側で一致させるように指定する必要があります。 動的にタグを生成したりすると、もっとややこしくなってきて手に負えません。 じゃReact,Angularに乗り換えましょうか?？ 専業タイプと兼業タイプ Web開発に携わる人には専業タイプと兼業タイプがいると思ってい
Ajaxを使った非同期通信
Ajax とは Asynchronous JavaScript + XML の略で、 Web サーバーとブラウザとの間で非同期通信を行う方法です。 Ajax の方法を利用することで、ページを切り替えることなくページの内容を書き換えることができるようになります。 JavaScript では Aax を用いた非同期通信には XMLHttpRequest オブジェクトを使用します。ここでは Ajax を使った非同期通信を行う方法について解説します。
Jasmine: Javascript Testing Framework
describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); }); Documentation User Guide Release Notes API Documentation Contributor Guide Download For pure JavaScript projects: VersionSizeDateSHA1
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
JavaScript変態文法最速マスター - 葉っぱ日記
Java変態文法最速マスター - プログラマーの脳みそをリスペクト。 JavaScriptの変態文法・技法一覧です。あんまり使わないけど、知ってるとXSSとか攻撃したいのにWAFに妨害されるなど、いろいろ制約があるという場合に便利。 文字列の生成 引用符を使わずにさくっと文字列を作る。fromCharCode とか使ってもいいけどめんどくさいので、正規表現やE4Xを利用。 alert( /string/.source ); alert( <>string</> ) 空白文字を使わず記述 文脈上、スペースを書きたいけれどいろいろ制約があって書けない場合にはコメントで代替。実行するコードを作り上げてevalしてもいいけど大袈裟なので。 var/**/x=1; */ を含むコードブロックをコメントアウト コードの塊りをコメントアウトしようと思って /* */ で囲むと、コード内に string.
JavaScript でくるくる CAPTCHA を実装してみる - IT戦記
あっきーパパが Google の新しい CATCHA の論文を紹介してたので グルグル回すグーグルの新CAPTCHA特許 | 秋元@サイボウズラボ・プログラマー・ブログ 脊髄反射で作ってみた （UI の部分だけですが；；；） http://amachang.sakura.ne.jp/misc/kurukuru/（IE では動きません） jQuery UI と canvas を使ってます。初めて使いましたが、いいですね、 jQuery UI。 （追記）せっかくなのでソースコードの解説 // 初期値の設定 // prev_value は最後に設定された値の保持用 last_value のほうが良かったかも var start_value = Math.PI, prev_value = start_value; // 回転用イメージオブジェクト var img = new Image; // i
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
Balloon Tooltip
Licensing This script is distributed under the LGPL open source license. Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year. Download script You can download the script from this Zip file Implementation On the words that should have tooltip, insert a tag like this: <a href="#" onmousemove="showToolTip(event,'This is a simple, simpl
はてなスターをブログに設置するには - はてなスター日記
はてなスターは、はてなダイアリー、はてなグループでは自動的に表示されますが、それ以外のブログサービスでも、利用していただくことが可能です。ここでは、その方法と、はてなスターの仕組みについて解説します。 はてなスターでは、JavaScriptを利用しています。はてなスターの提供するJavaScriptファイルをご自分のブログのページ内で読み込むことで、ページの読み込み完了とともにそのJavaScriptが実行されます。JavaScriptでは、そのページに存在する記事とPermalink（記事ごとの固有のURL）を検出し、その記事につけられたスターの数をはてなスターのサーバに問い合わせます。そして、その結果と、星を追加する「Addボタン」ボタンをページ内に埋め込みます。 「Addボタン」が押された際にも、はてなスターのサーバに問い合わせが行われ、スターの情報が保存されます。 スターの数の表示
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Line
S2ファクトリー | Web/アプリ/システム/デザイン/ディレクション
jQueryサンプル集 | DesignWalker
http://youmos.com/news/helpbaloon_js
Drag & Drop | Diaspar Journal